HTML 與 CSS 的關(guān)系

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

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

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

1. HTML 的作用

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

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

2. CSS 的作用

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

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

CSS 不僅能取消 HTML 標簽的默認樣式，還能給 HTML 標簽加上我們自定義的樣式屬性。

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

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

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

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

4. 經(jīng)驗分享

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

5. 小結(jié)

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

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