第十章CSS基础

1、本章内容本章内容10.1 CSS简介简介10.2 引入引入CSS方法方法10.3 基本基本CSS选择器选择器10.4 复合选择器复合选择器10.5 其他选择器其他选择器10.6 CSS继承与层叠特性继承与层叠特性10.1 CSS简介简介文档结构与图片显示的混合排列一直是文档结构与图片显示的混合排列一直是HTML语言的一大缺陷语言的一大缺陷，导致，导致这一问题存在的原因之一是不同浏览器之间的不兼容性。为了让网页这一问题存在的原因之一是不同浏览器之间的不兼容性。为了让网页在各种平台上都能够正常显示，人们需要一种新的规范，将显示描述在各种平台上都能够正常显示，人们需要一种新的规范，将显示描述彻底独立

2、于文档的结构，即彻底独立于文档的结构，即内容结构和格式控制相分离内容结构和格式控制相分离。为了响应这个快速增长的需求，为了响应这个快速增长的需求，W3C开始为开始为HTML制定样式表机制，制定样式表机制，也就是也就是CSS。1996年年12月月17日，日，W3C标准化组织推出了标准化组织推出了CSS1（Cascading Style Sheets Level 1）规范，立刻得到了微软与网景）规范，立刻得到了微软与网景公司的支持。公司的支持。CSSCSS概念概念CSSCSS是是Cascading Style SheetCascading Style Sheet 的缩写，翻译成中文是的缩写，翻译成

3、中文是层叠样式表层叠样式表，有，有时简称时简称样式表样式表。它是控制网页样式并允许将样式信息与网页内容分离。它是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。的一种标记性语言。内容结构和格式控制相分离内容结构和格式控制相分离，便于统一设计与管理页面。，便于统一设计与管理页面。CSSCSS功能功能弥补弥补HTML对网页格式化功能的不足，比如对网页格式化功能的不足，比如段落间距，行距段落间距，行距等。等。 字体变化和大小。字体变化和大小。页面格式的动态更新。页面格式的动态更新。排版定位。排版定位。CSSCSS优点优点除了对访问者看到的文档提供更多的控制外，除了对访问者看到的文档提供更

4、多的控制外，CSS比起填写格式标志比起填写格式标志的方法来说，能更好地管理的方法来说，能更好地管理HTML文档。将这些标志放在文档。将这些标志放在CSS中时，中时，文档会更加整洁。文档会更加整洁。CSS还可以减少开发和维护还可以减少开发和维护HTML文档所用的时间。与手工格式化的文档所用的时间。与手工格式化的文本段落相比，用户可以只改变样式当中的样式定义，这个定义就会文本段落相比，用户可以只改变样式当中的样式定义，这个定义就会作用在作用在HTML文档的各个地方。文档的各个地方。最后，最后，CSS还提供了还提供了Web 站点中文档间的灵活性。即可以建立适用于站点中文档间的灵活性。即可以建立适用于

5、站点中所有页面的样式表，也可以建立单个样式表作用于某个站点中所有页面的样式表，也可以建立单个样式表作用于某个HTML文档，这个具体样式表能覆盖全局样式表。另外，还可以进一步调整文档，这个具体样式表能覆盖全局样式表。另外，还可以进一步调整各个样式表以适应特殊的文本样式，例如，某个段落采用特殊的颜色。各个样式表以适应特殊的文本样式，例如，某个段落采用特殊的颜色。10.2 引入引入CSS方法方法在在html中，引入中，引入css的方法主要的方法主要4种：种： 行内式行内式 内嵌式内嵌式 导入式导入式 链接式链接式行内式行内式即在标记的即在标记的style属性中设定属性中设定css样式，这种方式本质上

6、没体现出样式，这种方式本质上没体现出css的的优势，因此优势，因此不推荐使用不推荐使用。 style 属性规定元素的行内样式（属性规定元素的行内样式（inline style）。）。 style 属性属性将覆盖任何全局的样式设定将覆盖任何全局的样式设定，例如在，例如在 标签或在外标签或在外部样式表中规定的样式。部样式表中规定的样式。基本语法：基本语法： 内嵌式内嵌式在对页面中各种元素的设置集中写在在对页面中各种元素的设置集中写在和和之间的，对于之间的，对于单个页面来说，这种方式很方便单个页面来说，这种方式很方便 。基本语法：基本语法：语法解释：语法解释： 选择器选择器 (selector) 通

7、常是定义的通常是定义的 HTML 元素或标签元素或标签. 属性属性 (property) 是定义改变的属性，并且每个属性都有一个值。是定义改变的属性，并且每个属性都有一个值。 属性和值用冒号分开，并由花括号包围属性和值用冒号分开，并由花括号包围，这样就组成了一个完整，这样就组成了一个完整的样式声明（的样式声明（declaration ）。）。优缺点优缺点优点：优点： 速度快，所有的速度快，所有的CSS控制都是针对本页面标签的，没有多余的控制都是针对本页面标签的，没有多余的命令。命令。 再者不用外链文件。直接在文档中读取样式。再者不用外链文件。直接在文档中读取样式。 缺点缺点 ： 改版麻烦，单个

8、页面显得臃肿，不能被其他引用改版麻烦，单个页面显得臃肿，不能被其他引用造成代码量相对较多，维护也麻烦些。造成代码量相对较多，维护也麻烦些。 导入式导入式导入式格式如下：导入式格式如下： import mystyle.css;-URL 或或 import url(mystyle.css); 语法解释：语法解释：后面的分号（后面的分号（;）一定要有）一定要有。连接式连接式这种方法可以说是现在占统治地位的引入方法。如同浏览器中的这种方法可以说是现在占统治地位的引入方法。如同浏览器中的IE。也是最能体现也是最能体现CSS特点的方法；特点的方法；最能体现最能体现DIV+CSS中的内容与显示分中的内容与显

9、示分离的思想离的思想，也，也最易改版维护最易改版维护，代码看起来也是，代码看起来也是最美观最美观的一种。的一种。基本语法：基本语法： 导入式与连接式比较导入式与连接式比较1、连接式连接式：会会在装载页面主体部分之前装载在装载页面主体部分之前装载css文件文件，这样显示出来，这样显示出来 的网页从一开始就是带有样式效果的。的网页从一开始就是带有样式效果的。2 、导入式导入式：会会在整个页面装载完成后再装载在整个页面装载完成后再装载CSS文件文件，对于有的浏，对于有的浏 览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显 示

10、无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的 感受来说，这是导入式的一个缺陷。感受来说，这是导入式的一个缺陷。3、建议建议：如果仅需要引入一个如果仅需要引入一个CSS文件，则使用连接方式文件，则使用连接方式；如果需要；如果需要 引入多个引入多个CSS文件，则首先用连接方式引入一个文件，则首先用连接方式引入一个“目录目录”CSS文件，这文件，这个个 “目录目录”CSS文件中再使用导入式引入其他文件中再使用导入式引入其他CSS文件。文件。10.3 基本基本CSS选择器选择器10.3.1 标签选择器标签选择器10.3.2

11、类选择器类选择器10.3.3 ID选择器选择器10.3.1 标签选择器标签选择器定义样式：定义样式： html标签名标签名 property1: value1; property2: value2; 实例实例:u u p color:#FF0000; font-size:25px; u 10.3.2 类选择器类选择器定义样式定义样式: .类名类名 property1: value1; property2: value2; 套用类选择器的样式：套用类选择器的样式： 网页内容网页内容 注意：同值注意：同值class属性可以在每个属性可以在每个 HTML 文档中出现多次。文档中出现多次。10.3.3

12、 ID选择器选择器定义样式：定义样式：ID名名 property1: value1; property2: value2; 套用套用ID选择器的常用格式：选择器的常用格式： 网页内容网页内容 注意：同值注意：同值id 属性只能在每个属性只能在每个 HTML 文档中出现一次。文档中出现一次。 10.4 复合选择器复合选择器10.4.1 并集并集 选择器（分组选择器）选择器（分组选择器）10.4.2 交集交集 选择器（派生选择器）选择器（派生选择器）10.4.3 后代后代 选择器（派生选择器）选择器（派生选择器）10.4.1 并集并集 选择器选择器（分组选择器）（分组选择器）将将同样的定义应用于多

13、个选择符同样的定义应用于多个选择符，可以将选择符以，可以将选择符以逗号逗号分隔分隔的方式合并为组。的方式合并为组。语法格式：语法格式： 标签名标签名,# ID名名,.类名类名 property1: value1; property2: value2; 实例实例u p, div, .a font-size:12px; 10.4.2 交集交集 选择器选择器（派生选择器）（派生选择器）“交集交集”复合选择器由两个选择器直接链接构成，其结果是复合选择器由两个选择器直接链接构成，其结果是选中二者各自选中二者各自元素范围的交集元素范围的交集。其中。其中第一个必须是标记选择器第一个必须是标记选择器，第二个必

14、须是类选择器第二个必须是类选择器或者或者ID选择器选择器。两个选择器之间不能有空格，必须连续书写两个选择器之间不能有空格，必须连续书写。语法格式：语法格式： 标签选择器标签选择器#ID名名或或.类名类名 property1: value1; property2: value2; 实例实例u ul.red font-size:12px; color:#FF0000; 10.4.3 后代后代 选择器选择器（派生选择器）（派生选择器）由两个或多个类型选择符组成，并以由两个或多个类型选择符组成，并以空白空白相分隔。相分隔。语法格式：语法格式： Name1 Name2 property1: value1

15、; property2: value2; 实例实例u #one li font-size:12px; 10.5 其他选择器其他选择器10.5.1 通用选择器通用选择器10.5.2 伪类选择器伪类选择器10.5.2 伪元素选择器伪元素选择器10.5.1 通用选择器通用选择器是针对是针对整个页面所有内容整个页面所有内容的选择器；的选择器；基本语法：基本语法： * property1: value1; property2: value2; 10.5.2 伪类选择器伪类选择器之所以称之为伪类，是因为它们之所以称之为伪类，是因为它们指定的对象在文档中并不存在指定的对象在文档中并不存在，它们，它们指定的是

16、元素的某种状态指定的是元素的某种状态。基本语法：基本语法： 标签名标签名:元素名元素名 property1: value1; property2: value2; a:link - 未访问的链接样式未访问的链接样式a:visited - 已访问的链接样式已访问的链接样式a:hover - 鼠标指上时的样式鼠标指上时的样式a:active - 活动链接的样式活动链接的样式伪类属性表伪类属性表属性描述:active向被激活的元素添加样式。:hover当鼠标悬浮在元素上方时，向元素添加样式。:link向未被访问的链接添加样式。:visited向已被访问的链接添加样式。:first-child向元素的

17、第一个子元素添加样式。(IE6不支持):focus向拥有键盘输入焦点的元素添加样式。 (同上):lang向带有指定 lang 属性的元素添加样式。 (同上)综合应用综合应用10.5.2 伪元素选择器伪元素选择器伪元素同伪类的情况类似，也是对文档中虚构的元素进行定义。伪元素同伪类的情况类似，也是对文档中虚构的元素进行定义。基本语法：基本语法： 标签名标签名:元素名元素名 property1: value1; property2: value2; 伪元素属性表伪元素属性表属性描述:first-letter向文本的第一个字母添加特殊样式。:first-line向文本的首行添加特殊样式。:before

18、在元素之前添加内容。(IE6不支持):after在元素之后添加内容。(IE6不支持)10.6 10.6 CSSCSS继承与层叠特性继承与层叠特性CSSCSS继承继承: : 指子标签会继承父标签的所有样式风格，并可以在父标指子标签会继承父标签的所有样式风格，并可以在父标签样式风格的基础上再次进行修改，产生新的样式，而子标签的样式签样式风格的基础上再次进行修改，产生新的样式，而子标签的样式风格完全不会影响父标签。风格完全不会影响父标签。层叠层叠: : 指在同一个指在同一个WEB文档中可以有多个样式表存在，当拥有相同文档中可以有多个样式表存在，当拥有相同特殊性的规则应用在同一个元素时，根据这些规则的特殊性的规则应用在同一个元素时，根据这些规则的先后顺序先后顺序，来决，来决定其权重。定其权重。CSS样式层叠时的优先级样式层叠时的优先级内嵌样式内嵌样式ID选择器选择器class选择器选择器标记选择器；标记选择器；内层样式表内层样式表外层样式表外层样式表外部样式表；外部样式表；越特殊的样式，优先级越高；越特殊的样式，优先级越高；当优先级相同时，以后者为准（当优先级相同时，以后者为准（就近原则就近原则）；）；CSS注释注释语法格式：语法格式： /* 注释内容注释内容 */注释符注释符/* */不能交叉，且不能没有结束符。不能交叉，且不能没有结束符。本章总结本