close

前端工程師的基礎知識:CSS的繼承關係

想成為前端工程師,就一定要知道的基礎知識:CSS的繼承關係.

身為前端工程師都應該知道,在一個 HTML 中，標籤之間都會有所謂的親子關係。換句話說，表示網頁標題的「<title>」標籤一定都是在表示網頁開頭的「<head>」這個標籤之內。因此 <title> 被稱為 <head> 的子標籤、 <head> 被稱為 <title> 的父標籤。繼承的概念就是：子標籤的 CSS 樣式一定會跟父標籤一樣，除非子標籤另有自訂的樣式。

舉例來說，如果已經有以下的 CSS 樣式：

p {font-family:微軟正黑體;color:blue;font-size:20px;} 
strong {font-size:36px;}

前端工程師們在輸入如以下的 HTML 碼

<p>這是一個<strong>CSS樣式的繼承關係 </strong>的例子</p>

 

 

則結果如下所示(左邊為 HTML、右邊為顯示結果)：

在以上的例子中，雖然我們並沒有指定 HTML 的 <strong> 標籤指定顏色與字體，可是最後結果如上方範例的右邊所呈現的 - 整行文字的顏色都是藍色的，且字體是微軟正黑體。這是因為 <strong> 是 <p> 的子標籤，所以 <strong> 標籤繼承了 <p> 的 CSS 樣式，而在 <p> 的樣式中，文字的顏色是設定為藍色、字體是設定為微軟正黑體。

 

參考連結:

超酷炫記憶法,讓你秒懂HTML5教學中的語法標記

前端工程師的HTML5教學:字型和文字排列的實用設定

前端工程師的HTML5教學:與區塊、邊框有關的CSS碼之實用設定 ​​​​​​​

上HTML5教學的必經之路1:先掌握初學者的敲門磚! ​​​​​​​

開始踏上HTML5教學的道路,這東西讓你網站美觀又吸引人! ​​​​​​​

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

達內教育開幕　培養台灣IT人才進入全球企業 ​​​​​​​

 

arrow
arrow
    文章標籤
    前端工程師 前端 工程師 CSS 語法 程式
    全站熱搜

    IzzySixxi 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄