HTML 與 CSS 的關(guān)系

上一章節(jié)學(xué)習(xí)了 HTML 的基本概念，我們也知道了 HTML 到底是什么。那么我們?cè)谇岸祟I(lǐng)域，經(jīng)常能聽到前端的三架馬車，HTML，CSS 和 JavaScript。

HTML 組成了網(wǎng)頁(yè)的基本結(jié)構(gòu)，那么 CSS 就是給網(wǎng)頁(yè)當(dāng)中所有的結(jié)構(gòu)添加樣式，讓我們的網(wǎng)頁(yè)不再單調(diào)，從而變成一個(gè)炫酷的網(wǎng)站。

而 JavaScript 則提供了交互功能，讓我們能夠在網(wǎng)頁(yè)中做各種各樣的操作，這一小節(jié)，我們來(lái)學(xué)習(xí)一下 HTML 與 CSS 的具體作用和關(guān)系。

1. HTML 的作用

HTML 標(biāo)簽構(gòu)成了網(wǎng)頁(yè)的基本結(jié)構(gòu)，雖然大部分標(biāo)簽有自帶的樣式，但是并不能滿足我們實(shí)際的需求，而且有些標(biāo)簽，我們甚至要取消某些標(biāo)簽的默認(rèn)樣式，所以我們需要 CSS 來(lái)優(yōu)化 HTML 標(biāo)簽的樣式。

只有 HTML 標(biāo)簽構(gòu)成的網(wǎng)頁(yè)就像是一個(gè)清水房，只有一個(gè)架子，我們還需要給房子做裝修，才能變成一個(gè)完整的家。

2. CSS 的作用

CSS 是將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記語(yǔ)言，我們使用 CSS 為每個(gè)元素定義樣式，它主要用于美化HTML頁(yè)面。

通過(guò)設(shè)置對(duì)應(yīng)的 CSS 樣式屬性可以修改 HTML 文檔內(nèi)各元素的顯示、位置等樣式。如修改顏色、字體、字號(hào)、寬高、位置、背景等。

CSS 不僅能取消 HTML 標(biāo)簽的默認(rèn)樣式，還能給 HTML 標(biāo)簽加上我們自定義的樣式屬性。

CSS 就像我們給清水房做了裝修，讓一個(gè)空架子一下子豐富起來(lái)，網(wǎng)頁(yè)也是如此，我們要編寫一個(gè)完整炫酷的網(wǎng)頁(yè)，需要 HTML 搭配 CSS 一起使用。

3. HTML 和 CSS 如何結(jié)合（CSS的引用方式）

我們想要給 HTML 標(biāo)簽書寫樣式，那么我們需要結(jié)合 CSS 一起使用。怎么樣在 HTML 文件當(dāng)中使用 CSS 呢？我們有 3 種方式：

1. 通過(guò)內(nèi)聯(lián)樣式來(lái)書寫樣式；
2. 通過(guò) style 標(biāo)簽來(lái)書寫樣式；
3. 通過(guò) link 標(biāo)簽引入外部 CSS 文件來(lái)書寫樣式。

4. 經(jīng)驗(yàn)分享

1. 如果頁(yè)面樣式不復(fù)雜，可以采取 style 標(biāo)簽來(lái)書寫樣式；
2. HTML 很多標(biāo)簽有默認(rèn)樣式，有時(shí)候我們可以借助這些標(biāo)簽的默認(rèn)樣式。如果我們不需要標(biāo)簽的默認(rèn)樣式，我們可以先清除所有標(biāo)簽的默認(rèn)樣式；
3. 搭建網(wǎng)頁(yè)，我們一般先寫網(wǎng)頁(yè)結(jié)構(gòu)，先用 HTML 標(biāo)簽把網(wǎng)頁(yè)架子搭起來(lái)，然后再給 HTML 標(biāo)簽加上 CSS 樣式；
4. 因?yàn)?div 標(biāo)簽是沒有默認(rèn)樣式的，所以很多時(shí)候我們喜歡使用 div標(biāo)簽，然后自定義樣式。

5. 小結(jié)

網(wǎng)頁(yè)的基本結(jié)構(gòu)由 HTML 構(gòu)成， 而 CSS 則可以為 HTML 標(biāo)簽添加樣式，讓本來(lái)平平無(wú)奇的 HTML 標(biāo)簽，變得光鮮亮麗起來(lái)，你也可以把它理解為一個(gè)化妝師，為干癟的標(biāo)簽濃妝淡抹。

掌握了 HTML 知識(shí)，還遠(yuǎn)遠(yuǎn)不夠，只有將 HTML 與 CSS完美結(jié)合，才能編寫出各式各樣的網(wǎng)站。