CSS和HTML结合使用的三种方式
第一种方式：
在标签的style属性上设置"key:value value;"，修改标签样式
需求：
分别定义两个div、span标签，分别修改每个div标签的样式为：边框为5个像素，实线，淡蓝色
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>CSS和HTML结合使用第一种方式</title>
</head>
<body>
<div style="border: 5px solid lightskyblue";>div标签1</div>
<div style="border: 5px solid lightskyblue";>div标签2</div>
<span style="border: 5px solid lightskyblue";>span标签1</span>
<span style="border: 5px solid lightskyblue";>span标签2</span>
</body>
</html>
第一种方式存在的问题：
1.如果标签多，样式多，代码量将会非常庞大
2.可读性非常差
3.CSS代码不具备复用性
第二种方式
在head标签中，使用style标签来定义各种自己需要的CSS样式
格式如下：
xxx{
Key：value value；
}
需求：
分别定义两个div、span标签，分别修改每个div标签的样式为：边框2个像素，实线，淡蓝色和米白色
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>CSS和HTML结合使用第二种方式</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/css">
/*这里是注释*/
div{
border: 2px solid lightskyblue;
}
span{
border: 5px solid burlywood;
}
</style>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
第二种方式存在的问题：
1.只能在同一个页面内复用代码，不能在多个页面中复用CSS代码
2.维护不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量太大
第三种方式：
把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用
使用html的<link rel="stylesheet" type="text/css" href="xxx.css"/> 标签导入css样式文件
新建一个css文件：
css文件内容：
将css样式文件导入
