編碼的世界 / 優質文選 / 生涯

CSS的四種引入方式與特點

2022年6月30日
-   

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="text/css">
 @import "CSS樣式文件的絕對地址";
 @import url("樣式文件的絕對地址");
 </style>

url可省略，所以只需指定樣式單地址即可，在標准CSS的語法中，@import還有sMedia屬性，用於指定CSS的可作用的設備，目前還沒得到廣泛的支持，所以sMedia可以不寫。
b、在CSS文件中再導入CSS文件
/*某個CSS文件*/
@import "另一個CSS文件的地址";
.test{
 width: 100px;
 height: 100px;
 line-height: 20px;
 background-color: red;
}

在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文件的方式。

熱門文章