CSS的繼承關係是前端工程師的必學課程,此篇我將用簡單的例子解釋
在一個 HTML 中，標籤之間都會有所謂的親子關係。舉例來說，表示網頁標題的「<title>」標籤一定都是在表示網頁開頭的「<head>」這個標籤之內。因此 <title> 被稱為 <head> 的子標籤、 <head> 被稱為 <title> 的父標籤。繼承的概念就是：子標籤的CSS 樣式一定會跟父標籤一樣，除非子標籤另有自訂的樣式。
譬如，請看以下的例子。如果前端工程師已寫出以下的 CSS 樣式：
在以上的例子中，雖然前端工程師並沒有指定 HTML 的 <strong> 標籤指定顏色與字體，可是最後結果如上方範例的右邊所呈現的 - 整行文字的顏色都是藍色的，且字體是微軟正黑體。這是因為 <strong> 是 <p> 的子標籤，所以 <strong> 標籤繼承了 <p> 的 CSS 樣式，而在 <p> 的樣式中，文字的顏色是設定為藍色、字體是設定為微軟正黑體。
✌推薦閱讀：
在一個 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選擇器宣告法
前端工程師的基礎課程-ID選擇器
還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
美國NASDAQ上市公司、外商IT教育培訓企業
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?