部样式解决了内联样式的问题，但他也有弊端，主要表现在一下两个方面：

弊端1，内部样式只能作用于一个页面，如果要实现多个页面共享一个样式，就做不到了。

弊端2，随着样式代码的不断增加，在编辑器中，要不停的上下滚动屏幕来编辑样式，很不方便。

解决这些弊端的方法就是使用外部 CSS。

外部 CSS，也叫外部样式，可以通过改变一个文件来改变整个网站的外观！

外部样式，将 CSS 代码放在一个独立的，以 .css 为后缀名的文件中，使 html 页面结构文件和 css 样式文件完全独立开来。

每个HTML页面都必须在 head 元素里添加 <link> 元素，link 是链接的意思。

在 <link> 元素里定义 rel 属性，rel 是 relationship 的缩写，译为关系、关联，值为 stylesheet，表示关联一个样式表。

再定义一个 href 属性，用来设置一个对外部样式表文件的引用，值为 .css 文件的路径。

我们来做个例子。

在 002-add-css 文件夹里创建一个 external-1.html 文件，构建好基础代码。添加 h1 和 p 元素，分别填入一些文本。

再创建一个 external-2.html 文件，构建好基础代码。添加 h1 和 p 元素，分别填入一些文本。

在 002-add-css 文件夹里创建一个 mystyle.css 文件，在这个文件里直接编写样式：

body，空格，花括号，回车，定义样式属性名 background-color，冒号，属性值为 lightblue，分号。

h1，空格，花括号，回车，color，navy，分号，margin-left，20px，分号。

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

前面说到，样式表代码的编写格式很宽松，但是我们编写样式的时候还是要有一定的规范：

选择器和花括号中间用一个空格隔开；

每一条样式声明语句单独一行定义；

两组样式定义用空行来分隔。

样式文件定义好后，在 external-1.html 文件的 head 元素里输入 link，按下回车键或 tab 键，emmet 会为我们自动补全一些代码，我们只需要设置 href 属性的外部样式文件路径就好了。这里我们填入 mystyle.css。保存。

预览页面，第一个页面的样式添加好了。

在 external-2.html 文件的 head 元素里也添加一个 link 元素，设置同样的路径 mystyle.css。保存。

预览页面，第二个页面的样式也添加好了。

不难发现，在 mystyle.css 定义的一套样式，应用到了两个页面上，做到了多个页面的样式共享。

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=55

JavaScript 中，给对象添加属性和方法非常简单。以下是一些基本示例：

添加属性

给对象添加属性，你只需要使用点操作符（.）或者方括号（[]）语法，并给新属性分配一个值。例如：

let obj = {}; // 创建一个空对象  
  
// 使用点操作符添加属性  
obj.name = "John";  
obj.age = 30;  
  
// 使用方括号语法添加属性  
obj["address"] = "123 Main St";

添加方法

在 JavaScript 中，对象的方法其实就是附加到对象上的函数。你可以使用同样的方式添加方法，只是这次你分配的是一个函数，而不是一个值。例如：

let obj = {}; // 创建一个空对象  
  
// 添加一个方法  
obj.sayHello = function() {  
    console.log("Hello, my name is " + this.name);  
};  
  
// 调用方法  
obj.sayHello(); // 输出: Hello, my name is John

注意在sayHello方法中，我们使用this关键字来引用对象自身。这是因为在 JavaScript 中，函数的this值在调用时确定，如果函数作为对象的方法被调用，那么this就指向那个对象。

加一个简单的阴影

让我们为投影准备一个简单的HTML元素：

然后添加CSS：

输出结果是三个框，通过调用每个框的ID可以很容易地放置阴影。要添加阴影，让我们将属性box-shadow赋予框1：

我们提供三个参数。前两个参数是offset-x和offset-y。两者都确定投影的位置。相对于元素左上角的位置给出偏移量。偏移x处的正值表示将阴影向右引导，偏移y处的正值表示将阴影向下引导。

第三个参数是所需的阴影颜色。尽管这里我们使用elements <div>，但是属性box-shadow可以应用于所有其他HTML元素。

赋予模糊半径

如果想要阴影看起来更逼真，则可以使用blur-radius参数。此参数将设置我们如何给予阴影模糊效果。让我们将其应用于方框2：

注意第三个参数，该值4px调整应用于投影的模糊半径。

提供半径差数

如果要调整阴影的大小，我们可以添加参数spread-radius以使阴影扩大或缩小。让我们8px在框2中添加一个半径扩展：

注意参数的顺序。

合并多个阴影

我们甚至可以一次将多个阴影组合到一个元素中。让框3应用蓝色和绿色投影：

制作阴影

我们可以用参数制作一个向内的阴影inset。参数inset可以写在属性的开头或结尾box-shadow。以下示例使用elements blockquote。

我们还可以添加一些模糊和散布以增强阴影：

使用properties box-shadow，我们可以为所创建的网页提供阴影，从而可以提供良好的3D照明效果。