https://www.xiaobuteach.com/html/css-base/introduce.html?from=bili

CSS 簡(jiǎn)介

CSS：Cascading Style Sheets，層疊樣式表單。

1 理解 "層疊樣式表單" 的 "樣式"

通俗的說(shuō)就是HTML標(biāo)簽style屬性的內(nèi)容，設(shè)置樣式。

作用：美化HTML，例如設(shè)置字體、設(shè)置盒子模型實(shí)現(xiàn)空白距離與邊框，實(shí)現(xiàn)布局等。

<p style="font-size:20px; ">小步教程 www.xiaobuteach.com</p>

style屬性里的所有內(nèi)容即CSS的樣式。

這些內(nèi)容我們后續(xù)還會(huì)定義在其它位置。

2 理解 "級(jí)聯(lián)樣式表單" 的 "表單"

樣式內(nèi)容不僅可以放在style屬性，還可以放在head標(biāo)簽里，以及CSS文件。

多個(gè)位置的各樣式內(nèi)容，構(gòu)成多個(gè)表單，多個(gè)表單的內(nèi)容會(huì)按一定的規(guī)則進(jìn)行疊加。

3 理解 "層疊樣式表單" 的 "層疊"

層疊包括兩層理解：

1）多個(gè)位置、多個(gè)表單內(nèi)容的疊加；

2）繼承。

這里重點(diǎn)介紹繼承性。

標(biāo)簽具有父標(biāo)簽的樣式屬性，同時(shí)還有自己定義的樣式屬性，稱之為繼承性。

HTML標(biāo)簽元素呈樹狀結(jié)構(gòu)，父元素可以包含子元素，子元素可以包含孫子元素。

子元素可以繼承父元素的部分style屬性：這部分樣式稱之為可繼承；API手冊(cè)會(huì)標(biāo)記 Inherited: Yes。

父元素的部分style屬性，子元素?zé)o法繼承：這部分樣式稱之為不可繼承。API手冊(cè)會(huì)標(biāo)記Inherited: No。

例1：可繼承屬性

? ?<div id="div1" style="font-size: 30px;color: #f00;"> ? ? ? ?div1 ? ? ? ?<div id="div2">div2</div> ? ?</div>

div2繼承父標(biāo)簽div1的兩個(gè)屬性，font-size與color都是可繼承的屬性。

通過(guò)開發(fā)者工具（F12）查看，div2的樣式里具有div1定義的字體大小與顏色兩個(gè)屬性。

顯示這兩個(gè)屬性"繼承自 div#div1"。

例2：不可繼承屬性。

? ?<div id="div1" style="margin-top: 30px;border: 1px solid #00F;"> ? ? ? ?div1 ? ? ? ?<div id="div2">div2</div> ? ?</div>

div2是否有自己的邊框？div2與div1的上外邊距是否有30px距離？

div1有自己的邊框與上外邊距；div2并沒(méi)有自己的邊框與上外邊距；說(shuō)明margin與border是不可繼承屬性。

通過(guò)開發(fā)者工具查看，沒(méi)有看到繼承樣式。

CSS規(guī)范按照我們的日常需求非常合理的設(shè)置了哪些樣式屬于可繼承，哪些樣式不能被繼承。

可繼承樣式：字體相關(guān)屬性、等。

不可繼樣式：盒子模型、定位、等。