Web-CSS入门
WEB前端，三部分：HTML部分、CSS部分、Javascript部分。
1.HTML部分：主要负责网页的结构层
2.CSS部分：主要负责网页的样式层
3.JS部分：主要负责网页的行为层
**基本概念**
层叠样式表，Cascading Style Sheet （CSS） 也叫级联样式表，主要用来控制网页样式和布局。实现网页内容与样式分离，提高网页开发效率和可维护性，便于统一管理网页风格。
**引入方式**
- 行内样式：主要就是通过标签的style属性来进行设置。每个标签都要写，且可能出现大量重复的问题。优先级高。
- 内部样式：将CSS代码写在网页内，在head标签的style标签内。规避了一些重复的行内样式，作用进在于当前页面。
- 外部样式：将CSS代码以一个独立的文件存在`xxx.css`，在HTML中用`link`标签来进行引入。
目录
一.CSS选择器：
1.基础选择器
2.复合选择器
3.属性选择器
4.伪类选择器
1. 链接伪类选择器
2.结构伪类选择器
3.目标伪类选择器
4.表单相关伪类选择器
5.否定伪类选择器
6.焦点相关伪类选择器
5.伪元素选择器
6.优先级的计算规则
二.CSS的常见样式
1.形状相关
2.阴影效果
3.文本效果
4.超出处理方案
5.隐藏和显示
6.背景样式
7.定位问题
8.CSS3新特性
9.媒体查询
10.@font-face 字体
11.过渡效果
12.变幻效果
一.CSS选择器：
1.基础选择器
- 标签选择器：通过HTML的标签名进行选择；
标签名称{样式代码}
- 类选择器：通过标签的class属性进行选择；(可以重名的ID)
typeA {
background-color: aqua;
}
- ID选择器：通过标签的id属性进行选择；
<p id = "p1">一个带有ID的段落</p>
- 通配符选择器（不用）清除所有的标签的边距
<style>*{color:red;} <style>
优先级：ID选择器>类选择器>标签选择器（有相同属性时 如果没有相同属性 则共同作用）
2.复合选择器
- 后代选择器：选择某个元素内部的所有层级的子元素 `祖先选择器 后代选择器`
- 子选择器：选择某个元素内部的下一级特定子元素 `父选择器 > 子选择器`
- 相邻兄弟选择器：选择紧接着某一个元素的且同时具有相同父元素的兄弟元素 `前一个 + 后一个`
- 后续兄弟选择器：选择某一个元素之后且同时具有相同父元素的所有兄弟元素 `前一个元素 ~ 后一个元素`
- 交集选择器：选择同时满足多个选择器的元素，多个选择器之间没有分隔连着写即可
- 并集选择器：选择满足任意一个选择器条件的元素，多个选择器之间用逗号分隔即可 `选择器,选择器,选择器`
## 优先级的计算规则
CSS选择器优先级的计算遵循 **特殊性** 规则：
- 选择器的特殊性由四个值表示（从左到右重要性依次递减） `[0,0,0,0]`
- 内联样式：一个内联样式提供一个 `[1,0,0,0]`
- ID选择器：一个ID选择器提供一个 `[0,1,0,0]`
- 类选择器、属性选择器、伪类选择器：每一个提供 `[0,0,1,0]`
- 标签选择器：一个标签选择器提供一个 `[0,0,0,1]`
- 通配符选择器：`[0,0,0,0]`
- 继承属性：比上述所有更低，最低的
举例子来看：
- `body div p`：`[0,0,0,3]`
- `ol p`：`[0,0,0,2]`
- `.type p`：`[0,0,1,1]`
- `#main ~ p`：`[0,1,0,1]`
- `div.text ~ p `：`[0,0,1,2]`
- 按照特殊性从左到右比较 `[0,1,0,0]` > `[0,0,0,1000]`
- 如果优先级一样的话，后定义的覆盖先定义的（相同属性，不相同则共同作用）
3.属性选择器
允许根据元素的属性或属性值来进行选择
- 存在属性选择器：选择具有指定属性的元素，无论元素的值是什么 `[属性名]`
- 精确属性值选择器：选择具有指定属性名和指定属性值的元素 `[属性名="属性值"]`
- 包含单词属性选择器：选择具有指定属性名，但该属性的值是一个以空格分隔的单词列表（多属性值），其中包含指定单词的元素。`[属性名~="属性值"]`
- 以指定字符串开头的属性值选择器：选择具有指定属性名，并且该属性值以指定字符串开头的元素 `[属性名^="属性值"]`
- 以指定字符串结尾的属性值选择器：选择具有指定属性名，并且该属性值以指定字符串结尾的元素 `[属性名$="属性值"]`
- 包含指定字符串属性选择器：选择具有指定属性名，并且该属性值包含指定字符串的元素 `[属性名*="属性值"]`
4.伪类选择器
1. 链接伪类选择器
主要用于处理链接元素在不同交互状态下的样式。
- `:link`：用于选择未被访问的状态
- `:visited`：用于选择被访问的状态
- `:hover`：用于选择鼠标悬停时的状态
- `:active`：用于选择正在被激活（鼠标点击）的元素的状态
2.结构伪类选择器
根据元素在文档树（document）中的位置来选择的。
- `:first-child`：选择作为其父元素中第一个子元素的元素
- `:last-child`：选择作为其父元素中最后一个子元素的元素
- `:nth-child(n)`：选择作为其父元素中第n个子元素，n可以是数字，可以是关键字（even偶数 odd奇数）、也可以是公式（`2n+1`）
- `:nth-last-child(n)`：将上面这个`:nth-child(n)`倒过来。
- `:first-of-type`：选择作为其父元素中第一个指定类型的子元素
- `:last-of-type`：选择作为其父元素中最后一个指定类型的子元素
- `:nth-of-type(n)`：选择作为其父元素中第n个指定类型的子元素
- `:nth-last-of-type(n)`：将上面这个`:nth-of-type(n)`倒过来。
- `:only-child`：选择作为其父元素中唯一一个的子元素
- `:only-of-type`：选择作为其父元素中唯一一个指定类型的子元素
3.目标伪类选择器
选择当前活动的目标元素，通常用于URL的锚点链接
4.表单相关伪类选择器
用于选择表单元素的不同状态
- `:enable`：选择可用的表单元素
- `:disable`：选择不可用的表单元素
- `:checked`：选择被选中的表单元素
- `:required`：选择具有`required`属性的元素
- `:optinal`：选择没有`required`属性的元素
- `:valid`：选择符合表单验证的元素
- `:invalid`：选择不符合表单验证的元素
- `:in-range`：选择数据在表单范围内的元素
- `:out-of-range`：选择数据不在表单范围内的元素
5.否定伪类选择器
选择不匹配的选择器的元素
6.焦点相关伪类选择器
- `:focus`：选择当前获得焦点的元素
- `:focus-within`：选择包含获得焦点的子元素的父元素
- `:focur-visible`：选择当前获得焦点且焦点可见的元素
5.伪元素选择器
用于选取元素中的特定部分，这些部分在文档树中并不真实存在，只是通过CSS来进行的虚拟创建和样式化的内容。
- `::before` 和 `::after`：在选定元素的内容之前或之后添加额外的内容，content属性指定添加的内容。
- `::first-letter`：选定元素的内容的第一个字符
- `::first-line`：选定元素的内容的第一行文字
- `::selection`：选定元素的内容被选中时
- `::placeholder`：设置表单输入框提示文字的样式
二.CSS的常见样式
## css常见样式参考表
1.形状相关
宽、高、边线、字体相关的样式
2.阴影效果
阴影效果主要有文本阴影和盒子阴影
3.文本效果
4.超出处理方案
5.隐藏和显示
针对本身，可以实现标签的隐藏和显示。
在CSS中，`display`属性控制标签的隐藏和显示。
`display`不仅仅能够隐藏或者显示标签，而且可以修改标签默认属性，如将块标签修改为行内标签，或者将行内标签修改为块标签。
6.背景样式
7.定位问题
定位：css的定位效果是，重新调整标签的位置关系
position：static 默认效果
绝对定位：将标签确定在某一个位置
父相子绝（如果某一个子元素需要做绝对定位，参照的父元素必须做相对定位）
8.CSS3新特性
CSS3诞生于2010年前后，W3C在12年左右发布了C3标准。
+ 媒体查询
+ 字体设置
+ 动画、过渡、变换等动画效果
+ avg等icon的使用
+ ……
9.媒体查询
媒体查询在CSS2时，就已经存在了。
媒体查询:指的是CSS对于当前展示页面的设备的查询能力，**适配对应的屏幕分辨率。**
CSS2：
@media 查询，在css2就出现了，最开始用来指定对应的设备，如tv表示电视（tv）、screen表示电脑、print表示打印机，后来随着移动端的发展，设备的更新，为了响应现在日异月新的显示屏设备展示数据，css3提供了媒体查询，主要针对不同分辨率的屏幕。在2010年前，移动互联网的发展，促使大量各种分辨率的屏幕出现。CSS2提供的媒体就不满足时代的发展了，因此C3正式推出了符合当前时代发展的媒体查询，是以分辨率为媒体的查询标准了。
10.@font-face 字体
可以使用@font-face，通过自定义的字体文件，实现任意字体在页面文字中的使用。
11.过渡效果
过渡，是CSS3提供的，用来让CSS样式，实现补间动画的一种手段，在规定的时间内，从开始到结束这个区间内，实现动画的自动补齐。