入門前端工程師知識~得心應手不是夢-透析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。.


延伸閱讀:

受不了電子書這麼沒有翻書的感覺!但HTML5教學救了我!

HTML5教學的CSS基礎請打好!-字型排序一次滿足

HTML5教學的CSS基礎請打好!-區塊邊框一次掌握

網路行銷課程越來越進階!現在人人都有一個3D虛擬的自己!

挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

數位化教育龍頭:達內教育

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

這個網誌中的熱門文章

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

RWD和AWD是啥?差別又是什麼?前端工程師課程大解密!

前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素