一、認(rèn)識CSS
- CSS：層疊樣式表（Cascading Style Sheets）
- 樣式表：如果把HTML比作人，那么樣式表就是衣帽服飾，就是用來打扮HTML外觀的（俗話說人靠衣服，網(wǎng)頁靠CSS，才能變得漂亮）
- 內(nèi)容與樣式分離：HTML代碼與CSS代碼分離，讓它們各自去做擅長的事情
- HTML控制結(jié)構(gòu)和內(nèi)容；CSS控制樣式
- 這樣有利于代碼的維護(hù)
- 舉個栗子：存在已久的QQ空間的裝扮功能就是內(nèi)容與樣式分離的最好體現(xiàn)
當(dāng)我們點(diǎn)擊切換不同的皮膚時，空間頁面會顯示不同的主題樣式，這就是在給網(wǎng)頁更換皮膚啊
既然將HTML與CSS分離，那么又如何讓它們精誠合作呢？向下看
二、四種CSS的引入方式
1. 內(nèi)聯(lián)樣式（行內(nèi)式）
即：在html標(biāo)簽內(nèi)的style屬性中設(shè)定CSS樣式，例如：
<p style="color: red">我是段落</p>
注：這種方式不推薦使用，因為它只能改變當(dāng)前標(biāo)簽樣式，多處使用會導(dǎo)致代碼的可維護(hù)性極差
2. 內(nèi)部樣式（嵌入式）
即：在html內(nèi)的head頭部內(nèi)的style標(biāo)簽對中設(shè)定CSS樣式，例如：
<head type="text/css">
<style>
p{
color: red;
}
</style>
</head>
注：這種方式使html內(nèi)容結(jié)構(gòu)和css樣式分開，便于閱讀且代碼比較集中，但CSS樣式只對當(dāng)前頁面有效。
當(dāng)多個頁面需要引用同一個CSS樣式時，修改CSS樣式將十分麻煩，此時不利于代碼維護(hù)，可維護(hù)性變差。
3. 外部樣式（鏈接式：link）
即：使用html的link標(biāo)簽引入一個外部獨(dú)立的 .css 文件
link標(biāo)簽放在html文件內(nèi)的head頭部中，例如：
<head>
<link rel="stylesheet" type="text/css" href="style.css"><!-- 注意href路徑 -->
</head>
注：這種方式，CSS代碼存儲在一個外部獨(dú)立的文件中，若要更換網(wǎng)站樣式，只需修改CSS文件即可，不需改動html文件，所以采用這種方式使代碼具有良好的可維護(hù)性
4. 外部樣式（導(dǎo)入式：@import）
即：使用CSS的語法規(guī)則引入一個外部獨(dú)立的 .css 文件
@import放在html文件head頭部里的style標(biāo)簽內(nèi)（@import也可以放在導(dǎo)入樣式表的開頭,去引用其他樣式），例如：
<style>
@import url("style.css"); <!-- @import放在style標(biāo)簽內(nèi) -->
</style>
@import url("style.css"); /* @import放在導(dǎo)入樣式表的開頭 */
注：這種方式與鏈接式link一樣，將CSS代碼存儲在一個外部獨(dú)立的文件中，也具有良好的可維護(hù)性，但這種方式也有缺點(diǎn)：白屏和無樣式內(nèi)容閃爍
嘿，除了以上引用的樣式外，不要忽略 “ 瀏覽器的默認(rèn)樣式 ” 哦
三、 引用外部樣式時：link 和 @import 的區(qū)別
1. 從屬關(guān)系
- link屬于HTML的標(biāo)簽，通過 link 標(biāo)簽的 href 屬性來引入外部文件；link不僅可以引入CSS樣式表，還可以定義RSS、rel屬性等
- @import屬于CSS的語法，@import語法只有一項作用：導(dǎo)入樣式表
2. 加載順序
- 使用link標(biāo)簽引入的CSS樣式在加載頁面時被同時加載
- 使用@import導(dǎo)入的CSS樣式將在頁面加載完畢之后才被加載
3. 兼容性
- link 屬于HTML標(biāo)簽，不存在兼容性問題
- @import 是 CSS2.1 是在CSS2.1提出的，低版本的瀏覽器不支持，只可在 IE5+ 才能被識別
4. DOM可控區(qū)
- link 支持使用Javascript控制DOM去改變樣式（通過 JS 操作 DOM ，插入link標(biāo)簽來改變樣式）
- @import不支持使用Javascript控制DOM去改變樣式（ 由于DOM 方法是基于文檔的，所以無法使用@import的方式插入樣式）
5. 權(quán)重（若有興趣自行查詢它的原因）
- link引入的樣式權(quán)重大于@import引入的樣式
