1、CSS的三种引入方式：
(1)、内部样式表（嵌入式）: CSS写在<style>标签中
提示：<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
(2)、行内样式表（行内式）: CSS写在<style>属性中
提示：行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式
(3)、外部样式表（链接式）： CSS写在一个单独的 .css文件中
提示：在HTML页面中，使用<link>标签引入这个文件
2、常用选择器有：
①、标签选择器；②、类选择器；③、ID选择器；④、全局选择器；
⑤、组合选择器；⑥、继承选择器；⑦、伪类选择器；
(1)、标签选择器
第一种是标签选择器，也成为元素选择器。标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。
(2)、类选择器
第二种是类选择器 ，类选择器用来为一系列标签定义相同的呈现方式，常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。
(3)、ID选择器
第三种是ID选择器，ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下：
#idValue{property:value}。其中idValue是ID选择器的名称，可以由CSS编写者自己编写。
(4)、全局选择器 (通配符选择器)
第四种是全局选择器，全局选择器就是对所有的htmlz元素起作用。语法格式为： *{propery:value}。其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。
(5)、组合选择器
第五种是组合选择器，就是将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。
(6)、继承选择器
第六种是继承选择器，继承的规则是子标签在没有定义的情况下，继承父标签的选择器；当子标签重复定义了父标签的声明时，执行子标签选择器。
(7)、伪类选择器
第七种是伪类选择器，伪类选择器主要应用在<a>标签上，它由四种状态：未访问链接（link）、已访问链接（visited）、激活链接（active）、鼠标停留在连接上(hover)。
3、CSS选择器优先级排序为：
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
4、标签水平居中和清除标签元素的内外边距方法：
如果需要让div、P、h (大盒子) 水平居中，可以通过margin：0 auto；实现
清除标签元素的内外边距 * {padding:0; margin:0;}
5、选择器进阶
(2)、复合选择器：后代选择器(选择器之间使用空格进行分隔，表示后代选择器) 子代选
择器(选择器之间使用大于号>连接，表示直接子元素选择器) 相邻兄弟选择器(多个
选择器之间使用加号+连接，表示下一个相邻的兄弟元素选择器)
(2)、并集选择器：可以选择多组标签，选择器通过英文逗号 , 连接而成
(3)、交集选择器：同时满足多个选择器筛选条件的才能被选中 (只能交两个，第一个是选
择器,第二个是class/id两者之间无空格，无逗号，两者之间通过英文点 . 连接而成)
(4)、hover伪类选择器：表示鼠标移入时候悬停在元素上发生的状态改变(选择器:hover{})
(5)、Emmet语法：通过简写语法，快速生成代码
字体样式属性：(font)
| 样式 | 属性值 | 属性值-作用描述 |
| 字体颜色 | color | 规定字体的颜色，也称为前景色 |
| 字体大小 | font-size | 设置字体大小font-size:large;(特大) small;(极小) 一般中文用不到，只要用数值就可以，单位：px、em |
| 字体粗细 | font-weight | normal(正常) bold(粗体) bolder(特粗) lighter(细体)外,还有9种以像素为度量为单位的设置方式分别是100-900 |
| 字体样式 | font-style | 设置字体样式font-style:oblique;(偏斜体) italic;(斜体) normal;(正常) |
| 字体修饰 | text-decoration | underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) none(无) |
| 字体类型 | font-family | {font-family: "Microsoft YaHei"} 微软雅黑 |
| 字体行高 | line-heigh | line-height 属性设置行间的距离（行高） |
| 字体阴影 | text-shadow | text-shadow: h-shadow水平阴影的位置 v-shadow垂直阴影的位置 blur 模糊的距离color阴影的颜色; |
| 字 间 距 | letter-spacing | letter-spacing 属性增加或减少字符间的空白(字符间距) |
| 单词间距 | word-spacing | word-spacing 属性增加或减少单词间的空白（即字间隔） |
| 字体变形 | font-variant | font-variant 属性主要用于定义小型大写字母文本,可以根据正常字体计算出小型大写字母字体 |
| 大小写 | text-transform | text-transform 属性控制文本的大小写,而不论源文档中文本的大小写 |
| 字体 | font-stretch | font-stretch 属性可对当前的 font-family 进行伸缩变形 |
文本样式属性：(Text )
| 样式 | 属性值 | 属性值-作用描述 |
| 行间距 | line-height | line-height 属性设置行间的距离（行高） |
| 文本缩进 | text-indent | 规定文本块中首行文本的缩进 |
| 水平对齐 | text-align属性 | 规定元素中的文本的水平对齐方式 |
| 左对齐 | text-align：left; | 左对齐 |
| 右对齐 | text-align：right; | 右对齐 |
| 居中对齐 | text-align：center; | 居中对齐 |
| 两端对齐 | text-align：justify; | 两端对齐 |
| 垂直对齐 | vertical-align属性 | 属性设置元素的垂直对齐方式 |
| 向上对齐 | vertical-align:top; | 垂直向上对齐 |
| 向下对齐 | vertical-align:bottom; | 垂直向下对齐 |
| 居中对齐 | vertical-align:middle; | 垂直居中对齐 |
| 向上对齐 | vertical-align:text-top; | 文字垂直向上对齐 |
| 向下对齐 | vertical-align:text-bottom; | 文字垂直向下对齐 |
| 书写方式 | writing-mode | 属性定义了文本在水平或垂直方向上如何排布 |
| 从左向右 | writing-mode：lr-tb; | 从左向右，从上往下 |
| 从右向左 | writing-mode：tb-rl; | 从上往下，从右向左 |
背景样式属性：(background)
| 样式 | 属性值 | 属性值-作用描述 |
| 设置颜色 | background-color | 背景颜色 |
| 透视背景 | Background：transparent; | 透视背景 |
| 背景图片 | background-image : url(); | url(/image/bg.gif); 背景图片 |
| 重复平铺 | background-repeat : repeat; | (默认值重复排列)水平和垂直方向都平铺 |
| 不平铺 | background-repeat : no-repeat; | 不重复排列-不平铺(只显示一张图片) |
| x轴平铺 | background-repeat : repeat-x; | 在x轴重复排列-沿水平方向x轴平铺 |
| y轴平铺 | background-repeat : repeat-y; | 在y轴重复排列-沿垂直方向y轴平铺 |
| 水印固定 | background-attachment : fixed; | 浮水印固定背景 |
| 设置背景图的大小 | background-size：宽 高； | 数字+px，百分百，contain将背景图片等比缩放、不会超出盒子的最大，cover将背景图片等比缩放填满整个容器 |
| 渐变背景 | background-image: linear-gradient(方向/角度 , 颜色1，颜色2，颜色3....); | 通过属性linear-gradient来这样定义一个线性渐变，一般用于设置盒子背景颜色渐变。 |
| 渐变方向 | linear-gradient(to right,颜色1，颜色2); | 方向：在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字。 |
| 背景位置 | background-position | 指定背景位置背景图片x与y轴的位置 |
| 向上对齐 | background-position : top; | 向上对齐 |
| 向下对齐 | background-position : buttom; | 向下对齐 |
| 向左对齐 | background-position : left; | 向左对齐 |
| 向右对齐 | background-position : right; | 向右对齐 |
| 居中对齐 | background-position : center; | 居中对齐 |
背景样式相关的属性连写形式
属性值：单个属性值的合写，取值之间以空格隔开
书写顺序：background：color image position
盒子模型(box)--边框样式属性(border)
| 样式 | 属性值 | 属性值-作用描述 |
| 宽度 | width | 设置元素的宽度 |
| 高度 | height | 设置元素的高度 |
| 内边距 | padding | 设置元素四个方向的内边距 |
| 上内边距 | padding-top | 设置元素上内边距 |
| 下内边距 | padding-bottom | 设置元素下内边距 |
| 左内边距 | padding-left | 设置元素左内边距 |
| 右内边距 | padding-right | 设置元素右内边距 |
| 外边距 | margin | 设置元素四个方向的外边距 |
| 上外边距 | margin-top | 设置元素上外边距 |
| 下外边距 | margin-bottom | 设置元素下外边距 |
| 左外边距 | margin-left | 设置元素左外边距 |
| 右外边距 | margin-right | 设置元素右外边距 |
| 盒子阴影 | box-shadow | box-shadow属性添加一个或多个阴影 |
| 水平阴影 | box-shadow: h-shadow; | 必需，水平阴影的位置，允许负值 |
| 垂直阴影 | box-shadow: v-shadow; | 必需，垂直阴影的位置，允许负值 |
| 模糊距离 | box-shadow: blur; | 可选，模糊距离 |
| 阴影尺寸 | box-shadow: spread; | 可选，阴影的尺寸 |
| 阴影颜色 | box-shadow: color; | 可选，阴影的颜色 |
| 内部阴影 | box-shadow: inset; | 可选，将外部阴影(outset)改为内部阴影 |
| 边框 | border | 属性值-作用描述 |
| 边框样式 | border-style | 无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double ）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种 |
| 边框颜色 | border-color | color:red;规定颜色值为颜色名称的颜色(比如 red) color:#00ff00;规定颜色值为十六进制值的颜色(比如 #ff0000) color:rgb(0,0,255);规定颜色值为 rgb 代码的颜色 比如 rgb(255,0,0) |
| 边框宽度 | border-width | 设置元素的四个方向边框的宽度 |
| 上边框线 | border-top | 上边框线 |
| 下边框线 | border-bottom | 下边框线 |
| 左边框线 | border-left | 左边框线 |
| 右边框线 | border-right | 右边框线 |
| 圆角边框 | border-radius | 属性允许你为元素添加圆角边框 |
| 左上角 | border-top-left-radius | 左上角 |
| 右上角 | border-top-right-radius | 右上角 |
| 右下角 | border-bottom-right-radius | 右下角 |
| 左下角 | border-bottom-left-radius | 左下角 |
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
| 属性值 | 效果 | 使用频率 |
| display: block; | 转换为块级元素 | 较多 |
| display: inline-block; | 转换为行内块元素 | 较多 |
| display: inline; | 转换为行内元素 | 极少 |
结构伪类选择器
| 属性值 | 属性值-作用描述 |
| :first-child | 选择父元素里边的第一个子元素 |
| :last-child | 选择父元素里边的最后一个子元素 |
| :nth-child(n) | 选择父元素里边第n个子元素 |
| :nth-last-child(n) | 选择父元素里边倒数第n个子元素 |
| :nth-of-type(n) | 选择父元素内指定类型的第n个元素 |
| ：nth-last-of-type(n) | 选择父元素内指定类型的倒数第n个元素 |
| :first-of-type | 选择父元素内指定类型的第一个,与nth-of-type(1)等同 |
| :last-of-type | 选择父元素内指定类型的最后一个,与nth-last-of-type(1)等同 |
| ：only-child | 选择父元素只包含一个子元素 |
| ：only-of-type | 选择父元素只包含一个同类型子元素 |
| ：empty | 选择匹配空元素 |
伪元素
| 属性值 | 属性值-作用描述 |
| ::before | 作为匹配选中元素的第一个子元素，必须设置content属性 |
| ::after | 作为匹配选中元素的最后一个子元素，必须设置content属性 |
| ::selection | 选择块元素中的第一个字母设置样式（不常用，了解即可） |
| ::first-letter | 选择块元素中的第一个字母设置样式（不常用，了解即可） |
| ::first-line | 选择块元素中的第一行全部文字设置样式（不常用，了解即可） |
链接伪类选择器：a:link，a:visited，a:active，a:hover
| 属性值 | 属性值-作用描述 |
| a:link | 选择所有未被访问的超级链接 |
| a:visited | 选择所有访问过的超级链接 |
| a:active | 选择被用户激活的元素 |
| a:hover | 选择鼠标悬停的元素 |
浮动
| 样式 | 属性值 | 属性值-作用描述 |
| 设置浮动 | float | none 元素不浮动,按默认位置显示 left 元素向左浮动 right 元素向右浮 inherit 继承父元素浮动属性 |
| 清除浮动 | clear | none 元素不浮动,按默认位置显示 left 清除元素向左浮动 right 清除元素向右浮动 inherit 继承父元clear属性 |
| 标签法 | clear：both; | 清除浮动的方法：额外标签法clear：both； |
| 父元素 | overflow:hidden; | 清除浮动的方法：父级设置overflow属性（父元素添加overflow:hidden）（不推荐） |
| 双伪元素 | ::after, ::before | 清除浮动的方法：使用before和after双伪元素清除浮动 |
| 伪元素 | ::after | 清除浮动的方法:使用after伪元素清除浮动（推荐使用） |
定位（子绝父相）
| 样式 | 属性值 | 属性值-作用描述 |
| 设置定位 | position | 用于确定定位的类型，绝对（absolute）、相对（relative）和固定(fixed)、静态 (static) 等几种选择 |
| 绝对定位 | Position:absolute; | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 |
| 相对定位 | Position:relative; | 生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative |
| 固定定位 | Position：fixed; | 与absolute一样，可以设置宽高，但是父级会检测不到定位元素的宽高，所以无法由子元素撑开。 |
| 静态定位 | Position：static; | positon定位的默认值，没有定位 |
| 堆叠顺序 | z-index | 设置元素的堆叠顺序或者叫做元素层级z-index的值越大 |
定位设置偏移值
偏移值设置分为2个方向，水平和垂直方向各选一个使用即可
| 方向 | 属性值 | 偏移值 | 作用描述 |
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
鼠标光标类型（设置鼠标在元素上时显示的样式）
| 样式 | 属性值 | 属性值-作用描述 |
| 默认 | cursor: default; | 默认光标(通常是一个箭头) 鼠标在元素上时显示的样式 |
| 默认 | cursor: auto; | 默认，浏览器设置的光标。 |
| 手型 | cursor: pointer; | 鼠标在元素上时显示手型的样式，提示用户可以点击 |
| 工字型 | cursor: text; | 鼠标在元素上时显示工字型样式提示用户可以选择文字 |
| 十字光标 | cursor: move; | 鼠标在元素上时显示十字光标样式，提示用户可以移动 |
| 自定义 | cursor: url; | 需使用的自定义光标的 URL |
| 十字线 | cursor: crosshair; | 光标呈现为十字线 |
| 箭头朝右 | cursor: e-resize; | 此光标指示矩形框的边缘可被向右（东）移动 |
| 箭头朝右上 | cursor: ne-resize; | 此光标指示矩形框的边缘可被向上及向右移动（北/东) |
| 箭头朝左上 | cursor: nw-resize; | 此光标指示矩形框的边缘可被向上及向左移动（北/西） |
| 箭头朝上 | cursor: n-resize; | 此光标指示矩形框的边缘可被向上（北）移动 |
| 箭头斜右下 | cursor: se-resize; | 此光标指示矩形框的边缘可被向下及向右移动（南/东） |
| 箭头斜左下 | cursor: sw-resize; | 此光标指示矩形框的边缘可被向下及向左移动（南/西） |
| 箭头朝下 | cursor: s-resize; | 此光标指示矩形框的边缘可被向下移动（南） |
| 箭头朝左 | cursor: w-resize; | 此光标指示矩形框的边缘可被向左移动（西） |
| 沙漏 | cursor: wait; | 此光标指示程序正忙（通常是一只表或沙漏） |
| 问号气球 | cursor: help; | 此光标指示可用的帮助(通常是一个问号或一个气球） |
溢出部分显示隐藏效果（指的是盒子内容部分超出盒子范围的区域）
| 样式 | 属性值 | 属性值-作用描述 |
| 默认可见 | overflow: visible; | 默认，溢出部分可见 |
| 溢出隐藏 | overflow: hidden; | 溢出部分隐藏 |
| 滚动条 | overflow: scroll; | 无论是否溢出，都显示滚动条 |
| 自动显示 | overflow: auto; | 根据是否溢出，自动显示和隐藏滚动条 |
（display）属性显示隐藏
| 隐藏对象 | display: none; | 隐藏对象 |
| 显示元素 | display: block; | 除了转换为块级元素之外，同时还有显示元素意思 |
（opacity）透明属性效果
| 样式 | 属性值 | 属性值-作用描述 |
| 透明属性 | opacity: 0.5; | 指定不透明度，从0.0（完全透明）到1.0（完全不透明） |
（transition）过渡样式属性
| 样式 | 属性值 | 属性值-作用描述 |
| 过渡属性 | transition: all 2s linear 1s; | all所有能过渡属性都过渡，具体属性名如：width：只有width有过渡。数字+s秒 |
| 属性名称 | transition-property: width; | 规定应用过渡的 CSS 属性的名称 |
| 花费时间 | transition-duration: 1s; | 定义过渡效果花费的时间，默认是 0 |
| 时间曲线 | transition-timing-function:linear; | 过渡效果的时间曲线，默认是 "ease" |
| 何时开始 | transition-delay: 2s; | 规定过渡效果何时开始，默认是 0 |
注意点：
1、过渡需要：默认状态 和hover状态样式不同，才能有过渡效果
2、transition属性给需要过渡的元素本身加
3、transition属性设置在不同状态中，效果不同
①、给默认状态设置，鼠标移入移出都有过渡效果
②、给hover设置状态，鼠标移入有过渡效果，移出没有过渡效果
（transform）平面2D 转换样式属性
| 样式 | 属性值 | 属性值-作用描述 |
| 移动 | transform：translate； | 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 |
| 旋转 | transform：rotate(角度)； | 指定对象的2D rotation（2D旋转)，角度单位是(deg)，需先有transform-origin属性的定义 |
| 旋转中心 | transform-origin： | 默认圆点是盒子中心点（原点水平位置,原点垂直位置）允许您改变被转换元素的位置(即是参考点) |
| 旋转取值 | left,right,top,bottom, center | 旋转transform-origin属性取值（单位可以写像素，也可以写百分比） |
| 缩放 | transform：scale; | 指定对象的2D scale（2D缩放)，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 |
平面转换：
1、改变盒子在平面内的形态（位移、旋转、缩放）
2、2D转换：①、 移动 translate ②、 旋转 rotate ③、缩放 scale
备注：旋转角度单位是(deg) 旋转需要加过渡效果
（transform）3D空间转换转换样式属性
| 样式 | 属性值 | 属性值-作用描述 |
| 移动 | transform: translate3d(x,y,z)； | 在translate2D的基础上增加z轴方向上的维度translateX(n),translateY(n) ，translateZ(n) |
| 透视 | Perspective：数字+px; | 想看到3d效果，必须加透视。透视写在被观察元素的父元素上，且单位是像素。 |
| 旋转 | transform: rotate3d(x,y,z,deg); | 空间旋转效果rotateY(角度), rotateZ(角度)，rotateX(角度) |
| 3D呈现 | transform-style: preserve-3d; | 控制子元素是否开启三维立体空间，flat：(默认)不开启；preserve-3d：开启。代码写给父级，但是影响的是子盒子,(要让页面显示3d效果一定要给父元素加上这个样式) |
| 缩放 | transform：scale3d(x,y,z); | 空间缩放效果scaleY(倍数), scaleZ(倍数) ,scaleX(倍数) |
3D转换：
①、移动 translate3d ②、透视 perspective ③、旋转 rotate3d ④、3D呈现 transfrom-style
备注：透视 perspective写在父元素上 （近大远小）
3D呈现transform-style: preserve-3d; 写给父级
（animation）动画样式属性
| 样式 | 属性值 | 属性值-作用描述 |
| 定义动画 | @keyframes | 规定动画 |
| 简写属性 | animation | 所有动画属性的简写属性，除了 animation-play-state 属性 |
| 动画名称 | animation-name | 规定@keyframes 动画的名称(必须) |
| 时间周期 | animation-duration | 规定动画完成一个周期所花费的秒或毫秒 |
| 速度曲线 | animation-timing-function | 规定动画的速度曲线，默认是“ease”。匀速：linear |
| 动画开始 | animation-delay | 规定动画何时开始，默认是0 |
| 播放次数 | animation-iteration-count | 规定动画被播放的次数，默认是1。无限循环：infinite |
| 逆向播放 | animation-direction | 规定动画是否在下一周期逆向播放，默认为“normal”。逆向播放：alternate |
| 运行暂停 | animation-play-state | 规定动画是否正在运行或暂停。默认是“running”暂停：“paused” |
| 结束状态 | animation-fill-mode | 规定动画结束后状态，保持：forwards；回到起始：backwards |
定义动画语法：使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变
(一个名为 move 的关键帧（move动画名称），从距离坐标10px到100px)
@keyframes move { from { left: 10px; } to { left: 100px; } }
百分比动画，0%是动画的开始，100%是动画的完成
@keyframes move { 0% { left: 10px; } 0% { left: 100px; } }
媒体查询的基本用法
开发常用写法：
媒体特性常用写法：
@media (min-width: 700px) { 选择器 { 样式 } }
@media mediatype and | not | only (media feature) {
/* CSS样式 */
}
①用 @media 开头 注意@符号
②mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）
广泛使用的是all和screen
③关键字 and not only
（1）and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
（2）not：表示排除某个媒体类型，相当于“非”的意思，可以省略
（3）only：表示指定某个特定的媒体类型，可以省略
④media feature 媒体特性 必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的：
（1）width：表示输出设备中页面可见区域的宽度
（2）min-width：表示输出设备中页面最小可见区域的宽度（从小到大)
（3）max-width：表示输出设备中页面最大可见区域的宽度（从大到小)
（4）max-height：表示输出设备中页面最大可见区域高度等
width：auto 表示宽度是可变的，浏览器会自动计算其宽度；
rem自适应
rem基准值就是rem与px之间的换算关系，
它相对于根元素（<html>）下的font-size的值，1rem = html下font-size的值。html{ font-size: 16px; }
vh
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致，(高度会和屏幕高度一样)
vw
vw就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况
