一、CSS基础概念
CSS有两个重要的概念，分别是样式和布局
CSS的样式分为两种，一种是文字的样式，一种是盒模型的样式
CSS的另一个重要的特性就是辅助页面布局，完成HTML不能完成的功能，比如并排显示，比如精确定位显示
从HTML4.0开始，结构层和样式层进行了分离
前端三层：
- 结构层：HTML作用是从语义的角度讲进行网页结构的搭建
- 样式层：CSS作用从美观的角度讲修饰页面样式
- 交互层：JavaScript作用从交互的角度讲描述页面的行为
二、CSS常用属性的学习
CSS常用的文字属性有三个，color，font-size，font-family
CSS的属性样式发生了改变由HTML的k=’v’变为了k:v;
2.1文字颜色
属性名：color
基本使用
<p style="color:blue;">看我是什么颜色</p>属性值：主要分为两种，单词表示法，一种是颜色值（十六进制，rgba）
以蓝色为准
rgb颜色表示法
<p style="color:rgb(0,0,225);">看我是什么颜色</p>
十六进制颜色表示法
<p style="color:#0000FF;">看我是什么颜色</p>
需要记忆一些常用颜色的单词表示法的单词，比如red、blue、orange、pink...
2.2字号
属性：font-size
属性值：常用的是以px为单位的数字值
根据浏览器的不同，有默认不同的字号大小，比如Chrome和ie默认就是16px的文字
每个浏览器都有自己最小的显示像素，比如Chrome最小字号为8px
ie浏览器最小字号是1px
基本使用：
<p style="font-size:10px;">看我的文字大小</p>
2.3字体
属性：font-family
属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开
中文字体的常用字体属性值：
微软雅黑，宋体
英文常用字体属性值：
Arial
consolas
事迹的字体属性是根据设计图获取
大多数浏览器默认显示字体是微软雅黑
如果页面中有中英文混合的，需要同时设置对应的字体
如果设置多个字体，使用逗号隔开，如果浏览器不识别前面的字体，会自动向后识别，中英文会分别进行加载
<p style="font-family: 'Arial','consolas','黑体','宋体'">看我的字体是什么blue,yellow</p>
三、盒子的三属性
盒子的三属性width、height、background-color
width：是宽度的意思
height：是高度意思
常用的属性值都是以px为单位的数值
background-color：属于background系列属性的一种
属性值和color一样分为单词和颜色值表示法
基本使用
<div style="width:100px;height:100px;background-color:red;"></div>
四、CSS样式表
到现在为止，我们学习行内式样式表的使用
4.1 行内式样式表
基本语法：
<div style="width:100px;height:100px;background-color:red;"></div>引入位置：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔
4.2 内嵌式样式表
基本语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
font-size: 18px
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>书写位置：head标签的内部，title标签的下面，一对style标签中
4.3 外链式样式表
基本语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div>文字</div>
</body>
</html>书写位置：head标签的内部，title标签的下面，一个link内部去进行css文件引入
<link rel="stylesheet" href="css/1.css">link标签的作用就是引入外部文件，通过href属性，属性值是文件地址
rel属性值如果是stylesheet，代表的就是引入样式表
通过引入css文件到html文件中，从而实现样式的加载
css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的
4.4 导入式样式表（只需要了解）
基本语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(css/1.css);
</style>
</head>
<body>
<div>文字</div>
</body>
</html>书写位置：head标签的内部title标签下面style标签内，通过@import进行导入
注意：导入式必须写在style标签的最顶部
url内部是css文件的引入地址
4.5 四种样式表的区别和优缺点
| 样式表的名称 | 权重 | 优点 | 缺点 |
| 行内式样式表 | 最高 | 权重高，样式设置更精确 |
|
| 内嵌式样式表 | 大于导入式，等于外链式 | 能够将CSS样式和估计进行分离，可以进行批量属性的修改 | 样式和骨架没有进行完全分离，多个html文件不能使用同一套css代码。 |
| 外链式样式表 | 大于导入式，等于内嵌式 | 样式和骨架进行完全分离，一份css代码可以重复使用 | 如果我们写小的demo的时候，每次写外链式比较麻烦，并且看起来不直观 |
| 导入式样式表 | 最低 | 样式和骨架进行完全分离，一份css代码可以重复使用 | 导入式有样式问题，引入导入式涉及到加载顺序，说白了，页面会白一下，体验不好 |
五、选择器
选择器分为两种，一种是基础选择器，一种高级选择器
基础选择器：标签选择器、id选择器、类名选择器
高级选择器；后代选择器、交集选择器、并集选择器
5.1 标签选择器
选择方法：通过标签名称去选择
书写方法：标签名
选择范围：HTML文档中所有的同名标签
基本使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
}
h3{
color: blue;
}
</style>
</head>
<body>
<p>
段落标签
</p>
<h3>
三级标题
</h3>
</body>
需要注意的是标签选择器无视嵌套规则，都能进行识别加载
<p>
段落标签
</p>
<div>
<div>
<div>
<div>
<p>我是段落标签</p>
</div>
</div>
</div>
</div>
用途：实现全选同名标签，可以设置公共样式
缺点：只能进行全选，不能进行单独的布局样式
5.2 id选择器
通过标签上id属性进行选择
书写方法：#id属性值（自定义）
选择范围:只能选中一个标签
基本使用：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#p1{
color: blue;
}
</style>
</head>
<body>
<p id="p1">第1段文字</p>
<p>第2段文字</p>
<p>第3段文字</p>
</body>id其实就是标签的身份证号，具有唯一性。规定一个页面中不允许有同名id属性
优点：id属性的权重高
缺点：只能实现单选
5.3 类名属性
通过标签上的clas属性进行选择
书写方法：.匹配对应的class属性值
选择范围：选择所有同名clss属性标签
基本使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.par{
color: blue
}
</style>
</head>
<body>
<p class="par">第1段文字</p>
<p class="par">第2段文字</p>
<p class="par">第3段文字</p>
</body>
一个标签的class属性值可以有一个或者多个
多个class属性之间使用空格隔开
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.par{
color: blue
}
.cur{
color: yellow;
}
</style>
</head>
<body>
<p class="par">第1段文字</p>
<p class="par cur">第2段文字</p>
<p class="par">第3段文字</p>
</body>
id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线
5.4 通配符选择器
书写方法：
选择范围：选择包含html标签在内的所有标签
通配符*后面添加的样式，每一个标签都会加载一次
我们通常使用清除页面的默认样式
基本使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: yellow
}
</style>
</head>
<body>
<span>span</span>
<p>p标签</p>
<div>div</div>
<h3>h3</h3>
</body>
清除页面的默认内外边距
*{
margin: 0;
padding: 0;
}
5.5 后代选择器
书写方法：使用空格连续链接多级选择器
作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性
基本使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box ul li{
color: red;
}
.box2 ul li{
color: green;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>box里面的li</li>
<li>box里面的li</li>
<li>box里面的li</li>
<li>box里面的li</li>
</ul>
</div>
<div class="box2">
<ul>
<li>box2里面的li</li>
<li>box2里面的li</li>
<li>box2里面的li</li>
<li>box2里面的li</li>
</ul>
</div>
</body>
需要注意的是，后代关系不一定是父子关系
.box li{
color: red;
}
表示选择类名为box后代中的li
5.6 交集选择器
作用：进行满足所有选择器条件的匹配
书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.par{
color: blue;
}
</style>
</head>
<body>
<p class="par">文字</p>
<div class="par">文字</div>
</body>
5.7 并集选择器
并集选择器有‘和’的意思，代表多个标签设置同样的属性
书写方法：将多个选择器使用逗号进行连接，最后一个不能加逗号
选择范围：多个选中标签的集合
我们看下面的结构
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color: red;
}
p{
color: red;
}
</style>
</head>
<body>
<p>文字</p>
<div>文字</div>
</body>div和p标签设置的属性是一样，这个时候我们可以通过并集选择器设置同样的属性值
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p{
color: red;
}
</style>
</head>
<body>
<p>文字</p>
<div>文字</div>
</body>并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性
#par .par li,p{
color: red;
}上面的代码指的是#par里面的.par里面的li和p标签的文字颜色为红色
六、CSS的继承性和层叠性
6.1 继承性
只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性我们叫做继承性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>文字</li>
</ul>
</div>
</body>
注意，css可以继承的属性都是关于文字的，比如color，font-size，font-family
6.2 层叠性
CSS样式表又叫做“层叠式样式表”，什么是层叠性
看下面的案例
HTML结构
<p class="par" id="par">
文字
</p>
CSS样式
<style>
p{
color: red;
}
.par{
font-size: 20px;
}
#par {
/* 文字添加下划线 */
text-decoration: underline;
}
</style>浏览器的效果
通过上面的案例，我们发现一个标签可以被多个选择器选中，并设置对应的属性
如果多个选择器，设置了同一个属性，怎么办？
#par {
color:purple;
}
.par{
color: blue;
}
p{
color: red;
} 我们看浏览器的效果是紫色的；
我们看上图后两个选择器设置的内容被‘杠’掉了，我们叫做被层叠了，这个就是css的层叠性。
我们学习选择器的权重：
id选择器>class类名选择器>标签选择器
如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的
我们看下面的案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 div.box2 #box3 p{
color: red;
}
#box1 #box2 div.box3 p{
color: blue;
}
#box1 div.box2 .box3 {
color: pink;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
</div>
</body>如果遇到复杂的选择器，不要慌，要学会数选择器
方法，首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜，如果所有选择器数量相同，后写的覆盖先写的。
6.3 就近原则
上面的案例是所有选择器都选择同一个元素p，所以需要数权重数量
现在如果都没有选中，怎么办？
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 #box2 {
color: blue;
}
.box1 .box2 .box3 {
color: purple;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>文字</p>
</div>
</div>
</div>
</body>如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的，如果选择的都是同一个元素中，再去数权重
总结：
遇到了复杂的选择器，首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的；如果所有的权重一样，选择位置也一样，后书写的覆盖先写的
![[Unity Demo]从零开始制作空洞骑士Hollow Knight第十三集：制作小骑士的接触地刺复活机制以及完善地图的可交互对象](https://i-blog.csdnimg.cn/direct/00e9810fea774983b55668473d6b111c.png)
