一文讀懂HTML和CSS的關(guān)系

eb開(kāi)發(fā)是一個(gè)很依賴(lài)經(jīng)驗(yàn)的領(lǐng)域，然而這對(duì)初學(xué)者很不友好。

知識(shí)一旦脫離了應(yīng)用場(chǎng)景就會(huì)變得晦澀、空洞，且知識(shí)本身也滿足“二八定律”，“抓大放小”是提高學(xué)習(xí)效率的關(guān)鍵。

下文向大家介紹了HTML和CSS之間的關(guān)系。內(nèi)容選自《HTML 5與CSS 3核心技法（全彩）》一書(shū)。本書(shū)主線清晰，講解簡(jiǎn)潔，并提供在線效果演示效果，非常適合小白上手！

1 HTML是骨架

很難想象一個(gè)人在桌前對(duì)著一塊砧板坐一夜，隔一會(huì)兒就噼里啪啦敲幾下，一會(huì)兒哭一會(huì)兒笑，是一種什么景象。事實(shí)上，在貓眼中我們就是這樣的。只不過(guò)我們面對(duì)的是一塊會(huì)發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？

獲取信息。

重點(diǎn)在“信息”，一種看不見(jiàn)摸不著卻真實(shí)存在的東西。無(wú)論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會(huì)影響它傳遞了完整的信息，以及這條信息的內(nèi)在邏輯是正確的，不是嗎？HTML就是用來(lái)盛放最核心的內(nèi)容——信息。

所以，在CSS和JavaScript出現(xiàn)之前，HTML就出現(xiàn)了。這是必然的，因?yàn)槿绻B最核心的信息都無(wú)法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無(wú)意義的。

除滿足承載核心信息的需求外，HTML還解決了一個(gè)重要的問(wèn)題——將信息結(jié)構(gòu)化。

試想有這樣一篇文章：

背影

我說(shuō)道：“爸爸，你走吧?！彼?chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)?！蔽铱茨沁呍屡_(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

評(píng)論

王花花大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧

李拴蛋我們都不愿意承認(rèn)他老了

劉備備想吃橘子...

此時(shí)上面的信息基本沒(méi)有結(jié)構(gòu)，只能通過(guò)斷行或縮進(jìn)盡可能讓內(nèi)容更易讀，編輯時(shí)的狀態(tài)就是其最終的顯示效果。

HTML就派上了用場(chǎng)，見(jiàn)下方的代碼：

代碼

<p>

我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>

</div>

<divclass="comment">

<span class="content">我們都不愿意承認(rèn)他老了</span>

</div>

</div>

</section>

一頭霧水沒(méi)關(guān)系，后面我們會(huì)細(xì)說(shuō)每一個(gè)部分。總之這段內(nèi)容給人感覺(jué)反而更繁瑣。但繁瑣是代價(jià)，重要的是現(xiàn)在這段信息有結(jié)構(gòu)了。這就意味著計(jì)算機(jī)可以通過(guò)結(jié)構(gòu)的規(guī)律將其顯示得更便于閱讀（甚至是交互）。

以下是不加任何裝飾性?xún)?nèi)容直接讓瀏覽器呈現(xiàn)的結(jié)果：

效果

這是純HTML在沒(méi)有引入任何裝飾時(shí)的顯示效果。很明顯，即便是這樣也比純文字狀態(tài)易讀了許多。但注意，HTML本身沒(méi)有樣式，字體大小和粗細(xì)有變化的原因是瀏覽器的默認(rèn)樣式起了作用，與HTML沒(méi)有關(guān)系。而重點(diǎn)就在這里，這意味著我們可以基于這個(gè)結(jié)構(gòu)設(shè)計(jì)自己的頁(yè)面效果，見(jiàn)下方的示例。

代碼

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<p>

</p>

</artcle>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>

</div>

<span class="content">我們都不愿意承認(rèn)他老了</span>

</div>

</div>

</section>

效果

這里只是舉了一個(gè)小示例。你可以輕而易舉地讓頁(yè)面的風(fēng)格千變?nèi)f化，進(jìn)而讓用戶體驗(yàn)有所差異（或差距）?！扒ё?nèi)f化”因CSS靈活、強(qiáng)大，“輕而易舉”因HTML簡(jiǎn)潔、有序。結(jié)構(gòu)的力量！

CSS是皮膚

一個(gè)充滿活力的生態(tài)是不滿足于現(xiàn)狀的。人們?cè)谶m應(yīng)了便利地瀏覽核心信息之后，就會(huì)想方設(shè)法改進(jìn)瀏覽的體驗(yàn)。比如，讓自己的博客以多欄顯示，以便在視覺(jué)上區(qū)分不同板塊；修改字體顏色，以便強(qiáng)調(diào)一些重要信息等。

起初的做法是——準(zhǔn)備幾種特殊的標(biāo)簽，專(zhuān)門(mén)用于樣式的指定。涉及布局的地方，如果沒(méi)有特殊標(biāo)簽就直接用表格布局。以下沒(méi)有任何樣式的狀態(tài)（以下代碼均不需要看懂）：

代碼

<h1>標(biāo)題</h1>

<p>

從前有座山，山里有個(gè)廟，廟里...

</p>

效果

此時(shí)的頁(yè)面結(jié)構(gòu)下。

如果想讓標(biāo)題居中，則需要給其添加元素<center>，見(jiàn)下方的示例。

代碼

<center>

<h1>標(biāo)題</h1>

</center>

<p>

從前有座山，山里有個(gè)廟，廟里...

</p>

效果

此時(shí)的頁(yè)面結(jié)構(gòu)如下。

居中標(biāo)題的目的確實(shí)達(dá)到了，但是有一個(gè)很大的問(wèn)題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對(duì)于簡(jiǎn)單的頁(yè)面確實(shí)可行，但如果是復(fù)雜的頁(yè)面，這種做法的工作量就是噩夢(mèng)，因?yàn)槊總€(gè)地方都得修改，無(wú)論是對(duì)齊方式、顏色、背景色，還是大的布局都必須通過(guò)修改結(jié)構(gòu)才能完成。這種做法的最大問(wèn)題是可維護(hù)性太差，很多時(shí)候?yàn)榱艘环N樣式要修改很多不必要的結(jié)構(gòu)，枯燥、重復(fù)、削足適履的工作太多，基本上寫(xiě)一次就再也不想改了。

這個(gè)問(wèn)題亟待解決，而且解決方案還要兼容現(xiàn)有規(guī)則?，F(xiàn)有規(guī)則是什么？HTML的語(yǔ)法及結(jié)構(gòu)。不過(guò)既然HTML已經(jīng)有結(jié)構(gòu)了，為什么不好好利用呢？

以前面示例中的文章頁(yè)面為例，如果我們想更改標(biāo)題，是否可以先統(tǒng)一選中所有標(biāo)題，然后說(shuō)明想要什么樣式規(guī)則呢？就像下面這樣：

所有h1 元素聽(tīng)著

對(duì)齊方式居中。

字體顏色黑色。

如果想將所有段落字體放大，則像下面這樣：

所有p 元素聽(tīng)著

字體大小 150%。

這種方式的確很高效！同時(shí)這個(gè)規(guī)則與HTML語(yǔ)法無(wú)關(guān)，相當(dāng)于另一種語(yǔ)言。這樣結(jié)構(gòu)和樣式就不會(huì)互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開(kāi)了。如果想修改樣式，則完全不需要?jiǎng)贖TML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過(guò)其語(yǔ)法更簡(jiǎn)潔。

下面以修改標(biāo)題對(duì)齊方式為例：

h1 { /* 所有h1 元素聽(tīng)著 */

text-align: center; /* 對(duì)齊方式居中 */

}

通過(guò)批量選擇和處理，極大地提高了開(kāi)發(fā)效率，降低了維護(hù)成本，四兩撥千斤。

（完）

圖書(shū)推薦

《HTML 5與CSS 3核心技法（全彩）》

表嚴(yán)肅著

本書(shū)能夠為自學(xué)Web開(kāi)發(fā)初學(xué)者建立一套HTML與CSS的核心知識(shí)框架，同時(shí)借助豐富的示例讓初學(xué)者有一個(gè)愉悅、輕松的學(xué)習(xí)過(guò)程。

想從事前端開(kāi)發(fā)的，可將本書(shū)作為學(xué)習(xí)的起點(diǎn)。正從事前端開(kāi)發(fā)的，可將本書(shū)作為速查的手冊(cè)。

SS課堂筆記

1、CSS的概念

層疊樣式表(英文全稱(chēng)：Cascading Style Sheets) *層疊：多個(gè)樣式可以作用在同一個(gè)html的元素上，同時(shí)生效

是一種用來(lái)表現(xiàn)HTML或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

樣式定義如何顯示 HTML 元素
樣式通常存儲(chǔ)在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一個(gè)

CSS很像化妝，通過(guò)不同的CSS將同樣的HTML內(nèi)容打造為不同的呈現(xiàn)結(jié)果。

所以，前端程序員相互表白的時(shí)候可以說(shuō)：you are the CSS to my HTML.

這是不是CSS是對(duì)HTML進(jìn)行美化和布局作用的最好總結(jié)？

2、CSS的優(yōu)勢(shì)

功能強(qiáng)大
將內(nèi)容展示和樣式控制分離

降低耦合度。解耦
讓分工協(xié)作更容易
提高開(kāi)發(fā)效率

3、CSS的使用：CSS與html結(jié)合使用

根據(jù)定義CSS的位置不同，分為行內(nèi)樣式、內(nèi)部樣式和外部樣式

3.1 行內(nèi)樣式

也稱(chēng)為內(nèi)聯(lián)樣式

直接在標(biāo)簽中編寫(xiě)樣式，通過(guò)使用標(biāo)簽內(nèi)部的style屬性；

一般在測(cè)試的時(shí)候使用居多：
語(yǔ)法：
<html標(biāo)簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標(biāo)簽>
案例：
<div style="color: red;">hello my css</div>

弊端：只能對(duì)當(dāng)前的標(biāo)簽生效，沒(méi)有做到內(nèi)容和樣式相分離，耦合度太高。

3.2 內(nèi)部樣式

定義在head標(biāo)簽內(nèi)，通過(guò)style標(biāo)簽，該標(biāo)簽內(nèi)容就是CSS代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內(nèi)部樣式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部樣式

1、提前定義css資源文件

2、在head標(biāo)簽內(nèi)，定義link標(biāo)簽引入外部樣式文件。

lina.css文件，放在與html頁(yè)面同級(jí)的css文件夾中：
div {
    color: red;
}

html頁(yè)面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部樣式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范圍:外部樣式表>內(nèi)部樣式表>行內(nèi)樣式表

優(yōu)先級(jí)：外部樣式表<內(nèi)部樣式表<行內(nèi)樣式表;

同樣的樣式作用在同一個(gè)標(biāo)簽身上：就近原則；不同樣式作用在同一個(gè)標(biāo)簽身上:疊加生效。

4、CSS語(yǔ)法

基本格式：由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明:

選擇器 {
        屬性1:值1;
        屬性2:值2;
        ...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號(hào)分割，不同的屬性之間用分號(hào)隔開(kāi)。

例如：

5、CSS注釋

注釋是用來(lái)解釋你的代碼，并且可以隨意編輯它，瀏覽器會(huì)忽略它。

CSS注釋以 /* 開(kāi)始, 以 */ 結(jié)束

/*這是CSS的注釋*/
div {
    color: red;  /*文字顏色是紅色*/
}

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

選擇具有相同id屬性值的元素，建議html頁(yè)面中的id值唯一

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來(lái)設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來(lái)定義。

PS： ID屬性不要以數(shù)字開(kāi)頭，數(shù)字開(kāi)頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

雖然多個(gè)元素可以使用同一個(gè)id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對(duì)多個(gè)標(biāo)簽生效，使用class選擇器。

6.2 class選擇器

選擇具有相同的class屬性值的元素。

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個(gè)元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類(lèi)選擇器以一個(gè)點(diǎn)"."號(hào)顯示：

PS：類(lèi)名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用。

6.3 元素選擇器/標(biāo)簽選擇器

選擇具有相同標(biāo)簽名稱(chēng)的元素。

定義選擇器語(yǔ)法：標(biāo)簽名稱(chēng){}；PS：標(biāo)簽名稱(chēng)必須是html提供好的標(biāo)簽。

使用標(biāo)簽選擇器：自動(dòng)使用在所有的同名的標(biāo)簽上

7 優(yōu)先級(jí)

7.1 選擇器的優(yōu)先級(jí)

ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器

當(dāng)多個(gè)選擇器作用在同一個(gè)標(biāo)簽上的時(shí)候，如果屬性沖突，看優(yōu)先級(jí)；如果不沖突，樣式疊加生效。

7.2 樣式表的優(yōu)先級(jí)

行內(nèi)樣式 > 內(nèi)部樣式 >外部樣式

同樣，三個(gè)樣式表中都有內(nèi)容作用在同一個(gè)html標(biāo)簽的時(shí)候，如果屬性沖突，看優(yōu)先級(jí)；如果不沖突，樣式疊加生效。

8 CSS常用樣式

8.1 color :字體顏色

跟顏色相關(guān)的取值分3種：

1、顏色的單詞 red blue...

2、rgb(紅，綠，藍(lán))三色的取值范圍是0-255 rgb(255,0,0)

rgba（紅，綠，藍(lán),透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六進(jìn)制數(shù)字組成的例如：#FF0000

8.2 width height:寬高

PS：只有塊狀元素可以設(shè)置寬高，行級(jí)元素設(shè)置不生效。

取值方式有2種：

1：數(shù)值絕對(duì)數(shù)字單位是像素PX

2：百分比：占據(jù)父元素的比例

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調(diào)試?yán)?/h1>
以谷歌瀏覽器為例說(shuō)明。
快捷鍵F12或者工具條中的開(kāi)發(fā)者工具調(diào)出以下內(nèi)容。
在elements中可以看到當(dāng)前頁(yè)面的所有標(biāo)簽，在styles中可以看到html元素對(duì)應(yīng)的樣式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周?chē)腍TML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒模型允許我們?cè)谄渌睾椭車(chē)剡吙蛑g的空間放置元素。

盒子模型說(shuō)明圖：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

11.2 盒子的寬度和高度

元素的實(shí)際寬度和高度：

當(dāng)我們計(jì)算一個(gè)元素實(shí)際在頁(yè)面占有的總寬度計(jì)算公式是這樣的：

總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計(jì)算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

11.3 如果想要設(shè)置的寬度直接就是元素的實(shí)際寬度，通過(guò)box-sizing屬性

12 補(bǔ)充常用樣式

12.1 float 浮動(dòng)

12.1.1 什么是浮動(dòng)

CSS 的 Float（浮動(dòng)），會(huì)使元素向左或向右移動(dòng)，其周?chē)脑匾矔?huì)重新排列。

Float（浮動(dòng)），往往是用于圖像，但它在布局時(shí)一樣非常有用。

12.1.2 元素怎樣浮動(dòng)

元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。

一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/span>

浮動(dòng)元素之后的元素將圍繞它。

浮動(dòng)元素之前的元素將不會(huì)受到影響。

12.1.3 彼此相鄰的浮動(dòng)元素

如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰。

12.1.4 clear--清除浮動(dòng)

元素浮動(dòng)之后，周?chē)脑貢?huì)重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動(dòng)</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--沒(méi)有浮動(dòng)屬性的元素都屬于常規(guī)文檔流：從上往下從左往右依次顯示
            浮動(dòng)的元素都脫離了常規(guī)文檔流；
            為了好理解：大家可以認(rèn)為浮動(dòng)元素屬于一層，非浮動(dòng)元素屬于一層
            如果想要非浮動(dòng)元素不受浮動(dòng)元素的影響，需要使用clear屬性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮動(dòng)，脫離常規(guī)文檔流，緊貼父元素或者上一個(gè)同方向浮動(dòng)
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮動(dòng)，常規(guī)文檔流,
            <br/>PS:此時(shí)div1在div2的上方顯示，因?yàn)閐iv1和div2是不同文檔流中的元素，顯示互不影響
            如果不想讓div2被浮動(dòng)元素影響，需要添加clear屬性。
            添加clear: left;之后div2就會(huì)忽略div1浮動(dòng)的影響，在div1層后面顯示，不會(huì)重疊了，大家可以自己試驗(yàn)一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮動(dòng)，脫離常規(guī)文檔流，緊貼父元素或者上一個(gè)同方向浮動(dòng)
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮動(dòng)，常規(guī)文檔流,
            <br/>PS:此時(shí)div3在div4的上方顯示，因?yàn)閐iv3和div4是不同文檔流中的元素，顯示互不影響
            如果不想讓div4被浮動(dòng)元素影響，需要添加clear屬性。
            添加clear: right;之后div4就會(huì)忽略div3浮動(dòng)的影響，在div3層后面顯示，不會(huì)重疊了，大家可以自己試驗(yàn)一下
            
            clear屬性有三個(gè)取值：left、right、both;分別是取出左浮動(dòng)、有浮動(dòng)和所有浮動(dòng)元素的影響
        </div>
        <div style="background: lavender;">
            div5-未浮動(dòng)，常規(guī)文檔流,
        </div>
    </body>
</html>

12.2 overflow

控制內(nèi)容溢出元素框時(shí)顯示的方式。

overflow屬性有以下值：

值	描述
visible	默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden	內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
scroll	內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto	如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit	規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

注意:overflow 屬性只工作于指定高度的塊元素上。

注意: 在 OS X Lion ( Mac 系統(tǒng)) 系統(tǒng)上，滾動(dòng)條默認(rèn)是隱藏的，使用的時(shí)候才會(huì)顯示 (設(shè)置 "overflow:scroll" 也是一樣的)。

12.3 Display(顯示) 與 Visibility（可見(jiàn)性）

12.3.1 兩者的區(qū)別

display屬性設(shè)置一個(gè)元素應(yīng)如何顯示，visibility屬性指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏。

隱藏一個(gè)元素可以通過(guò)把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。但是請(qǐng)注意，這兩種方法會(huì)產(chǎn)生不同的結(jié)果。

visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說(shuō)，該元素雖然被隱藏了，但仍然會(huì)影響布局。

display:none可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。

12.3.2 display 改變?cè)氐念?lèi)型

CSS樣式有以下三個(gè)：

display:block -- 顯示為塊級(jí)元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性

13 復(fù)合選擇器

由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同方式組合而成的。

可以更準(zhǔn)確更精細(xì)的選擇目標(biāo)元素標(biāo)簽。

13.1 全局選擇器

語(yǔ)法：* {} 一般去掉標(biāo)簽的一些默認(rèn)效果的時(shí)候使用，或者整站通用效果時(shí)使用。但是不推薦，一般將 * 替換為常用標(biāo)簽的名稱(chēng)，并用逗號(hào)分隔，其實(shí)就是使用并集選擇器。

13.2 并集選擇器

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過(guò),連接而成的，通常用于集體聲明。

語(yǔ)法：選擇器1，選擇器2，......選擇器N{}

意思是多個(gè)選擇器都是通用的樣式。任何形式的選擇器（包括標(biāo)簽選擇器、class類(lèi)選擇器id選擇器等），都可以作為并集選擇器的一部分。

13.3 交集選擇器

條件：交集選擇器由兩個(gè)選擇器構(gòu)成，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點(diǎn)，也有標(biāo)簽二的特點(diǎn)。

語(yǔ)法：h3.class{ color:red; }

其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，例如div.list。

交集選擇器是并且的意思。即...又...的意思

例如：   table.bg   選擇的是： 類(lèi)名為 .bg  的 表格標(biāo)簽，但用的相對(duì)來(lái)說(shuō)比較少。

13.4 后代選擇器

概念：后代選擇器又稱(chēng)為包含選擇器。

作用：用來(lái)選擇元素或元素組的子孫后代。

其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔，先寫(xiě)父親爺爺，在寫(xiě)兒子孫子。

  格式：父級(jí) 子級(jí){屬性:屬性值;屬性:屬性值;}

語(yǔ)法：.class h3{color:red;font-size:16px;}

當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

子孫后代都可以這么選擇。或者說(shuō)，它能選擇任何包含在內(nèi) 的標(biāo)簽。

13.5 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫(xiě)法就是把父級(jí)標(biāo)簽寫(xiě)在前面，子級(jí)標(biāo)簽寫(xiě)在后面，中間跟一個(gè) > 進(jìn)行連接。

語(yǔ)法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   說(shuō)明  h3 一定是demo 親兒子。  demo 元素包含著h3。

13.6 實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復(fù)合選擇器</title>
		<style>
			/*全局選擇器：
			 	一般去掉標(biāo)簽的一些默認(rèn)效果的時(shí)候使用，或者整站通用效果時(shí)使用。但是不推薦，
			 */
			*{
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
			}
			/*并集選擇器：通常用于集體聲明
			 	替換全局選擇器；
			 */
			div,p,dldt,dd{
				/*去掉瀏覽器的默認(rèn)樣式*/
				margin: 0;
				padding: 0;
				color: #333;/*定義全局文字顏色，統(tǒng)一色彩基調(diào)*/
			}
			/*交集選擇器*/
			li.myli{
				color: red;
			}
			/*后代選擇器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微軟雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素選擇器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">點(diǎn)擊我試試</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">點(diǎn)擊我試試</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>靜夜思</h3>	
			<ul>
				<li><h3>靜夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 偽類(lèi)選擇器

偽類(lèi)選擇器：和類(lèi)選擇器相區(qū)別類(lèi)選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類(lèi) 用 2個(gè)點(diǎn) 就是冒號(hào) 比如 :link{} 。

作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個(gè)，第n個(gè)元素。

因?yàn)閭晤?lèi)選擇器很多，比如鏈接偽類(lèi)，結(jié)構(gòu)偽類(lèi)等等。我們這里先給大家講解鏈接偽類(lèi)選擇器。

a:link /* 未訪問(wèn)的鏈接 */
a:visited /* 已訪問(wèn)的鏈接 */
a:hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active /* 選定的鏈接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽類(lèi)選擇器</title>
		<style>			
			/*偽類(lèi)選擇器*/			
			a:link{
				color: red;/*默認(rèn)顏色是紅色*/	
			}
			a:visited{
				color: blue;/*訪問(wèn)過(guò)的頁(yè)面是藍(lán)色*/	
			}
			a:hover{
				color: green;/*鼠標(biāo)懸浮是綠色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠標(biāo)不放手是金色*/	
				font-family: "微軟雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用樣式.html" target="_blank">常用樣式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-綜合練習(xí).html" target="_blank">綜合練習(xí)</a>
	</body>
</html>

注意**

寫(xiě)的時(shí)候，他們的順序盡量不要顛倒按照 lvha(四類(lèi)的首字母) 的順序。否則可能引起錯(cuò)誤。
因?yàn)榻墟溄觽晤?lèi)，所以都是利用交集選擇器 a:link a:hover
因?yàn)閍鏈接瀏覽器具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。
實(shí)際開(kāi)發(fā)中，我們很少寫(xiě)全四個(gè)狀態(tài)，一般我們寫(xiě)法如下：

a {   /* a是標(biāo)簽選擇器  所有的鏈接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是鏈接偽類(lèi)選擇器 鼠標(biāo)經(jīng)過(guò) */
       color: red; /*  鼠標(biāo)經(jīng)過(guò)的時(shí)候，由原來(lái)的 灰色 變成了紅色 */
}

13.7 復(fù)合選擇器比對(duì)

選擇器	作用	特征	使用情況	隔開(kāi)符號(hào)及用法
后代選擇器	用來(lái)選擇元素后代	是選擇所有的子孫后代	較多	符號(hào)是空格 p .one
子代選擇器	選擇最近一級(jí)元素	只選親兒子	較少	符號(hào)是> .nav>p
交集選擇器	選擇兩個(gè)標(biāo)簽交集的部分	既是又是	較少	沒(méi)有符號(hào) p.one
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號(hào)是逗號(hào) .nav, .header
鏈接偽類(lèi)選擇器	給鏈接更改狀態(tài)		較多	重點(diǎn)記住 a{} 和 a:hover 實(shí)際開(kāi)發(fā)的寫(xiě)法

入門(mén)到精通：掌握 CSS 的全程指南

Cascading Style Sheets（層疊樣式表），簡(jiǎn)稱(chēng) CSS，是前端開(kāi)發(fā)中不可或缺的一部分。它為網(wǎng)頁(yè)提供了美觀和一致的外觀，同時(shí)也為用戶提供了更好的用戶體驗(yàn)。本文將引導(dǎo)你從 CSS 的基礎(chǔ)入門(mén)到精通，幫助你成為一名優(yōu)秀的前端開(kāi)發(fā)者。

CSS 基礎(chǔ)入門(mén)

什么是 CSS？

在線咨詢(xún)

上一篇：自動(dòng)化測(cè)試之HTML測(cè)試報(bào)告
下一篇：HTML+CSS CSS3圓角屬性視頻講解-border-radius

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

一文讀懂HTML和CSS的關(guān)系

SS課堂筆記

1、CSS的概念

2、CSS的優(yōu)勢(shì)

3、CSS的使用：CSS與html結(jié)合使用

3.1 行內(nèi)樣式

3.2 內(nèi)部樣式

3.3 外部樣式

4、CSS語(yǔ)法

5、CSS注釋

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

6.2 class選擇器

6.3 元素選擇器/標(biāo)簽選擇器

7 優(yōu)先級(jí)

7.1 選擇器的優(yōu)先級(jí)

7.2 樣式表的優(yōu)先級(jí)

8 CSS常用樣式

8.1 color :字體顏色

8.2 width height:寬高

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

11 盒子模型

11.1 概念

11.2 盒子的寬度和高度

11.3 如果想要設(shè)置的寬度直接就是元素的實(shí)際寬度，通過(guò)box-sizing屬性

12 補(bǔ)充常用樣式

12.1 float 浮動(dòng)

12.1.1 什么是浮動(dòng)

12.1.2 元素怎樣浮動(dòng)

12.1.3 彼此相鄰的浮動(dòng)元素

12.1.4 clear--清除浮動(dòng)

12.2 overflow

12.3 Display(顯示) 與 Visibility（可見(jiàn)性）

12.3.1 兩者的區(qū)別

12.3.2 display 改變?cè)氐念?lèi)型

13 復(fù)合選擇器

13.1 全局選擇器

13.2 并集選擇器

13.3 交集選擇器

13.4 后代選擇器

13.5 子元素選擇器

13.6 實(shí)現(xiàn)代碼

13.6 偽類(lèi)選擇器

13.7 復(fù)合選擇器比對(duì)

入門(mén)到精通：掌握 CSS 的全程指南

CSS 基礎(chǔ)入門(mén)

您的項(xiàng)目需求

1、CSS的概念

2、CSS的優(yōu)勢(shì)

3、CSS的使用：CSS與html結(jié)合使用

4、CSS語(yǔ)法

11.3 如果想要設(shè)置的寬度直接就是元素的實(shí)際寬度，通過(guò)box-sizing屬性