共计 10596 个字符，预计需要花费 27 分钟才能阅读完成。
1、CSS 的三种引入方式：
(1)、内部样式表（嵌入式）: CSS 写在
提示：
(2)、行内样式表（行内式）: CSS 写在
提示：行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式
(3)、外部样式表（链接式）：CSS 写在一个单独的 .css 文件中
提示：在 HTML 页面中，使用 标签引入这个文件
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)、伪类选择器
第七种是伪类选择器，伪类选择器主要应用在 标签上，它由四种状态：未访问链接（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; | 清除浮动 的方法：额外标签法 c lear：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 之间的换算关系，
它相对于根元素（）下的 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% 大的情况
原文地址: CSS3 常用属性大全
