1、文本样式
color 文本颜色
direction 文本方向：ltr(默认，从左到右)、rtl(从右到左)
font-family 字体：Arial、"宋体"、"微软雅黑"
font-size 字体大小
font-weight 字体粗细：normal/bold/bolder/lighter
font-style 样式：normal(正常)/italic(斜体)/oblique(偏斜体)
font-variant 默认值为normal（AB），small-caps小型大写字母（AB）
line-height 行高
text-align 水平对齐：left/right/center/justify
vertical-align 垂直对齐
（baseline(默认)/sub/super/top/text-top/middle/bottom/text-bottom）
text-indent 文本首行缩进
text-transform 大小写转换
（none：默认无；capitalize：首字母大写；uppercase：全部大写；lowercase：全部小写；）
text-decoration 文本修饰
（下划线：underline；上划线：overline；删除线：line-through；文本闪烁：blink；）
word-spacing 单词间距
letter-spacing 字符间距
white-space 元素留白：normal/pre/nowrap/pre-wrap/pre-line
word-break 文本折行：normal/break-all/keep-all
word-wrap 过长单词换行：normal/break-word
2、显示样式
display：
none：不显示
inline：默认，显示为内联元素
block：显示为块级元素
list-item：作为列表显示
run-in：根据上下文作为块级元素或内联元素显示
table：作为块级表格显示
inline-table：作为内联表格显示
table-row-group：作为一个或多个行的分组来显示（类似<tbody>）
table-header-group：作为一个或多个行的分组来显示（类似<thead>）
table-footer-group：作为一个或多个行的分组来显示（类似<tfoot>）
table-row：作为一个表格行显示（类似<tr>）
table-column-group：作为一个或多个列的分组来显示（类似<colgroup>）
table-column：作为一个单元格列显示（类似<col>）
table-cell：作为一个表格单元格显示（类似<td>和<th>）
table-caption：作为一个表格标题显示（类似<caption>）
inherit：从父元素继承display属性的值
visibility：
visible：默认，可见
hidden：不可见
collapse：在表格元素中使用时可删除一行或一列，用在其他元素上会呈现为“hidden”
cursor：
auto：默认，浏览器默认的光标
default：默认光标（通常是一个箭头）
crosshair：十字线
pointer、hand：手形光标
move：十字可移动图标
text：文本选择器号
wait：沙漏或手表
help：带问号鼠标
all-scroll：四项箭头中心圆点的滚动图标
e-resize：指示矩形框的边缘可被向右（东）移动
w-resize：指示矩形框的边缘可被向左（西）移动
n-resize：指示矩形框的边缘可被向上（北）移动
s-resize：指示矩形框的边缘可被向下（南）移动
ne-resize：指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize：指示矩形框的边缘可被向上及向左移动（北/西）
se-resize：指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize：指示矩形框的边缘可被向下及向左移动（南/西）
overflow：
visible：默认值，溢出部分仍显示
hidden：溢出部分不显示
scroll：始终显示滚动条
auto：溢出时才显示滚动条
3、背景样式
background-color 背景颜色（默认值为：transparent ---透明）
background-image 背景图像
background-size 背景图片大小
px px / % %：两个值，第一个为宽度，第二个为高度；如果只给一个值，第二个则默认为 auto(自动)
cover：保持图像的纵横比并将图像缩放成完全覆盖背景定位区域的最小大小
contain：保持图像的纵横比并将图像缩放成适合背景定位区域的最大大小
background-repeat 背景图像重复：repeat(默认)/no-repeat/repeat-x/repeat-y
background-attachment 设置背景图像是否随着页面其余部分滚动：scroll(默认)/fixed(固定)
background-position(x/y) 背景图像的绝对位置
水平位置（left/center/right）/ ±px
垂直位置（top/center/bottom）/ ±px
透明度： opacity:0.5(值为0~1)；filter:alpha(opacity=50(值为1~100));
4、区块样式
width 宽度：px/% min-width 最小宽度 max-width 最大宽度
height 高度：px/% min-height 最小高度 max-height 最大高度
padding 填充
padding:上 右 下 左;
padding-top/padding-right/padding-bottom/padding-left
margin 边距
margin:上 右 下 左;
margin-top/margin-right/margin-bottom/margin-left
5、边框轮廓
border：border-width border-style border-color
border-top/border-right/border-bottom/border-left
border-width：
thin：细边框
medium：默认，中等边框
thick：粗边框
border-上 右 下 左;
border-top/right/bottom/left-width
border-style：
none/hidden：无边框
dotted：点线框
dashed：虚线框
solid：实线框
double：双线框
groove：3D凹槽边框，效果取决于border-color的值
ridge：3D垄状边框，效果取决于border-color的值
inset：3D内嵌边框，效果取决于border-color的值
outset：3D凸起边框，效果取决于border-color的值
border-top/right/bottom/left-style
border-color：默认为 transparent（透明）
border-color:上 右 下 左;
border-top/right/bottom/left-color
border-radius 边框圆角
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
box-shadow 轮廓阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow：px，必需值，水平阴影的位置，可为负值
v-shadow：px，必需值，垂直阴影的位置，可为负值
blur：px，可选值，模糊距离
spread：px，可选值，阴影大小
color：阴影的颜色
inset：可选值，将外部阴影（outset）改为内部阴影
6、表格样式
border-collapse 是否合并表格边框
separate：默认值，边框会被分开，不会忽略 border-spacing 和 empty-cells 属性
collapse：边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性
border-spacing 相邻单元格边框之间的距离
px：水平和垂直间距
px px：水平间距 垂直间距
caption-side:top/bottom 表格标题的位置
empty-cells 是否显示表格中的空单元格
show：默认值，在空单元格周围绘制边框
hide：不在空单元格周围绘制边框
table-layout 设置用于表格的布局算法
automatic：默认值，列宽度由单元格内容设定
fixed：列宽由表格宽度和列宽度设定
7、列表样式
list-style-type 标记类型（用于设置项目符号或编号的外观）
none：无标记
disc：默认，实心圆
circle：空心圆
square：实心方块
decimal：数字（1，2，3）
decimal-leading-zero：0开头的数字（01，02，03）
lower-roman：小写罗马数字（i，ii，iii）
upper-roman：大写罗马数字（I，II，III）
lower-alpha：小写英文字母
upper-alpha：大写英文字母
list-style-image:url; 项目符号图像
list-style-position:outside/inside 标记的位置
outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
8、定位
float 元素是否浮动
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右浮动
clear 清除该元素两侧的元素的浮动值对本元素布局位置的影响
none：默认值，允许浮动元素出现在两侧
left：左侧不允许浮动元素
right：右侧不允许浮动元素
both：左右两侧均不允许浮动元素
position 定位类型
static：默认值，无定位，元素显示在正常流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative：相对定位
absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
fixed：绝对定位，相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
x轴方向 left：±px right：±px
y轴方向 top：±px bottom：±px
z轴方向 z-index：数值
注：坐标属性必须在position设置后才起作用；z-index值越大的在上面，只能用于绝对定位的元素；
绝对定位的相对定位关系：（给绝对定位对象找个参照）
1.参照对象一定是该绝对对象的父级关系
2.给参照对象加相对关系属性（position:relative;）
9、伪类
a:link{ } 标准链接样式
a:visited{ } 已经浏览过的链接样式
a:hover{ } 鼠标放在链接上时的样式
a:active{ } 单击链接时的样式
:focus{ } 得到焦点时的样式，对具有输入域的元素起作用，常应用于input元素
:checked{ } 点击时的样式
:first-child{ } 向元素的第一个子对象添加样式
伪元素：
:before{content:" ";} ：在当前元素内容前添加新内容
:after{content:" ";} ：在当前元素内容后添加新内容
10、过渡（Transition）
transition CSS属性的变换过渡
transition(transition-property transition-duration transition-timing-function transition-delay);
transition-property：必填，需要变换过渡的属性，多个属性名以逗号分隔
transition-duration：必填，过渡效果进行的时长，不设置则默认为0，无过渡效果
transition-timing-function：可选，过渡效果的时间曲线，改变过渡效果的持续速度
linear ---以相同速度开始至结束的过渡效果
ease ---慢速开始，然后变快，然后慢速结束的过渡效果
ease-in ---以慢速开始的过渡效果
ease-out ---以慢速结束的过渡效果
ease-in-out ---以慢速开始和结束的过渡效
transition-delay：可选，等待过渡效果开始的时间
例：
div
{
100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover {300px;}