查字典图书网
查字典图书网
CSS表面上很简单，可用于设置文档样式的常用属性只有45个。但是，属性及属性值的不同组合会产生完全不同的结果。这可以称为CSS多态性，因为同一个属性在不同情况下具有不同的意义。CSS多态性会产生无数种组合可能性。 学习CSS不仅要学习各个属性，还要学习在具体情况中应该使用哪些属性，以及不同类型的属性值在不同情况下为何会产生不同的结果。以width属性为例当与其他规则组合使用或者被赋予不同的值时，它会产生许多不同的效果。例如，width对行内元素完全不起作用。width:auto会将浮动元素收缩到与其内容相等的宽度。当left和right设置为auto时，width:auto会将设定尺寸的元素收缩到最小宽度。width:auto会将块级元素拉伸到与父级元素相等的宽度。当left和right被设置为0时，width:auto会将元素拉伸到与它们所属块元素相等的宽度。只要块级元素和浮动元素没有设置边框、内边距和外边距，那么width:100%就会将它们拉伸到与父级元素相等的宽度。即使表格元素设置了边框和内边距，width:100%也会将它拉伸到与父级元素相等的宽度。width:100%会将设定尺寸的元素拉伸到与元素最近祖先元素相等的宽度，而不是与父级元素对齐。width:100em则将元素尺寸设置为其font-size的高度相对值，从而使元素的宽度足够容纳一定数量的字符。width:100px会将元素尺寸设置为固定的像素值，而且与其文本的font-size值无关。 更复杂的是，浏览器不一定实现了所有的规则。例如，在一个或多个主流浏览器中，122个属性中有40多个属性未得到所有浏览器的支持，而类似上述的600个CSS规则中有250多个未得到支持。CSS还加入了一些定义各种级别和配置文件的规范。每一个级别的CSS都基于前一个级别构建而成，并且通常会增加一些新特性，它们一般称为CSS 1、CSS 2和CSS3。配置文件通常是一个或多个CSS级别的子集，用于支持特殊的设备或用户界面。浏览器对CSS3的支持是开发人员必须关注的重要问题，而且这个规范仍在快速发展中。 因此，在学习CSS时，要想记住每一个规则的无数特殊情况，无疑是不现实的。 为了简化CSS学习，本书介绍了属性及属性值的所有实用组合方式。它通过具体实例来介绍属性，全面地介绍了CSS的工作原理。 设想一下，去掉那些无用的规则，并且不需要在每一个浏览器上测试所有规则及规则组合，我们可以节省多少学习时间？我已经帮读者做完这些事情。我曾经运行过上千个测试，也在每一个主流浏览器上测试过所有CSS属性和属性组合，其中包括Internet Explorer 6/7/8/9、Firefox 7、Chrome 12、Opera 9和Safari 5。 我将这些结果总结为一些简单的设计模式——创建优质、高性能和最佳体验的网站所需要的全部CSS和HTML设计模式。本书（第2版）已经更新，加入了关于HTML5和CSS3的最新内容和技巧。 在学习这些设计模式之后，您一定会收获良多。 本章将介绍这些设计模式的用途及其原理。书中将通过一些例子说明如何组合使用这些设计模式来创建新的模式。此外，本章还会介绍如何正确地使用样式表、CSS语法和层叠顺序。 接下来，我会展示一系列图表，其中列出了所有实用的CSS属性和度量单位。然后，我将简要地介绍12种CSS问题快速修复方法。最后再来介绍如何统一不同浏览器下的元素样式——这样你就能够放心地覆盖这些默认样式。 1.1 设计模式——结构化方法 设计模式已经在软件编程中得到了非常成功的应用。它们提高了网页设计和开发的生产力、创造性和效率，并且大大降低了代码的复杂性。在CSS和HTML中，设计模式是指一组适用于多种浏览器和屏幕阅读器的常用功能，利用它们既不会牺牲设计价值或体验，也不必依赖CSS补救（hack）和滤镜。但是，它们至今仍未系统地应用到HTML和CSS网页设计和开发中。 设计模式是所有创意的基础。在讨论、编写和制作时，我们都要以模式为出发点。设计模式类似于文档模板，我们可以在其中填写自己的内容。在文学创作中，它们就像是角色原型和情节梗概。在音乐创作中，它们就像是主旋律和变奏。在程序设计中，它们类似于可重用的算法，可以通过系统地修改和相互组合来产生预期结果。 设计模式能够显著提升创造力和生产力。它可以单独使用，快速产生一些结果；也可以与其他模式相结合，产生一些复杂结果。设计模式简化和丰富了创造过程。它们将创造性工作变得像塔积木一样容易。选择一些预定义的设计模式，进行适当的修改和组合，就可以得到符合我们要求的结果。模式不会束缚创造力——而是解放创造力。 在Erich Gamma、Richard Helm、Ralph Johnson和John Vlissides合著的Design Patterns: Elements of Reusable Object-Oriented Software（Addison-Wesley，1995）一书中，作者定义的设计模式包含4个元素：模式名称、问题、解决和方案。本书也遵循这种方法。 由于这是一本实用书籍，所以它主要关注于具体的CSS和HTML设计模式，即主流浏览器实际支持的模式。本书还将专门一些内置模式组合为更高级的模式，从而创建出新的设计模式。 简而言之，本书主要介绍设计模式，它们可以直接应用于网页设计中。 1.2 使用设计模式 第1章～第7章介绍布局样式的基础属性和元素。第8章和第9章介绍如何组合使用这些属性，创建出所有可能的块级、定位和浮动布局。第10章～第12章介绍文本样式的基础属性，以及使用这些属性创建行内布局的组合用法。第13章～第16章将组合前面章节提出的设计模式，加入一些特殊属性和元素，设计出块级、列表、图片、表格和表格列等样式。 第1章～第16章总共介绍了300多种设计模式，通过组合使用45个常用CSS属性、4种元素（行内、行内块级、块式和表格）和5种定位方式（静态、相对、绝对、固定和浮动）。 设计模式的强大之处在于：基础模式经过简单组合就能够创造出一些复杂模式。这种方法能够简化CSS学习过程，提高CSS的使用效率。第17章～第20章介绍如何组合使用这些设计模式，创建出流动布局、首字下沉、突出引用、普通引用和警告框等样式。 为了说明设计模式的简单性和强大功能，接下来我们通过5个例子介绍一组基础设计模式，然后将它们组合为更复杂的模式。在此，读者无需完全理解每一个模式的细节——只要了解模式的组合过程就可以了。 第一个例子说明background属性的使用方法。background是一种CSS内置设计模式，支持在元素之下显示图片。例1-1说明了div元素与background属性的组合用法。这个div的尺寸为250像素×76像素，有足够的空间能显示完整的背景图片[ 这个例子很简单，但是仍组合使用了7个设计模式：第2章的结构化块元素设计模式，第3章的类型选择器模式，第4章的块级框模式，第5章的宽度、高度和设定尺寸模式，以及第6章的背景设计模式。] 。 例1-1 背景图像 HTML <h1>Background Image</h1> <div></div> CSS div { background:url("heading2.jpg") no-repeat; width:250px; height:76px; } 例1-2说明的是绝对定位（Absolute）设计模式。绝对定位设计模式将元素从流中移除，然后将它相对于另一个元素进行重新定位。为此，CSS提供了position:absolute规则。当position: absolute与top和left属性组合使用时，元素就可以相对于最近定位祖先元素的左上角进行定位。这个例子使用position:relative定位div，使之成为span最近定位祖先元素。然后，将span的位置设置为离div顶端和左端各10像素的绝对位置。[ 这个例子很简单，但是仍组合使用了7个设计模式：第2章的行内元素和结构化块元素设计模式，第3章的类选择器模式，第4章的绝对框模式以及第7章的绝对、相对和最近上级元素模式。] 例1-2 绝对定位 HTML <h1>Absolute</h1> <div class="positioned"> <span class="absolute">Sized Absolute</span> </div> CSS *.positioned { position:relative; } *.absolute { position:absolute; top:10px; left:10px; } /* 此处省略了其他一些样式。*/ 例1-3组合使用了前两个例子的设计模式，创建了文本替换（Text Replacement）设计模式。文本替换是在一些文本的位置上显示一张图片（将文本嵌入到图片中，实现更多的格式控制）。此外，将文本置于图片之下，当图片下载失败时，文本便显示出来。 通过组合使用背景和绝对定位设计模式，就可以创建出文本替换模式。在一个标题中加入一个空白span。然后将标题设置为相对定位，这样子元素就能够相对于标题位置进行绝对定位。给span设置一个背景图像，并将它绝对定位到标题元素的文本之上。同时，将span和标题设置为与背景图像完全相同的尺寸。 最后的效果是，span的背景图片覆盖标题文本，而如果图片下载失败，标题中带格式的文本就会显示出来。[ 文本替换例子使用了前两个例子介绍的14个设计模式，同时还加入了第3章的ID选择器设计模式。第10章将深入介绍文本替换设计模式。] 例1-3 文本替换 HTML <h1>Text Replacement</h1> <h2 id="h2" >Heading 2<span></span></h2> CSS #h2 { position:relative; width:250px; height:76px; overflow:hidden; } #h2 span { position:absolute; width:250px; height:76px; left:0; top:0; background:url("heading2.jpg") no-repeat; } 例1-4说明的是左旁注（Left Marginal）设计模式。这个模式将一个或多个元素移到块级元素的左边，这样标题（或注释、图片等）就显示在左边，而内容则显示在右边。[ 左外边距设计模式组合使用了第3章的位置选择器设计模式、第6章的外边距模式，第4章的绝对框模式以及第7章的绝对、相对和最近上级模式。] 例1-4 左外边距 HTML <h1>Left Marginal</h1> <div class="left-marginal" > <h2 class="marginal-heading">Heading</h2> You want to excerpt an element and move it into the left margin.</div> CSS *.left-marginal { position:relative; margin-left:200px; } *.marginal-heading { position:absolute; left:-200px; top:0; margin:0; } 例1-5说明的是旁注式图片下沉（Marginal Graphic Dropcap）设计模式。这个模式组合使用了前面4个例子的全部设计模式，并利用文本替换和左外边距设计模式的优点，在块元素左边创建一个图片下沉效果。[ 第18章将深入介绍旁注式图片下沉设计模式。] 为了实现这样的效果，需要使用indent类将段落设置为相对定位，使之成为下沉内容的最近定位祖先元素，并且给段落增加120像素的左外边距，给下沉内容预留足够的空间。使用graphic-dropcap类将下沉内容设置为绝对定位，将它移到段落左边，并将它设置为与下沉图片相同的尺寸。然后，将下沉图片内的span设置为绝对定位，将它移到下沉文本之上，用它的背景图片覆盖文本。 单从它本身来看，旁注式图片下沉模式本身比较复杂，它组合使用了16余种设计模式。另外，如果将它分解成文本替换和左旁注设计模式，那么这个模式就显得很简单。这正是设计模式的强大之处。 例1-5 旁注式图片下沉 HTML <h1>Marginal Graphic Dropcap</h1> <p class="indent"><span class="graphic-dropcap" >M<span></span></span>arginal Graphic Dropcap. The letter M has been covered by the dropcap image. Screen readers read the text and visual users see the image. If the browser cannot display the dropcap image, the text becomes visible.</p> CSS *.indent { position:relative; margin-left:120px; } *.graphic-dropcap { position:absolute; width:120px; height:90px; left:-120px; top:0; } *.graphic-dropcap span { position:absolute; width:120px; height:90px; margin:0; left:0; top:0; background:url("m.jpg") no-repeat; } 1.3 使用样式表 样式可以放在3个位置，样式表、<style>标签和style属性。 样式表（Stylesheet）是一个独立文件，可以使用<link>元素和CSS的@import语句，就可以将其附加到HTML文档。<style>是一个HTML元素，可以嵌入到HTML文档。style是所有HTML元素都支持的一个属性。 建议将样式保存在样式表中。这样能够减少HTML文档中的非内容元素，并且将所有样式保存在文件中也可以方便管理。 推荐使用一个全小写单词来命名样式表。这样既可以使样式表命名简单易记，也能够保证它在所有操作系统上都能正常运行。建议使用一个能够描述样式表适用范围和用途的名称，如site.css、page.css、handheld.css、print.css等。样式表的标准扩展名是.css。标准互联网媒体类型则为text/css。 推荐使用样式表的位置来控制其范围。如果一个样式表适用于整个网站，那么应该将它保存在网站的根目录。如果一个样式表只适用于某个文档，那么应该将其保存在该文档相同的目录中。另一种网站文件组织方式是将所有样式表保存在一个目录中。 在HTML文档的<head>部分加入一个<link>元素，就可以将样式表链接到HTML文档，而<link>元素的href属性可以指定样式表的URI。代码清单1-1显示的是本书所有例子使用的样式表链接。第2章的页头元素（Header Element）和条件样式表（Conditional Stylesheet）设计模式会更深入介绍样式表的链接方法。 代码清单1-1 添加样式表 <link rel="stylesheet" href="site.css" media="all" type="text/css" /> <link rel="stylesheet" href="page.css" media="all" type="text/css" /> <link rel="stylesheet" href="print.css" media="print" type="text/css" /> <!--[if lte IE 6]> <link rel="stylesheet" href="ie6.css" media="all" type="text/css" /> <![endif]--> 为了加快下载速度，可以将本页面专用的样式保存在页面的<style>元素中，而不是保存在一个独立的页面专用样式表中。因为这个样式是页面专用的，所以在页头保存这些样式并没有坏处。但是，我强烈反对使用HTML元素的style属性，因为这样会增加代码的维护难度。 1.4 CSS语法 CSS语法很简单。一个样式表包含若干样式，一个样式包含若干选择器和规则，而一条规则则又会包含一个属性和一个值。下面是一个样式的设计模式： SELECTORS { RULES } 下面是一条规则的设计模式： PROPERTY:VALUE; 例如，p{margin:0;}是一个样式。p是选择器，可用于选择HTML文档中的所有<p>元素。花括号（{}）将规则margin:0;赋给选择器p。冒号（:）操作符将值0赋给属性margin。分号（;）表示规则结束。 一个样式可以包含一个或多个选择器和一条或多条规则。例如，p.tip{margin:0; lineheight: 150%;}是一个样式。花括号将两个规则margin:0;和lineheight:150%;组合成一个规则集，然后将它赋值给选择器p.tip，它的作用是选择HTML文档中的所有<p class="tip">元素。 1.4.1 CSS语法详解 CSS语法有以下关键点： CSS文件必须使用Unicode UTF-8编码作为编码格式——HTML文件也应采用相同编码格式。 CSS代码必须小写。在XHTML中，选择器在引用元素名称、类、属性和ID时区分大小写。[ 在HTML中，CSS选择器不区分大小写。]CSS属性和值则不区分大小写。为了保持简单和统一，我喜欢在所有的CSS代码中统一使用小写字母，其中包括元素、类和ID。 元素名称、类名和ID只能使用字母、数字、下划线（_）、连字符（-）和Unicode字符161个或以上的字符。除下划线和连字符以外，其他类名和ID一定不能够包含的标点符号。例如，my_name2-1是一个有效的类名或ID，但是以下名称则是无效的：1、1my_name、-my_name、my:name、my.name和my,name。 使用空格分隔多个类名，如class="class1 class2 class3"，就能够将多个类同时赋值给一个元素。 常量值不能加引号。例如，color:black;是正确的，而color:"black"是错误的。 反斜杠（）可用于插入一些特定情况下不能出现的字符。例如，在字符串或标识符中，可以使用26B表示&。反斜杠后面可以加任意2～8位的十六进制码，也可以加字符。 字符串可以包含括号、逗号、空格、单引号（'）和双引号（"），但是必须加反斜杠进行转义，例如： "embedded left parentheses ( " "embedded right parentheses ) " "embedded comma , " "embedded single quote ' " "embedded double quote " " "embedded single quote ' in a double-quoted string" 'embedded double quote " in a single-quoted string' 每一个CSS规则和@import语句都必须以分号结束。 color:red; @import "mystylesheet.css"; 使用花括号可以将多个规则组合成规则集，例如： { color:red; font-size:small; } 除非加双引号转换为一个字符串（如"}"），否则右花括号（}）表示一组属性结束。 CSS注释以/*开头，以*/结束，例如：/* This is a CSS comment */。注释不可以嵌套。因此，在样式表中，当浏览器遇到*/时，表示注释结束。如果后面再出现/*，它也不会被当作是注释。例如： /* 这样的注释不正确 /* 因为注释不允许 /* 嵌套。*/ 从这里开始，文字位于注释之外！*/ */ 1.4.2 在CSS中使用空白字符 CSS只支持以下空白字符（Whitespace）：空格（20）、制表符（ 9）、换行符（ A）、回车符（ D）和跳页符（ C）。浏览器不支持其他的Unicode空白字符，如非断字连接符（A0）。 空白字符可以位于以下元素之前或之后：选择器、花括号、属性、冒号、值和分号。例如，下面所有语句都是正确的，而且都可以产生完全相同的结果： body{font-size:20px;line-height:150%;} body { font-size:20px; line-height:150%; } body { font-size : 20px ; line-height : 150%; } body { font-size: 20px; line-height: 150%; } 本书使用紧凑的编码风格，即规则内不添加空格，而规则与选择器之间添加一个空格，如下所示： body { font-size:20px; line-height:150%; } 属性名称或常量属性值中不能出现空格。当使用多个单词表示一个CSS属性名称或常量属性值时，应该使用连字符分隔单词，如font-family和sans-serif。在少数情况下，CSS使用驼峰格式（Camel Case）单词组合方式来表示常量值，如ThreeDLightShadow。 1.4.3 使用属性值 属性值采用以下形式表示：常量文本、常量数字、长度、百分数、函数、逗号分隔值和空格分隔值。每一个属性都可以接受其中一种或多种值。 在例1-6中，我使用了所有常见类型的值，但是现在先对它们进行逐一讲解。 color:black; 将color属性设置为常量值black。大多数属性都具有一些特定的常量值。例如，color属性可以赋值170多个颜色常量，表示从papayawhip到ThreeDDarkShadow的颜色范围。 background-color:white; 将backgroundcolor属性设置为常量值white。注意，下面3个规则的效果与这条规则相同，但是它们使用了不同类型的属性值。样式的颜色属性还常常使用十六进制值，如background-color:#000000;。 background-color:rgb(100%,100%,100%); 将background-color设置为CSS函数rgb()的返回值。rgb()在括号中接收3个以逗号分隔的参数，分别指定颜色的红、绿和蓝颜色值。这个例子使用的是百分比值。每一个颜色值均设为100%时，则表示白色。 background-color:rgb(255,255,255); 将background-color设置为白色。这个例子使用的是0～255的值取代百分数。0表示无颜色。255相当于100%颜色值。红、绿和蓝均为255则表示白色。 background-color:WindowInfoBackground; 将background-color设置为操作系统颜色WindowInfoBackground。注意，操作系统颜色常量采用驼峰格式表示[ 每当给同一个元素指定相同的属性时，新规则会覆盖前一个规则。由于这个例子在一行中包含了4个background-color规则，所以最终生效的是最后一个规则。]。 font-style:italic; 将font-style设置为常量值italic。Fonts-style属性还支持另外两个常量值：normal和oblique。 font-size:20px; 将font-size设置为20像素。大多数属性都支持不同类型的度量单位，其中包括px（像素）、em（字体或font-size的高度）、ex（字母x的高度）、pt（点距，即1/72英寸）、in（英寸）、cm（厘米）、mm（毫米）和pc（12点活字，即12个点距或1/6英寸）。 font-family:"Century Gothic", verdana, arial, sans-serif; 将font-family设置为一组以逗号分隔的字体名称。如果第一种字体无效，那么浏览器会使用第二种字体，依此类推。最后一种字体必须是一种常用字体：serif、sans-serif、cursive、fantasy、monospace，它们是所有浏览器都支持的字体。如果字体名带有空格，则必须加上引号，如"Century Gothic"。 line-height:150%; 将line-height设置为font-size值的150%。 margin:1em;将margin设置为字号的１倍大小（即font-size乘以1）。 border:4px double black; 将边框设置宽4像素的黑色双实线。注意，border使用３个空格分隔的值，分别表示边框的宽度、样式和颜色。这３个值的顺序可以任意排列。border是３个属性的简写属性：border-width、border-style和border-color。其他的简写属性还有：background、font、liststyle、margin和padding。 padding:0.25em; 将padding（内边距）设置为字号的四分之一（即font-size乘以0.25）。 background-image:url("gradient.jpg"); 使用url函数将background-image设置为gradient. jpg图片。url函数只有一个参数，即文件的URL。我总是将URL加到双引号中，但是只有URL包含空格时才必须添加双引号。 background-repeat:repeat-x; 将background-repeat设置为常量值repeat-x。还可将background- repeat设置为repeat-y、repeat或no-repeat。 margin:0; 将margin设置为0。0是唯一不使用度量单位的值。所有其他长度都必须在尺寸值后面加上度量单位，如1px、-1.5em、2ex、14pt、0.5in、3cm、30mm或5pc。 font-weight:900; 将font-weight设置为常量900。这个数值实际上是一个常量。可以将font-weight属性设置为常量normal、bold、bolder、lighter、100、200、300、400、500、600、700、800或900。（注意，浏览器对于用数字表示的字体粗细支持很差，它们通常将100～400视为normal，将500～900视为bold。而且，浏览器和操作系统字体很少支持bolder和lighter。因此，在font-weight属性中，我很少使用除normal或bold以外的值。） 在本章后面，我将用4页图表列举所有可用的CSS属性和值。color是图表中唯一一个未完整列举所有可用值的属性。图表只显示了170个颜色常量中的79个。这79个颜色常量分成了3组：16种按色调排列的标准颜色，35种按色调由亮到暗排列的常用颜色，以及28种操作系统颜色。在本书中，我经常使用颜色gold、wheat、orange、tomato、firebrick以及yellow。 小贴士 在属性名称之前加上数字1（或者任意字符），就可以禁用一个规则，如1background- color:white。这种方法可以使规则失效，但是只针对一种规则。这条无效规则前后的其他有效规则都不会受到影响。我经常使用这种方法来临时禁用一条规则的显示效果，从而测试其他规则的显示效果。 例1-6 简单的CSS语法 HTML <!DOCTYPE html> <html lang="en"> <head><title>CSS Syntax</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="page.css" media="all" type="text/css" /> <style><!-- body { color:black; background-color:white; background-color:rgb(100%,100%,100%); background-color:rgb(255,255,255); background-color:WindowInfoBackground; } --></style> </head> <body> <p>CSS syntax is <span style="font-style:italic;">EASY!</span></p> </body> </html> CSS body { font-family:"Century Gothic",verdana,arial,sans-serif; font-size:20px; line-height:150%; margin:1em; border:4px double black; padding:0.25em; background-image:url("gradient.gif"); background-repeat:repeat-x; } p { margin:0; } span { font-weight:900; } 1.5 使用层叠顺序 CSS支持给同一个元素多次设置相同的规则，这就是所谓竞争规则（Competing Rule）。浏览器使用层叠顺序来确定一组竞争规则中真正生效的规则。例如，浏览器会给每一个元素设置默认规则。当给一个元素设置规则时，这个规则会与默认规则竞争，但是由于它具有较高的层叠优先级，所以它会覆盖默认规则。 层叠顺序会根据规则使用的选择器类型将规则划分为6组。高优先级分组的规则将覆盖低优先级分组的竞争规则。这些分组按照各个选择器的特殊性进行划分。优先级越低，那么这一分组的选择器的特殊性越低。 层叠顺序的基本原则是用一般（general）选择器设置文档总体样式，用特殊（specific）选择器覆盖一般选择器,从而设置特殊样式。 例如，使用*{margin-bottom:0;}可以将文档所有元素的底部外边距设置为0；使用p{margin- bottom: 10px;}可以将文档所有段落的底部外边距设置为10像素；使用*.double-space {margin-bottom:2em;}，可以将设置double-space类的少数段落的底部外边距设置为2em；而使用#paragraph3 {margin- bottom:40px;}，则可以将一个段落的底部外边距设置为超大的40像素。在这些例子中，层叠顺序保证了较为特殊的选择器能够覆盖一般的选择器。 下面是优先级由高到低排列的6种选择器分组。 (1) 添加了!important规则的分组享有最高优先级。它们会覆盖所有不带!important的规则。例如，#i100{border:6px solid black!important;}的优先级高于#i100{border:6px solid black;}。 (2) 第二优先级分组是style属性所嵌入的规则。由于使用style属性的代码难以维护，所以不推荐使用这种方法。 (3) 第三优先级分组是具有一个或多个ID选择器的规则。例如，#i100{border:6px solid black;}的优先级高于*.c10{border:4px solid black;}。 (4) 第四优先级分组是具有一个或多个类、属性或伪选择器的规则。例如，*.c10{border:4px solid black;}优先级高于div{border:2px solid black;}。 (5) 第五优先级分组是具有一个或多个元素选择器的规则。例如，div{border:2px solid black;}优先级高于*{border:0px solid black;}。 (6) 最低优先级分组是指那些只包含通配选择器的规则，例如*{border:0px solid black;}。 如果竞争规则属于同一个选择器分组（假设两个规则都包含ID选择器），那么它们的优先级会进一步根据选择器的类型和数量进行比较。如果一个选择器比竞争选择器具有更多高优先级选择器，那么这个选择器的优先级就更高。例如，#i100 *.c20 *.c10{}的优先级高于#i100 *.c10 div p span em{}。因为二者都含有ID选择器，所以它们都属于第三优先级分组。因为第一条规则包含两个类选择器，而第二条规则只有一个类选择器，所以第一条规则的优先级更高——即使第二条规则具有为数更多的选择器。 如果竞争规则属于相同的选择器分组，并且具有相同数量和级别的选择器，那么它们会进一步按照位置进行优先级比较。所有属于高优先级位置的规则会覆盖低优先级位置的规则。（同样，这个方法有效的前提是竞争规则位于同一个选择器分组，并且具有相同数量和级别的选择器。选择器分组总是优先于位置分组。） 下面是优先级由高到低排列的6个位置。 (1) 最高优先级的位置是HTML文档头部的<style>元素。例如，<style>元素的规则会覆盖<style>元素中@import语句所导入的样式表中所包含的竞争规则。 (2) 第二优先级的位置是<style>元素中@import语句所导入的样式表。例如，<style>元素中@import语句导入的样式表规则会覆盖<link>元素附加的样式表规则。 (3) 第三优先级的位置是<link>元素附加的样式表。例如，<link>元素附加的样式表规则会覆盖样式表中@import语句所导入的竞争规则。 (4) 第四优先级的位置是<link>元素附加的样式表中@import语句所导入的样式表。例如，链接样式表中@import语句导入的规则会覆盖最终用户附加的样式表的竞争规则。 (5) 第五优先级的位置是最终用户附加的样式表。 有一种例外情况是最终用户样式表中的!important规则。这些规则具有最高优先级。这样，最终用户就能够创建一些规则，覆盖初始样式表中的竞争规则。 (6) 最低优先级的位置是浏览器提供的默认样式表。 如果在同一个位置级别上附加或导入了多个样式表，那么它们的优先级由附加的顺序决定。后面附加的样式表将覆盖前面附加的样式表。 如果竞争规则属于同一个选择器分组，具有相同数量和等级的选择器，并且具有相同的位置级别，那么代码中位置较后的规则会覆盖前面的规则。 在例1-7中，样式表中每一条规则都会应用于div元素上。每一条规则都给<div>设置不同的border-width。层叠顺序决定了实际应用的规则。我把样式表中的样式按照重要性从低到高的层叠顺序进行排列。从截图中可以看到，浏览器将最后一条规则应用到<div>上，将<div>的边框宽度设置为14像素。浏览器之所以选择这条规则，是因为它具有最高优先级的层叠顺序，它附加了!important的ID选择器。 注意，ID选择器覆盖类选择器，类选择器覆盖元素选择器，元素选择器又覆盖通配选择器。而且，!important会使选择器获得更高一级的重要性。例如，添加!important的通配选择器优先级高于未添加!important的ID选择器。 注意，body和html选择器的border-style:none!important;会覆盖通配选择器*，从而去掉<body>和<html>的边框。这也说明了元素选择器会覆盖通配选择器。 例1-7 层叠顺序 HTML <body> <div id="i100" class="c10">!important has highest priority.</div> </body> CSS html, body { border-style:none!important; } * { border:0px solid black; } /*通配选择器*/ div { border:2px solid black; } /*元素选择器*/ *.c10 { border:4px solid black; } /*二级选择器*/ #i100 { border:6px solid black; } /* ID选择器*/ { border:8px solid black!important; } /* !通配选择器*/ div { border:10px solid black!important; } /* !元素选择器*/ *.c10 { border:12px solid black!important; } /* !二级选择器*/ #i100 { border:14px solid black!important; } /* !ID选择器*/ 1.6 简化层叠顺序 为了简化层叠顺序，我减少了样式表数量，并且不使用@import语句。此外，要避免使用!important操作符。最重要的是，我对选择器进行了排序，这样，它们在每一个样式表中都是按层叠顺序排列。 我将样式表分成6组。首先是通配选择器，接着是元素选择器、类选择器、属性选择器、伪选择器和ID选择器。最后，将带有!important的选择器排在ID选择器之后。 将样式表按层叠顺序进行排序，可以直观地说明ID选择器会覆盖所有类选择器、属性选择器、伪选择器、元素选择器和通配选择器，与它们在各个样式表中的位置无关。同样，这种方法也说明了每一个样式表中的类选择器、属性选择器和伪选择器都会覆盖所有的元素选择器和通配选择器，同样与它们出现的位置无关。 将规则按层叠顺序排列，可以直观明了地说明规则的应用顺序，并且简化对各个规则覆盖顺序的理解。我按照下面的方式将规则按层叠顺序进行排列： /* 通配选择器 */ /* 元素选择器 */ /* 类、属性和伪选择器 */ /* ID选择器 */ /* !important通配选择器 */ /* !important元素选择器 */ /* !important类、属性和伪选择器 */ /* !important ID选择器*/ 1.7 CSS和HTML链接 描 述 URL W3C的CSS首页 W3C CSS 2.1规范 W3C CSS 验证器服务 W3C HTML验证器服务 W3C移动Web验证器 W3C HTML首页 W3C HTML 4.01规范 W3C XHTML 1.0规范 W3C移动Web最佳实践1.0 W3C可访问性计划 HTML 5工作小组 Mozilla开发者中心 Microsoft Web研讨会 Opera Web规范 Apple Safari开发者网络 网页设计资源 www.w3.org/Style/CSS www.w3.org/TR/CSS21 jigsaw.w3.org/css-validator validator.w3.org validator.w3.org/mobile www.w3.org/MarkUp www.w3.org/TR/html401 www.w3.org/TR/xhtml1 www.w3.org/TR/mobile-bp www.w3.org/WAI www.whatwg.org developer.mozilla.org/en/docs msdn.microsoft.com/workshop/author/css/ css_node_entry.asp www.opera.com/docs/specs developer.apple.com/internet/safari www.welie.com/patterns microformats.org www.alistapart.com www.simplebits.com/notebook www.positioniseverything.net css.maxdesign.com.au csszengarden.com meyerweb.com/eric/css （续） 描 述 URL 网页设计教程 工具 CSS邮件列表 www.w3schools.com www.westciv.com/style_master/house developer.yahoo.com dean.edwards.name/my/cssQuery addons.mozilla.org/firefox/60 addons.mozilla.org/firefox/179 css-discuss.org babblelist.com 1.8 CSS常用属性 display margin text-indent visibility margin-left text-align margin-right float margin-top color clear margin-bottom font position border font-family z-index border-left font-size overflow border-left-color font-style cursor border-left-width font-variant border-left-style font-weight left border-right text-decoration right border-right-color text-transform width border-right-width min-width border-right-style vertical-align max-width border-top line-height top border-top-color white-space bottom border-top-width word-spacing height border-top-style etter-spacing min-height max-height border-bottom direction border-bottom-color unicode-bidi border-bottom-width /*很少用-------*/ border-bottom-style /*标题栏 */ /*裁剪 */ padding list-style /*内容 */ padding-left list-style-type /*空单元格 */ padding-right list-style-position /*大纲 */ padding-top list-style-image /*大纲颜色 */ padding-bottom /*大纲样式 */ border-collapse /*大纲宽度 */ background table-layout /*引用 */ background-color /*孤本 */ background-image page-break-after /*内部换页 */ background-repeat page-break-before /*窗口 */ background-attachment /*--------------------------*/ background-position 1.9 CSS属性与值：常用 下面的代码清单只包含所有主流浏览器都支持的CSS属性与值。属性前的字母“i”表示属性是继承的。斜体表示默认值。有一些值表示多个可能值的符号。例如，LENGTH表示0、auto、none和所有度量单位值（%、px、em、ex、pt、in、cm、mm和pc）。 常用属性适用于所有元素和框模型。 display: inline, none, block, inline-block, list-item, table-cell, table, table-row i visibility: visible, hidden background-color: transparent, COLOR background-image: none, url("file.jpg") background-repeat: repeat, repeat-x, repeat-y, no-repeat background-attachment: scroll, fixed background-position: 0% 0%, H% V%, H V, left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom border: WIDTH STYLE COLOR border-width: medium, LENGTH, thin, thick border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color: black, COLOR border-left: WIDTH STYLE COLOR border-left-width: same as border-width border-left-style: same as border-style border-left-color: same as border-color border-right: WIDTH STYLE COLOR border-right-width: same as border-width border-right-style: same as border-style border-right-color: same as border-color border-top: WIDTH STYLE COLOR border-top-width: same as border-width border-top-style: same as border-style border-top-color: same as border-color border-bottom: WIDTH STYLE COLOR border-bottom-width: same as border-width border-bottom-style: same as border-style border-bottom-color: same as border-color i cursor: auto, default, pointer, help, wait, progress, move, crosshair, text, n-resize, s-resize, e-resize, w-resize 1.10 CSS属性与值：内容 内容属性适用于除表格行以外的所有元素。 padding: 0, LENGTH padding-left: 0, LENGTH padding-right: 0, LENGTH padding-top: 0, LENGTH padding-bottom: 0, LENGTH i font: caption, icon, menu, message-box, small-caption, status-bar i font-family: serif, FONTLIST, sans-serif, monospace, fantasy, cursive i font-size: medium, LENGTH, %ParentElementFontSize, xx-small, x-small, smaller, small, large, larger, x-large, xx-large i font-style: normal, italic, oblique i font-variant: normal, small-caps i font-weight: normal, lighter, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900 i text-decoration: none, underline, line-through, overline i text-transform: none, lowercase, uppercase, capitalize i direction: ltr, rtl unicode-bidi: normal, bidi-override, embed i line-height: normal, LENGTH, %FontSize, MULTIPLIER i letter-spacing: normal, LENGTH i word-spacing: normal, LENGTH i white-space: normal, pre, nowrap i color: #rrggbb, #rgb, rgb(RED,GREEN,BLUE), rgb(RED%,GREEN%,BLUE%) black, gray, silver, white, red, maroon, purple, fuchsia, lime, green, olive, yellow, blue, navy, teal, aqua, violet, fuschia, red, maroon, black wheat, gold, orange, tomato, firebrick lightyellow, yellow, yellowgreen, olive, darkolivegreen palegreen, lime, seagreen, green, darkgreen lightcyan, cyan, turquoise, teal, midnightblue lightskyblue,deepskyblue,royalblue, blue, darkblue whitesmoke, lightgrey, silver, gray, dimgray, darkslategray ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText 1.11 CSS属性与值：布局 浮动属性适用于除单元格和行以外的所有元素。 float: none, left, right 复位属性适用于除行内、行内块、单元格和行以外的所有元素。 clear: none, left, right, both 定位属性适用于除单元格和行以外的所有元素。 position: static, relative; absolute, fixed left: auto, LENGTH, %WidthOfContainingBlock right: auto, LENGTH, %WidthOfContainingBlock top: auto, LENGTH, %HeightOfContainingBlock bottom: auto, LENGTH, %HeightOfContainingBlock z-index: auto, INTEGER 水平外边距属性适用于除单元格和行以外的所有元素。 margin: 0, LENGTH, %WidthOfContainingBlock, auto margin-left: 0, LENGTH, %WidthOfContainingBlock, auto margin-right: 0, LENGTH, %WidthOfContainingBlock, auto 垂直外边距属性适用于除行内、单元格和行以外的所有元素。 margin: 0, LENGTH, %WidthOfContainingBlock, auto margin-top: 0, LENGTH, %WidthOfContainingBlock, auto margin-bottom: 0, LENGTH, %WidthOfContainingBlock, auto 宽度属性适用于除行内与行以外的所有元素。 width: auto, LENGTH, %WidthOfContainingBlock min-width: 0, LENGTH, %WidthOfContainingBlock max-width: none, LENGTH, %WidthOfContainingBlock 高度属性适用于除行内和表格以外的所有元素。 height: auto, LENGTH, %HeightOfContainingBlock min-height: 0, LENGTH, %HeightOfContainingBlock max-height: none, LENGTH, %HeightOfContainingBlock 内容布局属性适用于除行内、表格和行以外的所有元素。 i text-indent: 0, LENGTH, %WidthOfContainingBlock i text-align: left, center, right, justify overflow: visible, hidden, auto, scroll 1.12 CSS属性与值：专用 列表属性仅适用于列表元素。 i list-style: TYPE POSITION IMAGE i list-style-type: disc, circle, square, none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman i list-style-position: outside,inside i list-style-image: none, url("file.jpg") 表格属性仅适用于表格元素。 i border-collapse: separate, collapse table-layout: auto, fixed 单元格属性仅适用于单元格元素。 vertical-align: baseline, bottom, middle, top 行内属性仅适用于行内和行内块元素。 vertical-align: baseline, LENGTH, %LineHeight, text-bottom, text-top, middle, top, bottom 换页属性仅适用于块和表格元素。 page-break-after: auto, always, avoid page-break-before: auto, always, avoid 1.13 选择器 * {} 选择所有元素 p {} 选择所有<p>元素 *.c {} 选择所有class="c"的元素 p.c {}选择所有class="c"的<p>元素 #main {} 选择id ="main"的一个元素 a:link {} 选择所有未访问的超链接 a:visited{} 选择所有已访问的超链接 a:hover {} 选择所有鼠标悬停的超链接 a:active {} 选择当前激活的超链接 a:focus {} 选择所有聚焦的超链接 p:first-letter {} 选择所有<p>元素的第一个字母 p:first-line {} 选择所有<p>元素的第一行 p:first-child {} 选择所有<p>元素的第一个子元素 tr:nth-child(even) 选择表格的偶数行 tr:nth-child(2n+0) 同上 tr:nth-child(2n+0) 同上 tr:nth-child(10n+9) 同上 #n *.c :first-line {} 选择第9、19、29……行 #n > *.c > :first-line {} 子元素选择器示例 #n + *.c + :first-line {} 友邻元素选择器示例 #n , *.c , :first-line {} 给不同的选择器应用相同的属性 *[title] {} 选择所有带title属性的元素 *[title~="WORD"] {} 选择所有title属性包含"WORD"的元素 *[title="EXACT_MATCH_OF_ENTIRE_VALUE"] {} 选择与属性值完全匹配的所有元素 1.14 媒体查询 长期以来，CSS一直都支持设置与媒体相关联的样式表，它们可以适合不同媒体类型的显示。例如，文档在屏幕显示时使用sans-serif字体，在打印时则使用serif字体。screen和print是两种预定义的媒体类型。 在HTML4中，媒体样式表的写法是： <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> 在CSS3中，媒体查询（Media Queries）扩展了媒体类型功能，支持更为精准的样式表标签。媒体查询由媒体类型和若干表达式组成，表达式负责检查特定媒体特性的条件。通过使用媒体查询，我们不需要修改网页内容，就可以使文档显示适应特定的输出设备。媒体查询是一个逻辑表达式，其结果为真（true）或假（false）。如果媒体查询的媒体类型与用户客户端所在设备媒体类型相匹配，并且媒体查询的所有表达式都为真，那么它就返回真。 下面是一些媒体查询例子： <-- !应用于支持指定特性（彩色）的特殊媒体类型('screen')--> <link rel="stylesheet" media="screen and (color)" href="example.css" /> <!--写在CSS的@import-rule语句中 --> @import url(color.css) screen and (color); 媒体查询有一种适用所有媒体类型的简写语法，其中关键词all可以省略（后面的and也可以省略）。例如，下面两条语句是相同的： @media (orientation: portrait) { … } @media all and (orientation: portrait) { … } 设计者和开发者可以使用这种方法创建出满足特殊需求的复杂查询： @media all and (max-width: 698px) and (min-width: 520px), (min-width: 1150px) { body { background: #ccc; } } 媒体特性有很多，其中包括： width和device-width； height和device-height； orientation； aspect-ratio和device-aspect-ratio； color和color-index； monochrome（如果不是monochrome设备，则等于0）； resolution； scan（指tv输出设备的扫描过程）； grid（指输出设备为栅格型或位图型）。 1.15 灵活尺寸单位 单 位 说 明 em em是指元素设置的font-size值。对于font-size属性，它指的是父元素的font-size。例如，5em表示font-size的5倍。如果要相对于文字大小设置元素尺寸，那么非常适合使用em作为度量单位。使用这种方法，可以实现根据文本大小自动调整文档布局 使用em可以粗略地设置元素宽度，使之适合显示特定个数的字符。计算方法就是将字符数乘以0.625，得到em值。例如，如果想要将元素宽度设置为10个字符，那么要将它设置为6.25em 在Internet Explorer 7及之前的版本中，用户可以使用“查看→字体大小”菜单来放大或缩小文字的总尺寸。如果将<body>设置为font-size:medium，并且在所有font-size属性上都使用em，那么Internet Explorer会将文字大小设置为用户所选文字大小。这样，用户在大字号或小字号显示状态下都可以正常浏览文档。如果将font-size设置为固定度量单位，那么Internet Explorer会使用固定度量单位值，而忽略用户所选文字大小 ex ex表示元素当前字体下字母x的高度。这个度量单位与em有关，但是很少使用 1.16 固定度量单位 单 位 说 明 in in表示逻辑英寸 in指的是“逻辑”英寸，因为实际的物理尺寸取决于显示器及操作系统或用户选择的设置。显示器的点距决定了像素的物理尺寸，从而也决定了逻辑英寸的物理尺寸。不同的操作系统有不同的点距配置。常见的点距值有72 dpi（Macintosh）、75 dpi（Unix）、96 dpi（Windows普通尺寸）、100dpi（Unix大尺寸）和120 dpi（Windows大尺寸）。由于显示器上点的尺寸是固定的，因此逻辑英寸120 dpi在物理上大于72 dpi（因为它包含更多的点）。所以，将元素的width设置为96px，效果等同于Windows上的1in和72 dpi下Mac的1.33in 逻辑英寸及所有其他固定度量单位都存在一个问题，它们无法根据系统上每英寸的点数进行缩放。在Windows 96 dpi上显示正常的页面可能在其他系统上显示不正常。因此，百分比或em更适合用来实现跨平台兼容性 Px px表示像素。像素适合用来设置元素与图片的准确对齐，因为图片也以像素为单位 pt pt表示点。一个点相当于1/72逻辑英寸 pc pc表示十二点活字。一个活字等于12个点，或者1/6逻辑英寸 cm cm表示逻辑厘米。每一个逻辑英寸等于2.54厘米 mm mm表示毫米。每一个逻辑英寸等于25.4毫米 1.17 96 dpi下度量单位的换算 值 像 素 点 活 字 英 寸 毫 米 1像素 = 1px = 0.75pt (3/4) =0.063pc(1/16) =0.0104in(1/96) = 0.265mm 1 点 = 1.333px (4/3) = 1pt =0.083pc(1/12) =0.0138in(1/72) = 0.353mm 1 个活字 = 16px = 12pt = 1pc = 0.1667in (1/6) = 4.233mm 1 英寸 = 96px = 72pt = 6pc = 1in = 25.4mm 1 毫米 = 3.779px = 2.835pt = 4.233pc = 0.039in = 1mm 1.18 96 dpi下的常用字号 CSS ems 点 像 素 百 分 比 标 题 HTML 物理尺寸 xx-small 0.50em 6pt 8px 50% 10像素 0.57em 7pt 9px 57% 12像素 x-small 0.63em 7.5pt 10px 63% h6 1 12像素 0.69em 8pt 11px 69% 13像素 0.75em 9pt 12px 75% 2 14像素 small 0.82em 9.75pt 13px 82% h5 16像素 0.88em 10.5pt 14px 88% 17像素 0.94em 11.25pt 15px 94% 18像素 medium 1em 12pt 16px 100% h4 3 18像素 1.08em 13pt 17px 108% 20像素 large 1.13em 13.5pt 18px 113% h3 4 22像素 1.17em 14.pt 19px 117% 23像素 1.25em 15.pt 20px 125% 25像素 1.38em 16.5pt 22px 138% 26像素 x-large 1.50em 18pt 24px 150% h2 5 29像素 1.75em 21pt 28px 175% 34像素 xx-large 2em 24pt 32px 200% h1 6 38像素 1.19 过渡、动画与2D变换 CSS过渡规范允许CSS属性值在指定时间间隔中平滑地变化。通常，当CSS属性值改变时，渲染结果会立刻更新，如果使用CSS过渡，我们就能够从旧状态慢慢平滑地变化到新状态。 下面是一个例子： #box { transition-property: opacity, left; transition-duration: 3s, 5s; } 上面的代码给opacity属性添加3秒钟的过渡过程，给left属性添加5秒的过渡过程。 CSS动画与过渡类似，也是逐渐修改CSS属性的表现值。它们的主要区别在于，过渡是在属性值发生变化时自动触发，而动画则需要在动画属性生效时显式地执行。因此，动画需要显式设置动画属性的值。这些值由关键帧指定。 我们可以规定动画重复次数，变化范围的begin值和end值，动画的运行或暂停等。 下面是一个例子： #warning { animation-name: 'horizontal-slide'; animation-duration: 5s; animation-iteration-count: 10; } @keyframes 'horizontal-slide' { from { left: 0; } to { left: 100px; } } 这个动画在5秒钟内将#warning水平移动100像素，然后重复9次，总共为10次。 CSS 2D变换规范允许通过CSS实现元素的二维变换。下面是一个例子： #box { height: 100px; width: 100px; transform: translate(50px, 50px) scale(1.5, 1.5) rotate(90deg); } 上面的例子同时在X和Y方向将#box移动50像素，并且将元素放大为1.5倍，然后再以Z轴为中心顺时针旋转90°。 1.20 修复CSS错误 我们可以通过下面的步骤修复错误的样式表。按照此处所列步骤的顺序，就可以快速解决问题。 (1) 验证HTML文档的有效性。保证文档不存在语法问题，这样浏览器才能按预期解析文档结构。开发者可以使用W3C验证服务（http://validator.w3.org/）、W3C麒麟验证器（http://validator.w3. org/unicorn/）或者各种浏览器插件进行标签和样式验证。 (2) 验证每一个CSS样式表。保证样式表不存在语法问题，从而保证所有规则都是有效的。 保证在非零度量值之后使用正确的度量单位（UOM），并且数字与UOM之间不能添加空格，如1em或100%。（line-height例外，它允许使用不带单位的非零度量值。） 保证属性名称与值之间只有一个冒号（:），但是可以有若干空格，如width:100%或width：100%。 保证每一条规则均以分号（;）结尾，如width:100%;。 (3) 使用Mozilla浏览器的错误控制台，检查CSS解析错误清单。浏览器会忽略解析出错的规则，但是与其他编程语言不同，它们会继续解析和应用其他的规则。 (4) 确认选择器选择且只选择了全部应该选择的元素。只需要在选择器中添加outline:2px solid invert;，就能够看到选择器的结果。（注意，Internet Explorer 7不支持outline，但是支持border。） (5) 仔细检查每一个没有成功应用的规则的层叠优先级。层叠优先级高于文档顺序。例如，#myid {color:red;}优先级高于*.myclass{color:blue;}，而#myid *.myclass{color:green;}优先级最高，这与它们在样式表的位置无关，而且与它们所在样式表的加载顺序也无关。这经常会导致出现问题，因为具有更高优先级的规则可能位于任意样式表的任意位置。假设已经验证过样式表的有效性，但是发现选择器中有一些属性有效，有一些属性无效，那么无论使用了什么值，往往都 可以确定是层叠优先级出现了问题。而且，一般情况下这都是因为某个具有更高层叠优先级的规则覆盖了其中一些属性。通常，我们可以在属性后添加!important来确认这个问题。!important使属性的优先级高于所有非!important的属性。如果!important使一个属性生效，那么就可以确定发生了层叠优先级问题。 (6) 确认样式表中元素、类和ID的大小写与HTML文档的大小写完全匹配。这是很重要的，因为XHTML区分大小写。可以总是选择使用小写值，以避免出现意外错误。 (7) 仔细检查简写属性，检查规则中是否遗漏了属性值。注意，简写属性会将值赋给它所代表的全部属性，哪怕只设置了一个值。例如，background:blue;会将background-color设置为blue，同时将background-image设置为none，将background-repeat设置为repeat，将background -attachment设置为scroll，以及将background-position设置为0% 0%。如果有一条层叠优先级较高的规则包含background:blue;，而另一条低优先级的规则原本将backgroundimage设置为url("image.jpg")，那么这条规则会被覆盖，背景图片就不会显示，因为简写属性background:blue;已经重写了这个属性，将background-image变成none。 简写属性包括margin、border、padding、background、font和list-style。 font是一个非常复杂的简写属性，因为它组合了许多个属性，而且所有值都是可以继承的！这些属性包括font-family、font-size、font-weight、font-variant、font-style和line-height。注意，即使只给font添加一个值，如font:1em;，浏览器也会给全部属性设置默认值。 (8) 确认浏览器加载了所有样式表。要确认所有样式表都通过HTML文档中<head>部分的<link>语句或样式表中@import语句成功引用。如果不确定一个样式表是否被加载，那么可以在样式表中添加一条特殊规则，然后再检查它是否可以成功应用。这条规则通常要设置非常显眼的效果，如*{border:1px solid black;}。 (9) 避免使用@import语句。如果使用了@import语句，一定要将它们写在样式表开头，保证它的优先级低于样式表中的其他规则。 (10) 确认样式表加载顺序符合要求，将<link>和@import语句按优先级升序排列。在同一层叠级别的规则中，后面链接或导入样式表的规则会覆盖前面的规则。但是，无论规则位于样式表什么位置，无论规则位于链接样式表或是后面导入样式表，较高层叠优先级的规则一定会覆盖较低层叠优先级的规则。 (11) 确认服务器是将text/css作为CSS样式表的Content-Type头信息发送。Mozilla浏览器只接受内容类型为text/css的样式表。在Mozilla浏览器中，选择Web开发者工具条的菜单项View Response Headers（查看响应头），就可以查看HTTP头信息。 (12) 删除CSS样式表中可能存在的HTML元素，如<style>。而且，一定要删除HTML文档头部<style>元素中不小心添加的所有子元素。 1.21 样式表的规范化 由于各个浏览器的默认设置存在差异，我们可能需要在样式表中建立一些规则，用以定义每一个元素的基线设置。例如，不同的浏览器会为<h1>元素设置不同的大小和外边距。通过设置<h1>的大小和外边距，便可以统一它在所有浏览器的显示效果。 最简单（且最容易维护）的方法是，为所有元素创建一组基线规则，然后在文档的第一个样式表加载这些规则。另外，还可以加载少量规则，将所有元素重置为最简单的样式，如代码清单1-2所示。或者，也可以加载更多的规则，创建出网站的标准样式，如代码清单1-3所示。互联网上有许多标准化基线规则，如雅虎YUI Reset CSS规则（参见http://developer.yahoo.com/yui/reset/）。 加载一个独立的基线样式表会影响网页渲染速度（参见补充内容“页面加载速度有多快”）。因此，出于性能的考虑，可能需要将多个样式表组合在一起，或者将它移动到HTML文档的<style>元素中。 代码清单1-2 简单的基线样式表（与Yahoo!的YUI Reset CSS类似） body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p, blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { margin:1em 0; margin-left:40px; padding-left:0; } ul { list-style-type:disc; } ol { list-style-type:decimal; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; } 页面加载速度有多快 文档的渲染速度非常重要。网页在0.5秒内完成渲染称为瞬间渲染，1秒为快速，2秒为正常速度；超过2秒就会引起用户注意,而6秒是大多数宽带用户的容忍极限。一般来说，检索各个文件所造成的延迟通常是0.1～0.5秒，这个数据是在宽带网络上测得的，并且不包括实际下载文件所花费的时间。由于延迟，一个快速的页面一般会加载3个额外的文件，如1个样式表、1个JavaScript文件和1张图片，而一个正常速度的页面可能会下载7个额外的文件。 为了提高性能，浏览器会缓存文件。这对于后续下载是有帮助的，但是它无法优化页面的第一次下载过程。而且，只有在服务器设置的文件过期时间之前，缓存文件才可以提高性能。当一个缓存文件的刷新时间过期时，浏览器就会再次查询服务器，以确定该文件是否作了修改。每一个文件需要花费0.1～0.5秒，即使文件没有修改且不需要再次下载。因此，一定要将文件过期时间设置得尽可能长。过期时间取决于服务器文件发生变化的估计时间。问题是，如果在过期时间到达之前服务器文件发生了变化，那么用户是无法获得所更新的文件的，因为浏览器还未重新查询——除非清除了缓存。 代码清单1-3 完整的基线样式表 /*块级元素*/ html, div, map, dt, form { display:block; } body { display:block; margin:8px; font-family:serif; font-size:medium; } p, dl { display:block; margin-top:1em; margin-bottom:1em; } dd { display:block; margin-left:40px; } address { display:block; font-style:italic; } blockquote { display:block; margin:1em 40px; } h1 { display:block; font-size:2em; font-weight:bold; margin:0.67em 0; } h2 { display:block; font-size:1.5em; font-weight:bold; margin:0.83em 0; } h3 { display:block; font-size:1.125em; font-weight:bold; margin:1em 0; } h4 { display:block; font-size:1em; font-weight:bold; margin:1.33em 0; } h5 { display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0; } h6 { display:block; font-size:0.5625em; font-weight:bold; margin:2.33em 0; } pre{ display:block; font-family:monospace; white-space:pre; margin:1em 0; } hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; } /*表格元素*/ table { border-spacing:2px; border-collapse:separate; margin-top:0; margin-bottom:0; text-indent:0; } caption { text-align:center; } td { padding:1px; } th { font-weight:bold; padding:1px; } tbody, thead, tfoot { vertical-align:middle; } /*行内元素*/ strong { font-weight:bold; } cite, em, var, dfn { font-style:italic; } code, kbd, samp { font-family:monospace; } ins { text-decoration:underline; } del { text-decoration:line-through; } sub { vertical-align:-0.25em; font-size:smaller; line-height:normal; } sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; } abbr[title], { border-bottom:dotted 1px; } /*列表元素*/ ul { list-style-type:disc; margin:1em 0; margin-left:40px; padding-left:0;} ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;} /*删除嵌套列表的上下外边距*/ ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl { margin-top:0; margin-bottom:0; } /*2级ul使用圆点项目符号*/ ol ul, ul ul { list-style-type:circle; } /*3级ul使用正方形项目符号*/ ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type:square; } 小贴士 使用resource://gre-resources/html.css，可以查询Mozilla火狐浏览器的内部默认样式表。