2.4.6 URI
CSS在指定资源或数据文件的位置时使用一个特殊的术语:URI(Universal Resource Indicator,统一资源标识符)。CSS中使用URI主要有两个目的:
● 包含样式表。
● 包含背景图像。
有一种专门的方法用来引用URI,如下例所示:
.jupiter {
background-image: url(jupiter.jpg);
}
url()语法用于封装被引用文件的URI。在本例中,jupiter.jpg必须与样式表处于同一个目录下。如果样式表以mystyle.css命名,并位于www.example.com/styles/mystyle.css中,那么mypicture.jpg必须也放在styles目录下,它的存放路径应该是http://www.example.com/
styles/mypicture.jpg。完整的绝对路径或简短的相对路径都可用来指示文件路径。第7章将再次讨论这一主题,届时将介绍background属性及其语法。
2.5 在文档中包含CSS
在文档中调用CSS的方式非常灵活。可以通过4种方式将CSS包含到文档中:
● 通过使用内嵌的样式表将CSS包含在文档中,直接将样式表放在HTML文档的<style>和</style>标签之间即可,而这对标签必须放在<head>和</head>标签之间。
<style type="text/css">
body {
font: 12px sans-serif;
}
</ style >
● CSS可以放在一个文档中并通过<link>元素链接到HTML文档。注意,因为<link>元素并不只是用于引用CSS文件,还可以链接到当前站点的RSS源等,所以包含rel="stylesheet"很重要,这样浏览器才知道应该链接什么对象。
<link rel="stylesheet" type="text/css" href="example_1-1.css">
● 可通过使用@import规则,从内嵌的或链接的样式表中导入CSS。
<style type="text/css">
@import url(example_1-1.css);
</ style >
● CSS声明可以通过包含在style属性中的内联样式直接应用于HTML文档中的元素。
<body style="font: 12px sans-serif;">
前面已经使用过内嵌样式表和链接的样式表。建议继续使用这些样式表,除非有特殊的理由不这么做。导入方法对于高级CSS创作者有一些好处,但是也有其缺点,本书中不会讨论这方面的内容。
在任何情况下都不建议直接对HTML元素应用style属性。这种方式使得CSS的许多优点化为乌有,例如使用一条规则样式化多个元素;它还使得CSS的组织管理变得更加困难,在第4章中讨论针对性的时候会说明这一点。