目录
一.CSS3概述
1.什么是css
(1) html——网页的布局，和数据的显示--------网页的骨架
(2) css——网页修饰-------就如网传的亚洲有四大邪术：韩国整容术、中国PS术、日本化妆术、泰国变性术（整容，ps，美妆，泰国）
(3) css的全称：cascading style sheets 中文翻译为“层叠样式表”，简称CSS样式表
2.html属性和css的使用原则
(1) html属性只能修饰当前一个元素，代码没有可重用性，可维护性极低
(2) css具有一定的可重用性，可维护性，但是代码重用没有做到极致，需要使用scss动态样式语言做到极致
(3) w3c建议开发者尽量的使用css来替代html属性
二.css的语法规范
1.css的使用方式
(1) 3个常用css属性
color:颜色 设置字体颜色
background-color:颜色 设置元素背景颜色
font-size:20px 设置字号大小
多个样式属性之间用;隔开
比如，以下css代码：
color:red;background-color:green;font-size:16px;(2) 行内样式（内联样式）
在元素的style属性中，编写样式声明；
内联样式不能重用，内联样式默认优先级最高；
项目中基本不用，只在学习和测试偶尔使用
(3) 内部样式
在head标签中编写<style></style>
选择器{ 样式声明; } 大括号结尾一定不能添加分号
内部样式可以在本页面实现样式重用
项目中偶尔使用内部样式，学习和测试中大量使用
(4) 外部样式
单独创建一个.css文件，在html的head标签中引入这个文件
<link rel="stylesheet" href="my.css">注意：rel="stylesheet" 这个属性和值必须写
在多个页面进行重用，项目中广泛使用
link标签(元素)只能存在于 head 部分，不过它可出现任何次数。
2.css样式的特征
CSS的两大特性，继承性和层叠性
(1) 继承性
① 文本字体样式的继承——大多数css文本字体样式可以被继承
后代元素可以继承祖先元素的文本字体样式
② a标签不继承祖先元素的字体颜色
(2) 层叠性
① 可以为一个元素设置多个css样式，只要css属性不冲突，就都能作用到这个html元素上，这种现象叫做堆叠
② 如果发生冲突，按照优先级显示
权重相同的情况下，后写的覆盖前面的样式。由此可见，层叠性和选择器的权重有很大关系
⬛ 默认优先级
默认优先级 高 内联样式
就近原则
低 浏览器默认样式
f12中选择器的排列，是按照默认优先级的顺序排列
就近原则时，如果外部样式顺序在内部样式<style></style>之前，则同一个样式内部覆盖外部），反之，同一个样式外部覆盖内部
⬛ 调整优先级
!important 让当前样式变的重要,直接获取最高优先级，比内联还高
h6{background-color: red !important;}注意：style中不能使用!important
◼️ 如果你选中了你的样式，控制台里却找不到对应的选择器只有2种可能
1、该选择器之前有分号，可能是其他选择器{}后加了分号，导致下面的选择器样式失效进而找不到选择器
2、选择器写错了，没有匹配到当前的元素。
💦 所以我们出错的地方一般会有2种情况：
一是，选择器找不到，原因是以上两种情况；二是，选择器没有问题，里面的样式被划掉，这说明：
① 选择器里面的样式有误，比如一个式样式结束后没有加分号，则样式会被划掉；
② 该元素有了更高优先级的的样式，比如写了内联样式，同时又写了内部样式，如果属性有冲突的话，内部样式会被划掉
三.基础选择器
1.选择器的作用
(1) 规范了页面中哪些元素能够使用定义好的样式
(2) 选择器就是一个条件，页面中符合这个条件的元素，都可以使用定义样式
2.选择器详解
(1) 通用选择器（通配符选择器）
*{样式声明}
① 匹配页面中所有的元素，效率极低，尽量不用
② 项目中有可能使用的场景 *{margin:0;padding:0;} 清除所有元素的内边距和外边距
由于不同浏览器设置的默认内外距不同，我们需要进行统一，这个行为，称作css reset 样式重置。另，css中要求，只有0可以不添加单位
(2) 元素选择器，标签选择器
元素关键字{ 样式声明}
body{font-size: 30px;background-color: green;}元素选择器一般设置某种元素在页面中的公有样式
(3) ID选择器——专属定制，只对页面中某一个元素生效
<div id="d1"></div>
#d1{样式声明}
◼️ id名的命名规则
（1）只能包含字母、数字、下划线_、连接符-、美元符号$
（2）必须以字母或_、-、$开头。之后可以是字母、数字、下划线或是连接符。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
(4) 类选择器
把一些样式封装进一个类选择器中，哪个元素想使用这个样式，就用class调用类名
.className{样式声明}
如：<任意元素 class=" className ">
① 变种1——多类选择器
<任意元素 class=" className1 className2 className3.....">
如果多个类属性有冲突的话，按照样式声明的编写顺序来，跟设置的类名的顺序无关
② 变种2——分类选择器1
元素选择器.类选择器{样式声明}
引用这个类名的这个元素才能使用这个样式
该分类选择器，平时使用居多
③ 变种3——分类选择器2
.类名1.类名2 { 样式声明 } 同时引用两个类的元素，应用这个样式
注意：类名的定义，可以有字母，数字，_，-
不能以数字开头
变种1、2、3也可以叫做交集选择器（或是叫组合选择器）
注意，交集选择器没有空格。所以，没有空格的div.red（交集选择器）和有空格的div .red(后代选择器)不是一个意思。
交集选择器可以连续交:（一般不要这么写）如下：
h3.special.zhongyao{color:red;}
(5) 群组选择器
群组选择器，也叫分组或并集选择器
选择器1, 选择器2, 选择器3......{样式声明}
每一个选择器都应用定义的样式
(6) 后代选择器
通过后代关系，来匹配元素
后代关系：一级以及多级的嵌套
选择器1 选择器2 选择器3...{样式声明}
(7) 子代选择器
通过子代关系，来匹配元素
① 子代关系：一级嵌套
选择器1>选择器2>选择器3......{样式声明}
② 子代选择器和后代选择器可以混合编写
选择器>选择器 选择器{}
选择器 选择器>选择器{}
(8) 伪类
只是配合其它选择器使用的，所以不是严格意义上的选择器，他是动态的效果
(1) css3语法定义改革，这个改革之前出的伪类，都是单:开头
在改革的时间内出的伪类，单双都支持
在改革之后出的伪类，都是双::开头
(2) 伪类选择器，匹配某一个元素在某种状态下应用的样式
① :link{ } 匹配连接未被访问过的状态 ——a标签专属——a:link{}
② :visited{ } 匹配连接被访问后的状态 ——a标签专属——a:visited{}
③ :hover{ } 匹配元素鼠标悬停时的状态
④ :active{ } 匹配元素被激活时的状态 ——鼠标点击标签，但是不松手时
当上面4个伪类同时作用到一个元素上时，必须按照固定的编写顺序，才会都显示效果
爱恨原则 love&hate
:link :visited :hover :active
⑤ :focus 元素获取焦点时，显示的样式——input专用（如：比如某个输入框获得焦点）
⬛ 选择器的权值
权值代表当前选择器的重要程度，权值大的优先显示
!important >1000 注意：!important直接获取最高权值，可以看做无限大 infinity
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
属性选择器 10
标签选择器 1
伪元素选择器 1
通用选择器 0
子代选择器 0
相邻选择器 0
继承的样式 无
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
权值的特点
(1) 当一个选择器包含多个选择器时，需要将所有选择器的权值相加，然后比较
权值大的优先显示
一般，选择器越具体，优先级越高
(2) 当权值相同时，则就近原则
即选择器优先级相同，则优先使用靠下的样式，即后声名的选择器覆盖前边的选择器
(3) 群组选择器，每个选择器的权值单独计算，即不相加，各算各的
(4) 选择器的权值计算，不能超本身的最大数量级
也就是说选择器的累加，不会超过其最大的数量级，比如，类选择器累加再高也不会超过id选择器
注意：后期代码量大起来之后，有可能不小心就把权值写低，导致写的样式显示不出来
💦 小结：权重计算规则
第零等：!important， 大过了其它任何设置。第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表tag选择器和伪元素选择器，如div p，权值为0001。
第五等：通配符、子代选择器、相邻选择器等的。如*、>、+,权值为0000。
第六等：继承的样式没有权值。
注意：伪类选择器计算权值时不包含冒号前面的选择器，如#content>div:nth-child(2)，#content是id选择器权值100，div是tag选择器权值1，:nth-child(2)是伪类选择器权值为10。
注意：通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先，0权值比无权值优先。关于选择器权重的补充：
选择器有两大类：
① 基础选择器：id选择器，类选择器，标签选择器，通配符选择器；
★基础选择器权重：id选择器 > 类选择器> 标签选择器> 通配符选择器；
② 复合选择器：后代选择器，并集选择器，指定标签（交集）选择器；★复合选择器权重就需要计算了，这里讲两种计算方法：
✔️ 加法运算
1.内联样式，如: style=””，权值为1000。
2.ID选择器，如：#content，权值为100。
3.类，伪类和属性选择器，如.content，权值为10。
4.标签选择器和伪元素选择器，如div p，权值为1。
复合选择器的权重计算：将基本选择器的权重相加之和，就是权重大小，值越大，权重越高比如：
#box ul li a.cur {color:red;}
#box li .cur {color:green;}
#box ul li a.cur 权重是 100+1+1+1+10 = 113
#box li .cur 权重是 100+1+10 = 111
那么后面的样式就会被前面的样式层叠掉，那么最终a的颜色是red，这是第一种加法运算✔️ 4个0计算方式
CSS权重是由四个数值决定：（0,0,0,0）分别对应（行内式个数，id选择器个数，类选择器个数，标签选择器个数）两个选择器通过对比4个数的大小，确定权重关系
如何理解呢？
例如：#box ul li a.cur 有1个id，3个标签，1个类 那么 4个0 就是 (0,1,1,3)
例如：.nav ul .active .cur 有0个id，1个标签，3个类 那么 4个0 就是 (0,0,3,1)如何比较大小呢？
先比较第一个数，两个都是0，所以对比第二个数，因为第一个选择器第二个数是1，而后一个选择器权重是0所以前面的选择器权重大。也就是说从左往右逐个等级比较，前一等级相等才往后比
💦 优先级不起作用？？？如果遇到了似乎没有起作用的css规则，很可能是出现了特殊性冲突。这时可以在选择器中添加他的一个父元素的id，从而提高他的特殊性。如果这能解决问题，就说明样式表中其他地方很可能有更特殊的规则，他覆盖了你的规则。此时需要检查代码，解决特殊性冲突，让代码尽可能的简洁。PS：特殊性是指选择器的权重，特殊性值是指权重大小或是权值大小。
🆕【后文传送门】👉 尺寸和边框、盒子模型、外边距_02
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
4428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
