1.5.1  導(dǎo)入樣式表

當(dāng)希望樣式化整個(gè)站點(diǎn)而不是單個(gè)頁面時(shí)，較好的管理樣式表的方法是將它們完全從Web頁面中移除，放到單獨(dú)的文件中，然后導(dǎo)入需要的文件。這樣針對(duì)不同的布局(如Web布局和打印布局)就有了不同的樣式表，而不會(huì)改變HTML。

可以通過兩種不同的方法達(dá)到此目的，一種是使用CSS的@import指令，如下所示：

<style>

@import url("/css/styles.css");

</style>

這一語句告訴瀏覽器從/css文件夾中取出名為styles.css的樣式表。@import命令是非常靈活的，如可以創(chuàng)建導(dǎo)入其他樣式表的樣式表等。但要確保在任何外部樣式表中沒有<style>或</style>標(biāo)記，否則就不行。

1. 從HTML內(nèi)部導(dǎo)入CSS

也可以用HTML<link>標(biāo)記包括進(jìn)樣式表，如下所示：

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

這與@import指令的效果是一樣的，除了<link>是個(gè)HTML標(biāo)記，而不是個(gè)有效的樣式指令外。因此，它不能用于從一個(gè)樣式表中導(dǎo)入另一個(gè)樣式表，也不能放在<style>…</style>標(biāo)記對(duì)中。

正如可以在CSS中使用多個(gè)@import指令包括多個(gè)外部樣式表一樣，也可以在HTML中使用任意多條<link>語句。

1.5.2  局部樣式設(shè)置

也可以分情況單獨(dú)設(shè)置或覆蓋當(dāng)前頁面上的特定樣式，方法是直接在HTML中插入樣式語句，如下所示(該樣式語句使標(biāo)記中的文本為藍(lán)色斜體)：

<div style="font-style:italic; color:blue;">Hello</div>

但這應(yīng)只限于最特殊的情況，因?yàn)樗茐牧藘?nèi)容和布局的分離性。

1.5.3  ID和類

設(shè)置元素樣式的更好方法是在HTML中給它賦一個(gè)ID，如下所示：

<div id='iblue'>Hello</div>

該語句聲明了ID為iblue的div元素的內(nèi)容應(yīng)采用在相應(yīng)#iblue樣式設(shè)置中定義的樣式。匹配的CSS語句如下所示：

#iblue { font-style:italic; color:blue; }

注意符號(hào)#的使用，它指定只有名稱為iblue的ID用這一語句樣式化。

如果想對(duì)多個(gè)元素應(yīng)用同一樣式，不必給每個(gè)元素都指定一個(gè)不同的ID，可指定一個(gè)類對(duì)它們一起進(jìn)行管理，如下所示：

<div class="iblue">Hello</div>

其聲明了這個(gè)元素(及其他使用該類的元素)的內(nèi)容應(yīng)采用在相應(yīng)iblue類中定義的樣式。如果應(yīng)用類，可在頁面頭部或在外部樣式表中使用下列樣式設(shè)置為類設(shè)置樣式：

.iblue { font-style:italic; color:blue; }

類語句不使用#符號(hào)(這是為ID保留的)，而是以(.)符號(hào)開頭。

注意：

除了使用單個(gè)ID或類外，還有很多對(duì)元素應(yīng)用樣式的方式。第2章有詳細(xì)介紹。