本篇介紹CSS selectors的Class selectors(類選擇器)的用法。
HTML元素可以用class
屬性(class attribute)定義多個class值。
此外一個class值可以重複在多個HTML元素中使用,與ID只能用在唯一的HTML元素不同。
例如下面定義<div>
的class
為big dog
,也就是定義兩個class值。
<div class="big dog">大狗區塊</div>
而CSS的Class selectors就是針對HTML元素的class
屬性值來選取。
Class selectors以「點」浮號.
(period/full stop)開頭,然後緊接著HTML元素的class值。
例如下面使用.big
選取class
屬性有big
的HTML元素,並套用把字體變大的CSS樣式;
使用.red
選取class
屬性有red
的HTML元素,並套用把文字顏色變紅色的CSS樣式。
若一個HTML元素的class
屬性同時具有上述兩種class值,則會同時套用兩種CSS樣式。
<!DOCTYPE html>
<html>
<head>
<style>
.red {
color:red;
}
.big {
font-size: 24px;
}
</style>
</head>
<body>
<div>普通文字區塊</div>
<div class="red">紅色文字區塊</div>
<div class="big">較大文字區塊</div>
<div class="big red">較大紅色文字區塊</div>
</body>
</html>
在瀏覽器顯示如下。
以上即是Class selectors的基本用法。
參考:
沒有留言:
張貼留言