網頁

2019/7/29

CSS Class selectors 類選擇器

本篇介紹CSS selectorsClass selectors(類選擇器)的用法。

HTML元素可以用class屬性(class attribute)定義多個class值。

此外一個class值可以重複在多個HTML元素中使用,與ID只能用在唯一的HTML元素不同。

例如下面定義<div>classbig 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的基本用法。


參考:

沒有留言:

張貼留言