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)三种样式表总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |