以下快捷键针对webstorm，idea也可以用
一、文字属性
1、文字样式属性
格式：font-style: italic;
取值：normal:正常显示italic:斜体
快捷键：
fs font-style: italic;
fsn font-style: normal;
2、文字粗细属性
格式：font-weight:bold;
取值：lighter:细线（默认）bold:加粗bolder:加粗更粗
快捷键：
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
3、文字大小属性
格式：font-size:30px;
单位：px
快捷键：
fz font-size:;
fz30 font-size: 30px;
4、文字字体属性
格式：font-family:;
注意：
1、中文需要双引号或单引号
2、设置的字体必须是用户电脑安装的字体
设置的字体不存在，系统使用默认字体显示，想要使用设置的字体，可设置备选方案，用逗号隔开
中文英文单独设置字体：
中文字体都包含英文
中文都有英文名称，能处理中文才是中文字体，因此先英文后中文
常见字体：中文：宋体、黑体、微软雅黑 英文：“Times New Roman”、“Arial”
快捷键：
ff font-family:;
简写连体：
font:style weight size family;
注意：简写中，样式、粗细可省略，可交换位置；大小字体不能省略、交换位置。
二、文本属性：
1、文本装饰属性
格式：text-decoration: underline;
取值:underline下划线line-through删除线overline上划线
快捷键：
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
2、文本水平对齐属性
格式：text-align: left;
取值：left左right右边center中间
快捷键：
ta text-align: left;
tar text-align: right;
tac text-align: center;
3、文本缩进属性
格式：text-indent:;
取值：em,px
快捷键：
ti text-indent:;
4、文本颜色属性
格式：color: #000;
取值方式：英文单词、rgb（0,0,0）、rgba（0,0,0，亮度（0-1））、16进制（#000）
三、选择器
1、标签选择器
选中当前界面所有的标签
格式：
标签{属性:值；}
2、id选择器
根据制定的id选择对应的标签，具有唯一性，只能字母/数字、下划线组成，并且不能数字开头，大多数是给js使用
格式：
#id名称{属性:值；}
3、类选择器
根据制定的类选择对应的标签，具有重复性，命名方式与id一样，一个标签可设置多个类名，以空格隔开。
格式：
.类名称{属性:值；}
4、后代选择器
找到指定标签中所有指定标签
格式：
标签1 标签2{属性:值；}
5、子元素选择器
找到指定标签中所有特定子元素标签
格式：
标签1>标签2{属性:值；}
6、交集选择器
格式：
标签1标签2{属性:值；}
7、并集选择器
格式：
标签1.标签2{属性:值；}
8、兄弟选择器
相邻：给指定选择器后紧跟选择器选中的标签设置属性
格式：
标签1+标签2{属性:值；}
通用：给指定选择器后所有选择器选中的标签设置属性
格式：
标签1~标签2{属性:值；}
9、序选择器
同级别第几个：
:first-child同级别第一个
:last-child同级别最后一个
:nth-child(n)同级别n个
:last-child(n)同级别倒数n个
:only-child同级别唯一一个
:nth-child(odd)同级别奇数，
:nth-child(even)同级别偶数
:nth-child(xn+y)
同级别同类型第几个：
:first-of-type同级别同类型第一个
:last-of-type同级别同类型最后一个
:nth-of-type(n)同级别同类型n个
:last-of-type(n)同级别同类型倒数n个
:only-of-type同级别同类型唯一一个
:nth-of-type(odd)同级别同类型奇数，
:nth-of-type(even)同级别同类型偶数
:nth-of-type(xn+y)
10、属性选择器
根据指定的属性选择对应标签
格式：
[attribute][attribute=value]
(1、)属性取值以什么开头
[attribute|=value]CSS2（只能找到value开头并-隔开的）
[attribute……=value]CSS3
(2、)属性取值以什么结尾
[attribute$=value]CSS3
(3、)属性取值包含某个特定值
[attribute~=value]CSS2
[attribute*=value]CSS3
11、通配符选择器
格式：
*{属性:值；}
四、CSS三大特性
1、继承性
作用：父元素设置的属性，子元素也能使用
注意：并不是所有的属性都可以继承
1、只有以color/font-/text-/line开头的属性才可以继承
2、不仅仅儿子可以继承，后代都可以继承
特殊性：
a标签的文字颜色和下划线不能继承，h标签的文字大小不能继承
继承应用：设置网页的共用信息
2、层叠性
多个选择去选择同一标签，设置相同的属性才会发生层叠性
3、优先级
当多个选择去选择同一标签，设置相同的属性，如何层叠由优先级决定
优先级判断的三种方式：
1、间接选中指继承
谁离目标标签近听谁的
2、相同选择器（直接选中）
都是同类型选择器，写在后面的有效
3、不同选择器（直接选中）
不是同类型选择器，按选择器优先级层叠
id>类>标签>通配符>继承>浏览器默认
！important：用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被指定的属性的优先级提升为最高
只能用于直接选中，不能用于间接选中
通配符是直接选中标签
！important只能提升被指定属性的优先级，其他属性优先级不会被提升
优先级权重问题（直接选中）：
作用：多个选择器混合在一起使用，可通过计算权重方式判断高优先级
计算规则：先看id个数，相同则看类个数，再相同则看标签名称个数，之后不再计算，写在后面的有效
四、页面背景与盒模型
1、背景颜色
格式：background-color:;
取值：单词、rgb(0,0,0);、rgba(0,0,0,亮度);、#000;
2、背景图片
格式:background-image: url();
background-repeat:repeat;默认
background-repeat:no-repeat;background-repeat:repeat-x;background-repeat:repeat-y;
3、背景定位
background-position: 0 0;
取值：具体方位名词（left center right top center bottom）或具体像素
关联方式：
格式：background-attachment:scroll;默认
取值：fixed，
背景属性简写：background：背景颜色 背景图片 平铺方式 关联方式;，任何一个属性都可省略
4、css精灵图
减少请求次数，降低服务器的压力
需要配合背景图片和背景定位使用
5、边框属性
格式：
连写1：
border：边框宽度 边框样式 边框颜色
快捷键：bd+
连写中：颜色可以省略，默认黑色，样式不能省略，宽度能省略
连写2：
border-top：边框宽度 边框样式 边框颜色border-right：边框宽度 边框样式 边框颜色border-left：边框宽度 边框样式 边框颜色border-bottom：边框宽度 边框样式 边框颜色
连写3：
border-width：上 右 下 左border-style：上 右 下 左border-color：上 右 下 左
非连写：
border-top-width：border-top-style：border-top-color：
内边距属性：
非连写格式：
padding-top：
连写：
padding：上 右 下 左
省略取值与边框属性一样
外边距属性：
margin-top：
连写：
padding：上 右 下 左
省略取值与边框属性一样
外边距合并：
默认布局水平方向外边距进行叠加，垂直方向外边距取最大值
6、盒模型
内容区域+内边距+边框+外边距
内容的宽度和高度：内容区域
元素的宽度和高度：可视范围，内容区域+内边距+边框
元素空间的宽度和高度：元素所有区域，内容区域+内边距+边框+外边距
box-sizing属性
格式：box-sizing：border-box；
css3新增属性，盒子增加padding和border，盒子宽高不变，自动减去内容的宽高。
如果两个盒子是嵌套关系，设置了里面盒子顶部的外边距，大盒子与小盒子同时被顶下，需要给大盒子设置边框
padding是控制父子关系的间隙
margin是控制兄弟关系的间隙
注意：嵌套关系中，利用margin：0 auto， 控制里面元素水平居中与外面元素
盒子居中与内容居中：
盒子居中：margin：0 auto；
内容居中：text-align:center；
五、网页布局方式：
1、标准流排版：
块级：垂直排版
行内/行内块级：水平排版
浏览器默认排版方式
2、浮动流排版
半脱离标准流排版，只能水平排版
注意：浮动流没有居中对齐，margin：0 auto；在浮动流中无效
特点：在浮动流中不区分块级、行内块级、行内元素；并且都可以设置宽高。
浮动元素脱标：相当于在标准流删除
浮动元素排序规则：
相同方向的浮动，先浮动的会显示在前面
不同方向的浮动，左浮动会对应左浮动，有浮动会对应右浮动
浮动元素浮动之后位置会根据浮动之前标准流的位置确定
清除浮动
在标准流中内容可以撑起父元素的高度，而在浮动中不能撑起
方式1：
给前面一个父元素设置高度（在企业开发中能不写高度就尽量不写），因此不常用
方式2：
给后面的盒子添加clear属性
clear取值：left，right，both，none
注意：设置了clear属性，margin属性会失效
方式3：隔墙法（不常用）
1、外墙法：
两个盒子中间添加块级元素并清除浮动
注意：可以让第二个盒子使用margin-top属性，但不能让第一个盒子使用margin-bottom，可直接设置高度达到margin效果
2、内墙法：
第一个盒子最后添加块级元素并清除浮动
注意点：可以让第二个盒子使用margin-top属性，也能让第一个盒子使用margin-bottom，可直接设置高度达到margin效果
区别：外墙法不能撑起第一个盒子的高度，内墙法能撑起第一个盒子的高度
伪元素选择器：
1、给指定标签的内容前面或后面添加一个子元素
格式：
标签名称::before{属性名称：值；}
2、给指定标签前面添加一个子元素
格式：
标签名称::after{属性名称：值；}
给指定标签后面添加一个子元素
div::before{content"添加的内容"}在div内容的前面添加内容
方式4：
设置添加的子元素内容为空、块级元素、高度为0，添加的子元素看不见并清除浮动（类似内墙法）
ie6兼容：
.box{*zoom:1;}
方式5：
设置第一个盒子的overflow：hidden；属性进行清除浮动，ie6下兼容增加*zoom：1；
overflow其他用途：
overflow：hidden；可以将超出标签范围的内容清除掉
可以通过里面的盒子设置margin-top，外面的盒子设置overflow：hidden；不会被顶下
3、定位流排版
定位流：相对定位、绝对定位、固定定位、静态定位
相对定位
格式：
position: relative;垂直方向：;水平方向：;
相对于以前在标准流的位置进行移动
注意：不脱离标准流，在标准流定位占用空间，同一方向只能设置一个属性，区分行内元素和块级元素
应用：微调、配合绝对定位
绝对定位
格式：
position: absolute;垂直方向：;水平方向：;
相对于body的位置移动
注意：脱离标准流，在标准流定位不占用空间，同一方向只能设置一个属性，不区分行内元素和块级元素
默认所有绝对定位以body为参考点移动，若祖先元素有定位流（相对、绝对、固定），默认以最近祖先元素为参考点移动
1、绝对定位的元素以body作为参考点，是以首屏网页作为参考点，不是以整个网页作为参考点
2、绝对定位会忽略祖先元素的padding
元素水平居中：
left：50%margin-left：元素宽度一半
固定定位
格式：
position: fixed;垂直方向：；水平方向：；
注意：脱离标准流，在标准流定位不占用空间，不区分行内元素和块级元素
z-index属性：控制定位流元素覆盖关系
默认情况下，所有元素都有z-index属性，取值为0；
定位流元素会盖住标准流元素，后定位元素会盖住先定位元素，
先看父元素z-index属性，再看子元素
a标签伪类选择器
修改a标签不同状态的样式
状态：
默认：a：link{}
点击后：a：visited{}
鼠标移入：a:hover{}（hover可用于任何标签）
鼠标长按：a：active{}
注意：一起出现，必须按照顺序编写，否则失效
过渡模块：
transition-property: ;(哪个属性需要执行过渡效果)
transition-duration: ;（过渡效果持续时长）
transition-timing-function: ;（延迟开始过渡时间）
transition-delay: ;（过渡效果运动速度）
注意：要过渡，必须满足三要素（属性变化、哪个属性发生过渡、过渡时长），多个属性过渡用“，”隔开
简写：transition：过渡属性 过渡时长 运动速度 延迟时间；
多个属性运动速度、延迟时间、持续时间一致，简写为：transition：all （）s;
六、2D3D转换模块
基础：
deg是单位，代表旋转多少度
transform:rotate(45deg);
第一个参数:水平方向，第二个参数:垂直方向
transform: translate(-100px, 50px);
第一个参数:水平方向，第二个参数:垂直方向,相同参数可用一个参数
transform:scale(1, 1.5);
transform:rotate（）；旋转相关属性：
形变中心点：
默认情况下以中心为参考点旋转
第一个参数：水平方向，第二个参数：垂直方向。取值：具体像素、百分比、特殊关键字（top bottom left right）。
格式：transform-origin: 0 0;
旋转轴向：
默认情况下所有元素围绕z轴旋转,*代表轴向（X、Y、Z）
格式：transform:rotate*();
透视属性：
特点：近大远小，像素代表离物体距离
格式：perspective：px；
注意：透视属性必须添加到呈现近大远小父元素上面
盒子阴影与文字阴影：
盒子阴影（默认外阴影）：
box-shadow:h-shadow(水平偏移)v-shadow(垂直偏移)blur（模糊度）spread（阴影扩展）color（阴影颜色）inset（内外阴影）;
快速添加阴影需要添加3个参数：ox-shadow:h-shadow(水平偏移)v-shadow(垂直偏移)blur（模糊度）；
默认情况下，阴影颜色与盒子内容颜色一致
文字阴影：
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度） color（阴影颜色）；
默认情况下，阴影颜色文字颜色一致
七、动画模块
1、过渡与动画之间的区别
不同点：
1)、过渡必须人为触发才会生效
2)、动画不需要人为触发就能执行
相同点：
1)、都是给元素添加动画的
2)、都是系统新增的属性
3)、都需要满足三要素才能有动画效果
2、动画步骤格式
1、告诉系统需要执行哪个动画
animation-name:xxx;
2、告诉系统需要自己创建一个名称叫xxx的动画
方式1：
@keyframes xxx{from{}to{}}
方式2：
@keyframes xxx{1%{}2%{}...%{}}
3、告诉系统动画持续时长
animation-duration: 3s;
3、其他属性
1、动画执行的速度
animation-timing-function: linear;
2、动画执行次数
animation-iteration-count: 1;
3、动画是否需要做往返动画
animation-direction: alternate;
4、动画执行状态
animation-play-state: paused;
5、执行动画等待状态与结束状态样式
取值：
none:默认
forwards：动画元素结束处于最后一帧状态样式
baxkwards:动画元素开始处于第一帧状态样式
both:动画元素结束处于最后一帧状态样式，动画元素开始处于第一帧状态样式
animation-fill-mode: ;
连写格式：
animation:动画名称 动画时长 动画运动速度 延迟时长 执行次数 往返动画；
前端编码步骤：
1、 重置样式，设置全局样式
2、 引入全局样式表，引入单页样式表
3、 搭建网页结构及样式结构
4、 布局划分，区块化编写
