前端入門知識分享：如何在HTML或CSS文件中引用CSS文件。

閱讀提示：本文僅僅僅適用于剛剛接觸HTML和CSS的小白從業者，新人愛好者。自覺身份不符的老鳥們，盡快繞行吧！

什么是CSS？什么是CSS文件。

CSS，全稱為Cascading Style Sheets（層疊樣式表），是一種用于描述網頁上的信息格式化和顯示方式的語言。它的主要功能是控制網頁的視覺表現，包括字體、顏色、布局等樣式結構。通過CSS，開發者可以將文檔的內容與其表現形式分離，這樣不僅提高了網頁的可維護性，還使得樣式更加靈活和多樣化。

CSS的應用非常廣泛，它可以用來控制網頁中幾乎所有可見元素的樣式，包括但不限于文本的字體、大小、顏色，元素的位置、大小、背景色，以及各種交互效果等。CSS屬性的具體書寫不是本文討論的內容。如果您還需要了解更多關于css的基礎知識，請自行上網學習。

CSS樣式可以直接寫在HTML文檔中，也可以單獨存儲在樣式文件（.css類型的文件）中，這樣可以被多個頁面共享使用。單獨存儲的樣式表文件，就是我們常說的CSS文件（樣式表文件）。

如何在HTML中使用CSS？

在HTML中使用css，有下面四種方法：

行內樣式：使用 HTML 標簽的 style 屬性定義 CSS 樣式；
內嵌樣式：使用 style 標簽在 HTML 文檔頭部（通常在 head 之間）定義 CSS 樣式；
鏈接式：使用 link 標簽引入外部 CSS 樣式表文件。
導入式：使用 @import 命令導入外部 CSS 樣式表文件。

接下來，我來分別舉例說明一下具體方法。

行內樣式：

行內樣式的寫法：

所謂行內樣式，就是把樣式直接寫在HTML的行中。比如：

<p style='color:red;font-size:14px;'>這就是一個典型的行內樣式寫法。顏色：紅，字號大小：14像素。</p>

行內樣式的語法：

style="";

在引號中間，書寫css代碼，在需要書寫多個樣式時，使用 ' ; ' 分號分隔。 在HTML頁面涉及到的大部分情況下：單引號和雙引號均可使用，但注意一定要成對使用。

行內樣式的特點：

代碼短小，應用靈活：當你的頁面只需要極少的樣式，或者，這個樣式不需要再做調整，或可能通過 JS 進行動態調整的時候，采用這樣的寫入方式。
優先級高：直接寫在行內的樣式，優先級高于其他方式書寫的樣式表。
效率低下：因為樣式表寫在行內，即使使用相同標簽的樣式，也要重復的寫在每行內。這樣產生大量的冗余代碼，增加了大量的前端工作量，占用了大量服務器資源和流量。
難讀與易錯：頁面中大量的style，降低了頁面的結構清晰度，導致頁面不容易辨識，不方便修改，增加后期維護成本。
沒有實現內容與變現分離，與CSS設計的初衷相悖。

內嵌樣式：

內嵌樣式的寫法：

內嵌樣式，與行內樣式既有相同也有不同。相同點：都是在HTML頁面直接寫樣式表。區別是：內嵌樣式是把本頁用到的樣式幾種寫在一個或幾個style標簽中間。而style標簽可以出現在HTML頁面的任何地方。但通常，它會出現在 head 標簽之間。比如：

<head>
<style>.btn-img{  background: #eace00;  }.btn-img span{display: block;transform-style: preserve-3d;transition: all .5s;}    
</style>
</head>

內嵌樣式的語法和作用優先級：

<style>.classA{······    }.classB{······    }······
</style>

在內嵌樣式的書寫過程中，可以為使用相同樣式的標簽設置統一的class名，然后通過在html的標簽內添加class，實現樣式表應用。比如：

<p class='classA' > 
<p class='classA classB' >

在class的語法中，可以使用 “”，‘’ 雙引號或者單引號引用class類名，當一個標簽需要使用多個class類時，在引用內使用空格間隔。注意，當 classB 與 classA 的樣式表中存在定義的樣式沖突的情況，比如：

.classA{color：red;  }
.classB{color: blue;   }

上面這樣的寫法在下面這樣引用時：

<p class='classA classB' >

起作用的是 color：blue 。注意，這里不是因為在樣式表文件中 classB寫在了classA的后面。但是，當你在同個樣式表中書寫了兩個相同類名的相同屬性時：

.classA{ color: blue; } 
.classA{ color：red; }

是書寫在后面的 color：blue 起作用。這取決于 css的優先級原則：作用在后面的樣式會覆蓋前面的樣式，換句話說：在渲染過程中后起作用的樣式優先。

當然，熟悉CSS同學會說，我們還可以通過!important 改變優先級。注意：在書寫樣式表時使用 !important 的權重最高（但這并不是W3C推薦的寫法）。 !important 不是改變了css樣式的優先級，而是脫離了優先級規則，使用一個 !important 規則時，此聲明將覆蓋任何其他聲明。

比如下面的寫法，即使 color：red 寫在后面，但因為 important的作用，依然是前面的 color：blue 起作用。

.classA{ color: blue !important; } 
.classA{ color：red; }

!important的引入主要是為了處理瀏覽器兼容性問題。在早期的瀏覽器版本中，如IE6不識別!important，而IE7及其他瀏覽器則支持。通過使用!important，開發者可以為特定瀏覽器提供它認識的樣式寫法，以達到在所有瀏覽器中顯示一致的效果。這種做法在CSS中被稱為hack。
然而，雖然!important在某些情況下非常有用，但它也可能導致CSS代碼的混亂和難以維護。因此，建議僅在必要時使用它，并盡量通過其他方式（如調整選擇器的特異性或重新組織規則）來避免使用!important。
總的來說，!important是CSS中一個強大的工具，用于確保特定樣式的應用，尤其是在需要覆蓋其他沖突樣式時。但使用時需要謹慎，以避免引入不必要的復雜性和維護問題。
使用 !important 是一個壞習慣，應該盡量避免。

另外一個非常值得新手注意的是，當你的標簽需要同時使用一個以上的class類時，下面這樣書寫是錯誤的：

<p class='classA' class='classB' >

上面的書寫方式，將導致classA失效。正確的打開方式是：

<p class='classA classB' >

內嵌樣式的特點：

內容與表現進行了簡單的分離。
提高了頁面樣式的復用性。
沒有脫離頁面，在需要修改樣式表的時候，還是需要在頁面上進行修改，使前端工程師與程序工程師同時在頁面上工作，提高了出錯的幾率。

鏈接式：

鏈接式引用CSS文件的寫法：

鏈接式通過 HTML 的 link 標簽，將外部樣式表文件鏈接到 HTML 文檔中，這也是網絡上網站應用最多的方式，同時也是最實用的方式。比如：

<link href="style.css" type="text/css" rel="stylesheet" />

當你有多個CSS文件時，你可以這寫：

<link href="reset.css" type="text/css" rel="stylesheet"/> 
<link href="style.css" type="text/css" rel="stylesheet"> 
<link href="index.css" type="text/css" rel="stylesheet">

使用上面的寫法，CSS編寫可以非常清晰的管理項目的樣式表，比如：

reset.css --- 清除瀏覽器默認樣式
style.css --- 全站通用的控件，字體，布局等樣式
index.css --- 首頁涉及到的樣式

需要特別注意的是，頁面渲染時，也同樣遵循了寫在后面的樣式覆蓋前面樣式的規則。所以，要記得把清除瀏覽器樣式放在最前面，不把首頁的樣式表放在最下面：越局部的，越靠后。

接著以上述書寫順序為例，假設你在style.css 的 H1 標簽中，寫了如下樣式：

/* style.css */ 
h1 { color:red; font-size：1.8rem; }

而你在index.css 中，需要將 h1 的顏色變成綠色，但不調整文字的大小，那么你不需要去 style.css 中去修改 h1 的樣式，你只需要在 index.css 中這樣寫：

/* index.css */ 
h1{ color:green; }

這時候，你的首頁的H1 的文字樣式就改變成綠色了。而其他頁面的H1依然還是紅色的。這個例子，體現了樣式表拆分管理的優點，也體現了樣式表在頁面中的優先級規則。

鏈接式引用CSS文件的特點：

HTML 文檔和 CSS 文件完全分離，實現結構層和表示層的徹底分離。
提高了網頁結構的擴展性和 CSS 樣式的可維護性，當你需要修改某個頁面的樣式時，你只需要將某個樣式表從服務器上下載到本地，修改完成后上傳即可。
使從事樣式表編寫的工作者，專注于樣式表本身。

導入式：

使用 @import 命令導入外部樣式表。

導入式引用樣式表的的寫法：

@import url(css/daoru.css);
@import url('style/daoru.css');
@import url("daoru.css");

上面的例子展示了位于相同或不同路徑下的頁面和樣式表文件的導入方法。如果兩個文件位于同一目錄，也可以省略URL路徑，直接使用文件名：

@import daoru.css; 
@import 'daoru'; 
@import "daoru.css";

如你所見，這個寫法是非常不嚴謹的。你可以和靈活的將css文件通過上述方式引用到HTML文件中。其實，這是一種在HTML頁面中不太常見的引用樣式表文件的方法。至于優先級規則，@import 與

受前后順序的規則限制一模一樣。這里就不再做討論了。

在CSS文件中引用CSS文件：

在CSS文件中引用另一個CSS文件，可以使用CSS的@import規則。這個規則必須在其他CSS規則之前使用，所以通常放在文件的最開始。

例如，假設你有兩個CSS文件：base.css和theme.css。你想要在theme.css中引入base.css，可以在theme.css文件的最開始添加以下代碼：

@import url('base.css'); 
/* 其他theme.css的樣式規則 */

同前面所說的在頁面中導入樣式表的方法一樣，如果兩個樣式表文件位于同一目錄，也可以省略URL路徑，直接使用文件名：

@import 'base.css'; 
/* 其他theme.css的樣式規則 */

請注意：@import規則可能會導致性能問題，因為它可能增加額外的HTTP請求，從而影響頁面加載性能。因此，在包含內容較多的站點上，應謹慎使用或考慮使用其他技術如預處理器（如Sass或Less）來合并CSS文件。

樣式表優先級：

基于前面所有陳述總結，樣式表的優先規則可以歸納為：

內聯樣式 > 內部樣式和外部樣式比較：標簽上面使用的style屬性優先級最高。
內部樣式和外部樣式的優先級比較：后讀取的樣式優先級更高，即：哪個最后定義，就使用哪個樣式，也可以理解為后定義的樣式，會覆蓋前面定義的樣式。在渲染過程中，最后起作用的樣式優先級最高。
最近祖先樣式的優先級：?如果一個元素嵌套在另一個元素內，?那么內部元素的直接樣式將優先于外部元素的祖先樣式。?例如，?如果一個類名為son的div的顏色被設置為藍色，?而它的祖先div的顏色被設置為紅色，?那么son這個div的顏色將是藍色2。?
權重：?權重是決定CSS規則如何被瀏覽器解析并最終顯示的關鍵。?權重越高的樣式優先級越高。?每個選擇器都有一個特定的權重值，?當多個樣式被應用到同一個元素上時，?權重決定了哪種樣式將被采用。!important 的權重最高。

說了這么多，相信對于新手來說會有所幫助！別看我文章不收費，但是內容卻是實實在在的。所以，看完了的同學，請幫忙點贊+關注+評論！謝謝！