2.3.3 使用外部样式表


2.3.3   使用外部样式表


外部样式表是相对于内部样式表而言的,它实际上是一个后缀名为.css的文件,独立于HTML页面,放置于网站文件夹内某个位置,我们也把这样的外部样式表称为样式表文件。样式表文件的内容和内部样式表类似,都是样式的定义。在本书中,为以示区别,在提到样式表文件的时候有时候也用css文件来代替,而具体的层叠样式表则用CSS这3个大写的缩写代称。


外部样式表通过在某个HTML页面中添加链接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用,这就是它最大的优点。如果说前面介绍的内部样式表在总体上定义了一个网页的显示方式,那么外部样式表可以说在总体上定义了一个网站的显示方式。


代码2.4说明了在HTML中是如何通过链接一个外部样式表来设置页面显示的。


代码2.4   HTML中连接外部样式表:html-outer.html





<html>
<head>
<title>一个简单网页</title>
<link href=style.css rel="stylesheet" type="text/css">
</head>
<body>
你好!HTML!(外部样式表)
</body>
</html>
链接外部样式表是通过link标签来实现的,语法如下。



<link href="外部样式表css文件的路径与名称" 
rel="stylesheet" type="text/css">

在代码2.4中,外部样式表为style.css,该文件存在于html-outer.html同目录下,具体内容如代码2.5所示。


代码2.5   外部样式表:style.css





...
Body {font-size:28px;}
...

将代码2.5和前面的代码2.3相比对,发现其内容实际上就是内部样式表中除去<style></style>等标签后的实际内容。


在浏览器中打开代码2.4的页面,效果如图2.14所示。







 
图2.14 利用外部样式
表style.css的网页

从图2.10、图2.11、图2.14我们可以发现行内样式表、内部样式表、外部样式表都可以令示例文字“你好!HTML!”在浏览器中显示出同样的外观,这是因为具体控制CSS的代码都是Body{font-size:28px;},而区别就在于这行代码存在的位置不同,下面我们再来总结一下3种样式表的特点,见表2-1。


表2-1   3种样式表的对比






 

表2-1中关于缺点有必要特别指出,由于行内样式表只针对当前所在的标签,内部样式表只针对当前所在的HTML文件。如果一个HTML文件中这样的标签很多,或者一个网站中包含内部样式表的HTML文件很多,都会增加文件的大小,从而使服务器接受用户请求并反馈网页回来的时候,传输速度受到影响。虽然这种影响大部分时候都是比较微小的,但如果文件大到一定程度,还是需要我们特别注意的。


更重要的一个问题就是维护。我们的网页投入使用后可能要经常修改,如果需要修改样式,3种样式表需要改动的成本有多大呢?我们来算一笔账。


假设页面A中有10个包含行内样式表的标签。网页B把这10个标签的样式定义归结到一起,放置在页面头部,形成了内部样式表。网页C则链接了一个外部样式表,它的内容也是这10个标签的样式定义。当我们需要修改这10个标签的样式定义时,操作如下。


(1)网页A的情况。


对于网页A,我们要打开编辑界面,一行一行地找到全部的10个标签,逐一进行修改。如果标签出现写法上的错误,需要反复修改时,我们很难确定错误出现的位置,修改过程比较麻烦。如果网站中类似网页A的HTML页面很多,我们要逐一打开这些文件,逐一找到这些标签,逐一进行修改。


(2)网页B的情况。


我们只要打开编辑界面,关注页面头部的样式定义,进行集中修改就可以了。如果出现写法错误,依然只关注页面头部的样式定义即可。


如果网站中与网页B类似的HTML页面很多,我们仍然需要逐一打开这些网页,修改它们头部的内部样式表。


(3)网页C的情况。


我们只要打开外部样式表文件,由于文件内容全部是样式定义的,修改的时候不会被其他信息所干扰。


如果网站中与网页C类似的HTML页面很多,我们也只是修改共同的一个或几个外部样式表文件即可。因为在这些HTML页面中,链接到外部样式表文件的代码:<link href="外部样式表css文件的路径与名称" rel="stylesheet" type="text/css">是一样的,不用修改。


显而易见,3种样式表在同样状况下进行修改时可提供的效率高低依次是外部样式表>内部样式表>行内样式表。


在实际应用中,往往是3种样式表同时运用,网站的总体风格依靠外部样式表来定义,每个网站的网页都链接一个或几个固定的css文件;当某个页面需要特别的样式时,则在该页面上采用内部样式表;当页面的某个标签需要特别的样式时,在该标签上应用行内样式表。通过这样的方法,做到了共性与个性的统一,在变化与固定之间建立了比较好的平衡。




标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2