上午学习了HTML语言CSS样式的内部样式表，现在我们来学习下外部样式表。这是CSS样式表的一个重点。
实际开发都是外部样式表，适合于样式比较多的情况，核心是: 样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表，分为两步:
1.新建一个后缀名为.css的样式文件，把所有CSS代码都放到这个样式文件中。
2.在HTML页面中，使用<link>标签引入.css这个文件
看下语法规范:
<link rel="stylesheet" href="css文件路径">
对于css文件路径，如果在同一个文件夹下，可以直接引用。如果不在同一个文件夹下，可以再引用下文件路径。
来看下最终的样式效果:
最开始没有效果的展示：
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS之外部样式表</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<div>天生我材必有用，千金散尽还复来。</div>
</body>
</html>
修改后的显示效果为:
对应的代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS之外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>天生我材必有用，千金散尽还复来。</div>
</body>
</html>
这里加入了<link>标签，<link rel="stylesheet" href="style.css"> 也引入了CSS的样式文件。具体文件内容为:
对应文件内的代码为:
/* 这个css文件里没有标签，只有样式 */
div {
color: pink;
}
先在外部新建一个 .css文件，然后通过link将css文件引入
接下来对CSS引入样式进行一个总结:
行内样式表: 优点是书写方便，权重高，缺点是结构样式混写，使用情况较少，控制范围是控制一个标签。
内部样式表: 优点是部分结构和样式相分离，缺点是没有彻底分离，使用情况较多，控制范围是控制一个页面。
外部样式表: 优点是完全实现样式和结构相分离，缺点是需要引入，使用情况最多，吐血推荐，控制范围是能够控制多个页面。
今天就先到这里了，明天进行综合案例分析。谢谢大家~