样式表(CSS)学习(四)

CSS实际应用

　　样式表应用的精华在于我们可以在多个html文件中引入同一个样式表文件，这样一来我们只需修改一个样式表文件，就可以同时改变多个页面的显示外观，给网页的更新维护带来了极大方便。它的使用方法：产生一个普通的网页，但不使用<STYLE>规则，而是在<HEAD>内使用<LINK>标签：
main.htm

<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
<LINK REL=stylesheet HREF="main.css" TYPE="text/css">
</HEAD>
<BODY>
put your body messages here.
</BODY>
</HTML>

其中main.css文件中放置设计好的样式表文档，如：
<STYLE TYPE="text/css">
<!--
BODY{FONT-FAMILY: 宋体;FONT-SIZE: 9pt;COLOR:#000000;margin-left: 2em}
.pt9 {FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; COLOR:#000000}
P,H9,TD,SELECT
{FONT-FAMILY: "宋体"; FONT-SIZE: 9pt}
A:link {font-family: "宋体"; font-size: 9pt; color: #003388; text-decoration: none}
A:visited {font-family: "宋体"; font-size: 9pt; color: #003388; text-decoration: none; font-color=blue}
A:hover {font-family: "宋体"; font-size: 9PT;color:red; text-decoration: underline}

-->
</style>

这样当我们打开main.htm时，浏览器会首先调入样式表main.css的规则，使页面按此规则显示。
　　另外，我们还可以采用输入样式表，它不同于上述链接法之处在于链接法不能同其它方法结合使用，但输入法则可以。其使用方法：（例）
<HTML>
<STYLE TYPE="text/css">

</STYLE>
<HEAD>
<TITLE>import css</TITLE>
</HEAD>
<BODY>
put your body messages here
</BODY>
</HTML>

冲突解决
　　以上介绍了几种使用样式表的方法，那么如果我在同一文件中同时使用多种方法应用样式表，浏览器会如何操作呢？
　　好在支持样式表的浏览器自身配有样式表的串接顺序来解决这个问题。根据正式的规定，以下为样式表的串接顺序：（css称为串接样式表，意义正在于此）
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）
浏览器将按照上述顺序执行样式表的指令。
　　但是如果同一种类的多个规则相互冲突怎么办？这里有一个极其简单的解决顺序：
　　1.使用特别说明的样式表规则，例：

BODY { color: green }
P { color: red }

　　有一项规则特别说明<P> 中的文字一红色显示，但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以<P>之内的文字以红色显示。
　　2.应用继承的样式表规则
　　如果不存在第1步中所列的特别说明的规则，则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。
　　3.按照样式表规则在HTML中的显示顺序执行。

P { color: green }
P { color: red }

　　当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。上例中，<P>之内的文字以红色显示，因为它是最后给出的规则。

　　好了，关于样式表就说这么多，请多加实践，你会发现在你学习Dhtml的内容时，样式表在其中扮演了重要角色。

务器租用、托管；域名注册；虚拟主机

欢迎咨询/

搜索

样式表(CSS)学习(四)