前端工程師常用的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教學!
前端工程師不藏私教學,告訴你Class選擇器最佳使用時機!
想要網頁美麗又吸睛?那你一定不能錯過今日HTML5教學!
SEO優化網路行銷課程加碼篇(上):加碼主關鍵字，吸睛率也跟著加碼?
Python課程介紹給我的這部電影好像很威猛!想知道就快進來!
還好有學過Python課程,讓我知道什麼都逃不過AI的法眼!
程式課程選達內，美上市IT課程教育集團
