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)三种样式表总结

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

 

posted @ 2021-01-19 10:26  棉花糖88  阅读(99)  评论(0编辑  收藏  举报