CSS 使用一個或多個 class 的方法 │ 架站盒子

使用 class

在 HTML 中使用 class 時只需要寫上class="class_name"即可，舉個例子，想在 div 中使用名為 box 的 class，則如下：

<div class="box"></div>

這個box就是自訂 CSS 的 class 名稱，它可以是任何名稱，你也可以取名為content等，而在 CSS 樣式表中box的格式通常如下：

.box {
/* 設定在這裡 */
}

接著把想設定的內容寫在 {} 中即可，例如設定寬（width）為 300px ，則如下：

.box {
width: 300px;
}

有時候我們會需要使用多個 class，這時候只需要加上空白，再寫第二個 class 即可，例如想要使用 box 和 content 兩個 class ，則如下：

<div class="box content"></div>

如果是要在 CSS 中需要同時設定兩個 class 的內容，那麼只需要在兩個 class 中加上英文逗號即可，如下：

.box, .content {
font-size: 16px;
}

如果在多個 class 中有相同的屬性，則以最後一個為主，前面的 class 屬性會被覆蓋而失效。

.box, .content {
font-size: 16px;
}
.box {
font-size: 18px;
}

上面這個例子，content 的文字大小會是 16px，box 的文字大小則是 18px，原本 box 中的 16px 被覆蓋而失效。

如果在 CSS 樣式表中設定多個 class 卻沒有加上逗點，則是階層的意思，例如.box a，這意思是在 box 中的 a（連結）。

.box a {
color: red;
}

在 CSS 樣式表中如果要加上註解，只需要在文字前後加上/* */即可，範例如下：

.box {
font-size: 20px; /* 文字大小 */
color: black; /* 文字顏色 */
}