語法教學

CSS 基礎課程

CSS 判斷規則 - 重新定義 HTML 標籤、自訂樣式

內容

重新定義 HTML 標籤

selector 大致上可以分為重新定義既有的 HTML 標籤、自訂樣式和虛擬類別及進階選擇器 (將會在進階課程中介紹)。之前我們舉的例子都是針對 HTML 標籤做修改,像是 body, p, a 等等,只要我們直接把想改變的標籤設定好樣式即可。例如我們想把超連結的顏色從預設的藍色改成紅色的話,使用以下的樣式:

a { color: #FF0000 }

自訂樣式

有的時候我們可能會需要在同一個 HTML 標籤中使用不同的樣式,像是上例中的超連結,在某些情況下我們可能會希望它的顏色是白色或黃色,但是上面已經將 a 標籤統一定義為紅色了,這時我們可以使用自訂樣式。

class 樣式

定義 class 樣式時要使用 . 做為其名稱開頭,並在欲使用的標籤中用class 屬性指定。例如:

a.write { color: #FFFFFF } a.yellow { color: #FFFF00 }

這兩個樣式分別定義超連結的顏色為白色和黃色,使用方法如下:

<a class="write">白色連結</a>和<a class="yellow">黃色連結</a>

在網頁中呈現的效果:

白色連結黃色連結

回頭來看一下我們的 a.yellow,它指的是在網頁元素 a 標籤上,我們自訂了文字顏色為黃色的樣式,這個樣式的名字叫 yellow。那麼,如果我們想將這個樣式用在段落 p 標籤或標題一 h1 標籤上的話,是不是要再定義 p.yellowh1.yellow 呢?不用,我們只要在定義樣式時不指定標籤名稱,那麼就在各個標籤上使用相同樣式了。例如:

.yellow { color: #FFFF00 }

並在想使用此樣式的標籤中設定 class 屬性即可:

<h1 class="yellow">黃色標籤一</h1> <p class="yellow"> 黃色文字段落 </p>

id 樣式

Id 樣式與 class 樣式同樣是自訂樣式,但它們不同之處在於 class 樣式可以在同一頁中設定給好幾個網頁元素使用,但是 id 樣式只能指定給唯一一個元素。也就是說,id 樣式在一頁中只能套用一次。定義的方式以 # 做為名稱開頭,使用以 id 屬性指定:

p#first { background-color: #999999 }

這裡是針對 p 標籤來定義 id 樣式 first。第一個設定 first 樣式的 p 標籤其背景會變成灰色,後面其他有使用 first 樣式的都會被忽略:

<p id="first"> 灰色背景段落 </p>

同樣的,如果在定義時沒加上標籤名稱的話,便可以在各個標籤上使用此樣式。但是因為 id 樣式在一頁中只能套用一次,所以第二個以後套用的標籤(無論是那個標籤)不會有任何改變。

#first { background-color: #999999 }

站內連結