第四章 CSS层叠样式表.docx

1、第四章 CSS层叠样式表第四章 CSS层叠样式表4.1 CSS的概述CSS是Cascading Style Sheets(层叠样式表)的缩写，其作用是提供为Web文档添加样式的简单机制。这里的“样式（Style）”，指的是Web文档字体的大小、颜色、边框、背景等显示属性；而“层叠（Cascading）”二字，指的是一个Web文档的样式可以从其它样式表中继承而来。关于这一点，我们会在本章的4.3节进行详细的说明。 那么，为什么我们需要学习CSS呢？或者说，CSS能够为我们创建Web文档带来什么好处？第二章我们学习HTML语言基础时，我们知道HTML 标签被设计为定义Web文档的布局和内容。通过使

2、用 、 这样的标签，HTML 的含义是表达“这是标题”、“这是段落”、“这是表格”之类的信息。然而对于Web文档的设计师来说，这还不够全面。Web文档的设计者不仅仅希望通过HTML这样的标记语言来设计Web文档的布局和内容，还希望通过某种方式设计Web文档的显示属性，通过控制Web文档的视觉效果（通常就是字体的大小，颜色的搭配，背景的选择等）来表达自己独特的、个性化的设计理念。于是HTML也提供了诸如这样的标签以及与标签搭配的显示属性（如”background, bgcolor”等）来实现这一功能，但这样做存在两个问题：1不同的浏览器对显示属性的解释不同，不同的浏览器提供不同的视觉标签，并且同

3、一属性在不同的浏览器里还可能表达不同的视觉效果。2使用相对独立的HTML所提供的显示属性，不利于整体效果的统一，修改起来也会比较麻烦。例如，假设我们要使某个的第一列的所有表格单元（）的背景色显示为暗红色，那么或许我们可以使用第二章学习的方法，使用这样的标签来标记所有第一列的表格单元来达到这样的目的。那么，如果有一天我们厌烦了这样的视觉效果，而想将其背景色改为纯蓝色，我们就不得不使用这样的标签对所有第一列的单元进行替换。假如这个有20行或者更多好吧，你可以想象一下，这是一件多么让人厌烦的工作。因此，我们需要一种能独立于浏览器之外的、能够统一设计并管理所有（不仅仅局限于一个Web文档，而是在同一站

4、点内的所有Web文档）相同类型的Web文档内容的视觉样式的简单机制，这就是CSS。通过这一章的学习，我们要学会CSS的基本语法，CSS的单位和属性，以及CSS的“层叠”规则，并通过一些实例掌握CSS在Web页面设计中的应用。4.2 CSS基础4.2.1 CSS基本语法 CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行，属于浏览器解释型语言。通常，解释型语言的语法都比较简单，CSS也正是如此。一般而言，我们可以先定义一个样式（Style），然后再在html代码中使用这个样式。 一个典型的样式的定义由三部分组成，分别是：1 选择符（Selector）：选择符可以是多种形式，一般是你要定

5、义样式的HTML标记，例如BODY、P、TABLE等。你也可以简单的理解为该样式的名字。我们通过它定义一个样式，也通过它使用该样式。2 属性（Property）：需要定义的显示属性，一个样式中可定义多个显示属性。3 属性值（Value）：各属性的取值，包括单位。以下是一个样式一般的语法格式：selector property: value;例如：p color:blue;其中，p就是选择符，它对应HTML中的标签；color是属性，表示需要设置标签中的内容颜色；blue是属性值，表示标签中的内容颜色为纯蓝色。最后以一个分号“；”作为一个“属性：值对”的结尾，一个选择符可以包含多条属性，属性间以

6、分号“；”间隔，例如：P color:blue; font-size:12px; 定义了一个样式之后，就可以在html代码中使用这一样式。样式的使用（引用）共有三种方式，分别是：内联引用、内部引用（嵌入）与外部引用。 1CSS的内联引用 内联，即把CSS样式直接作用在html标签中，例如： （该段落的文字大小为12个像素，其颜色为纯蓝色） 除了、和这三个html标签外，STYLE属性可以应用于任意BODY元素(包括标签本身)。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号“；”隔开。使用内联CSS的网页制作者必须将标签里的CONTENT属性设置为text/css，而HTTP-EQ

7、UIV属性设置为Content-Style-Type，例如:注意: 中文网页的标记为:因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。一般情况下，应当尽量避免使用。需要注意的是，使用内联方式时，其样式只在使用了style属性的这一标签中有效，在其它的标签中是无效的。例如： （该段落的文字大小为12个像素，其颜色为纯蓝色） （该段落的文字的显示属性为默认） 2CSS的内部引用（嵌入）可以使用标签直接把CSS代码加载到html文档内部，例如：/* -文字样式开始- */* 定义在标签中的文字大小为12个像素，颜色为纯蓝色 */P color:blue; font-size:12px

8、; /* -文字样式结束- */在内部引用样式时，标签的type属性必须设置为“text/css”。与内联方式不同的是，一旦在一个html页面中定义了某个标签的显示属性，则其在该页面内所有与之匹配的标签中都有效。例如： （该段落的文字大小为12个像素，其颜色为纯蓝色） （该段落的文字大小也为12个像素，其颜色为纯蓝色） 最后需要注意的是，通常标签应放在HEAD部分。 3CSS的外部引用外部引用CSS是最好的引入CSS的方式（可以使代码量最小，表现最统一，也是标准网页设计W3C规范所推荐的）。内联引用虽然是一种快捷的方式，但是不利于以后的统一修改和表现的一致性，除了在需要使用样式表的层叠以外，是

9、不提倡使用的。CSS的外部引用可分为2种方式：一种是使用标签，一种是使用标签的“import”方法。使用标签标记应放置在文档的HEAD部分。“rel”属性用于定义连接的文件和HTML文档之间的关系。rel=“stylesheet”指定一个固定或首选的样式而rel=“alternate stylesheet”定义一个交互样式。固定样式在样式表激活时总被应用，一般使用固定样式。“href”属性指出指定外联的CSS文件的地址，可以为相对地址也可为绝对地址。需要注意的是，外联的CSS文件不应包含或这样的html的标签，只需要如：P color:blue; font-size:12px; 这样的代码所组

10、成的文件就可以了。使用importimport url(http:/localhost/style.css); url()中的地址仍然可以是相对地址，也可以是绝对地址。需要注意的是，import的CSS文件应当放在标签的开始部分，这是由CSS的层叠规则所决定的。我们将在4.3节详细解释CSS的层叠规则。 4.2.2 CSS的选择符 可以通过不同的方式来定义和使用一个选择符。一般来说，除了上面提到的基本方式以外，选择符还可分为以下五种类型： 1.选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义，例如：h1, h2, h3, h4, h5, h6 c

11、olor: green （这个组里包括从的所有的HTML标题元素，每个标题元素的文字都为绿色） p, table font-size: 9pt （段落和表格里的文字尺寸为9号字） 其效果完全等效于： p font-size: 9pt table font-size: 9pt 2.类选择符 使用类选择符你能够把相同的元素分类定义不同的样式。定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类： p.right text-align: right p.center text-align: center 然后用在不同的段落里，只要

12、在HTML标记里加入你定义的class参数，例如： （这个段落里的文本内容是向右对齐的） （这个段落里的文本内容是居中排列的） 注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。类选择符还有一种重要的用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式，例如： .center text-align: center （注意选择符前有一个点号“.”）（定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使元素（标题1）和元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类

13、选择符里的定义，例如：（这个标题是居中排列的） （这个段落也是居中排列的） 注意：这种省略HTML标记的类选择符是我们以后最常用的CSS方法。使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。3.ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素： #intro font-size:110%; font-weight:bold; color:#0000ff; background

14、-color:transparent （字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明） 下面这个例子，ID属性只匹配id=intro的段落元素： p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中的类用ID替代： （这个段落向右对齐） 注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 4.包含选择符可以单独对某种元素包含关系定义的样式表，如元素1里包含有元素2。这

15、种方式只对在元素1里的元素2定义有效，对单独的元素1或元素2无定义，例如有如下定义： table a font-size: 12px （定义在表格内的链接改变样式，文字大小为12象素；而表格外的链接的文字仍为默认大小，并且表格内的非链接文本的字体也不变。） 5.伪类与伪元素在我们上面所介绍的4种选择符中，其实现是采用模式（pattern）匹配的方式，这里的模式就是我们所定义的选择符的名字和属性。例如在前面介绍的类选择符中，如果我们有如下定义：p.right text-align: right那么当我们在html代码中使用如下标签时： （这个段落里的文本内容是向右对齐的） 则段落里的文本内容是向

16、右对齐的。而之所以能够实现这样的效果，是因为浏览器在解释代码时，p.right与被认为是一对匹配的模式。伪类或伪元素的实现机制与我们上面介绍的所有选择符都不同。伪类或伪元素对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容。下面我们分别介绍常用的伪类和伪元素。1 类伪类的语法格式是selector: pseudo class property: value; ，简单地用一个半角英文冒号（:）来隔开选择符和伪类。常用的伪类有：:first-child ，:link，:vistited，:hover，:active，:focus，:lang由于first-ch

17、ild和lang不为IE（internet explorer）支持，我们介绍能够安全使用的四个伪类。由于它们一般应用在锚结点上，因此又被称为锚伪类。下面是一个锚伪类的例子：a:link color: red /* 未被访问的链接 红色 */a:visited color: green /* 已被访问过的链接 绿色 */a:hover color: blue /* 鼠标悬浮在上的链接 蓝色 */a:active color: white /* 鼠标点中激活链接 白色 */需要注意的是，首先，用于进行匹配的不是选择符的名字而是其行为（未访问、已访问等）；其次，由于CSS的层叠规则，其书写顺序是不能

18、颠倒的，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。伪类也可以与类结合使用，这时其语法格式为selector.class:pseudo-class property: value，例如：a.tz:link color: red /* 未被访问的链接 红色 */a.tz:visited color: green /* 已被访问过的链接 绿色 */a.tz:hover color: blue /* 鼠标悬浮在上的链接 蓝色 */a.tz:active color: white /* 鼠标点中激活链接 白色 */伪元素伪元素是创造关于html语言能

19、够指定的文档树之外的抽象，例如html不提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，并且还还提供设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）的机制。常见的伪元素有：:first-line，:first-letter，:before，:after由于伪元素的语法格式与伪类相同，因此本书不予详细介绍。4.2.3 CSS的单位 在CSS中，一共有七种类型的单位，分别是：长度单位、百分比单位、颜色单位、URLs、时间单位、频率单位以及角度单位。下面分别介绍前四种常用单位。 1长度单位 一个长度的值由可选的正号 + 或负号 - 、接

20、着的一个数字以及标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。 CSS中的长度单位有2种类型：相对值单位与绝对值单位。相对值单位确定一个相对于另一长度属性的长度，表明了其长度单位会随着它的参考值的变化而变化。因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位: em (em，元素的字体的高度，其值相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。) ex (x-height，字母 x 的高度。其值相对于字符“x”的

21、高度，此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。) px (像素，相对于屏幕的分辨率) 绝对值长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位: in (英寸，1英寸=2.54厘米) cm (厘米，1厘米=10毫米) mm (米) pt (点，1点=1/72英寸) pc (帕，1帕=12点)一般Web页面上正文的字体大小为12px或9pt。值得注意的是，对于计算机的屏幕设备（显示器）而言，像素(Pixel)或者说px是一个最基本的单位，其它所有的单位，都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，

22、都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。但在其它不以像素作为其基本长度单位的设备中（如打印机），相对长度单位与绝对长度单位仍然是有差别的。 2百分比单位一个百分比值由可选的正号或负号、接着的一个数字，还有百分号%。在一个百分比值之中是没有空格的。百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小，这时可以把百分比单位看作一个相对长度单位。例如：h1 font-size: 120% h1 font-size: 1.2em 这两条定义的功能是一样的，都是使一

23、级标题标签中的字体大小按照预设的1.2倍显示。 3颜色单位CSS中的颜色值可以划分为两大类：一种是关键字，一种是RGB格式的数字。Windows VGA(视频图像阵列)形成了16各关键字：aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，and yellow。在进行CSS设计的时候，可以直接引用以上关键字，例如：div color:blue;div color:navy;RGB格式的颜色可以有四种形式，其中R代表红色，G代表绿色，B代表蓝色： #rrggbb (如，#00

24、cc00；注意参数采用16进制，且为2位数，如不足2位应在参数前填0) #rgb (如，#0c0，它就等于#00cc00) rgb(x,x,x) x是一个介乎0到255之间的十进制整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数，它代表的是某一原色相对于十进制数255的大小 (如，rgb(0%,80%,0%)，它就等于rgb(0%,80%*255,0%)即rgb(0,204,0)例如：div color:#0000FF;div color:#00F;div color:rgb(0,0,255)div color:rgb(0%,0%,10

25、0%)以上四种形式都表示中的文本内容以纯蓝色（div color:blue;）显示。 4统一资源定位符URLs一个URL值的格式为：url(foo)，foo是一个URL（internet中某资源的地址，既可以是相对地址也可以是绝对地址）。URL可以选择用单引号( )或者双引号( )，并且在URL之前或之后可以包含空格。例如：BODY background: url(style.gif) BODY background: url(style.gif) BODY background: url(http:/localhost/ style.gif) 4.2.4 CSS的属性 CSS的属性非常丰富，

26、常用的有：字体属性、颜色和背景属性、文本属性、边距属性、填充距属性、边框属性、分级属性以及鼠标属性等。其属性名以及属性的含义见表4.1：表4.1 CSS的属性1字体属性（font）属性名属性含义属性值font-family使用什么字体所有的字体，如宋体，仿宋体，MingLiu体等font-style字体是否斜体Normal、italic、obliquefont-variant是否用小体大写Normal、small-capsfont-weight字体的粗细Normal、bold、bolder、lithter等font-size字体的大小使用前面学过的长度单位。绝对长度单位和相对长度单位都可以使用

27、2颜色和背景属性属性名属性含义属性值Color定义前景色在Web页面中，前景色即页面的文本颜色。它可以使用上面介绍的所有颜色单位Background-color定义背景色在Web页面中，背景色一般指的就是文本之后的屏幕颜色。它也可以使用上面介绍的所有颜色单位Background-image定义背景图案也可以简写为Background，其值是一个URL，可以使用相对路径或绝对路径Background-repeat背景图案的重复方式当背景图案的大小小于页面的整体大小时，采用何种方式进行平铺，其值为Repeat-x（横向平铺）、repeat-y（纵向平铺）、no-repeatBackground-attachment设置背景图案的滚动方式当背景图案的大小大于页面的整体大小时，允许滚动背景图案而不影响前景的显示，其值为Scroll（拖动滚动条滚动）、Fixed（不允许滚动）Background-position背景图案的初始位置Percentage、length、top、left、right、bottom等3文本属性属性名属性含义属性值Word-spacing单词之间的间距Normal