入門前端工程師知識~得心應手不是夢-CSS的特性

前端工程師一定要先知道的第一課就是CSS特性!這篇先為接下來的選擇器鋪下伏筆


在這篇中提到：CSS 的用處好比 HTML 的化妝師，此篇再加以說明 CSS 的特性。

在了解.CSS 的語法格式之前，你必須知道關於CSS 的特性，如下：

   • 若要將網頁比喻成一本書的話，HTML 負責書中內容的圖文編輯， CSS 則是負責排版、制定字體大小顏色等美編的事宜。

   • 除非 HTML 的標籤內有另外的規定，否則所有圖文在網頁上呈現的方式，都會依照 CSS 所規定的樣子而定。

   • 因為 CSS 碼的作用是輔助 HTML 碼在網頁上呈現的樣式，所以它是不能單獨存在的。
以下開始介紹，若想成為前端工程師，不可不知的CSS 碼的語法。格式如下：

選擇器 { 
屬性：設定值；
...
}

如上方所示：CSS 碼由「選擇器」、「屬性」、「設定值」三個部分組成，說明如下：

選擇器 (Selector)

在一個選擇器中，可以包含多種屬性項目(數量沒有限制)。選擇器主要有三種：

一、型類 (Type) 選擇器

二、Class 選擇器

三、ID 選擇器

「型類 (Type)」選擇器是 HTML 標籤，如 <p> 和 <h1>。

   ▶ 參考資料：HTML的免費編輯器與基礎標籤

「Class」選擇器是使用者自訂的選擇器，詳細說明請見這篇。

「ID」選擇器也是使用者自訂的選擇器，詳細說明請見這篇。


屬性、設定值

選擇器之後用大括弧囊括了「屬性：設定值」兩個部分，功用為制定該 CSS 的樣式。舉例來說，若我們要設定一個元素內的文字是紅色的，那就用以下的「屬性：設定值」：

選擇器 { 
color：red；
...
}

在以上的宣告內，color 是屬性，而 red 是設定值。有時候因為樣式的關係，一個屬性會有一個以上的設定值。

例如制定邊界樣式的 margin 屬性，大多會有 4 個設定值。因為這些設定值分別代表上、下、左、右的邊界長度。

   ▶ 參考資料：CSS基礎語法大集合-與字型、文字排序有關的CSS碼


多個選擇器、卻有相同樣式的場合

有時多個選擇器會有相同的樣式，這時可以同時宣告它們。例如選擇器 <h3>和<p2>都有相同的樣式時，就可以用以下的方式來宣告：

h3 p { 
屬性：設定值； 
...
}

這種宣告方式，被稱為「grouping」。

後代選擇器 (Descendant selector)

上前端工程師課程時，有時會發現一種特殊狀況：若 A 選擇器只有 under 在 B 選擇器之下時， A 選擇器才會出現所指定的樣式。若 A 選擇器不在 B 選擇器之下時，則會恢復原本的樣式。

例如<p2>只有在<li>之內的文字，才會呈現紅色的狀態時，就可以用以下的方式來宣告：

li p { 
color：red；
...
}

以上宣告代表<p2>只有在<li>之內的文字，才會呈現紅色的狀態，若脫離了<li>則不會套用紅色字體的樣式

後代選擇器 (Descendant selector) 格式如下：</p>

父選擇器 子選擇器 { 
屬性：設定值；
...
}

 延伸閱讀：

前端工程師.後端工程師-超級比一比

來來來!HTML5教學教你怎麼讓你的網站煥然一新!

HTML5教學的三個基本款(3):標籤正在進步中,你呢??

SEO優化隱惡揚善好幫手:robots meta

網路行銷課程小知識:黑帽白帽,能把排名往上拉的就是好帽嗎?

你能打敗AI人工智慧,不被社會淘汰嗎?

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