01：基本概念 + 引入CSS
一 书写规范
1）空格规范
.box {
width: 200px;
}
选择器和花括号之间有空格
冒号和后面的值之间有空格
2）选择器规范
.box,
.nav {
width: 200px;
height: 200px;
}
并集选择器，每个选择器声明必须独占一行
3）每个属性独占一行
.box {width: 200px;height: 20px;} //不推荐紧凑型格式书写
后期会压缩后投入生产环境
二 引入CSS
1）行内样式 [ 内联样式 ]
<h1 style="color: pink; font-size: 18px;">我是行内样式/h1>
2）内部样式表 [ 内嵌样式表 ]
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<style>
h2 {color:green; font-size:20px;}
</style>
</head>
3）外部样式表 [ 外联式 ]
<link rel="stylesheet" type="text/css" href="css/style.css">
4）link标签
作用: 定义文档与外部资源的关系 <link type="text/css" //1 定义链接文档的类型 rel="styleSheet" //2 定义文档与被链接文档之间的关系 styleSheet 表示是一个样式表 href="CSS文件路径" //3 支持绝对和相对路径 />
5）三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
