|
方法C:@import
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Applying CSS</title>
<style type="text/css">
<![CDATA[
@import "styles.css";
]]>
</style>
</head>
与方法B类似,使用@import能以相对路径(像是上面的例子)或绝对路径从外部文件导入CSS定义.
方法C与使用<link>标签有着相同优点,由于样式表放在外部文档中,修改并更新单一文档就能改变整个网站,而且能简单快速地完成.外部样式表会被浏览器缓存下来,为导入相同样式表的所有页面节省下载时间.
捉迷藏
使用方法C的重大好处是:Netscape 4.X以下版本并不支持@import语法,因此会使被引用的CSS内容"藏起来",这肯定是个好用的技巧,因为我们能以此编写进阶CSS语法处理布局之类的设计细节,让能够处理的最新浏览器显示它们,同时也能让老旧浏览器忽视这些语法.
Netscape 4.x的问题在于:它认为它的CSS支持能力与真正支持的浏览器一样好.因此,除了Netscape 4.x之外,我们都能让浏览器自己决定是否显示正确的效果.
这是以标准设计网站时的重点,尽量把结构化标记代码与显示方式分开,并且为支持的浏览器提供布局细节,其他样式.老旧的浏览器则去他们能轻易读取,显示的结构内容,但不会处理为他们隐藏起来的进阶CSS规则.
打开样式,关闭样式
看看图10-1和10-2,并且比较一下,这是我的个人网站使用完整CSS,接着关掉CSS的显示效果(应该十分接近老旧浏览器的显示效果),不使用CSS时的结构仍然十分明显,所有人仍然容易阅读,使用.如果我们没有把显示布局需要的CSS隐藏起来,那么旧版本浏览器的使用者或许就会拿到一团难以阅读的内容.
图10-1 我的个人网站,使用CSS
图10-2 同一个页面,拿掉CSS,古旧浏览器可能把它显示成这样
出处：蓝色理想
责任编辑：bluehearts
上一页 标记语言——应用CSS [1] 下一页 标记语言——应用CSS [3]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 2 页 标记语言——应用CSS [2]
