語法教學

CSS 基礎課程

CSS 的用法 - 定義 CSS

內容

定義 CSS

有下列三種方法可定義 CSS 語法。

行內樣式 (inline)

行內樣式主要是將 CSS 語法直接加到標籤裡。這樣的做法會使得「讓內容與呈現層分開」的優點消失,因為 CSS 樣式變成標籤的屬性值,和標籤區塊裡的內容混在一起,反而喪失了當初制定 CSS 的美意,並且此標籤中的樣式也無法讓其他標籤共享。但考慮到網頁設計師可能會有特殊的需求會使用到,所以標準中制定了此方法。不過在此我並不建議大家使用它,而以另外兩種方法來替代。若你真的需要用到它,請盡量少用些。

目前有一些可編輯 HTML 的文書處理軟體也會使用此一方式來對待 CSS 樣式,像是 Word 和 OpenOffice.org 中的 Writer。但是以這樣方法產生出來的 HTML 檔案會變得比較肥大,所以使用專門的 HTML 編輯會比較好些,例如 Dreamwaver 甚至記事本等純文字編輯器。

說了那麼多,還是得來看一下行內樣式怎麼用。只要在你所需要用到的標籤中加上 style 屬性,其值指定為你所想要使用的 CSS 樣式就可以了。底下的例子會設定段落中文字的顏色為紅色、字體大小為 14 像素,並且左方間距為 20 像素:

這是測試用的段落。

設定方法如下:

<p style="color: #FF0000; font-size: 14px; margin-left: 20px"> 這是測試用的段落。 </p>

是不是很簡單?只要把 CSS 樣式加到 p 標籤中的 style 屬性裡就可以了。但是仔細一想,如果每一個 p 標籤的段落都要加上這些樣式的話,五十個段落就得要輸入五十次。況且日後如果想要更新的話,到時候痛苦的就是自己了,所以底下介紹其他的方法。

內部樣式 (internal)

這種方法是將 CSS 樣式表定義在網頁內部的 head 標籤裡,因此我們可以把一直會被使用到的樣式寫在此處,這樣比上面把 CSS 樣式散落在各個 HTML 標籤之中要好得多了。也因為它是寫在網頁內部,所以也只有此份頁面可以使用,無法讓其他頁面一起使用。你可以為一些特定的頁面設定其獨有的樣式表,而不會影響到其他頁面。設定的方法很簡單,只要使用 style 標籤將 CSS 樣式包住即可 (請注意!不是 style 屬性)。並為了較舊的瀏覽器可能無法支援 style 標籤中的 CSS 樣式,所以通常我們會加上 HTML 註解以避免較舊的瀏覽器將樣式的原始碼直接顯示在網頁中。範例:

<head> <style type="text/css"> <!-- a { color: #996633 } h3 { font-size: 12px } --> </style> </head>

使用上面的樣式,我們就可以讓每一個連結都改變顏色,並且 h3 標籤中的文字大小會是 12 像素,而不用一個一個去指定了。

外部樣式 (external)

如果今天我們想要讓數個網頁使用相同的樣式時,使用上面的方法會增加日後的維護的麻煩,因為得要一頁頁去重新定義。因此我們可以直接把 CSS 樣式定義在外部檔案中,只要在網頁檔裡設定好 CSS 樣式表檔的檔名,那麼就可以共同使用了,並且也節省了日後更新的時間。設定的方法是在 head 標籤中使用 link 標籤指定。

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

設好後每當瀏覽器讀取網頁時,便會自動下載 style.css 檔案,並且把相關的樣式顯示出來。CSS 檔案以純文字檔的格式儲存,並且以 .css 做為其副檔名。檔案中只要將 CSS 樣式一一加入即可:

body { background-color: #0000FF; color: #FFFF00; } a { color: #996633 } h3 { font-size: 12px }

站內連結