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