4.9 CSS引入方式
css引入方式指在html页面的不同位置设置样式。CSS引入方式主要包括3种类型：内联样式、内部样式表、外部样式表。前两种类型已经使用，本节主要介绍第3种。
第1种：内联样式 inline style。CSS属性在标签的style属性里定义，没有使用选择器。
4.9.1 内部样式表
第2种：内部样式表internal stylesheet。使用选择器，放在HTML文件的style标签内。 “内部”的字面意思：CSS选择器定义在HTML文件内部。
内部样式表的优点：（1）元素结构与样式基本分离，（2）选择器的样式能够在当前页面重用。
内部样式表的缺点：多个html文件无法重用内部样式表的选择器代码。
style标签的位置。style标签通常放在head标签内部；有时也放在body内部，初学者不推荐使用。
<body>
<style>
h1{
color:#fff;margin: 0;
}
</style>
<div>
<h1>小步教程企业简介项目 www.xiaobuteach.com</h1>
</div>
</body>
4.9.2 外部样式表
第3种：外部样式表external stylesheet。将样式放在独立的css文件，html文件引入css文件。“外部”的字面意思：选择器在HTML文件的外部。
第1步：新建test.html文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="div1">
<h4>标题 小步教程 xiaobuteach.com</h4>
<p id="id1" class="class1">第1段</p>
<p class="class1">第2段</p>
<p class="class1 class2" >第3段</p>
<p>第4段</p>
</div>
</body>
</html>
<link rel="stylesheet" href="test.css">表示引用同一文件夹的test.css文件。
第2步：新建test.css文件，将原先style标签内部的内容复制到此文件。
p{
border: 1px solid #0aaa76;
color: #4aa6fc;
}
.class1{
font-size: 20px;
}
.class2{
font-style: italic;
}
#id1{
padding: 5px 20px;
}
.div1{
border: 1px solid #ed7d31;
padding: 5px;
}
.div1 > h4{
text-decoration: underline;
}
p , .div1 > h4{
margin-top: 5px;
margin-bottom: 5px;
}
CSS文件不需要style标签。
外部样式表的优点。除内部样式表的优点，还解决它的缺点问题，多个html文件可引用一个css文件进行样式重用。
试一试。新建第2个html文件，同样通过link引入test.css，则可以重复使用它内部定义的选择器；修改CSS文件的样式，多个html页面样式同时修改。
