CSS入门教程.doc

第8章 CSS入门CSS，层叠样式表(Cascading Style Sheets)，是指通过定义样式，规定了页面如何显示HTML元素。这些CSS描述往往脱离与HTML文档的内容，从而达到内容与形式的分离。样式表定义如何显示HTML元素，而且通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。从某些角度来讲，CSS实际上是一门博大精深的学问。和Java语言不一样，CSS更偏重与设计，一些专业的WEB开发人员除了掌握CSS的基本知识外，还需要有一定的艺术功底，甚至心理学知识，因为他们不仅仅要让页面漂亮，更重要的是要让用户拥有更好的体验。由于篇幅的关系，在本章只能让大家对CSS有一个大致的了解，仅仅是一个入门，对CSS感兴趣的读者，可以参考一些专业的CSS书籍。本章主要讲解：q CSS的简单介绍q 如何使用CSS控制页面显示q 使用CSS的注意点和技巧q CSS应用实例8.1 认识和使用CSSHTML标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息，而文档的布局由浏览器来完成。但是现实中，由于很多的程序员（这些程序员通常不是专门的页面设计师，而是后台Java或是.NET程序员）对这点理解得不够，让HTML做了太多不应该让它来完成的工作。比如很多开发者会使用一个表格嵌套表格的方式来进行页面布局。当文档比较简单的时候，或许这种方法不存在太大的问题，但是当文档复杂超过一定程度之后，这种使用表格布局的方法愈发显示出弊端：调整起来十分困难，无用的标签越来越多等等。另外，很多人在标签内部控制页面元素的表现形式，比如字体、颜色、对齐方式等等。同样的，当页面复杂到一定程度，或者页面个数多到一定的程度之后，你想修改任意一个样式，都要花很多的时间和精力，而且还容易漏改或者改错。以上是两种常见的不科学的WEB客户端编程方式，这样的做法使得创建文档内容与文档表现形式分离的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出层叠样式表CSS。8.1.1 如何引入样式表当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：1、外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。2、内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过 标签定义内部样式表。body background-color: redp margin-left: 20px3、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。This is a paragraph8.1.2 如何使用CSSCSS语法由三部分构成：选择器、属性和值：selector property: value选择器 (selector)通常是你希望定义的HTML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值（value）。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body color: blue上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，不过建议每条声明的末尾都加上分号，好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：p text-align:center; color:red;建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：p text-align: center; color: black; font-family: arial;8.1.3 选择器我们想要通过CSS来控制HTML元素，首先我们要通过一定的方法找到这个元素。在CSS中通过选择器（selector）来定位元素。1、类型选择器类型选择器用来寻找特定类型的元素，比如段落、锚或是标题，只需要指定希望应用样式的元素的名称，类型选择器有时候也被称为元素选择器或简单选择器。pcolor:red;atext-decoration:underline;h1font-weight:bold;2、派生选择器派生选择器可以用来寻找特定元素的后代元素。比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：li strong font-style: italic; font-weight: normal; 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用我是斜体字。这是因为 strong 元素位于 li 元素内。我是正常的字体。在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。3、id 选择器id选择器可以选择标有特定id的HTML元素，id 选择器以#来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。这个段落是红色。这个段落是绿色。注意：id属性一般只能在每个HTML文档中出现一次。id就像人的名字，如果一个屋子里面有两个都叫李三的人，有人喊“李三”，你就不知道喊的是哪个了。同样道理在一个页面里，如果两个不同的元素拥有相同的id，也很容易混淆。虽然有可能在很大部分浏览器中多次使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能在某些浏览器中引发问题。id选择器也可以用于建立派生选择器，请看下面示例：#sidebar p font-style: italic;text-align: right;margin-top: 0.5em;上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元。虽然被标注为sidebar的元素只能在文档中出现一次，但是这个id选择器作为派生选择器却可以被使用很多次：#sidebar p font-style: italic;text-align: right;margin-top: 0.5em;#sidebar h2 font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;在这里，与页面中的其他p、h2元素明显不同的是，sidebar 内的p、h2元素得到了特殊的处理。4、类选择器在CSS 中，类选择器以一个点号显示：.center text-align: center在上面的例子中，所有class属性为center的HTML元素均为居中。在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守.center选择器中的规则。注意：类名的第一个字符不能使用数字！它无法在 Mozilla或Firefox中起作用。This heading will be center-alignedThis paragraph will also be center-aligned.和id选择器一样，类选择器也可被用作派生选择器：.fancy td color: #f60;background: #666;在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个div）元素也可以基于它们的类而被选择：td.fancy color: #f60;background: #666;在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。注意：和id不一样，每个HTML文档中允许有多个元素的class属性是一样的，也就是说class可以反复使用。8.2 使用CSS的注意点通过前面的学习，你已经会使用简单的CSS来控制HTML文档的样式了，本节主要讲解CSS使用过程中的一些注意点，另外再探讨一下CSS的继承和层叠的特性。8.2.1 CSS单位CSS中很多属性的值是有单位的，CSS的单位包括长度单位和颜色单位。1、长度单位在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。长度可以是绝对长度，也可以是相对长度。 CSS常用的绝对长度值有厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。相对长度就是需要定义尺寸的元素按照系统和浏览器默认大小为标准，相应地按比例缩放。这样就不会产生难以辨认的情况。百分比单位以及某些HTML标签(如至等)就是一种相对长度。另外，CSS还支持下列三种长度的相对单位：em（当前字体中字母M的宽度）、ex（当前字体中字母X的高度）、px（一个象素的大小）。 使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的M和X来确定。字体越大，所对应的em和ex也就越大。 以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常也不是个好方法。首先，象素的大小依分辩率变化较大，大多数用户都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读。 2、颜色单位 适当地在不同的部位使用不同的颜色，能使HTML页面充满生气，还可以通过颜色把读者的注意力吸引到关键的部分。 定义颜色值可以使用百分比值。在这种情况下，红、绿、蓝颜色值的等级用百分比数来确定。格式是：color:rgb(R%,G%,B%)。指定颜色的另一种方法是使用范围在0255之间的整数来设置。格式是color:rgb(128,128，128)。定义颜色的第三种方法是使用十六进制数组定义颜色。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示，例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上需要的十六进制值。定义颜色最后一种方法也最简单的方法是指定颜色的名称，CSS有17个预先确定的颜色，它们是：aqua（水绿色）、black（黑色）、blue（蓝色）、fuchsia（紫红色）、gray（灰色）、green（绿色）、lime（柠檬绿色）、maroon（褐红色）、navy（藏青色）、olive（橄榄色）、orange（橙色）、purple（紫色）、red（红色）、silver（银色）、teal（青色）、white（白色）、yellow（黄色）8.2.2 CSS的继承及其问题根据CSS的规定，子元素从父元素继承属性。看看下面这条规则：body font-family: Verdana, sans-serif; 根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。通过 CSS 继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p、td、ul、ol、ul和li等），所有body的子元素，不需要再自行定义，都应该显示Verdana字体，子元素的子元素也一样。这在大部分的新版浏览器中，确实是这样的。但是在浏览器混战年代里，有时候未必如我们所愿。浏览器提供商（Microsoft、Netscape等）为了自身的利益，都没有遵守当时的一些标准。比方说，Netscape4就不支持继承；微软的IE直到IE6还存在部分不支持继承的问题。我们又该如何面对这些问题呢？你可以通过使用一些冗余法则来处理旧式浏览器无法理解继承的问题。body font-family: Verdana, sans-serif;p, td, ul, ol, li, dl, dt, dd font-family: Verdana, sans-serif; 上面这么做虽然会有些浪费，但是如果需要使老的浏览器访问我们的网页不至于显示得很糟糕，就不得不这么做。如果你不希望从父元素中得到继承，比方说，你希望段落的字体是Times，而不是从body继承Verdana。你可以创建一个针对p的样式，来摆脱父元素的样式：body font-family: Verdana, sans-serif;td, ul, ol, ul, li, dl, dt, dd font-family: Verdana, sans-serif;p font-family: Times, Times New Roman, serif;8.2.3 层叠（Cascading）的意义对于CSS，一个重要的特性就是层叠Cascading。这个特性通过一定规则将多重样式将层叠为一个。记住，这和继承不是同一个概念。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。那么，当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有页面设计者的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中越往下优先级越低。q 内联样式（在HTML元素内部）q 外部样式表（通过链接导入）和内部样式表（位于标签内部） q 浏览器缺省设置可以看出，内联样式（在HTML元素内部）拥有最高的优先权。另外，可以使用!important来提高优先级，加了!important的外部样式表比不加!important的内联样式优先级要高，但是比加了!important的内联样式优先级要低关于CSS的层叠性，还有一个需要注意的是：使用浏览器查看网页的用户，他们可以在浏览器中设置自己的样式表，比如IE可以通过“工具”“internet选项”“常规” “外观”“辅助功能”“用户样式表”来设置自定义样式表。当网页设计者和用户的样式表发生冲突，网页设计者的样式表的优先级会高于用户自定义的样式表。为了让我们的用户具有更大的自由度，可以通过!important来提高自定义的样式表的优先级，如果考虑用户和设计者的，那么层叠顺序还有以下顺序，越往下越低：q 标记为!important的用户样式q 标记为!important的页面设计者样式q 设计者样式q 用户样式q 浏览器缺省样式当使用了多个样式表之后，样式表之间可能会争夺某个特定元素的控制权。在这些情况下，会根据选择器的特殊性，运用一定的算法规则，来决定该元素最终按照那个样式显示。这个算法通过选择器的不同，算出一个值，值大的样式具有高的优先级。这个算法看起来有些复杂也比较难记，一般来说有这样的规则，越往下优先级越低：q 元素的style属性，即内联样式，例如：q 具有ID选择器的样式，例如：#content color:red;q 具有类选择器的样式，例如：.content color:red;q 具有类型选择器的样式，例如：p color:red;另外，如果两个样式的优先级相同，后定义的样式优先。这一点也很重要，比如在head部内标签中定义的样式在标签链接的外部样式之后，那么真正起作用的是标签内的样式。反过来head部内标签中定义的样式在标签链接的外部样式之前，最后起作用的是通过标签引入的外部样式。8.2.4 绝对地址和相对地址CSS中有些属性的值是一个URL，比如背景图像。URL的写法有两种：绝对路径和相对路径。绝对路径时含服务器协议（在网页上通常是http:/或ftp:/）的完全路径。绝对路径包含的是精确位置而不用考虑当前文档的位置，但是如果目标文档被移动，则链接将无效。创建对当前站点以外文件的链接时必须使用绝对路径。 与绝对路径不同，相对路径自身并不包含完整的路径信息（例如不包含服务器协议），相对路径描述的是被引用文档和当前文档之间的相对位置关系（文档相对路径）或被引用文档和网站根目录之间的相对位置关系（根相对路径）。当在浏览器中点击某个使用相对路径的链接时，浏览器会自动获取当前文档的服务器协议、地址和端口等信息，并将该信息和相对路径发送到服务器上，而服务器则根据当前文档位置和相对路径，计算出被引用文档的绝对位置并获取文档，最终将结果返回给浏览器。根相对路径以“/”开头（请注意，不是“”），是从当前站点的根目录到被引用文档的完整路径。例如，某个网站的根目录为/home/wwwroot，其下有一个gif图像/home/wwwroot/a/b/1.gif，则该图像的根相对路径为“/a/b/1.gif”。文档相对路径是指从当前文档所在目录访问被引用文档的路径。也就是说，相对路径描述的是当前文档所在目录和被引用文档所在目录的相对位置关系。例如，当前文档的物理路径是/home/wwwroot/a/1.htm，而被引用文档的物理路径是/home/wwwroot/b/2.htm，第二个文档相对于第一个文档的相对路径就是“./b/2.htm”。在使用相对路径时，我们需要知道如何描述当前文档所在目录以及如何描述当前文档的上一级目录（父目录）。通常我们使用“./”或空描述当前文档所在目录，例如，当前文档为/home/wwwroot/a/1.htm，则“./2.htm”和“2.htm”都是一个指向“/home/wwwroot/a/2.htm”的相对路径。 在描述当前文档所在目录的上一级目录时，我们使用前缀“./”。还是上面的例子，如果相对路径为“./b/2.htm”，则我们请求的是物理路径为“/home/wwwroot/b/2.htm”的文档。 “./”和“./”可以任意组合，例如，“././”代表当前目录的上一级目录的上一级目录。 在明白绝对路径和相对路径的概念和区别之后，我们还要了解什么时候使用它们的时机。一般来说，如果需要引用当前网站外部的文档和素材，我们应该使用绝对路径；而在引用当前网站内部的文档和素材时，我们应该使用相对路径。由于相对路径中不包含网站地址等信息，从而使得网站更容易移植（例如，更换网站域名）。一般来说，在制作内部链接时，我们应该尽量使用文档相对路径，而不是根相对路径，这样做的原因是在本地预览网站时，浏览器并不承认当前站点的根目录为服务器，因此会导致链接错误的情况，使用文档相对路径则没有这样的问题。在CSS文件中书写相对路径：CSS文件是指在页面中引用的外部样式定义文件，该文件通常用于定义页面中各种html标记的显示效果。浏览器认为CSS文件是一个独立的文档，因此，在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现，而与引用该CSS文件的页面所在的位置无关。例如，文档“/home/wwwroot/a/index.htm”中引用了CSS文件“/home/wwwroot/a/css/main.css”，而在该CSS中引用了素材“/home/wwwroot/a/images/1.jpg”，则在CSS中对于该素材引用的相对路径应该是“./images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。 8.2.5 其他注意点和技巧1、记得写引号提示：如果属性的值为若干单词，则要给值加引号：p font-family: sans serif;2、空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被阅读和编辑：body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif;是否包含空格不会影响CSS在浏览器的工作效果，从这个角度来说CSS对大小写不敏感。但是存在一个例外：选择器中class和id名称对大小写是敏感的。3、选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h2,h3,h5,h6 color: green;4、同时使用两个class通常我们只能为元素指定一个class属性,但这并不等于你只能指定一个，你想指定多少就可以指定多少，例如：内容内容内容内容内容内容通过同时使用两个class(使用空格而不是逗号分割)，这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。5、使用注释你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/* 开头，以*/ 结尾，如下:/* 定义段落样式表 */p text-align: center; /* 文本居中排列 */ ccscolor: black; /* 文字为黑色 */ font-family: arial; /* 字体为arial */8.3 CSS使用实例到现在为止，你已经知道了什么是CSS、为什么要使用CSS以及如何使用CSS，你或许已经可以使用CSS对HTML文档进行简单的样式控制。不过你可能还需要多进行一些练习，本节的内容主要是一些CSS使用的示例，学习并理解它们，有助于你更好的掌握CSS。8.3.1 字体样式使用CSS来控制HTML文档的字体，主要使用下列CSS属性。q font-family q font-style q font-variant q font-weight q font-size q font q font-familyfont-familyCSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。有两种类型的字体名称：字体族名称（family-name）和族类名称（generic family）。字体族名称，就是我们通常所说的“字体”，比如“Arial”、“Times New Roman”、“宋体”、“黑体”等等。 族类名称，它是一组具有统一外观的字体族。比如sans-serif，它代表一组没有“脚”的字体。 一般来说，我们在给出字体列表时，应该先把首选字体放在前面，把候选字体放在后面，然后在列表的最后给出一个族类，这样当指定字体都不可用时，至少可以采用一个相同族类的字体来显示。下面是一个按优先级排列的字体列表的例子：h1 font-family: arial, verdana, sans-serif;h2 font-family: Times New Roman, serif;h1标题将采用Arial字体显示，如果访问者的计算机未安装Arial，那么就使用Verdana字体，假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。同样道理h2标题的字体首先会选用“Times New Roman”，没有这个字体时会找一个serif族的字体。注意“Times New Roman”的写法：因为其中包含空格，所以我们用引号将它括起来。font-styleCSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。h1 font-family: arial, verdana, sans-serif;h2 font-family: Times New Roman, serif; font-style: italic;font-variantCSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。h1 font-variant: small-caps;h2 font-variant: normal;font-weightCSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。p font-family: arial, verdana, sans-serif;td font-family: arial, verdana, sans-serif; font-weight: bold;font-size字体的大小用CSS属性font-size来设置。字体大小可通过多种不同单位（比如像素或百分比等）来设置。比如：h1 font-size: 30px;h2 font-size: 12pt;h3 font-size: 120%;p font-size: 1em;上面四种单位有着本质的区别。px和pt将字体设置为固定大小，而%和em允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像%或em这种允许用户调节字体显示大小的单位。 fontCSS属性font是上述各有关字体的CSS属性的缩写用法。比如说下面四行应用于p元素的代码：p font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif;如果用font属性的话，上述四行代码可简化为：p font: italic bold 30px arial, sans-serif;font属性的值应按以下次序书写：font-style | font-variant | font-weight | font-size | font-family这一节我们学习了有关字体设置的用法。记住：CSS的一个主要优势就是可以在任何时候设置字体，你花几分钟就可以改变整个网站的字体。CSS节省时间，而且把事情简化。8.3.2 文本样式文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解：q text-indent q text-align q text-decoration q letter-spacing q text-transform text-indentCSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了2个字符的首行缩进，这在显示中文段落时非常有用。p text-indent: 2em;text-alignCSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。 在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td） 被设置为居中。正常的文本段落被设置为两端对齐。 th text-align: right;td text-align: center;p text-align: justify;text-decorationCSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为h1标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。h1 text-decoration: underline;h2 text-decoration: overline;h3 text-decoration: line-through;letter-spacingCSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：h1 letter-spacing: 6px;p letter-spacing: 3px;text-transformCSS属性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。text-transform属性有四个可选值：q capitalize 将每个单词的首字母转换为大写。例如：“john doe”将被转换为“John Doe”。 q uppercase 所有字母都转换为大写。例如：“john doe”将被转换为“JOHN DOE”。 q lowercase 所有字母都转换为小写。例如：“JOHN DOE”将被转换为“john doe”。 q none 不作任何转换文本怎么写的就怎么显示。 来举个例子，我们将使用一个姓名列表。所有姓名都用（列表项）标签来标记。我们希望对姓名采用首字母大写的方式，而对标题采用全部大写的方式。查看过该例的HTML代码后你会发现，其实在HTML代码里我们写的姓名和标题全部都是小写。h1 text-transform: uppercase;li text-transform: capitalize;8.3.3 颜色与背景颜色与背景也是HTML页面里面经常需要控制的部分，本节你将学习如何在网页上设置元素的颜色与背景，以及定位和控制背景图像的高级方法。CSS对于颜色与背景的控制主要通过下列CSS属性：q color q background-color q background-image q background-repeat q background-attachment q background-position q background colorCSS属性color用于指定元素的前景色。例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。h1 color: #ff0000;之前已经讲过，颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。background-colorCSS属性background-color用于指定元素的背景色。因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。 你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。body background-color: #FFCC66;h1 color: #990000;background-color: #FC9804;background-imageCSS属性background-image用于设置背景图像。如果要把某个图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出图片的存放位置就行了。body background-color: #FFCC66;background-image: url(bg.gif);注意我们指定图片存放位置的方式：url(bg.gif)。这表明图片文件和样式表存放在同一目录下，但是不一定和HTML文件放在同一个目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如url(./images/bg.gif)）；此外，你甚至可以通过给出图片的地址来引用网络上的图片（比如url(/images/bg.gif)），当然你得保证图片存在。background-repeatCSS属性background-repeat就是用于控制平铺的。background-repeat有四种不同取值。q background-repeat:repeat-x 图像横向平铺q background-repeat:repeat-y 图像纵向平铺q background-repeat:repeat 图像横向和纵向都平铺q background-repeat:no-repeat 图像不平铺如果我们要避免平铺背景图像，代码应该这样：body background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachmentCSS属性background-attachment用于指定背景图像是固定在屏幕上的，还是随着它所在的元素而滚动的。一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。background-attachment有两种不同取值。q background-attachment:scroll 图像会跟随页面滚动q background-attachment:fixed 图像是固定在屏幕上的例如下面的代码将背景图像固定在屏幕上。body background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position默认状态下，背景图像将被放在屏幕的左上角。但是你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。设置background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。 坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。你可以这样设置这个属性：q background-position:2cm 2cm 图像被放置在页面内距左边2厘米、顶部2厘米的地方q background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处q background-position:top right 图像被放置在页面的右上角在下例中，背景图像被放置在页面的右下角：body background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;backgroundCSS属性background是上述所有与背景有关的属性的缩写用法。使用background属性可以减少属性的数目，因此令样式表更简短易读。 比如说下面五行代码：background-color: #FFCC66;background-image: url(bg.gif);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;如果使用background属性的话，实现同样的效果只需一行代码即可搞定：background: #FFCC66 url(bg.gif) no-repeat fixed right bottom;各个值应按下列次序来写： background-color | background-image | background-repeat | background-attachment | background-position如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：background: #FFCC66 url(bg.gif) no-repeat;这两个未指定值的属性将被设置为缺省值：scroll和top left。8.3.4 链接样式对于链接而言，前面几节的属性也可以应用到链接上（比如颜色、字体、添加下划线等）。但是CSS还允许你根据链接的状态，比如未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的样式。这些需要通过伪类（pseudo-class）来实现这些效果。伪类是什么？伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。 我们来看一个例子，我们知道在HTML里，链接是通过a标签来定义的。因此，在CSS里，我们可以将a作为一个选择器（selector），下面的定义我们将连接的文字颜色设置成蓝色：a color: blue;另外，一个链接是可以有不同状态的。例如，它可以是已访问过的，也可以是未访问过的。你可以