将CSS样式表加入网页中
任何使用过HTML的人都知道HTML有些不足之处，所以有时候我们不得不制作体积相当大的GIF图象以获得想要的字体和布局。有时候也不得不使用各种表格标签和隐藏的空格GIF图像以使页面的布局能达到预想的目的。
1996年底的时候诞生了一种叫做样式表（stylesheets）的技术。全称应该是串接样式表（Cascading Stylesheets简称CSS）这位HTML的“表弟”向世人保证：
1.将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。
2.只通过修改一个文件就改变页数不定的网页的外观和格式。
3.保证在所有浏览器和平台之间的兼容。
4.更少的编码、更少的页数和更快的下载速度。
但是，除了还不能支持我们常用的部分浏览器外，CSS在实现其它承诺方面作得相当出色，为大部分的网页创新奠定了基石。
实际上很简单。你先编写一个标准的HTML文件，然后编写一个独立的样式表，通过它告诉浏览器如何解释你的文件。比如你告诉浏览器将某段文字解释成12点的Times Roman，并带有1.5英寸的边界，标题是绿色的40点Helvetica文字等等。现在，你在HTML文件的头部指向样式表，然后将HTML文件和样式表一起发布到服务器。
你可以将很多HTML文件指向一个样式表。通过改变这个样式表，你可以有效地改变整个Web站点。另外，你还可以有一些不同的样式表。每一样式表对应不同的文件。比如，其中一个定义所有文件的边界，其他样式表描述不同文件的样式结构，或改变以前的设置。
#1 二、加入网页的四种方法
1.Embedded styles （植入样式表）
所有的样式表信息都列于HTML文件的顶部，同<BODY>分列，例：
<HTML>
<STYLE TYPE=″text/css″>
<!－－
H1 { color: green; font－family: impact }
P { background: yellow; font－family: courier }
－－>
</STYLE>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
……
植入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你想对网页一次性加入样式表，就可采用此方法。
你可能注意到代码中有两处很奇怪： TYPE=″text/css″属性和注释标签。TYPE=″text/css″ 设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。
注释标签（<!－－ 和 －－>）更为重要。有些老的浏览器（如MAC机用的IE 2.0）即使在设定了TYPE=″text/css″ 属性时也不能忽略样式表继续执行下面的命令，而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。
2.Linked styles （链接样式表）
这里是样式表功能发挥得淋漓尽致的地方。你可以将多个HTML文件都链接到一个中心样式表文件。这个外部的样式表文件将设定你所有网页的规则。如果你改变样式表文件中的某一细节，所有页面都会随之改变。
使用方法：产生一个普通的网页，但使用<STYLE>规则，而是在<HEAD>内使用<LINK>标签：
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
<LINK REL=stylesheet HREF=″mystyles.css″ TYPE=″text/css″>
</HEAD>
<BODY>
……
（使用链接的样式表时，你无须使用注释标签。）
现在生成一个单独的文本文件，起名mystyles.css （或者任何你喜欢的名字）。文件内容如下：
H1 { color: green; font－family: impact }
P { background: yellow; font－family: courier }
如同发布HTML文件那样，将这个CSS文件发布到服务器中。在浏览器中观看时，你会发现浏览器将依照链接标签将链接了的HTML网页按照样式表的规则显示，在HREF属性中你可以选择使用绝对或相对URL。
3.Imported styles （输入样式表）
输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可以。例：
<HTML>
<STYLE TYPE=″text/css″>
<!－－
@import url（company.css）;
H1 { color: orange; font－family: impact }
－－>
</STYLE>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!
</P>
</BODY>
</HTML>
而其中输入的 company.css文件内容如下：
H1 { color: green; font－family: times }
P { background: yellow; font－family: courier }
在本例中，浏览器首先输入 company.css的规则 （ @import 必须打头），然后加入移植的规则，从而为这个网页产生规则集合。
请注意，对于H1在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则呢？植入的规则此时将占上风。
输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表之上。
4.Inline styles （行内样式表）
你还可以在HTML行中加入样式规则，如下：
<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1 STYLE=″color: orange; font－family: impact″>Stylesheets: The Tool of the Web Design Gods</H1>
<P STYLE=″background: yellow; font－family: courier″>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>
在这个例子中，你无须在HTML顶部加入样式表代码。加入行内的样式表属性将使浏览器同样执行样式表规则。
该方法不方便之处在于：你必须在每行中都中加入样式规则，否则下一行时浏览器将转回到文件的缺省设置。
加入行内的样式表相比不如植入、链接及输入的样式表那样功能强大，但有时候你会发现它也很有用。
屏幕就是一个战场，在一个HTML文件中，如果有三种不同的样式表规则都使用P作为其选择。输入的样式表指示浏览器将<P>文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。
#1 三、规则
好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序：
1.Inline styles （行内样式）
2.Embedded styles （植入样式）
3.Linked styles （链接样式）
4.Imported styles （输入样式）
浏览器将按照上述顺序执行样式表的指令。
但是还有一个问题，如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将<P>以绿色显示，而另一个规则要求以红色显示。
多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序：
使用特别说明的样式表规则，例：
BODY { color: green }
P { color: red }
有一项规则特别说明<P> 中的文字用红色显示，但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以<P>之内的文字用红色显示。
应用继承的样式表规则
按照样式表规则在HTML中的显示顺序执行。
P { color: green }
P { color: red }
当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，<P>同的文字红色显示，因为它是最后给出的规则。
注意：正式的串接样式表规定对于串接 顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细述。
最后一个问题：如果样式表规则同HTML标签冲突时，如何处理？我们看一下这个例子：
I { font－family: impact }
<P>I think <I><FONT FACE=″Times″>
East of Eden</FONT></I> is Stein
beck＇s best novel.</P>
该例中样式表规则要求浏览器使用Impact，但是传统的HTML<FONT FACE>标签要求用Times字体，一个很明显的传统。
根据正式的样式表规定，应该优先执行样式表规则。
但是当前流行的几种浏览器如Netscape 和IE 4.0 都规定应优先执行HTML。