|
一 将css样式表加入到网页中
把css加入网页中有四种方法 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机用的IE2.0）即使在设定了TYPE="text/css"属性时也不能忽略样式表继续执行下面的命令。而且还会显示样式表的代码。而使用注释标签则可以避免发生这种情况。 2.Linked style（链接样式表） 这里是样式表功能发挥的淋漓尽致的地方。你可以将多个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  range;font-family:impact}--> </style> <HEAD> <TITLE> My First Stylesheet </TITLE> </HEAD> <BODY> <H1> Stylesheet: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} 在本例中浏览器首先输入compny.css的规则（@import必须打头），然后加入移植的规则，从而为这个网页产生规则集合。 请注意，对于H1在外部样式表文件和植入的样式表文件中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则 呢？植入的规则此时将占上风。 输入样式表的灵活性可以使你输入无数多个样式表，并可以按照自己的喜好用植入的样式表凌驾于输入的样式表以上。 4.Inline styles(行内样式表） 你还可以HTML行中加入样式表规则，如下： <HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> </HEAD> <BODY> <H1 STYLE="color range;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.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 Coommunicator和Inter Explorer都不支持，所以本文中细述。 最后一个问题：如果样式表规则同HTML标签冲突时，如何处理？我们看一下这个例子： I{font-family:impact} <p>I think <I> <FONT FACE="Times'> East of Eden </FONT> </I> is Stein back's best novel </P> 该例中样式表规则要求浏览器使用Impact,但是传统的HTML<FONT FACE>标签要求用Times字体，一个很明显的传统。 根据正式的样式表规定，应该优先执行样式表规则。 但是当前流行的几种浏览器如Netscape 和IE 4.0都规定应优先执行HTML 转自电脑报 |
|
|
