內(nèi)部樣式解決了內(nèi)聯(lián)樣式的問題，但他也有弊端，主要表現(xiàn)在一下兩個(gè)方面：

弊端1，內(nèi)部樣式只能作用于一個(gè)頁面，如果要實(shí)現(xiàn)多個(gè)頁面共享一個(gè)樣式，就做不到了。

弊端2，隨著樣式代碼的不斷增加，在編輯器中，要不停的上下滾動(dòng)屏幕來編輯樣式，很不方便。

解決這些弊端的方法就是使用外部 CSS。

外部 CSS，也叫外部樣式，可以通過改變一個(gè)文件來改變整個(gè)網(wǎng)站的外觀！

外部樣式，將 CSS 代碼放在一個(gè)獨(dú)立的，以 .css 為后綴名的文件中，使 html 頁面結(jié)構(gòu)文件和 css 樣式文件完全獨(dú)立開來。

每個(gè)HTML頁面都必須在 head 元素里添加 <link> 元素，link 是鏈接的意思。

在 <link> 元素里定義 rel 屬性，rel 是 relationship 的縮寫，譯為關(guān)系、關(guān)聯(lián)，值為 stylesheet，表示關(guān)聯(lián)一個(gè)樣式表。

再定義一個(gè) href 屬性，用來設(shè)置一個(gè)對(duì)外部樣式表文件的引用，值為 .css 文件的路徑。

我們來做個(gè)例子。

在 002-add-css 文件夾里創(chuàng)建一個(gè) external-1.html 文件，構(gòu)建好基礎(chǔ)代碼。添加 h1 和 p 元素，分別填入一些文本。

再創(chuàng)建一個(gè) external-2.html 文件，構(gòu)建好基礎(chǔ)代碼。添加 h1 和 p 元素，分別填入一些文本。

在 002-add-css 文件夾里創(chuàng)建一個(gè) mystyle.css 文件，在這個(gè)文件里直接編寫樣式：

body，空格，花括號(hào)，回車，定義樣式屬性名 background-color，冒號(hào)，屬性值為 lightblue，分號(hào)。

h1，空格，花括號(hào)，回車，color，navy，分號(hào)，margin-left，20px，分號(hào)。

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

前面說到，樣式表代碼的編寫格式很寬松，但是我們編寫樣式的時(shí)候還是要有一定的規(guī)范：

選擇器和花括號(hào)中間用一個(gè)空格隔開；

每一條樣式聲明語句單獨(dú)一行定義；

兩組樣式定義用空行來分隔。

樣式文件定義好后，在 external-1.html 文件的 head 元素里輸入 link，按下回車鍵或 tab 鍵，emmet 會(huì)為我們自動(dòng)補(bǔ)全一些代碼，我們只需要設(shè)置 href 屬性的外部樣式文件路徑就好了。這里我們填入 mystyle.css。保存。

預(yù)覽頁面，第一個(gè)頁面的樣式添加好了。

在 external-2.html 文件的 head 元素里也添加一個(gè) link 元素，設(shè)置同樣的路徑 mystyle.css。保存。

預(yù)覽頁面，第二個(gè)頁面的樣式也添加好了。

不難發(fā)現(xiàn)，在 mystyle.css 定義的一套樣式，應(yīng)用到了兩個(gè)頁面上，做到了多個(gè)頁面的樣式共享。