初始CSS

CSS概念
css全称cascading style sheets,层叠式样式表，是一种用来表现HTML的文件样式的计算机语言。
作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化。
css组成 层叠式 css中贯穿始终的加载特性 层叠性 继承性
样式 定义如何显示HTML元素 文本文字 背景 盒模型 浮动 定位 其他

CSS书写位置
css根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入时
内联式：
嵌入式：
外联式：书写位置 在一个单独的扩展名为.css的文件中
引用方式 在HTML中的 标签内部使用标签进行引入
| 属性名 | 属性值 | 说明 |
| rel |“stylesheet” | 表示引入的外部文件与HTML之间的关系，样式表 |
| href |css文件路径| 超文本引用 |
| type | “texr/css” | 表示加载时代码按照纯文本形式的css代码加载。HTML5中可以省略不写|

导入式：
css注释语法
语法格式 : /* 中间部分为注释内容 */ vscode快捷键：ctrl+/

CSS常用属性文字三属性（颜色color、字体font-family、字号font-size）
颜色 color
rgb模式 是根据红绿蓝三原色进行混合而成的颜色模式，每一块原色取值范围时0-255，一共256个数值。
rgb(红，绿，蓝) 红色 rgb(255,0,0) 绿色 rgb(0,255,0) 蓝色 rgb(0,0,255)
黑色 rgb(0,0,0) 白色 rgb(255,255,255) 灰色 rgb(128,128,128)
十六进制模式：是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进制的0-255的数字。
十六进制：逢十六进一，每位数字只能出现0-9 a-f之间的字符 例如 #008877

字体font-family
常用的中文字体：宋体 SimSun 微软雅黑Microsoft Yahei
常用的英文字体： Airal consolas
注意事项：1.font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体
2.浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此。必须在最后设置一个所有机器都具备的通用字体作为后路。
3.中文字体中一般有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。

字号font-size
| 相对长度单位 | 说明 |
| px | 像素值，最常使用的单位 |
| em | 倍数，继承自祖先元素设置的字号的倍数 |
| % | 百分比，继承自祖先元素设置的字号的百分比 |

| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注意事项1.如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比挺chrome、IE默认显示字号为16px
2.不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome浏览器最小加载显示字号为8px。IE浏览器最小为以支持1px的字号。

CSS常用样式 实体化属性
| 属性名 | 属性值 | 说明 |
| width | px单位的数值 | 定义元素占有的宽度 |
| height | px单位的数值 | 定义元素占有的高度 |
| bagkground-color | 颜色名、颜色值 | 定义元素的背景颜色 |

CSS选择器
基础选择器 ： 标签选择器、id选择器、类选择器、通配符选择器
高级选择器 ：后代选择器、交集选择器 、并集选择器

1. 标签选择器
   通过标签名去选择标签元素
   
   2.id选择器
   书写方式：#id‘
   选择范围：只能选中一个标签。
   id命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线、严格区分大小写。每个id属性值必须是唯一的，不能与其他的id同名。
   注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签 取不同的 id 名，分别选中设置。

3.类选择器
通过标签的 class 属性去选择标签。
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签。
class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格 区分大小写。class 属性值可以与其他的class相同。

4.通配符选择器
通过一个特殊符号选择页面内所有的标签。
书写方式：*
选择范围：包含 标签在内的所有标签。

5.后代选择器（包含选择器）
通过标签之间存的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择 器。
书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中 的标签必须是后面选择器选中标签的祖先级。
选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后 一个选择器确定选中的标签。
注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是 父子关系

6.交集选择器
通过一个标签之上满足所有的基础选择器的需求去选择标签。
书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开 头。
选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能 被选中。
比较常见的是标签与类的交集。

7.并集选择器
不同的选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
书写方式。将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
选择范围：是所有的单独选择器选中的标签的并集集合。

理解层叠性和继承性

继承性
如果一个标签没有设置果一些样式，他的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
注：能够被基层的样式是所有*的文字相关样式属性，*其他的属性都不能被继承。

层叠性
使用层叠性去解决冲突，多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其它的属性。判断最终胜出的属性是谁，需要依赖判断优先级。

选中目标标签
• 第一步：比较多个选择器的权重，权重高的层叠权重低的。
• 基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择 器 < id 选择器。
• 高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标 签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较， 直到比较出大小。
• 比较顺序：( id 个数, 类的个数, 标签的个数 )
• 第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠 先写的。

选中目标标签的祖先级
• 如果选择器选中的是祖先元素，文字的样式可以被继承。
• 第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的 远近，近的层叠远的。
• 第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重， 权重大的层叠小的。
• 第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层 叠前面的。4

！important关键字
如果在比较选择器权重的过程中，遇到一个！important关键字，可以将某条css样式属性的权重提升到最大。
书写位置：在每个css属性的属性值后面空格加！important
• 注意： ① 就近原则中，不需要比较选择器权重，所有 important 会失效。
② important 不能提升选择器的权重，只能提升某条属性的权重到最大。