《CSS入门教程.docx》由会员分享，可在线阅读，更多相关《CSS入门教程.docx（17页珍藏版）》请在三一文库上搜索。
1、精品文档第8章CSS入门CSS层叠木式表（Cascading Style Sheets）,是指通过定义样式，规定了页面如何显示HTM沅素。这些CSS苗述往往脱离与HTM及:档的内容，从而达到内容与形式的分离。样式表定义如何显示 HTM玩素，而且通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSSC档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。从某些角度来讲，CS族际上是一门博大精深的学问。和Java语言不一样，CS便偏重与设计，一些专业的WE开发人员除了掌握CSS勺基本知识外，还需要有一定的艺术功底， 甚至心理学知识，因为他们 不仅仅要让页面漂亮，更重要的是要让用户拥有更
2、好的体验。由于篇幅的关系，在本章只能让大家对CSS有一个大致的了解，仅仅是一个入门，对CS器兴趣的读者，可以参考一些专业的CS期籍。本章主要讲解：CSS的简单介绍如何使用CS筑制页面显示 使用CSS的注意点和技巧 CSS应用实例8.1 认识和使用CSSHTM标签原本被设计为用于定义文档内容。通过使用、这样的标签，HTM的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息，而文档的布局由浏览器来完成。但是现 实中，由于很多的程序员（这些程序员通常不是专门的页面设计师，而是后台Java或是.NET序员）对这点理解得不够，让HTM做了太多不应该让它来完成的工作。比如很多开发者会使用一个表格
3、嵌套表格的方式来进行页面布局。当文档比较简单的时候， 或许这种方法不存在太大的问题，但是当文档复杂超过一定程度之后，这种使用表格布局的方法愈发显示出弊端：调整起来十分困难，无用的标签越来越多等等。 另外，很多人在标签内部控制页面元素的表现形式， 比如字体、颜色、对齐方式等等。同样的，当页面复杂到一定程度，或者页面个数多到一定的程度之后， 你想修改任意一个样式，都要花很多的时间和精力，而且还容易漏改或者改错。以上是两种常见的不科学的 WE落户端编程方式，这样的做法使得创建文档内容与文档表现形式分 离的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C,这个非营利的标准化联盟，肩负起了 HT
4、M标准化的使命，并在HTML4.例外创造出层叠样式表 CSS8.1.1 如何引入样式表当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：1、外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。2、内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过 标签定义内部样式表。body background-color: redp margin-left: 20px3、内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在
5、相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。This is a paragraph8.1.2 如何使用CSSCS钻法由三部分构成：选择器、属性和值：selector property: value选择器(selector)通常是你希望定义的 HTM沅素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值(value )。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的 样式声明(declaration ):body color: blue上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子
6、中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，不过建议每条声明的末尾都加上分号，好处是，当你 从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：p text-align:center; color:red;建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：p text-align: center;color: black;font-family: arial;8.1.
7、3 选择器我们想要通过CSS来控制HTME素，首先我们要通过一定的方法找到这个元素。在 CSS中通过选 择器(selector )来定位元素。8.1.4 择器类型选择器用来寻找特定类型的元素，比如段落、锚或是标题，只需要指定希望应用样式的元素的名称，类型选择器有时候也被称为元素选择器或简单选择器。pcolor:red;atext-decoration:underline;h1font-weight:bold;2、派生选择器派生选择器可以用来寻找特定元素的后代元素。比方说，你希望列表中的 strong元素变为斜体字， 而不是通常的粗体字，可以这样定义一个派生选择器：li strong font-
8、style: italic;font-weight: normal;我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用 我是斜体字。这是因为strong 元素位于li元素内。我是正常的字体。在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class 或id，代码更加简洁。3、id选择器id选择器可以选才i标有特定id的HTM沅素，id选择器以#来定义。下面的两个id 选择器，第一 个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;下面的HTM践码中，id属
9、性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。 这个段落是红色。 这个段落是绿色。注意：id属性一般只能在每个HTM戊档中出现一次。id就像人的名字，如果一个屋子里面有两个都叫李三的人，有人喊“李三”，你就不知道喊的是哪个了。同样道理在一个页面里，如果两个不同的元素拥有相同的id ,也很容易混淆。虽然有可能在很大部分浏览器中多次使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能在某些浏览器中引发问题。id选择器也可以用于建立派生选择器，请看下面示例：#sidebar p font-style: italic;text-align: right;mar
10、gin-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;在这里，
11、与页面中的其他 p、h2元素明显不同的是，sidebar内的p、h2元素得到了特殊的处理。4、类选择器在CSS中，类选择器以一个点号显示：.center text-align: center在上面的例子中，所有class属性为center的HTM沅素均为居中。 在下面的HTMK;码中，h1和p元素都有center类。这意味着两者都将遵守.center选择器中的规则。注意：类名的第一个字符不能使用数字！它无法在Mozilla 或Firefox中起作用。This heading will be center-alignedThis paragraph will also be center-ali
12、gned.和id选择器一样，类选择器也可被用作派生选择器：.fancy td color: #f60;background: #666;在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为fancy 的更大的元素可能是一个表格或者一个div ）元素也可以基于它们的类而被选择：td.fancy color: #f60;background: #666;在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。当然，任何其他被标注为fanc
13、y的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。注意：和id不一样，每个HTM戊档中允许有多个元素的class属性是一样的，也就是说class可以反复使用。8.2 使用CSS的注意点通过前面的学习，你已经会使用简单的 CS球控制HTML：档的样式了，本节主要讲解CSS1用过程中 的一些注意点，另外再探讨一下CSS勺继承和层叠的特性。8.2.1 CSS 单位CSS中很多属性的值是有单位的，CSS的单位包括长度单位和颜色单位。1、长度单位在CSSK长度是一种度量尺寸，用于宽度、高度、字号、字和字母间
14、距、文本的缩排、行高、页 边距、贴边、边框线宽以及许许多多的其他属性。长度可以是绝对长度，也可以是相对长度。CS就用的绝对长度值有厘米（cm）、毫米（mm）、英寸（in ）、点（pt）、派卡（pc）等等。绝对长 度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。相对长度就是需要定义尺寸的元素按照系统和浏览器默认大小为标准，相应地按比例缩放。这样就不会产生难以辨认的情况。百分比单位以及某些 HTM标签（如h1至h2等）就是一种相对长度。另外，CSSE
15、支持下列三种长度的相对单位：em （当前字体中字母 M勺宽度）、ex （当前字体中字母X的高度）、px （一个象素的大小）。使用emF口 ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的 环口X来确定。字体越大，所对应的 emf口ex也就越大。以象素为单位的长度是相对于显示器上的象素（或许为方形）的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常也不是个好方法。首先，象素的大小依分辩率变化较大，大多数用户 都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读。2、颜色单位适当地在不同的部位使用不同的颜色，能使HTML
16、C面充满生气，还可以通过颜色把读者的注意力吸引到关键的部分。定义颜色值可以使用百分比值。在这种情况下，红、绿、蓝颜色值的等级用百分比数来确定。格式 是：color:rgb（R%,G%,B%）。指定颜色的另一种方法是使用范围在0255之间的整数来设置。 格式是color:rgb（128,128, 128）。定义颜色的第三种方法是使用十六进制数组定义颜色。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示，例如“#FC0EA8。这种定义的方式就是形如#RRGGBB格式。即在红、绿、蓝的位置上添上需要的十六进制值。定义颜色最后一种方法也最简单白方法
17、是指定颜色的名称，CSST17个预先确定的颜色，它们是：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-s
18、erif;根据上面这条规则，站点的 body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p、td、ul、ol、ul和li等）,所有body的子元素，不需要再自行定义，都应该显示Verdana字体，子元素的子元素也一样。这在大部分的新版浏览器中，确实是这样的。但是在浏览器混战年代里，有时候未必如我们所愿。浏览器提供商（ Microsoft、Netscape等）为 了自身的利益，都没有遵守当时的一些标准。比方说，Netscape4就不支持继承；微软的IE直到IE6还存在部分不支持继承的问题
19、。我们又该如何面对这些问题呢？你可以通过使用一些冗余法则来处理旧式浏览器无法理解继承的问题。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
20、, 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）的意义对于CSG 一个重要的特性就是层叠 Cascading。这个特性通过一定规则将多重样式将层叠为一个。 记住，这和继承不是同一个概念。样式可以规定在单个的HTM沅素中，在HTM面的头元素中，或在一个外部的CSSC件中。甚至可以在同一个HTM及:档内部引用多个外部样式表。那么，当同一个HTM沅素被不止一个样式定义时
21、，会使用哪个样式呢？ 一般而言，所有页面设计者的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中越往下优先级越低。内联样式（在 HTME素内部）外部样式表（通过链接 导入）和内部样式表（位于标签内部）浏览器缺省设置可以看出，内联样式（在 HTM沅素内部）拥有最高的优先权。另外，可以使用!important来提高优 先级，加了 important的外部样式表比不加important的内联样式优先级要高，但是比加了 important 的内联样式优先级要低关于CSS勺层叠性，还有一个需要注意的是：使用浏览器查看网页的用户，他们可以在浏览器中设 置自己的样式表，比如IE可以通过“工具” “int
22、ernet选项” “常规” “外观” “辅助功能” “用户样式表”来设置自定义样式表。当网页设计者和用户的样式表发生冲突，网页设计者的样式表的优先级会高于用户自定义的样式表。为了让我们的用户具有更大的自由度，可以通过important来提高自定义的样式表的优先级，如果考虑用户和设计者的，那么层叠顺序还有以下顺序，越往下越低：标记为important 的用户样式标记为important 的页面设计者样式设计者样式用户样式浏览器缺省样式当使用了多个样式表之后，样式表之间可能会争夺某个特定元素的控制权。在这些情况下，会根据选择器的特殊性，运用一定的算法规则，来决定该元素最终按照那个样式显示。这个算法
23、通过选择器的不同，算出一个值，值大的样式具有高的优先级。这个算法看起来有些复杂 也比较难记，一般来说有这样的规则，越往下优先级越低：元素的style 属性，即内联样式，例如： 具有ID选择器的样式，例如： #content color:red;具有类选择器的样式，例如： .content color:red;具有类型选择器的样式，例如：p color:red;另外，如果两个样式的优先级相同，后定义的样式优先。这一点也很重要，比如在head部内 标签中定义的样式在 标签链接的外部样式之后，那么真正起作用的是标签内的样式。反过来head部内标签中定义白样式在 标签链接的外部样式之前，最后起作用的是
24、通过 标签引入的外部样式。8.2.4 绝对地址和相对地址CS阱有些属性的值是一个 URL比如背景图像。UR由勺写法有两种：绝对路径和相对路径。绝对路径时含服务器协议（在网页上通常是http:/ 或即:）的完全路径。绝对路径包含的是精确位置而不用考虑当前文档的位置，但是如果目标文档被移动，则链接将无效。创建对当前站点以外文件的链接时必须使用绝对路径。与绝对路径不同，相对路径自身并不包含完整的路径信息（例如不包含服务器协议），相对路径描述的是被引用文档和当前文档之间的相对位置关系（文档相对路径）或被引用文档和网站根目录之间的相对位置关系（根相对路径）。当在浏览器中点击某个使用相对路径的链接时，浏览
25、器会自动获取当前 文档的服务器协议、地址和端口等信息，并将该信息和相对路径发送到服务器上，而服务器则根据当前文档位置和相对路径，计算出被引用文档的绝对位置并获取文档，最终将结果返回给浏览器。根相对路径 以“/”开头（请注意，不是“”），是从当前站点的根目录到被引用文档的完整路径。例如，某个网站的根目录为 /home/wwwroot ,其下有一个gif图像/home/wwwroot/a/b/1.gif ,则该图像 的根相对路径为“ /a/b/1.gif ”。文档相对路径 是指从当前文档所在目录访问被引用文档的路径。也就是说，相对路径描述的是当前文档所在目录和被引用文档所在目录的相对位置关系。例如
26、，当前文档的物理路径是 /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 ”的相对路径。在描述当前文档所在目录的上一级目录时，我们使用前缀“./还是上面的例子，如果相对路径
27、为./b/2.htm,则我们请求的是物理路径为/home/wwwroot/b/2.htm 的文档。 ./ 和./ 可以任意组合，例如，././”代表当前目录的上一级目录的上一级目录。在明白绝对路径和相对路径的概念和区别之后，我们还要了解什么时候使用它们的时机。一般来说，如果需要引用当前网站外部的文档和素材，我们应该使用绝对路径；而在引用当前网站内部的文档和 素材时，我们应该使用相对路径。由于相对路径中不包含网站地址等信息，从而使得网站更容易移植（例如，更换网站域名）。一般来说，在制作内部链接时，我们应该尽量使用文档相对路径，而不是根相对路径，这样做的原因是在本地预览网站时，浏览器并不承认当前站
28、点的根目录为服务器，因此会导致链接错误的情况，使用文档相对路径则没有这样的问题。在CSSC件中书写相对路径：CSSC件是指在页面中引用的外部样式定义文件，该文件通常用于定义页面中各种html标记的显示效果。浏览器认为CSSC件是一个独立的文档，因此，在CS阶对素材的引用可以通过计算素材文件和该CSSC件之间的相对路径来实现，而与引用该CS故件的页面所在的位置无关。例如，文档“/home/wwwroot/a/index.htm ”中引用了 CS故件/home/wwwroot/a/css/main.css ”, 而在该CS阶引用了素材“/home/wwwroot/a/images/1.jpg ”,
29、则在CS中对于该素材引用的相对路径应 该是 ./images/l.jpg ,而不能是 ”./images/l.jpg 或 images/l.jpg ”。8.2.5 其他注意点和技巧1、记得写引号提示：如果属性的值为若干单词，则要给值加引号:p font-family: sans serif;2、空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被阅读和编辑：body color: #000;background: #fff;margin: 0;padding: 0;font-family: Georgia, Palatino, se
30、rif;是否包含空格不会影响CSSE浏览器的工作效果，从这个角度来说CSS寸大小写不敏感。但是存在一 个例外：选择器中class和id名称对大小写是敏感的。3、选择器的分组你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h2,h3,h5,h6 color: green;4、同时使用两个 class通常我们只能为元素指定一个class属性，但这并不等于你只能指定一个，你想指定多少就可以指定多少，例如：内容内容内容内容内容内容通过同时使用两个class(使用空格而不
31、是逗号分割 )，这个段落将同时应用两个 class中制定的规 则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。5、使用注释你可以在CS外插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代 码的含义。在浏览器中，注释是不显示的。CS驻释以/* 开头，以*/ 结尾，如下：/*定义段落样式表*/P text-align: center;/*文本居中排列 */ccs color: black; /*文字为黑色 */font-family: arial; /*字体为 arial */8.3 CSS使用实例到现在为止，你已经知道了什么是 CSS为什么要使用CSSA及如彳
32、S使用CSS你或许已经可以使用 CSSHTMI档进行简单的样式控制。不过你可能还需要多进行一些练习，本节的内容主要是一些CSS使用的示例，学习并理解它们，有助于你更好的掌握CSS8.3.1 字体样式使用CS球控制HTML：档的字体，主要使用下列CSS!性。font-family font-style font-variant font-weight font-size font font-familyfont-familyCSS1性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某
33、个字体是已安装的。有两种类型的字体名称：字体族名称( family-name )和族类名称(generic family )。字体族名称，就是我们通常所说的“字体”，比如“ Arial 、“Times NewRomani、“宋体”、“黑体”族类名称，它是一组具有统一外观的字体族。比如 sans-serif ,它代表一组没有“脚”的字体。0一般来说，我们在给出字体列表时，应该先把首选字体放在前面，把候选字体放在后面，然后在列 表的最后给出一个族类，这样当指定字体都不可用时，至少可以采用一个相同族类的字体来显示。下面是一个按优先级排列的字体列表的例子：hl font-family: arial,
34、verdana, sans-serif;h2 font-family: Times New Roman, serif;h1标题将采用Arial字体显示，如果访问者的计算机未安装Arial ,那么就使用Verdana字体，假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个 h1标题。同样道理h2标题的字体首先会选用Times NewRomad ,没有这个字体时会找一个serif族的字体。注意TimesNew Roman的写法：因为其中包含空格，所以我们用引号将它括起来。font-styleCSSI性font-style定义所选字体的显示样式：norma
35、l （正常）、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 ,而没有可用的支持小体大
36、写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。h1 font-variant: small-caps;h2 font-variant: normal;font-weightCSSI性font-weight 指定字体显示的浓淡程度。其值可以是 normal （正常）或bold （加粗）。有些 浏览器支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。p font-family: arial, verdana, sans-serif;td font-family: arial, verdana, sans-serif; font-weight: bold
37、;font-size字体的大小用CSS1性font-size 来设置。字体大小可通过多种不同单位（比如像素或百分比等）来 设置。比如：h1 font-size: 30px;h2 font-size: 12pt;h3 font-size: 120%;p font-size: 1em;上面四种单位有着本质的区别。px和pt 将字体设置为固定大小，而 和eM允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用 的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility ），你应采用像或eM这种允许用户调节字体显示大小的单
38、位。fontCSS1性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这一节我们学习了有关字体设
39、置的用法。记住：CSS勺一个主要优势就是可以在任何时候设置字体，你花几分钟就可以改变整个网站的字体。CS流省时间，而且把事情简化。8.3.2 文本样式文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSSE文本布局方面令人激动的特性。本课将对下列CSS1性进行讲解：text-indent text-align text-decoration letter-spacing text-transformtext-indentCSS1性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用 p 元素的段落应用了 2个字符的首行缩进，这在显示中文
40、段落时非常有用。p text-indent: 2em; text-alignCSS1性text-align 与HTMlM性align的功能相同。该属性的值可以是： left （左对齐）、right （右 对齐）或者center （居中）。除了上面三种选择以外，你还可以将该属性的值设为justify （两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。在下例中，标题（th）中的文字被设置为右对齐，而表中数据（ td）被设置为居中。正常的文本 段落被设置为两端对齐。th text-align: right;td text-align: center;p text-align: ju
41、stify;text-decorationCSSl性text-decoration令我们可以为文本增添不同的装饰或效果 。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为hl标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。hl text-decoration: underline;h2 text-decoration: overline;h3 text-decoration: line-through;letter-spacingCSS1性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希
42、望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：h1 letter-spacing: 6px;p letter-spacing: 3px; text-transformCSS1性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写(capitalize )、全部大写(uppercase )或者全部小写(lowercase )。比如，单词aheadline ”在展现给网页浏览者时，可以是HEADLINE或者Headline 。text-transform属性有四个可选值：capitalize将每个单词的首字母
43、转换为大写。例如： john doe 将被转换为John Doeuppercase所有字母都转换为大写。例如：john doe ”将被转换为“JOHN DOE。lowercase 所有字母都转换为小写。例如： JOHN DOE将被转换为john doe 。 none不作任何转换文本怎么写的就怎么显示。来举个例子，我们将使用一个女4名列表。所有姓名都用 (列表项)标签来标记。我们希望对姓名采用首字母大写的方式，而对标题采用全部大写的方式。查看过1例的HTMK；码后你会发现，其实在 HTML弋码里我们写的姓名和标题全部都是小写。h1 text-transform: uppercase;li tex
44、t-transform: capitalize;8.3.3 颜色与背景颜色与背景也是HTML(面里面经常需要控制的部分，本节你将学习如何在网页上设置元素的颜色与 背景，以及定位和控制背景图像的高级方法。CSS寸于颜色与背景的控制主要通过下列CSS1性：colorbackground-color background-image background-repeat background-attachment background-position backgroundcolorCSS1性color用于指定元素的前景色。例如，假设你要让页面中的所有标题( headline )都显示为 深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。h1 color: #ff0000;之前已经讲过，颜色值可以用十六进制表示(比如上例中的#ff0000 ),也可以用颜色名称(比如“red)或 RGB!(比如