第4课CSS1–设定文本.ppt

CSS篇 CSS概述 CSS规则的创建 在html网页中加入CSS样式 用CSS设置文本样式 用CSS设置图像效果 用CSS盒子模型布局网页 用CSS设置超链接 第四课 Html与CSS 什么是CSS 创建CSS规则 如何在网页中加入CSS样式表 用CSS设置文本样式 一、什么是CSS CSS是Cascading Style Sheets(层叠样式表)的简称。 CSS语言是一种嵌入在网页文件中的标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言)。 Html负责网页的内容，而CSS负责内容的表现形式。 我们也可以把CSS规则独立出来保存在一个文本文件中,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. 体验CSS 一个没有添加CSS的HTML文件：/zengarden-sample.html 给这个文件添加的CSS规则，我们可以得到十分美观的网页：/ 二十四诗品设计欣赏：谭军设计 http://35/tanjunmaomao/ 二、如何创建css规则 学习css的两个阶段： CSS语法---利用css选择器确定样式对象 CSS属性 1、CSS规则的语法 2、选择器的种类 我们通过选择器来控制哪些对象该使用CSS样式。 选择器有几种： 标记选择器 类别选择器 Id选择器 伪类选择器 2.1、标记选择器 标记选择器用于定义哪个标记采用哪种css样式。 例：定义h1标记的文字颜色红色，大小25px； 2.2、类别选择器 标记选择器一旦定义，文档中所有相应标记都会自动产生相同的外观，如果希望其中某个标记产生不同的外观，我们需要使用类别选择器来设置。 类别选择器是带名称的css规则，其名称由设计者自定义，名称前加“.”号，属性和值跟标记选择器一样。 类别选择器需要应用到html标记才能产生效果。 例：定义名称为.blue的类别样式，设置文字颜色蓝色，大小16px，并应用到网页中； 2.3、id选择器 Id选择器和类别选择器相似，也是带名称的css规则，其名称由设计者自定义，名称前加“#”号，属性和值跟标记选择器一样。 区别在于，类别选择器可以多次使用，id选择器只能在页面中使用一次，因此，用id选择器定义的样式通常用于设置对象的大小或窗口位置等。 Id样式的创建：名称前用 # 号，其余则遵循样式的语法。 例：定义名为#pos1的id选择器，设置css属性，将文字定位在窗口顶部100px右100px位置。 三、如何在网页中应用css样式 可以用以下三种方式将样式加入网页。 而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。 行内样式 内嵌样式表 链入或导入外部样式表文件 3.1 行内样式 在html标记中加一个style属性，后面跟一系列CSS属性及属性值即可。浏览器会根据样式属性及其值来输出标记的内容。（光盘07-05.html） 3.2 内嵌样式表 样式表的真正魅力：把一系列控制网页外观的规则独立出来罗列在文档的首部或者保存在外部样式表文件中。这种放在文档首部的样式表就称为“内嵌样式表”。 内嵌样式：样式表放在style标记和/ style之间，并且放在文档的head中。 这样的样式表会影响文档中所有的内容,除了含有行内样式的标记外。 外部样式表 文档中应用外部样式表有两种方法： 链接式外部样式表 引入式外部样式表 3.3 链接式 在文档的头部用link 标记加载外部样式表：光盘07-07.html 3.4 导入样式 在文档头部的style标记中，用@import命令引入文件。（光盘07-08.html） 3.5 各种方式的优先级问题 当多个样式表同时定义了一个对象的外观时，就产生了优先级的问题。（如光盘07-10.html） 3.6 css高级特性：选择器的妙用 交集选择器 并集选择器 后代选择器 3.6.1 交集选择器 3.6.2 并集选择器 当我们需要对多个对象定义相同样式时，可以使用并集选择器。 3.6.3 后代选择器 用于定义嵌套标记的样式。 举例：如下图，把正文中的若干个字设置为不同的样式： 方法： 在正文的标记里面嵌套一对span/span标记包住要设置样式的对象。 然后再设置span标记的css样式。 四、css属性的设置 4.1、用css设置文本样式 设置文字字体 设置文字的倾斜 设置文字加粗 英文字母大小写转换 控制文字大小 设置文字的装饰效果 设置段落首行缩进 设置字词间距 设置段落内部文字的行高 设置段落之间的距离 控制文本的水平位置 设置文字和背景的颜色 设置段落的垂直对齐