打好成為前端工程師的基礎,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。.

 

 

✌推薦閱讀:

前端工程師必備技能-CSS,仔仔細細地說給你聽!

前端工程師最需要的懶人包,十六進位代碼的常用顏色表!

前端工程師如何善用ID選擇器? Class和ID的差別是什麼?

搶救低薪大作戰,再不來上Java課程就來不及了!

達內教育評價-故事背後事實的真相甚麼是這樣?!

Java課程、UI課程、程式課程、網路行銷課程推薦

靠AI人工智慧撐著的旅社,如今卻開除機器人,旅社下一步該..?

 

 

 

arrow
arrow

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()