样式表组成(21)

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章中讨论针对性的时候会说明这一点。

读书导航