後端碼農談前端（CSS篇）第八課 繼承與層疊

繼承：所謂css樣式繼承，就是子元素應用父元素的規則宣告。（由這一特性，可將css屬性分為可繼承屬性和非可繼承屬性。）

可繼承屬性：屬性值可由父元素繼承給子元素的屬性稱之為可繼承屬性。

哪些屬性是可繼承屬性？

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

font、font-family、font-size、font-style、font-variant、font-weight

list-style、list-style-image、list-style-position、list-style-type

注：這裡特別解釋:font-size屬性(繼承性比較特殊)    

不同於有準確的值被繼承,font-size繼承的是計算的值。   

例如：doctype

html

>

<

html
lang=「utf8」>

<

head
>

<

meta
charset
="utf-8"
>

<

title
>demo
title
>

head
>

<

body
style
="font-size:85%"
>

body字型大小

<

h1style
="font-size:200%"
>h1字型大小
h1>

<

h2style
="font-size:150%"
>h2字型大小
h2>

<

p>p字型大小<
em>em字型大小
em>
p>

body
>

html
>

元素值計算值

default font-size

16px

85%16px × 85% = 13.6px

200%

13.6px × 200% = 27.2px

層疊：所謂css樣式層疊就是dom元素應用樣式表中的規則覆蓋繼承樣式的過程。

後端碼農談前端（CSS篇）第八課 繼承與層疊

繼承 所謂css樣式繼承，就是子元素應用父元素的規則宣告。由這一特性，可將css屬性分為可繼承屬性和非可繼承屬性。可繼承屬性 屬性值可由父元素繼承給子元素的屬性稱之為可繼承屬性。哪些屬性是可繼承屬性？text indent text align word spacing letter spacing...

後端碼農談前端（CSS篇）第五課 CSS樣式

css 允許應用純色作為背景，也允許使用背景影象建立相當複雜的效果。可以使用 background color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。例如 要把影象放入背景，需要使用 background image 屬性。background image 屬性的預設值是 none，表...

後端碼農談前端（CSS篇）第一課 CSS概述

扮演瀏覽器是head first圖書中很有意義的乙個環節。可作者忘記了告訴我們扮演瀏覽器的台本。我們從這裡開始。上圖是webkit核心渲染html和css的流程圖。從該圖我們可以知道以下幾個關鍵資訊 html的解析過程和css的解析過程是獨立完成的。html被解析成dom樹 css被解析成樣式規則。...