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

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

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

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

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

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

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

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

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

我們來(lái)做個(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è)文件里直接編寫(xiě)樣式：

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

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

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

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

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

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

兩組樣式定義用空行來(lái)分隔。

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

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

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

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

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

文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=55

JavaScript 中，給對(duì)象添加屬性和方法非常簡(jiǎn)單。以下是一些基本示例：

添加屬性

給對(duì)象添加屬性，你只需要使用點(diǎn)操作符（.）或者方括號(hào)（[]）語(yǔ)法，并給新屬性分配一個(gè)值。例如：

let obj = {}; // 創(chuàng)建一個(gè)空對(duì)象  
  
// 使用點(diǎn)操作符添加屬性  
obj.name = "John";  
obj.age = 30;  
  
// 使用方括號(hào)語(yǔ)法添加屬性  
obj["address"] = "123 Main St";

添加方法

在 JavaScript 中，對(duì)象的方法其實(shí)就是附加到對(duì)象上的函數(shù)。你可以使用同樣的方式添加方法，只是這次你分配的是一個(gè)函數(shù)，而不是一個(gè)值。例如：

let obj = {}; // 創(chuàng)建一個(gè)空對(duì)象  
  
// 添加一個(gè)方法  
obj.sayHello = function() {  
    console.log("Hello, my name is " + this.name);  
};  
  
// 調(diào)用方法  
obj.sayHello(); // 輸出: Hello, my name is John

注意在sayHello方法中，我們使用this關(guān)鍵字來(lái)引用對(duì)象自身。這是因?yàn)樵?JavaScript 中，函數(shù)的this值在調(diào)用時(shí)確定，如果函數(shù)作為對(duì)象的方法被調(diào)用，那么this就指向那個(gè)對(duì)象。

加一個(gè)簡(jiǎn)單的陰影

讓我們?yōu)橥队皽?zhǔn)備一個(gè)簡(jiǎn)單的HTML元素：

然后添加CSS：

輸出結(jié)果是三個(gè)框，通過(guò)調(diào)用每個(gè)框的ID可以很容易地放置陰影。要添加陰影，讓我們將屬性box-shadow賦予框1：

我們提供三個(gè)參數(shù)。前兩個(gè)參數(shù)是offset-x和offset-y。兩者都確定投影的位置。相對(duì)于元素左上角的位置給出偏移量。偏移x處的正值表示將陰影向右引導(dǎo)，偏移y處的正值表示將陰影向下引導(dǎo)。

第三個(gè)參數(shù)是所需的陰影顏色。盡管這里我們使用elements <div>，但是屬性box-shadow可以應(yīng)用于所有其他HTML元素。

賦予模糊半徑

如果想要陰影看起來(lái)更逼真，則可以使用blur-radius參數(shù)。此參數(shù)將設(shè)置我們?nèi)绾谓o予陰影模糊效果。讓我們將其應(yīng)用于方框2：

注意第三個(gè)參數(shù)，該值4px調(diào)整應(yīng)用于投影的模糊半徑。

提供半徑差數(shù)

如果要調(diào)整陰影的大小，我們可以添加參數(shù)spread-radius以使陰影擴(kuò)大或縮小。讓我們8px在框2中添加一個(gè)半徑擴(kuò)展：

注意參數(shù)的順序。

合并多個(gè)陰影

我們甚至可以一次將多個(gè)陰影組合到一個(gè)元素中。讓框3應(yīng)用藍(lán)色和綠色投影：

制作陰影

我們可以用參數(shù)制作一個(gè)向內(nèi)的陰影inset。參數(shù)inset可以寫(xiě)在屬性的開(kāi)頭或結(jié)尾box-shadow。以下示例使用elements blockquote。

我們還可以添加一些模糊和散布以增強(qiáng)陰影：

使用properties box-shadow，我們可以為所創(chuàng)建的網(wǎng)頁(yè)提供陰影，從而可以提供良好的3D照明效果。