CSS語法 HTML5

想當前端工程師?你不可不知的Class選擇器宣告法

2019-03-06

想成為前端工程師嗎?那你可不能不知道Class選擇器宣告法!

想成為前端工程師嗎?那你可不能不知道Class選擇器宣告法!
想成為前端工程師嗎?那你可不能不知道Class選擇器宣告法!

這篇中提到:Class 及 ID 都是使用者設定的選擇器 (selector)。ID 選擇器的說明如這篇,Class 選擇器的說明如下

Class 選擇器

Class 的宣告法,就是先放一個英文半形句點,然後再列出選擇器名稱。格式如下方:

Class 名稱 { 
屬性:設定值;
...
}

像是,如果前端工程師要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 就會如下:

.navbar { 
color:#0000FF; 
...
}

要將上頭的樣式套用在 HTML 中,就可以用以下的 HTML 碼:

<p class="navbar">這是用 Class 選擇器定義文字顏色為「#0000FF」純藍色的例子。</p>

以上宣告顯示如下:

▶ 參考資料:HTML和CSS的網頁顏色代碼對照表

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

【型類選擇器】.【選擇器名稱】 { 
【型類選擇器】.【選擇器名稱】
...
}

舉例來說,假如有以下的 CSS 宣告:

b.special {
   color:#0000FF;
}

i.special {
   color:#000000;
}

那麼,要將以上的樣式套用在 HTML 內,前端工程師就要用以下的 HTML 碼:

這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>

以上宣告顯示如下:

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

</div >

推薦閱讀:

上到賺到,HTML5教學還不夠,老師還繼續教CSS語法

認真上HTML5教學,踏足出版業就業路更寬廣

HTML5教學上完還不夠,加強CSS語法讓你的網站獨樹一格

上HTML5教學一定要懂的入門小知識-字型.排序

網頁設計課程教你為網站上妝:CSS基礎 ​​​​​​​

免費HTML5教學(上):網路行銷如虎添翼

免費HTML5教學(下):各式標籤隨你標

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料