CSS基础知识

CSS简介

CSS：Cascading Style Sheets，层叠样式表。用于定义网页的样式，该语言书写的代码通常会被浏览器解析执行。

引用CSS

1、引用外部样式表：引用独立的css文件，结构与样式相分离，便于复用和维护。
引入格式：格式：<link rel=”stylesheet” href=”css的位置”>
2、引用内部样式表：将css所要写的代码写在HTML文档中。提高了浏览器解析效率，但是不利于程序员和搜索引擎阅读。
引入格式：<style type=”text/css”>样式</style>
3、引用行内样式表：css代码写在元素的style属性中。
格式示例：<span style=”color:red;”>密码强度</span>

CSS注释

css注释书写格式：/*注释内容*/
主要用于描述代码功能，浏览器解析CSS代码时会忽略注释内容。

css规则

css代码由css规则所组成，css规则决定的元素用什么样式。

css选择器

css选择器是指样式所决定的元素是什么。

普通选择器

1、元素选择器
格式：标记名{声明块}
所有与该标记名匹配的元素，都将使用该声明块中的规则。
2、类选择器（类名一般以字母开头，可以包含字母、下划线、数字）
格式：.类名{`声明块}
所有class的属性值为指定的类名都将被选中。
3、ID选择器
格式：id值{声明块}（id名唯一）
4、组合（并集）选择器
eg：p,span {color:red;}
在计算特殊性时，组合选择要分开计算

层次选择器

子级选择器格式：父元素+“>”+子元素
后代选择器格式；父元素+空格+子元素
兄弟选择器（相邻兄弟）：
书写格式：兄弟元素A+”+”+兄弟元素B
兄弟元素A和兄弟元素B之间不能有任何其他标签，且若B要有样式，则必须在A之后
通用选择器（不相邻兄弟）：
书写格式：兄弟元素A+”~”+兄弟元素B
兄弟元素A之后的所有兄弟元素B都将被选中

伪类选择器

结构伪类选择器

1、代码格式：元素名:nth-child(位置)
选择第n个元素（且与元素名相匹配则被选中）
适用场景：所有兄弟元素都是相同的标签名
2、代码格式：元素名:nth-of-type(位置)
选中元素名中的第n个元素
适用场景：兄弟元素的标签名可以不同
3、代码格式：元素名:last-child
适用场景：选中最后一个元素
4、代码格式：元素名:first-child
适用场景：选中第一个元素
5、代码格式：元素名:nth-child(2n)
适用场景：选中偶数项元素
6、代码格式：元素名:nth-child(2n+1)
适用场景：选中奇数项元素
7、代码格式：元素名:nth-child(-n+个数)
适用场景：选中前N个元素
8、代码格式：元素名:nth-last-child(个数)
适用场景：选中倒数第N个元素

否定伪类选择器

代码格式：元素名:not(:否定的内容)
eg：除了第三个p其他所有都添加样式
p:not(:nth-child(3)) {color:red;}
代码格式：元素名:not(:否定的内容)😦:否定的内容)…
适用场景：否定多个元素
eg：除了第三个p和第四个p都添加样式
p:not(:nth-child(3)):not(:nth-child(4)) {color:red;}

动态的伪类选择器

状态1：link 未选中
状态2：hover 悬停（鼠标移入）
状态3：active 点击时
状态4：visited 已点击
注：link和visited只适用于a标签
书写格式：eg： a:link {样式内容}
书写顺序：:link-:visited-:hover-:active
:visited-:link-:hover-:active

伪元素选择器

1、代码格式：::selection { }
选中内容样式添加字体颜色和背景颜色
2、代码格式：元素A::before
Before是元素A的第一个子元素
3、代码格式：元素A::after
after是元素A的最后一个子元素
4、代码格式：元素A::first-line
元素A的第一行
5、代码格式：元素A::first-letter
元素A的第一个汉字或第一个字母

属性选择器

1、书写格式：元素名[属性名=“属性值”]
2、书写格式：元素名[属性名^=”部分属性值”]
表示以XXX开头的属性值
3、书写格式：元素名[属性名$=“部分属性值”]
表示以XXX结束的属性值

常见css属性

color：设置元素内容的颜色
text-align：设置元素内容的水平对齐方式
font-size：设置元素内容的字体大小
font-weight：设置元素内容的粗细
background-color：设置元素内容的背景颜色

声明冲突和层叠机制

声明冲突：多个选择器选中了同一个标签，若属性名相同，但是属性值不同，则产生“声明冲突”。
如果发生声明冲突，浏览器会触发“层叠机制”。
层叠概述：层叠是一种机制，用于解决css冲突。
层叠过程：
1、比较优先级，优先级低的声明被淘汰，优先级高的声明胜出。
一个声明的优先级，和它的来源和重要性相关。
优先级从低到高排序：浏览器默认样式表中声明→作者样式表中的普通样式→作者样式表中的重要样式
2、比较特殊性，特殊性低的声明被淘汰，特殊性高的声明胜出。
一个规则的特殊性，取决于规则适用范围的大小。
规则的适用范围越大，特殊性越低，规则的适用范围越小，特殊性越高。
特殊性从高到低：行内样式→ID选择器→类（伪类、属性）选择器→元素（伪元素）择器→通配符选择器
具体规则：在比较特殊性时，每一个冲突的声明会产生4个数（a，b，c，d），以比较特殊性，先比较a的大小，若a越大，特殊性越高，若a相同，则比较b的大小，以此类推…
a：若声明是行内样式，则a为1，否则a为0。
b：规则中ID选择器的个数。
c：规则中类选择器、伪类选择器和属性选择器的个数。
d：规则中元素选择器和伪元素选择器的个数。
通配符选择器的特殊性为0。
3、比较源次序，源次序靠前的声明淘汰，源次序靠后的声明胜出。

继承和强制继承

继承（具有传递性）：
继承是指子元素会自动拥有父元素的一些css属性。
能被继承的一些属性：color、font-size、font-weight、text-align…
不能被继承的一些属性：background-color
适用场景：1、该属性是可以被继承的
2、该属性没有被声明（定义）（浏览器的样式表也算）
强制继承：
强制继承，也叫显示继承，是指css属性值被设置为inherit。
为了继承一些不能被继承的属性。
为了继承已经被声明过的属性。