那些前端工程師沒教你的CSS,今天一一告訴你!

那些前端工程師沒教你的CSS,今天一一告訴你!
那些前端工程師沒教你的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教學,教你利用CSS當你的網頁化妝師!

 

這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!

 

Java課程、UI課程、程式課程、網路行銷課程推薦

 

信不信由你,因為Java課程讓我獲得我想要的生活!

 

學完Python讓你越級打怪(上)

 

2018品牌數字資產榜出爐,達內教育第三次上榜

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *