前端工程師不藏私教學,告訴你Class選擇器最佳使用時機!
前端工程師心情好~不藏私教學教你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教學法寶二-兼顧美觀與優化的表格標籤
網頁設計課程必修學分1-如何善用HTML與CSS
善用網路行銷課程,每個人都來你這裡
不用出國就能享用各國頂級職人咖啡!! Python課程幫你達成!!
SEO優化裡的小螺絲釘:URL網址結構
達內教育開幕 培養台灣IT人才進入全球企業
