CSS层叠样式表
行内式(style属性)
- 内联样式，又称行内样式、行间样式、内嵌样式。通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>- style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用
内部样式表(<style></style>标签)
- 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
- style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方
<style type="text/css">选择器 {样式代码}</style>- type="text/CSS" 在html5中可以省略， 写上是比较符合规范的
外部样式表
- 链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
<link rel = "stylesheet href="style.css">- link是个单标签，必须放在head头部标签中，并且必须指定link标签的三个属性
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
- type：定义所链接文档的类型，这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表
- rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|
| 行内样式表 | 书写方便，权重高 | 没有实现结构和样式的分离 | 基本为0，不建议使用 | 控制一个标签 |
| 内部样式表 | 部分结构和样式分离 | 结构和样式没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 结构和样式完全分离 | 需要进行引入 | 最多，比较推荐 | 控制整个站点 |
CSS样式规则
- 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”连接
- 多个“键值对”之间用英文“;”进行区分
CSS选择器
基础选择器
标签选择器(元素选择器)
- 用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，比如body,div,p等
- 标签选择器最大的优点是能快速为页面中同类型的标签统一样式，但是缺点也是这个，不能涉及差异化的样式
- 标签选择器可以把某一类标签全部选择出来
类选择器
- 类选择器使用"."(英文点号)进行标识，后面紧跟类名，标签用class="类名"标记
- 类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
多类名选择器
- 可以给标签指定多个类名，从而达到更多的选择目的
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关
- 标签中各个类名中间用空格隔开
id选择器
- id选择器使用#进行标识，后面紧跟id名
- id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素
- W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class
- 类选择器（class） 好比人的名字， 是可以多次重复使用的，id选择器好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次
- id选择器和类选择器最大的不同在于使用次数上
通配符选择器
- 通配符选择器用
*号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素
- 通配符选择器一般用于DEMO页面的统一清除默认margin 和 padding 其他地方应用很少
复合选择器
- 由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签
交集选择器
- 由两个选择器构成，其中第一个为标签选择器，第二个为class选择器（或者两个都为class选择器），两个选择器之间不能有空格
并集选择器
- 并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式
后代选择器
- 后代选择器又称为包含选择器，用来选择元素或元素组的后代，写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
- 子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签
子代选择器
- 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格
- 这里的子 指的是亲儿子，不包含孙子、重孙子之类
属性选择器
- 选取标签带有某些特殊属性的选择器 成为属性选择器 规定值都需要加引号
div[class^='font'] :class^=font 表示class的值在开始位置有'footer'就行了div[class$='footer']:class$=footer 表示class的值在结束位置有'footer'就行了div[class*='tao']:class*=tao 表示class的值中任意位置有]tao'即可
非常用复合选择器
ele1 + ele2
- 选择器用于选择（不是内部，是同级）指定的element1之后紧跟的第一个element2元素
ele1~ele2
- 选择器匹配出现在 element1 后面的所有同级的element2
- element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1后面
伪类选择器
- 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如选择第1个，第n个元素
链接伪类选择器
- :link：未访问的链接
- :visited 已访问的链接
- :hover 鼠标指针位于其上的链接
- :active 选定的链接
- 注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序，如果颠倒的话部分样式可能不会生效
结构位置伪类选择器
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式
- :nth-of-type(n): 匹配同类型中的第n个同级兄弟元素 n可以是一个数字，一个关键字，或者一个公式
- :first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数
- :last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数
- :only-of-type 匹配同类型中的唯一一个指定类型元素 没有() 参数
- :not(s) 匹配每个元素是不是指定的元素/选择器 s为选择器 selector的缩写
伪元素选择器(CSS3新增)
- E::first-letter：文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line：文本第一行
- E::selection：可改变选中文本的样式(鼠标选中)
- E::before和E::after
- 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用，content是必不可少的，用于激活伪元素
- 伪元素不是真正的标签，要修改样式只能使用主体
伪元素与伪类的区别
- 伪元素本身不存在在DOM文档中，它需要人为的去创建它，且就算创建了伪元素，它也只是逻辑上存在，实际上也并不存在DOM文档中，也就是说无法使用JS去获取改变它，伪元素在CSS2中也可以使用:来表示，CSS3规定用::来区分伪元素和伪类，伪元素通常用于清除浮动和制作小图标
- 伪类它存在于DOM文档中，但如果没有特别的去声明它，就看不到它
- 伪元素设置样式不会被覆盖，因为不是实际存在的DOM元素
- 为了兼容IE9,所以可以使用单冒号
CSS选择器命名规范
- 命名需要具备语义性的单词，不能用数字拼音符号
- 命名需要多个单词连接的情况下，标记语言中可以使用_或者-进行连接，不能直接单词拼接或者使用驼峰命名（书写风格必须统一 不允许出现_和-的混用），推荐使用-
- 命名需要进行适当的缩写，单词连接层级不要超过4层
CSS三大特性
层叠性
- 多种CSS样式的叠加
- 是浏览器来处理冲突的一种能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会就被另一个属性层叠掉（就近原则）
- 一般情况下，如果出现样式冲突，会按照CSS书写的顺序，以最后的样式为准
- 样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行哪个样式
- 样式不冲突，不会层叠
继承性
- 书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可（子承父业）
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
优先级
- 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题
- 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式
- 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100，总之，他拥有比上面提到的选择器都大的优先级
- 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大
- CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级
css权重特殊性
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS特性或称非凡性，它是一个衡量CSS值优先级的一个标准
- specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越
继承或者*的贡献值 | 0,0,0,0 |
|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
- 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况
- 继承的权重是 0
总结优先级
① 使用了 !important声明的规则>
② 内嵌在 HTML 元素的 style属性里面的声明>
③ 使用了 ID 选择器的规则>
④ 使用了类选择器、属性选择器、伪元素和伪类选择器的规则>
⑤ 使用了元素选择器的规则>
⑥ 只包含一个通用选择器的规则>
⑦ 同一类选择器则遵循就近原则
权重是优先级的算法，层叠是优先级的表现
CSS书写规范
空格规范
- 【强制】 选择器 与 { 之间必须包含空格。
.selector { }
- 【强制】 属性名与之后的 : 之间不允许包含空格， :与属性值之间必须包含空格。
color: red;
选择器规范
- 【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确
属性规范
