5.1.1 外部样式表
外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个或者多个外部样式表中定义全部样式,然后让网站上的每个页面加载这些外部样式表,从而确保每个页面都有相同的设置。尽管还有内部样式表和内联样式这些方式,但从外部样式表为页面添加样式才是最佳实践,推荐使用这种方法。
1.创建外部样式表
和HTML文档一样,能够创建和编写CSS的工具很多,小到普通的文本编辑器如记事本,大到各种网页开发工具如Dreamweaver都能够完成CSS文档的创建与编写任务。
这里以在Dreamweaver CS6的环境下创建CSS为例展开介绍。要创建一个外部样式表,在新建文档界面中选择CSS,如图5-1、图5-2所示。
样式表开头处的@charset并不总是必需的,不过在样式表中包含它也没有任何坏处。如果样式表中包含非ASCII字符,就必须包含它。出于这种原因,可以选择总是包含@charset,以免后来样式表需要它时再回过头来添加,另外,一定要将它放在样式表的第一行。
图5-1 新建CSS文档
图5-2 CSS文档
可以以任何名称为样式表文件命名。“base.css”和“global.css”是两种常见的样式表名称,它们通常包含应用于网站大多数页面的样式规则。网站制作者通常创建一些为某些区块所特有的附加CSS文件,作为对基本样式的补充。例如,对于一个商业网站,“products.css”包含的可能是为产品相关页面准备的样式规则。无论选择什么文件名,一定不要包含空格。
2.使用外部样式表
创建了样式表之后,需要将它加载到HTML页面中去,从而为内容应用这些样式规则。使用外部样式表可以通过链接引用(<link>)或者导入(@import)的方式,不过不推荐导入方式。@import指令会影响页面的下载速度和呈现速度,在IE浏览器中影响更为明显,因此这里主要介绍链接到外部样式表的方式。
在每个希望使用样式表的HTML页面的head部分,输入其中url.css是外部样式表的路径和名称。
例如,创建图5-3所示的外部样式表。
将外部样式表“base.css”链接到网页中,代码如下:
页面效果如图5-4所示,“base.css”中设定的样式将p元素的字号设为14.7 px,首行缩进2字符,并应用到所有段落。
出于简化的目的,这个例子中的链接假定HTML页面与“base.css”位于同一个路径下。不过,实践中最好将样式表组织在子文件夹里,而不是与HTML页面混在一起。常见的样式表文件夹名称包括“css”“style”等。如果“base.css”放在名为“css”的文件夹里,文件夹与HTML页面位于同一路径下,那么该例中的link元素就应该写作“<link rel="stylesheet"href="css/base.css">”(关于路径的写法详见8.1.1节)。
图5-3 外部样式表“base.css”
link元素位于HTML文档的head部分。页面可以包含一个以上的link元素,但使用link元素的次数最好尽可能少,以让页面更快地加载。对外部样式表进行修改时,所有引用它的页面也会自动更新。外部样式表中的规则可能被HTML文档内的样式覆盖,如果链接到多个样式表,不同的文件中有相互冲突的显示规则,则靠后的文件中的规则具有更高的优先级(详见5.1.8节)。
图5-4 链接到外部样式表