在HTML标识符中加入Styles
你可以为几乎所有的HTML标识符提供规则。例如,假设你想让处于一个列表中的所有文字以红色显示出来,你就可以用下面的规则来实现这一点:
<HTML>
<HEAD>
<TITLE> Simple Style </TITLE>
<STYLE>
<!--
B {color: red}
OL {color: red}
-- >
</STYLE>
</HEAD>
<BODY>
<B> I am bold and red </B>
<OL>
<LI> I am red.
<LI> So am I.
</OL>
</BODY>
</HTML>
在此例中,规则OL {color : red}作用于所有列出的表项颜色。如果你有多个列表,其余列表中表项的颜色也会是红色。
在此Style Sheets中的所有规则对它们所作用的元素都有相同的效果,第一个规则让所有包含在<B>标识符中的文字以红色显示出来,而第二个规则让所有位于每个有序列表中的东西都以红色显示。要想节省代码长度,你可以将这两句合并为一句:
B,OL {color : red}
规则不仅仅能决定颜色这一属性的行为,还对许多属性起作用。例如,你可以建立一个规则来指定所有的顶部标题都应当以24个点大小的Arial字体显示出来,并且具有黄色背景(见图7.19),如下所示:
<HTML>
<HEAD>
<TITLE> Simple Style </TITLE>
<STYLE>
<!--
H1 {font-style: italic; font-size: 24pt;
font-family: Arial; background: yellow}
-->
</STYLE>
</HEAD>
<BODY>
<H1> Important Information </H1>
This document contains very important information
</BODY>
</HTML>
图7.19 具有多重属性的规则
此例中的这个简单规则对所有位于标题中的文字都起作用,这个规则的声明中包含了许多属性及其值,它们由分号分隔。通过这种方法,你可以根据需要在一个声明中加入许多属性及其值。
你也可以为<P>和<BODY>标识符指定规则。当你想要控制大量文本的格式时,这是非常有用的,当你为<BODY>标识符指定一个规则时,这条规则将会作用于所有包含在文件主体部分中的东西;当为<P>指定一条规则时,它仅仅作用于包含在此标识符中的东西,如下所示:
<HTML>
<HEAD>
<TITLE> Simple Style </TITLE>
<STYLE>
<!--
BODY {font-size: 24pt}
P {font-style: italic}
-->
</STYLE>
</HEAD>
<BODY>
This text is above the paragraph.
<P> This text is inside the paragraph. </P>
</BODY>
</HTML>
当这个HTML文件在浏览器上显示时,所有的文字将以24点大小的字体显示出来(见图7.20)。甚至位于<P>标识符内部的文字也以24点大小的字体显示,这是因为<P>标识符位于<BODY>标识符内部。然而,仅仅位于<P>标识符内部的文字以斜体显示出来。
图7.20 为<BODY>和<P>使用的规则
当两条规则冲突时会发生什么呢?例如,假设在上例中为<P>标识符设定的规则指定文字以10点大小的字体显示,在这种情况下,在<P>标识符中指定的类型将会起作用。通常,为子元素设定的规则将会覆盖为包含这个元素的父标识符所设定的规则。