走入層疊樣式表的世界
css指層疊樣式表， (Cascading Style Sheets)，是為了解決內(nèi)容與表現(xiàn)分離的問題，可以大大提高工作效率，多個樣式層疊為一也可以節(jié)省代碼的重復(fù)。
為什么將css分離出來
在很久很久以前，只使用html來進(jìn)行布局，有關(guān)樣式的部分使用html屬性完成，這樣代碼就顯得很臃腫，修改起來也是特別的麻煩。后來w3c就創(chuàng)造出了樣式（style），這樣html就只負(fù)責(zé)結(jié)構(gòu)，描述樣式就交給了css。這樣大大減少了開發(fā)者的工作量，提高了工作效率。
標(biāo)簽重復(fù)問題得到解決
html提供了標(biāo)簽，用來包裹內(nèi)容，搭建結(jié)構(gòu)。但是現(xiàn)在的網(wǎng)站一般都是大型網(wǎng)站，這樣標(biāo)簽就顯得不是那么夠用了，將標(biāo)簽屬性或者style樣式寫在標(biāo)簽內(nèi)，那么下一個雷同的地方，還要再寫一遍很麻煩。
style樣式重用在不同的模塊
相同的結(jié)構(gòu)樣式，如果使用原始的html，就需要一遍遍的粘貼復(fù)制，造成代碼臃腫。而使用css樣式呢，規(guī)定好規(guī)則，將css樣式同一到一起，相同的html結(jié)構(gòu)都調(diào)取這部分css樣式，就大大減少了代碼量，而且修改的時候，修改樣式后，所有相同的html結(jié)構(gòu)都會跟著改變樣式，大大減少維護(hù)的工作量。
整站的樣式復(fù)用
網(wǎng)站是由很多歌單獨的頁面組成的，但是網(wǎng)站往往為了保持風(fēng)格統(tǒng)一，而將部分結(jié)構(gòu)保持一致，那么一部分樣式就需要多個html文件公用，不光這個頁面可以使用這個css文件，其他頁面也可以使用這個文件。
css樣式怎樣引入到html文件中
html結(jié)構(gòu)和css樣式既然是分離的，那就是兩個獨立的文件，我們需要想辦法將他們結(jié)合到一起，那么怎樣將兩者結(jié)合到一起呢？
行內(nèi)式
將css屬性名和屬性值通過style這個標(biāo)簽屬性直接寫在html標(biāo)簽中的形式，就是行內(nèi)樣式。例如
<p style="width: 100px;height: 100px;background-color: red;"></p>
這段代碼是描述一個寬度高度為100像素，背景顏色是紅色的一個p標(biāo)簽。
內(nèi)嵌式（嵌入式）
使用style標(biāo)簽將css屬性名和屬性值引入到html頁面中，通常style標(biāo)簽放置在head標(biāo)簽中。為什么css樣式要放置在head標(biāo)簽中呢，因為代碼從上到下執(zhí)行，如果先加載結(jié)構(gòu)，那么用戶看到的就將是干巴巴的內(nèi)容，而沒有通過美化，而先加載樣式后加載結(jié)構(gòu)，就相當(dāng)于孩子出生就是穿著衣服的。
<head> <style type="text/css"> p{ width: 100px; height: 100px; background-color: red; } </style></head> 這段代碼也是描述一個寬度高度為100像素，背景顏色是紅色的一個p標(biāo)簽，只不過是通過內(nèi)嵌式的方法引入。
外聯(lián)式（外鏈?zhǔn)?/strong>）
通過link標(biāo)簽，將一個單獨的css文件引入到這個html文件中，也是要放置在head標(biāo)簽中。
<link rel="stylesheet" type="text/css" href="../css/prism.js"/> rel="stylesheet"
描述了當(dāng)前頁面與href所指定文檔的關(guān)系。即說明的是,href連接的文檔是一個新式表。
type="text/css"是指定MIME類型，也就是css文檔。
href="css/prism.js"規(guī)定被鏈接文檔的位置。
導(dǎo)入式
通過@import引用外部css文件，但需要寫入css文件或style標(biāo)簽中。
<style type="text/css"> @import url(style.css) </style> url(style.css) url(規(guī)定被鏈接文檔的位置)。
link和@import雖然都是引入外部的css文件，但是他們是由天差地別的區(qū)別的。
· link是html標(biāo)簽，@import完全是css提供的方式，要寫在css文件或者style標(biāo)簽中。
· 他們的加載順序也是有區(qū)別的，當(dāng)一個頁面被夾在的時候，link引用的css文件會被同時加載，而@import引入的css文件會等頁面全部下載完后再加載。
· 兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。
· 當(dāng)使用javascript控制DOM去改變css樣式的時候，只能使用link標(biāo)簽，因為import是不能被DOM控制的。
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對VeVb武林網(wǎng)的支持!
新聞熱點
疑難解答
