1.5.1  導入樣式表

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

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

<style>

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

</style>

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

1. 從HTML內部導入CSS

也可以用HTML<link>標記包括進樣式表，如下所示：

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

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

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

1.5.2  局部樣式設置

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

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

但這應只限于最特殊的情況，因為它破壞了內容和布局的分離性。

1.5.3  ID和類

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

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

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

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

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

如果想對多個元素應用同一樣式，不必給每個元素都指定一個不同的ID，可指定一個類對它們一起進行管理，如下所示：

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

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

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

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

注意：

除了使用單個ID或類外，還有很多對元素應用樣式的方式。第2章有詳細介紹。