HTML 與 CSS 的關系

上一章節學習了 HTML 的基本概念，我們也知道了 HTML 到底是什么。那么我們在前端領域，經常能聽到前端的三架馬車，HTML，CSS 和 JavaScript。

HTML 組成了網頁的基本結構，那么 CSS 就是給網頁當中所有的結構添加樣式，讓我們的網頁不再單調，從而變成一個炫酷的網站。

而 JavaScript 則提供了交互功能，讓我們能夠在網頁中做各種各樣的操作，這一小節，我們來學習一下 HTML 與 CSS 的具體作用和關系。

1. HTML 的作用

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

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

2. CSS 的作用

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

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

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

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

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

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

1. 通過內聯樣式來書寫樣式；
2. 通過 style 標簽來書寫樣式；
3. 通過 link 標簽引入外部 CSS 文件來書寫樣式。

4. 經驗分享

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

5. 小結

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

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