前端工程師的必備知識!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> 的樣式中,文字的顏色是設定為藍色、字體是設定為微軟正黑體。

推薦閱讀:

前端工程師套用 CSS 樣式到 HTML 檔案上的4種方式!

前端工程師必學:Div應用篇(上)

前端工程師必學:Span應用篇(下)

不用擔心你是語言白癡-一堂從基礎開始的HTML5教學

HTML5教學的初學者看過來!你得從這兩樣東西開始!

網路行銷課程的SEO優化跟帽子有關,你知道嗎?

他學了Python課程後,在家天天都可以喝到冠軍咖啡?

arrow
arrow

    Ezra.Yii5778 發表在 痞客邦 留言(0) 人氣()