前端工程師的基本:Class 選擇器宣告法

前端工程師的小撇步,這裡告訴你!!
前端工程師的小撇步,這裡告訴你!!

前端工程師CSS語法介紹,你不可以錯過!!

這篇中提到: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教學裡的標籤

他們都沒有相關背景,竟都如願變成工程師,來聽聽他們去哪裡上HTML5教學

不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

擠進高薪科技大門-Java課程等你來瞭解!

單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺

留言