哪尼?前端工程師要知道的父子繼承關係!?

哪尼?前端工程師要知道的父子繼承關係!?

哪尼?前端工程師要知道的父子繼承關係!?
哪尼?前端工程師要知道的父子繼承關係!?

 

你知道前端工程師也有需要知道的繼承關係嗎?

 

你發現了嗎?其實在一個 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教學基本知識-和標籤一起走向未來(下)

自動駕駛車創辦人馬斯克為何退出親手打造的AI人工智慧團隊?

人工智慧:為商業導向而研發或為改善人民生活而存在?

遵守網路行銷課程,人客往你靠

達內課程先就業再付款- 中時電子報

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料