8.1 创建外部样式表
外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式,然后让网站上的每个页面加载这个外部样式表,从而确保每个页面都有相同的设置。尽管后面你将学到嵌入样式表和内联样式表,但从外部样式表为页面添加样式才是最佳实践,推荐你使用这种方法(允许偶尔的例外)。
创建外部样式表
在文本编辑器中创建一个新文档,如图8.1.1所示。
按照第7章的讲解,为网页定义样式规则。同时,根据需要在CSS中添加注释(参见图8.1.1)。
将文档以纯文本格式保存在希望放置的目录中。尽管任何名称都是允许的,但应该为该文件添加.css的扩展名,表明这是一个层叠样式表,如图8.1.2所示。
图8.1.1 使用任何你喜欢的文本编辑器创建样式表。这是记事本(一种旧版本)。大多数人在创建HTML和CSS文档时使用相同的编辑器。/* */
之间的文本是CSS注释,它既不会影响页面的显示,也不会出现在页面中
图8.1.2 一定要将CSS文件保存为以.css
为扩展名的纯文本格式文件(可能称为Text Document、Plain Text、ASCII等)
提示 可以以任何名称为样式表文件命名。base.css和global.css是两种常见的样式表名称,它们通常包含应用于网站大多数页面的样式规则。网站制作者通常创建一些为某些区块所特有的附加CSS文件,作为对基本样式的补充。例如,对于一个商业网站,products.css包含的可能是为产品相关页面准备的样式规则。无论选择什么文件名,一定不要包含空格。
提示 外部样式表要么是通过链接引用的(如8.2节中介绍的),要么是导入的(通过
@import
),不过不推荐你导入它们。@import
指令会影响页面的下载速度和呈现速度,在Internet Explorer中影响更为明显(参见Steve Souders对此问题的讨论:www.stevesouders.com/blog/2009/04/09/dont-use-import/)。
提示 样式表开头处的
@charset
并不总是必需的,不过,总是在样式表中包含它也没有任何坏处,参见图8.1.1。不过,如果样式表中包含非ASCII字符(使用CSS生成内容(一项高级主题)或名称中含有特殊字符的Web字体时就会遇到这种情况),就必须包含它。出于这种原因,你可以选择总是包含@charset
,以免后来样式表需要它时再回过头来添加,此外,一定要将它放在样式表的第一行。不过,不要在嵌入样式表或内联样式(本章后文会讲到)中包含@charset
。