CSS的四種引入方式與特點
CSS樣式單匯入和優缺點
CSS樣式單可以控制HTML文件的顯示，在HTML文件中，CSS主要有四種引入方式：連結外部樣式檔案，匯入外部樣式檔案，使用內部樣式定義以及內聯樣式。
1.引入外部樣式檔案
外部引入CSS樣式檔案是通過標籤實現的，它只能位於HTML文件的head標籤內，且必須有href屬性，用於指定需要引入的CSS檔案的絕對路徑
<link type="text/css" rel="stylesheet" href="CSS樣式檔案的絕對地址">link元素中type用於規定連結文件的MIME型別，rel屬性用於規定被連結文件與當前文件之間的關係，如alternate用於定義交替出現的連結，appendix定義文件的附加資訊等，此外還有一些可選屬性，用於做一些除載入CSS檔案的其他事情，有興趣的同學可以多找找資料。
link元素是XHMTL中的標籤，當HTML頁面被渲染時，link引用的CSS檔案會被同時載入，我們也可以通過JavaScript控制DOM去改變link元素的CSS內容，如
<div id="test"></div>
<script type="text/javascript">
var div = document.getElenemtByid("test")
div.style.backgroundColor = "yellow";
</script>2.匯入外部樣式單
匯入外部樣式單的功能與連結外部樣式單的功能差不多，只是語法上存在差別。匯入外部樣式單主要通過@import方式匯入CSS檔案，有兩種匯入方式
a、在style元素中匯入CSS檔案
<style type url可省略，所以只需指定樣式單地址即可，在標準CSS的語法中，@import還有sMedia屬性，用於指定CSS的可作用的裝置，目前還沒得到廣泛的支援，所以sMedia可以不寫。
b、在CSS檔案中再匯入CSS檔案
/*某個CSS檔案*/
@import "另一個CSS檔案的地址";
.test{
width: 100px;
height: 100px;
line-height 在CSS檔案中再匯入CSS檔案，會給伺服器造成太大的檔案請求壓力，最好不要這樣做。
@import是由CSS提供的一種匯入樣式的方式，當頁面被載入時，@import會等到頁面全部被載入完成時再載入CSS樣式，所以在頁面還未載入完成期間，頁面還沒有CSS樣式效果，會導致“屏閃”，通過@import匯入的CSS樣式是無法用DOM去控制的。
3.使用內聯樣式
內聯樣式即只在某個元素內使用style屬性，它只針對這個元素，而不會影響整個檔案，所以可以控制某個HTML元素的外觀表現，適合用於程式碼除錯
<div style="color: #ccc; width: 200px; height: 100px;"></div>style是一種HTML元素共有的屬性，在專案開發中最好不要使用style屬性，因為style定義的CSS樣式直接嵌在HTML文件中，當專案中某個CSS樣式出現問題(所謂的BUG)，開發者很難確定錯誤到底是出現在HTML中還是在CSS檔案中，這會給開發者團隊帶來巨大的困擾（ps：其他的也一樣，比如儘量不要在JS程式碼中寫入CSS樣式或者新增HTML元素；不要在HTML檔案中使用script內嵌JS程式碼，最好的解決方法是隱藏元素JS再控制顯示此元素，或者JS改變CSS的class以改變樣式）。
4.使用內部CSS樣式
HTML還提供了style標籤以控制頁面的顯示樣式，如下
<style type="css/text">
.text{
font-size: 20px;
padding-left: o;
margin: 0 auto;
}
</style>
<body>
<div class="text"></div>
</body>style元素位於head標籤內部，type屬性指定CSS程式碼的文件型別。使用內部CSS樣式必須為有選擇器，常見的選擇器有ID選擇器，類（偽類CSS3新增）選擇器，元素選擇器，子選擇器，屬性選擇器等，優先順序ID > 類（偽類）> 元素（內聯樣式定義的CSS樣式優先順序最高，大於ID，但它不是一種選擇器，所以此處沒拿來比較），其他的選擇器越詳細，優先順序越高，如屬性選擇器比元素選擇器更能精確定位，故屬性選擇器優先順序高。
style元素和內聯樣式一樣，會造成程式碼混亂，不易查錯，也會給文件載入帶來巨大負擔。
總結：使用CSS樣式時，儘量將CSS程式碼與HTML程式碼分離，即最好使用引入外部CSS檔案的方式。