第五章CSS层叠样式表(理论)

1、CSSCSS层叠样式表层叠样式表第五章第五章本章目标理解样式表对控制页面元素外观的作用掌握样式规则的语法理解各种选择器理解样式代码在什么位置编写及它们的作用范围掌握常用的样式属性 CSS概述概述 CSS的英文全称为Cascading Style Sheet，中文翻译一般称为层叠样式表或级联样式表。 CSS的作用是定义如何显示HTML元素。 它是一门独立的语言，由万维网联盟（W3C）制定。 目前的正式版本为2.0版。CSS解决的问题解决的问题 CSS的出现，解决了网页内容内容与表现表现分离的问题。 由HTML的标签告知浏览器网页中有哪些内容，而由CSS的规则告知浏览器这些内容应该如何表现。 CS

2、S对网页文档及其元素的外观样式的控制能力远非HTML语言所能比拟。 CSS能够对网页文档及其元素的外观样式实施完整完整的和精确精确的控制。 CSS样式规则声明 CSS语法由三部分构成：选择器，属性和值。 三个部分组合起来构成了一条样式样式规则规则声明declaration。选择器选择器selector是某个HTML标签的名称或你自定义的名称。选择器说明这个样式在网页中的适用范围。属性属性property是你期望控制的样式的某个方面，如字体，颜色，边框，背景等。属性需要有一个或多个值value。属性名和值可以有多对同时出现，多对之间用;分号隔开，属性名和值之间用:冒号连接。它们集中放置在一对大括

3、号中。selector property : value ;property : value ;. . .在在标签中声明样式规则标签中声明样式规则 样式规则声明body background-image:url(image/eg_bg.gif);p text-indent:32px;font-size:16px;演示 例5-1这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。 选择器 一条样式规则声明中包含选

4、择器，选择器的作用是说明这条样式规则在网页中的适用范围，或者说网页中的哪个地方或哪些地方将要用到它。 上例中，body和p就是这两条样式规则中的选择器。第一条规则对网页中的即网页正文有效。第二条规则对网页中的所有标签即段落都有效。两条规则中的选择器的名称是合法的HTML标签的名称，这样浏览器在解析这条样式规则时就已经知道它是针对页面中这种标签的。 使用HTML标签名称作为选择器，称为HTML选择器或标签选择器标签选择器。其他的选择器还有：类选择器类选择器、ID选择器选择器、伪类选择器伪类选择器、伪元素选择器伪元素选择器、上下上下文选择器文选择器、群组联合选择器联合选择器等。HTML选择器选择器

5、 使用某种HTML标签的名称作为选择器，当浏览器解析这种标签时，即采用这条样式规则。这样做的目的是为了覆盖浏览器内部对这种标签显示方式预先定义的规则。 标签名 /*/HTML选择器选择器h1 text-align:center;font-size:18pt;input border:1px solid gray;background-color:#fedcba;color:blue;a text-decoration:none; 在此登录用户名: 密码: 注册回到首页演示 例5-2通配符选择器特殊的HTML选择器 使用*号通配符代表所有HTML标签。用*号作为选择器名称的样式规则将作用于所有标

6、签。 * /*在这里定义对所有标签都生效的样式*/类选择器类选择器 使用类选择器，将多个应共享同一种外观共享同一种外观的标签归为一类。 定义类选择器时，要以 . 点号作为前缀，类名可自己定义，但必须符合命名标识符的规范，不能以数字开头。类选择器定义好之后，并不会自动生效，这一点和HTML选择器不同。在需要使用这个类选择器定义的样式的标签中，设置class属性，赋值为类的名称，浏览器在显示这个标签时将套用这个类选择器定义的样式。 .类名/*/类选择器类选择器.txt border:1px dashed gray;background-color:#fedcba;color:blue;height

7、:20px;.btn border:1px solid blue;background-color:#cccccc;color:red;font-weight:bold; 演示 例5-3ID选择器选择器为页面中特定的某个特定的某个标签定制定制外观。定义ID选择器时，要以#号作为前缀，ID名可自己定义，但必须符合命名标识符的规范，不能以数字开头。ID选择器定义好之后，并不会自动生效，跟类选择器相似，需要在要使用此样式的标签中设置ID属性来显式地使用这个ID选择器。 标签的id属性值在整个页面范围内应具有唯一性唯一性。ID选择器样式规则在一个页面中应只被使用一次，即只能在一处标签使用此样式规则。

8、#id名/*/ID选择器选择器tdborder:1px solid blue;#mytable width:260px;border-width:5px;border-style:double;border-color:gray;border-collapse:collapse;#mytd background-color:#fedcba;text-align:center;font-size:16px;font-style:italic; 单元格单元格单元格单元格单元格单元格 演示 例5-4伪类选择器伪类选择器 伪类用于向其他选择器指定适用范围内的特定元素或特定状态制定样式。使用得比较多的场

9、景是使用锚伪类锚伪类为页面中的超链接超链接制定在不同状态不同状态下不同的外观。a : 普通状态 /*/a : 已被访问状态 /*/a : 鼠标悬停状态 /*/a : 被激活状态 /*/锚伪类选择器锚伪类选择器a text-decoration:none;font-size:14px;a:link color:blue;a:visited color:gray;a:hover color:red;font-size:16px;text-decoration:underline;a:active font-style:italic; 演示 例5-5样式规则声明 HTML选择器 类选择器 ID选择器

10、 伪元素选择器伪元素选择器 伪元素用于向其他选择器指定适用范围内的元素特定部分制定样式。一般应用于文本块的首行首行或文本块的首字符首字符。 选择器 : first-line /*/选择器 : first-letter /*/伪元素选择器伪元素选择器p font-size:14px;p : first-line font-size:16px;text-decoration:line-through;h1font-size:18pt;color:black;h1 : first-letter font-size:24pt;color:red;border:1px solid blue;paddin

11、g:3px; 这是一个段落，它的第一行文字将有删除线修饰，字号比其他行要大。这是一个段落，它的第一行文字将有删除线修饰，字号比其他行要大。这是一个段落，它的第一行文字将有删除线修饰，字号比其他行要大。这是一级标题，注意它的第一个字符 演示 例5-6上下文选择器上下文选择器 上下文选择器又称为派生选择器，用于根据上下文关系上下文关系来确定某个标签是否使用上下文选择器的样式规则。父标签 子标签/*/类 标签/*/标签 类/*/id 标签/*/上下文选择器上下文选择器ol li list-style-type:upper-alpha;font-size:14px;ul li list-style-i

12、mage:url(image/li.gif);font-weight:bold;XX公司三亚之旅第一天行程07:00 之前在新大新广场前集合07:15 乘坐机场大巴前往黄花机场08:30 集体办理登机手续09:15 乘机飞往三亚11:00 抵达三亚机场11:30 由地接大巴送到旅社12:30 集体吃海鲜自助餐下午自由活动海鲜自助餐重点推荐口味大肉蟹盐焗濑尿虾蒜蓉清蒸小鲍辣椒炒海瓜子哈贝冬瓜汤 演示 例5-7上下文选择器上下文选择器table border:2px solid black;border-collapse:collapse;#mytable width:280px;#mytable

13、 td border:1px solid gray;.myp font-size:14px;.myp span font-weight:bold;font-size:16px;单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格 这是一个段落，其中有某些文字某些文字的样式需要设置。这是一个段落，其中有某些文字某些文字的样式需要设置。 演示 例5-8群组联合选择器多个样式规则的定义相同，但选择器名称不同。可以将这些样式规则合并成为一个样式规则，选择器名称之间使用逗号分隔。 选择器一 , 选择器二 , /*/群组联合选择器h1, h2, h3 color:black;text-

14、align:center;font-family:微软雅黑;h1 font-size:24px;h2 font-size:16px;h3 font-size:12px; 一级标题二级标题三级标题 演示 例5-91、2、 小结1选择器起什么作用，有哪些选择器。选择器起什么作用，有哪些选择器。刚才我们用到了哪些样式属性，它们分别控制哪个方面的样式刚才我们用到了哪些样式属性，它们分别控制哪个方面的样式将样式规则声明编写在何处 样式规则声明可以编写在网页头部中的标签内部，在这里声明的样式规则称为内部样式表内部样式表，或叫内嵌样式表，它们将对整个页面全局有效。样式规则还可以作为标签的style属性的值。 样式规则还可以写在独立的样式文件中。内联样式样式规则作为标签的style属性的值，称为内联样式。仅对包含它的标签有效。本页面演示内联样式表，内联样式其实就