CSS样式表.doc

第3章 CSS样式表本章概述CSS早在1996年就诞生了，近年来，由于得到浏览器的很好支持，CSS技术已经成为Web页面的一个重要技术支撑。有人戏称CSS是HTML的表兄弟，CSS的引用就是为使HTML语言更好地适应页面的美工设计，它以HTML为基础，提供了非常丰富的外观控制功能，如字体、颜色、背景、排版等。CSS帮助网站开发人员实现功能和外观设计的分离，提高开发效率和代码的可重用性。最近几年流行的DIV+CSS布局模式和AJAX技术，将CSS应用推向了一个新的高潮。本章主要介绍CSS的定义与使用方法，以及CSS样式的常见属性及模型。学习目标：1掌握CSS的语法规则及各种属性的定义方法；2了解在网页中使用CSS的常用方法；3理解样式选择符及其作用原理；4熟练使用CSS控制网页样式。3.1 CSS概述 3.1.1 CSS概念CSS全称是Cascading Style Sheet，翻译成中文叫层叠样式表。它是一种标记性语言，配合HTML语言进行页面外观控制。CSS技术诞生于1996年，早期由于缺乏浏览器支持，并没有引起人们的重视，现在大多数浏览器都支持CSS。CSS允许在HTML文档中加入样式，如字体类型、颜色、大小等，对于设计者来说，它是一个非常灵活的工具，可以帮助开发人员实现网页内容与外观控制的分离。CSS样式表的引入也非常灵活，既可在行内定义，也可定义在页面的特定位置，甚至作为外部样式文件供网页调用，真正实现外观控制与内容功能的分离。CSS是由W3C组织负责制订和颁布的，1996年12月发布的CSS为1.0规范，1998年发布了2.0规范，目前还有2.1和3.0规范两个版本处于应用状态。由于W3C是一个民间技术组织，并没有强制要求各软件厂家必须符合CSS规范，因此，不同的浏览器对CSS的支持并不完全相同，这多少给开发者带来一些不便，但目前主流的浏览器IE6、IE7以及Firefox等已经将CSS作为事实的技术规范，CSS因此得到了非常好的支持。3.1.2 使用CSS的优点HTML标签也可以进行页面样式的控制，在本章范例html_style.htm中，将标签内嵌在标签中，实现了字体和颜色的控制，代码如下。 使用HTML方式控制样式 第3章 CSS样式表 第1节 样式表概述 第2节 CSS样式表定义 第3节 网页中应用CSS样式表的方法在上述代码中，通过设计font标签的face与color两个属性，实现了对文字的字体与颜色控制。但这种在HTML标签中内嵌代码的控制样式的方法明显存在缺陷，当需要控制的样式非常多时，工作量非常大，而且一旦需求发生改变，例如将页面中所有的标签由蓝色改成黑色，必须在每个页面中重新修改代码。在本章范例css_style.htm中，对上述代码进行了改进，代码如下。 CSS方式控制样式 h1 font-family:楷体; color:red; h2 font-family:楷体; color:blue; 第3章 CSS样式表 第1节 样式表概述 第2节 CSS样式表定义 第3节 网页中应用CSS样式表的方法 上述代码中，标签与标签内部的文字样式已经不再使用内嵌的来控制，而是使用样式表h1与h2控制，页面效果如图3-1所示。图3-1 CSS方式控制样式当要改变颜色时，只需要修改h2样式表color属性对应的颜色名，页面中所有的样式都会发生改变。样式表还可以单独保存在文件中，供网站中的所有文件调用，这样既能提高开发效率，又可保证网站中页面的风格统一。归纳起来，使用样式表来控制页面外观有如下一些优势：1CSS使样式代码独立于网页HTML代码，简化网页格式设计，增强了网页的可维护性；2样式与内容分离，可使用程序控制样式，增强了网页的表现能力；3CSS文件可被浏览器缓存、，加载和刷新网页时，只需要传送页面内容，就可以节省带宽，提高访问速度；4内容与样式设计分离，有利于开发团队分工合作，提高代码重用性，提高开发效率； 5网页内容与外观代码分离，提高了页面的兼容性，不同的浏览器与设备可根据实际情况对同一站点的页面样式进行选择和处理。3.2 CSS样式定义与编辑3.2.1 CSS定义CSS由样式规则组成，以告诉浏览器怎样去显示一个文档。样式规则如下：样式选择器属性1:属性值;属性2:属性值;属性n:属性值;例如在3.1节用来控制标签的外观，使用了如下样式规则：h2 font-family:楷体; color:blue;在这段代码中，h2为样式选择器，font-family和color为该样式的两个属性，分别表示字体名和颜色，对应的值为“楷体”和“blue”，该样式表示将页面中的标签的字体设置为楷体，颜色设置为蓝色。在CSS规则中，“样式选择器”是一个非常重要的概念，样式选择器是用一定规则来指定一个或一组标记，从而对它们进行统一的外观控制。样式选择器可以包括HTML标签符、用户自定义类class或用户自定义ID。“属性(attributes)”表示由CSS标准定义的样式属性，“属性值(values)”为样式属性的值。在下列代码中，使用样式选择器body，body具有margin-left、margin-top等5个属性，分别表示左、上、右、下边距和背景颜色。body margin-left: 20px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #00ff00; 本章范例body_style.htm在3.1节描述的页面文件中，将上述代码加到页面样式中，页面效果如图3-2所示，读者可以对照前面的页面效果，理解CSS工作原理。图3-2 body样式关于样式表的语法，要注意以下几个问题：属性必须要包含在号之中；属性和属性值之间用“:”分隔；当有多个属性时，用“;”进行区分；在书写属性时属性之间使用空格换行，并不影响属性的显示；如果一个属性有几个值，则每个属性值之间用空格分隔开；CSS语言对于属性值要求很严格，如果CSS规范中没有或者不符合要求，CSS语句都不能正常显示作用。3.2.3 CSS编辑任何纯文本编辑器都可以进行手工方式的样式表编写工作，不过，纯粹手工编写工作量大，而且容易出错。很多网页制作工具都支持样式表的编辑，例如Dreamweaver和ASP.NET开发环境。Dreamweaver支持可视化与代码两种方式进行样式表的编写。如图3-3所示，使用Dreamweaver编辑网页时，当选择页面中某个HTML标签时，通过属性对话框，可以可视化样式编写工作，这是一种所见即所得的工作模式，即使开发人员不太熟悉CSS语言，也可以由Dreamweaver生成相应的CSS代码。图3-3 Dreamweaver样式属性对话框使用代码方式编写CSS时，Dreamweaver提供了强大的代码提示功能，帮助开发人员轻易生成CSS代码。编辑样式代码时，按空格或回车键就可以使用Dreamweaver的代码提示功能。图3-4(a)是在编写样式表boby时Dreamweaver给出的代码提示，开发人员只需将鼠标移动到相应属性上，按回车键，该属性自动加至代码中，同时还会弹出属性值的代码提示或选择器，图3-4(b)是编写颜色样式时Dreamweaver工具弹出的拾色器。 图3-4 (a)Dreamweaver样式编写代码提示 (b)Dreamweaver样式编写弹出拾色器3.3 网页中应用样式表的方法在网页中，可通过在HTML标签内嵌套、页面内嵌套和外联样式表文件等几种方法使用样式表。3.3.1 HTML标签中内嵌style属性具体语法是在HTML标签中加入一个style=的属性，两个引号之间定义该标签的样式，样式定义的语法遵循样式定义规则。 这是一个直接书写样式的段落上述代码为段落标签声明了样式，指定了段落缩进1厘米，背景色为黄色，字体为courier。需要说明的是，这种样式声明与旧式的HTML标签格式控制有本质上的区别，例如下面代码，虽然也能控制标签的颜色、背景和宽度，但是通过标签的属性定义方式实现控制外观，不是严格意义上的样式表，新的W3C规范已经不推荐使用这种外观控制方式。旧式的HTML标签外观控制方式，不是样式表HTML标签内嵌样式属性的方式只适合对某个特定的HTML标签设置样式，定义好的样式不能被其他标签共用，不适合大范围的样式定义。3.3.2页面内嵌入样式表这种内嵌方式是将样式表写在页面标签内部，并且用标签进行声明，样式如下。 标记表示声明样式表内容，type=text/css用来指定标签中的文本属性。 “”是一对组合的注释标记，在样式表中使用注释标记的作用是当某个浏览器不支持样式表时，不至于将样式表的文字直接显示在网页中，不过目前主流浏览器都对CSS有很好的支持，因此，也可省略这对注释标签。本章范例文件inner_style.htm演示了内嵌CSS的使用方式，页面中三个段落标签都会受到该样式表p background:gray;color:blue;font-size:16px;的控制，背景为灰色，文字为蓝色，字号为16像素。 页面内嵌样式 段落一 段落二 段落三 3.3.3外联样式表文件使用样式表当定义样式内容较多，且需要多个页面共享样式时，可使用外联样式表文件来使用样式表。首先需要定义一个样式表文件，样式表文件的扩展名为.css，在样式表文件中，不需要再使用标签，直接定义样式即可。例如，本章范例文件style.css中定义了段落标签和标签的样式，代码如下：h1 color: green; font-size: 37px; font-family: impact P text-indent: 1cm; background: yellow; font-family: courier 要调用style.css文件，可以在标签中加入一条标签，语法如下。本章范例文件out_style.htm演示了如何调用外部样式表文件。 外部样式表外部CSS通过link标签使用外部样式表文件style.css上述代码调用了CSS文件夹下面的样式表文件style.css，样式表功能与前面两种使用方法完全一致。3.4 CSS样式选择器样式选择器包括HTML标签、类和ID，它们可以协同作用修饰HTML标签，优先级从低到高。3.4.1 HTML标签作样式选择器网页是由不同的HTML标签组成的，可以直接使用HTML标签名作为CSS的样式选择器，从而直接控制页面中一组HTML标签的样式。例如下列代码中，分别使用了h1和p作为样式选择器。h1font-size:16px;color:redpfont-size:11px;color:gray一个网页中如果引用上述样式表，则页面中所有标题标签与段落标签都将分别受到这两个样式的控制，不需要再单独设置样式。有了h1样式，无论页面中有多少个标签，都将字号大小显示成16像素，字体颜色为红色，由于一个样式表的属性和值可以设置多个，从而可以使用h1样式选择器实现标签的多个风格控制，达到了统一高效的目的，例如，需要将标签的字体颜色改成蓝色，只要将color属性对应的值由red改为blue就行了。有时为了减少样式表的重复声明，常常采用“组合样式选择器”来定义样式表。例如：h1, h2, h3, h4 font-size:18px;color:red可将文档中的不同级别的标题至的样式定义为一致。本章范例h_style.htm文件演示组合样式选择器定义方式，页面中放置了h1至h3三级标签。第3章 CSS样式表 第1节 样式表概述 第2节 CSS样式表定义 第3节 网页中应用CSS样式表的方法 3.1 标签内部使用CSS3.2 页面内嵌3.3 使用外部CSS文件没有使用组合样式控制时，三级标签的默认显示字号是不一样的，如图3-5所示，使用组合样式控制后，页面h1至h4各级标题的字号统一为18像素，颜色为红色，如图3-6所示。图3-5各级h标题默认样式图3-6 h1至h4组合样式选择器效果3.4.2 类作为样式选择器使用HTML标签作样式选择器带来两个问题：其一，当页面中的相同标签要显示成不同的样式怎么办？其二，当不同的标签要显示相同的样式，是否需要逐一设计不同标签的样式？由于HTML标签作样式选择器的作用对象是页面中所有标签，因此，问题似乎无法解决。例如，页面中有三个段落标签，使用p作为样式选择器，代码如下： 段落样式 pbackground:#CCCCCC; color:#FF0000; font-size:16px; 段落一 段落二 段落三 如果想使三个段落显示不同的背景与字体颜色，使用p作为样式选择器是无法实现的，因为该样式会对页面中所有段落起控制作用。事实上，网页设计人员经常会遇到需要控制页面中部分标签的样式，这种情况下，也就是缩小原有HTML标签作样式选择器的作用范围。此时，可使用类(class)样式选择器。类样式选择器的完整格式如下：HTML标签名.类名属性1:值; 属性2:值; 属性n:值;可以用类(class)为一个HTML标记符指定多个样式，与HTML标签作样式选择器不同，要使类样式选择器起作用，必须在标签中指定样式的类名，如class=style1。将上述三个段落的背景设置为灰色，字体分别为红色，蓝色，黑色，字号大小分别为20px、16px、12px，可以设置三个类选择器，并在三个段落标签中指定类样式选择器，相应代码如下。 p.style1background:gray;color:red; font-size:20px; p.style2background:gray;color:blue;font-size:16px; p.style3background:gray;color:black;font-size:12px; 段落一段落二段落三 上述代码的页面效果如图3-7所示。需要注意的是，在标签中指定样式选择器的类名，不能使用完整样式选择器名称p.style1，而必须使用style1，因为style1才是真正的类名。图3-7 类作样式选择器类的声名也可以不针对具体的HTML标记符，很多时候，我们都省略类选择器前面的HTML标签名，直接使用“.类名”的格式声明一个类样式。例如有样式.strongfont-weight:bold;此时，页面中只要需要font-weight样式属性的标签，例如、等，都可以使用class=strong调用该样式，使字体加粗。这是多个HTML标签共用同一个样式的例子。上述两种类的定义也可以复合使用，例如下面代码中声明了.style1与p.stlye1两个样式表，类名相同。.style1color:red; p.style1background:gray; font-size:20px;页面中的和两个标签都使用style1样式，则color、background和font-size三个属性同时作用于标签，而只有color属性作用于标签，请读者仔细体会样式作用的原理。段落一 这是一个范围 3.4.3 ID作样式选择器HTML标签的ID是一个身份标识，针对某个特定标签的样式控制或编程，都要使用标签的ID。ID作样式选择器与类和HTML标签作样式选择器的语法基本一致，页面中对应标签只需要设置与ID样式选择器一致的ID就可以使用该样式，一般情况下，页面标签的ID是唯一的，因此，ID样式选择器一般只针对某个特定的标签作用一次。定义格式如下：#ID attributes1:values1;attributes2:values2;例如下面代码用#yellow声明一个ID样式表，表示字体为黄色。#yellowcolor:yellow其引用如下：本段为黄色上述代码请参见本章范例id_selectors.htm。使用类选择器和ID选择器有以下一些区别： 类选择符可以重复使用，且可以用在任意元素上，使用任意次； 页面中HTML标签的id属性应该是唯一的，拥有id的元素才会应用该样式； ID选择器的优先权高于类选择器。3.4.4 层次样式选择器HTML标签是可以嵌套使用的，本章范例div_li_style.htm有如下代码，使用了两个层，并分别指定了id，层内嵌套有列表标签。这是div1中的列表这是div1中的列表这是div1中的列表 这是div2中的列表，id为li1这是div2中的列表这是div2中的列表如果要实现图3-8的样式：div1中标签为加粗字号，红色，div2中标签为普通字号，蓝色，如果使用类作样式选择器，则需要针对标签设计两个不同的类样式，并在标签中调用，声明和调用样式的代码变得较复杂。事实上，CSS规范中提供了层次样式选择器，可以实现上述效果。图3-8 层次样式选择器下列代码给div1和div2定义了层次样式表div#div2 ul lifont-weight:normal;color:blue;div#div1 ul lifont-weight:bold; color:red;层次样式表的概念与HTML文档树的层次结构是一致的，沿着某个起始的节点，经过一定路径，从而达到指定的位置，层次样式选择器就是使用这条路径作选择器的名称的。在上面代码中，层次选择器div#div1 ul li所定义的样式表示将div标签下面一个id为div1名下的ul和li标签的字体设置成加粗，颜色为红色。需要说明的是，样式选择器的基本形式只有HMTL标签、类、ID，层次选择器实际上是上述三种基本选择器的组合方式。3.4.5 超链接专用选择器由于HTML中的超链接标签有link、visited、hover、active四个状态，分别表示链接、已访问过的链接、鼠标停在上方时、点击鼠标时四个状态。CSS规范为超链接提供了4种专用选择器：a:link（没有接触过的链接）：用于定义链接的常规状态。这种链接状态是基本的，推荐至少要定义这种链接样式。a:visited（访问过的链接）：用于阅读文章，能清楚地判断已经访问过的链接。颜色要和普通文本和其它超链接常规状态颜色不同，多用于以内容为主的网站。a:hover（鼠标放在链接上的状态）：用于产生视觉效果。(推荐“a:hover”链接颜色使用红色，能产生极好的视觉效果。)a:active（链接被点击时的状态）：用于表现鼠标按下时的链接状态。以上4种选择器第4种较少使用，在定义选择器时可以省略，但要严格按上述顺序定义，否则可能会无效。a:linktext-decoration:none ; color:red;a:visited text-decoration:none ; color:gray;a:hover text-decoration:underline ; color:red ;a:active text-decoration:none ;color:green; 上述样式控制的超链接如图3-9所示，没有访问过的超链接为红色，访问过的为灰色，被点击时为绿色，鼠标悬停在超链接上方时为红色加下划线。图3-9 超链接样式如果网页中不同区域的超链接需要设置成不同的样式，如上图所示，第一个栏目的超链接未访问时为红色，第二个栏目未访问时为蓝色，此时，可以单独设计一个用来控制超链接样式的类，超链接类的语法格式为a.类名样式定义，详见本章范例link_style.htm的代码。a.news:linktext-decoration:underline ;color:blue;a.news:visitedtext-decoration:underline ;color:green;a.news:hover text-decoration:underline ;color:red;a.news:active text-decoration:underline ;color:green;调用上面超链接样式，必须在超链接标签中显示指定样式类名，代码如下。超链接1超链接2超链接3超链接43.4.6通配选择器*有时，需要将网页中所有标签设置成某一共同的样式，例如，所有文字的颜色都显示成红色，此时，可使用通配样式选择器“*”为所有的元素定义统一的属性。例如，页面中声明了通用样式选择器的样式*color:red;则页面中所有标签的文字都以红色显示，除非另外再受到其他样式的控制。3.5 CSS作用原理3.5.1优先级在3.4节中三种基本的HTML样式选择器，优先级最高的是ID样式选择器，其次是类样式选择器，最低的是HTML标签样式选择器。本章范例css_prior.htm演示了上述三种样式选择器的优先关系。下列代码中声明了分别以HTML列表标签名li作样式选择器、类名bold作样式选择器、ID作样式选择器的三个样式表。li font-weight:normal;color:red; font-size:18px;li.bold font-weight:bold;color:blue;font-size:14px;#li1 font-style:italic; font-weight:normal;color:green;font-size:16px;样式表li对页面中所有的HTML标签起作用，将其文字显示成红色，字号为18px。样式表li.bold对使用了class=bold的标签起作用，将其文字显示成加粗，蓝色，字号为14px。样式表#li1将页面中ID号为li1的标签文字显示成斜体，绿色，字号为16px。在下面代码的列表标签中，第一行没有使用class和id属性，因此由样式表li起作用。样式表li对页面中所有标签都起作用，但由于优先级低于类样式表选择器的li.bold，因此，第二行的样式由li.bold控制。同理，第三行的样式由样式表#li1控制。在第四行中，同时有class=bold id=li1两个属性，由于ID样式选择器的优先级最高，因此，该行受样式表#li1的样式控制。列表文字1class为bold的列表文字2id为li1的列表文字3列表文字4上述代码的页面效果如图3-10所示。图3-10CSS优先级3.5.2继承HTML文档标签是一种树状嵌套形式的，样式表作用于标签时，下层标签可以继承上级标签的样式。在本章范例css_inherit.htm中，网页中HTML标签代码如下。 这是网页的标题 这是一个段落。这是段落中的一个范围标记，范围标记已经结束了。 这是UL中的第一个列表 这是UL中的第二个列表 上述代码中，HTML标签body、div、h1、p、ul和li是一种树形嵌套关系，层次关系如图3-11所示。divh1pulspanlibody图3-11css_inherit.htm页面中标签层次图样式表的继承是依据HTML树形关系，外层的HTML标签CSS会传递到内层标签中（除非该标签不具有该样式属性，例如color属性不能被标签继承）。上例网页中定义的样式表如下：bodycolor:blue; divfont-size:18px; text-align:center; border-color:#F00;border-width:1px; border-style:dashed; pcolor:red; font-size:18px; font-weight:normal; text-align:left;span.strongcolor:black; font-size:25px; font-weight:bold; 样式定义body的字体颜色为蓝色，根据继承原则，body标签内容嵌套的div以及div下的h1、p和ul字体都显示成蓝色，只有当下层的标签另外设计字体颜色，字体的蓝色才被子标签的样式替换，如p标签设置字体为红色，此时就不再使用body的蓝色。读者可以在p段落的内嵌标签span标签加上样式属性class=strong，观察样式变化。CSS继承原则决定HTML子标签会继承父标签的样式风格，并可以在父标签的基础上加以修改，产生新的样式，而子标签的样式风格不会影响父标签的样式。利用这一原则，可以将通用公共的样式写在父标签的样式中，从而节省CSS代码编写量。3.5.3就近原则当多个样式都对某个标签起作用时，如果多个样式中的属性互不冲突，则这些样式共同作用于标签，有些教材将这种现象称为样式的层叠性。如果定义的样式属性有冲突，在优先级相同的前提下，这些样式中发生冲突的属性按就近原则对标签作用，即离标签最近的样式中定义的样式属性直接起作用。在本章范例css_recent.htm中，定义了两个段落标签样式p，第一个p样式设计了字体颜色为红色和字体粗细为普通，第二个p样式设计了字号为18px、字体粗细为加粗和文本对齐方式为居中，运行该页面，可以发现段落是红色、18px的粗体、文本居中。pcolor:red; font-weight:normal;pfont-size:18px; font-weight:bold; text-align:center;两个p样式中都有样式font-weight属性，一个值为normal，一个值为bold，最终段落显示成加粗的字号，这是因为第二个p样式离p标签距离更近。读者可以修改两个p样式的顺序，观察段落字号变化。3.6 CSS属性3.6.1 长度单位在网页设计过程中，相对单位与绝对单位是两个非常重要的概念，所谓相对单位，是以某个对象为参考基本，相对于该参考的单位尺度。所谓绝对单位，是以一个固定值来度量的单位尺度。长度单位中的相对单位有px、em和百分比几种表示方法，绝对单位有in（英寸）、cm（厘米）、mm（毫米）、pt（点）、pc（皮卡）等。各单位的含义与表示方法如表3-1所示。表3-1长度单位类型单位含义示例相对长度px像素，根据显示设备的分辨率而确定的一个长度单位，显然，分辨率都为800*600的17寸显示器和52寸投影中，像素为100*80的绝对长度是不一样的，但同一显示设备中px值是绝对的。pfont-size:18px;将字号设置为18像素。em以目前字符高度为单位。p text-indent:2em段落前空两个字符。%表示长度为参考标签的百分比，前面可以加“+”或“-”两个符号，如果参考对象没有确定值，则为标准值。tablewidth:80%;表示表格占父容器宽度的80%。绝对长度in英寸，1 in = 2.54 cm，非国际单位，平时使用极少。pfline-height:1in;行高为1英寸。cm厘米，国际标准单位，使用较少。mm毫米，国际标准单位，使用较少。pt点数，1 pt = 1 / 72 in，基本的显示单位，较少使用。pfont-size:11pt;将字号设置为11点。pc印刷单位，应用在印刷行业中，1pc=12pt。3.6.2 颜色值网页中可以使用颜色名称、十六进制、或RGB分量等方式来表示颜色，各种表示方式如表3-2所示。表3-2网页颜色表示方法含义示例颜色名使用系统预先定义好的颜色名称表示颜色，如red/green/blue分别表示红绿蓝。a:linkcolor:gray;活动超链接颜色为灰色十六进制使用十六进制表示颜色，格式为#RRGGBB，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值。font-color:#ff0000字体颜色为红色background-color:#800080背景色为紫色RGB分量rgb(RR,GG,BB)，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值，可以用数值或百分比形式表示。color:rgb(255,0,0);红色color:rgb(80%,0,0);暗红一般情况下，网页的配置以不超过四种颜色为宜，过多的颜色反而会适得其反。可根据网站的功能确定一种主基调色，例如用红色作为政治宣传活动的网站的基调色。3.6.3 字体属性1font-family属性用来设置HTML元素的字体列表，可设置多个值，浏览器由前向后依次选择字体，如果一个网站服务器中没有安装前一种字体，则显示下一个字体。本章范例font-family.htm定义了三个字体样式：h3 font-family: “微软雅黑 隶书”p font-family: 黑体p.fonder font-family:“ 方正姚体 宋体”如果服务器中安装有“微软雅黑”，没有“方正姚体”，则h3显示的字体为“微软雅黑”，p.fonder显示的字体为宋体。效果如图3-12所示。图3-12 font-family属性2font-size属性用来控制字体显示的大小，取值有相对取值和绝对取值几种方式，相对取值可使用百分比或相对值larger、x-large、small、smaller等，绝对取值是指使用绝对长度单位，如px、pt等。本章范例font-size.htm定义了下列几种字号：h1.smallfont-size:small;.size_afont-size: 20px;.size_bfont-size: 20pt;.size_cfont-size: 100%;页面效果如图3-13所示，从图中可以看出，相对值是根据系统默认值计算出来的，请读者观察h1系统默认值及p默认值差别，以及p和h1使用相对值的显示效果。图3-13 font-size属性3font-style属性用来设置指定元素的显示字形样式，font-style属性有normal（普通）、italic（斜体）、oblique（倾斜）三种取值，默认值为normal。例：font-style.htmbodyfont-size:24px;p.italic font-style: italicp.normal font-style: normalp.oblique font-style: oblique对应显示效果如图3-14所示。图3-14 font-style属性4font-weight属性设置字体的粗细，属性取值可为normal、bold、bolder、light、lighter、100、200、900，100至900依次从最细渐变到最粗。例：font-weight.htmp.normal font-weight: normal;p.thick font-weight: bold;p.thicker font-weight: 900;5font-variant属性设置字型异体，具有nomal与small-caps两种取值。例：font-variant.htmp.normal font-variant: normal;p.small font-variant: small-caps;上例中small-caps将段落中的小写字母显示成大写字母。请读者注意，small-caps只是将小字字母显示成大写格式，但不是字母转换，字母本质上仍是小写字母，读者可以复制页面中的文字粘贴到其他地方进行检验。6font属性设置字体属性的一种简略写法，设置时可以省略某些属性，应按font-weight、font-variant、font-style、font-size、font-family的顺序依次出现。例：font.htmp font: italic small-caps 900 22px arial; 3.6.4 文本属性文本属性用于控制文本的段落格式，包括字符间距(letter-spacing)、文字间距(word-spacing)、行间距(line-height)、文本水平对齐(text-align)、文本垂直(vertical-align)、文本修饰(text-decoration)、文本缩进(text-indent)、文本转换(text-transform)等属性。1 letter-spacing属性设置字符间距，属性值可为具体长度，并可取负值，用来紧缩字符间距。例：text_text_letter-spacing.htmh1 letter-spacing: -3px;h4 letter-spacing: 0.5cm;2word-spacing属性设置文本中单词(汉字)间的距离。例：text_word-spacing.htmp.normal word-spacing: normal;p.length word-spacing: 1.5 cm;3line-height属性控制标记符中文本行高。其取值可以是数字、长度或百分比，normal为默认值。如取值为数字，则表示行高为当前设置字号的倍数。例如，divfont-size:10pt；line-height:2;，则行高为10pt*2=20pt。例：text_line-height.htmdivfont-size:16px;line-height:2;div.thinfont-size:16px;line-height:12px;4text-decoration属性文本修饰属性，包括none、下划线(underline) 、上划线(overline) 、删除线(line-through )以及闪烁(blink)等值，none为默认值，IE中不支持blink效果，在Firefox浏览器中可以看到h4标签的闪烁效果。例：text-decoration.htmh1 text-decoration: overline;h2 text-decoration: line-through;h3 text-decoration: underline;h4 text-decoration:blink;a text-decoration: none;5text-align/vertical-align属性设置文本的水平对齐/垂直对齐，text-align取值为left、right、center、justify，默认值为left，vertical-align的取值为baseline、sub、super、top、text-top、middle、bottom、text-bottom等值，baseline为默认值。6text-transform属性用来设置文本格式转换，取值有none(默认值)、capitalize(首字母大写)、uppercase(字母大写)、lowercase(字母小写)。与font-variant一样，text-transform并没有真正将字母进行大小写转换，只是文本的显示形式上发生改变。例：text-transform.htmp.uppercase text-transform: uppercase;p.lowercase text-transform: lowercase;p.capitalize text-transform: capitalize;7text-indent属性设置首行缩进，取值可以为数值或百分比，可取正值或负值，默认值为0，表示无缩进。例：text-indent.htmp text-indent: 1cm;p.Chinesetext-indent:2em; font-size:20pt;3.6.5 颜色和背景1颜色属性例：color.htmh1 color: #00ff00h2 color: #dda0ddp color: rgb(0,0,255)2背景属性网页中可以设置背景颜