美國NASDAQ上市公司
外商IT教育培訓企業

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

達內教育台灣 > 知識庫 HTML/CSS語法

CSS 的 ID 選擇器宣告法

  • 時間:2019-03-08
  • 發布:達內教育台灣
  • 來源:前端工程師CSS教學

這篇中提到:Class 及 ID 都是使用者設定的選擇器 (selector)。Class 選擇器的說明如這篇,ID 選擇器的說明如下

ID 選擇器

Class 的宣告法,是先放一個井字號 (#),之後再列出選擇器名稱。格式如下:

ID 名稱{ 
屬性:設定值;
...
}

舉例來說,如我們要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 如下:

#navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內,我們用以下的 HTML 碼:

<p class="navbar">這是用 id 選擇器定義 navbar 文字顏色為「#0000FF」純藍色的例子。</p>

以上宣告顯示如下:

   ▶ 參考資料:HTML和CSS的網頁顏色代碼對照表

Class 跟 ID 的不同之處

這兩者最大的不同,在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。

另外,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

至於何時要用 ID 、何時要用 Class,並沒有絕對的規則。但是大多的時候,Class 選擇器的使用頻率較高,因為 Class 選擇器在一個 HTML 文件中,可以被使用多次。但是當你要用 Javascript 的 GetElementByID 函數時,你就應該要用 ID 選擇器。

Class 名稱及 ID 名稱,大寫與小寫是不同的,不能互用。例如:.navbar 及 .NavBar,是代表兩個不同的 Class 選擇器。

上一篇:網路行銷人員也該上的HTML5教學2-認識HTML表格標籤
下一篇:網路行銷人員也該上的HTML5教學1-認識HTML基礎標籤與免費網頁編輯器
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省