前端工程師不能不知道的CSS繼承關係

前端工程師不能不知道的CSS繼承關係
前端工程師不能不知道的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教學之CSS基礎語法:如何設定好邊框區塊

HTML5教學告訴你怎麼做出生動的書本翻頁動畫!!

Python課程結合醫療,是病人的大福音!

進入微軟面試前,履歷上你應該要先上Java課程!

網路行銷課程讓你用社交軟體就可以輕鬆荷包賺滿滿!

美國NASDAQ上市公司、外商IT教育培訓企業

發佈留言

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