瑞德技術分享: [HTML教學]-CSS CLASS

Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：

.【Class 名稱】{
屬性：設定值；
...
}

舉例來說，

.navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：

以上的 HTML 碼會顯現出：

一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。這是靠以下的語法：

【型類選擇器】.【選擇器名稱】{
屬性：設定值；
...
}

舉例來說，若有以下的 CSS 宣告，

b.special {
color:#0000FF;
}
i.special {
color:#FF0000;
}

以下的 HTML 碼，

這個例子顯示出 同一個選擇器可以有不同的 instance。.

就會顯現出，

這個例子顯示出同一個選擇器可以有不同的 instance。.

我們也可以同時套用數個 class。舉例來說，若我們有以下的 CSS 宣告，

.applylarge {
font-size:20px;
}
.applyred {
color:#FF0000;
}

那以下的 HTML 碼，

這是多重 Class 的例子。

就會顯現出，

這是多重 Class 的例子。

ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下：

#【ID 名稱】{
屬性：設定值；
...
}

舉例來說，

#footer {
color:#FF00FF;
}

要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：

顯現出的結果為，

瑞德技術分享