嫩嫩的程式學習紀錄 - Jim

來聽聽前端工程師愛用的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>

以上宣告顯示如下：

推薦文章:

網路行銷菜鳥的日記Day1-HTML5教學,第一次寫不用錢!?

網路行銷菜鳥的日記Day2-超專業HTML5教學,表格一把罩!

網頁設計課程入門1-如何讓HTML與CSS完美合作?

遵守網路行銷課程,人客往你靠

人工智慧養蝦提高存活率!! 產量倍增蝦隻美,養蝦人家笑哈哈~

URL網址怎麼設定攸關SEO優化表現

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