标签：
字体样式：
font-family 设置字体名称 <famlity-name>
说明：可以使用多个名称，用逗号分隔，浏览器则按照先后顺序依次使用可用字体
例：p { font-family:‘宋体‘,‘黑体‘,‘Arial‘; }
font-size 设置字体大小<length> | <percentage>
注：如果用百分比作为单位，则是基于父元素字体的大小
例：p { font-size:16px;}
font-weight 控制字体粗细 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
说明：normal 正常的字体，相当于数字值400
bold 粗体，相当于数字值700
100~900 定义由细到粗的字符
例：p { font-weight:bold;}
font-style 控制字体是否倾斜 normal | italic | oblique
说明：normal 指定文本字体样式为正常的字体
italic 指定文本字体样式为斜体，对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique 指定文本字体样式为倾斜的字体，人为的使文字倾斜，而不是去选取字体中的斜体字
例： p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; }
font 字体样式缩写 font-style || font-variant || font-weight || font-size || / line-height || font-family
例：p{ font-style:italic; font-weight:bold; font-size:14px; line-height:22px; font-family:宋体;}
缩写后：p { font:italic bold 14px/22px 宋体}
color 控制文本的字体颜色 <color>
说明：颜色属性值分三种值的格式
英文单词，比如 red , yellow ,green …
十六进制表示方式，#开头，6个十六进制的字符或数字 组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f
RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234) RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%
text-decoration 文本装饰线条 text-decoration : none || underline || blink || overline || line-through
说明：none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本的一条线
blink 定义闪烁的文本
例：p { text-decoration:overline;}p { text-decoration:underline;}p { text-decoration:line-through;}
text-shadow 文本阴影 text-shadow: h-shadow v-shadow blur color
说明：h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色
例：h1{ text-shadow: 2px 2px 2px #ff0000;}
宽度 width : auto | length
例：p { width:300px;}div { width:50%;}
高度 height : auto | length
例：img { height:200px;}div { height:100px;}
外边距 margin : auto | length
说明：margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left 设置左边的外边距
margin-right 设置右边的外边距
缩写型式：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距 左右边距
margin: 上边距 左右边距 下边距
例：div { width:300px; height:100px; margin:10px;}div { width:300px; height:100px; margin:0 auto;}
css外边距合并
内边距 padding : length
说明：padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left 设置左边的内边距
padding-right 设置右边的内边距
例：div { width:300px; height:100px; padding:10px;}
透明度 opacity : <number>
说明：number值为 0.0-1.0 之间的小数
兼容全浏览器的写法：
div{ filter:alpha(opacity=50); } /* IE6-IE8 */
div{ opacity:0.5; } /* 现代浏览器 */
border-style 边框样式 none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
说明：none 定义无边框
hidden 与"none"相同。不过应用于表时除外，对于表，hidden用于解决边框冲突
dotted 定义点状边框
dashed 定义虚线
solid 定义实线
double 定义双线。双线的宽度等于border-width的值
groove 定义3D凹槽边框。其效果取决于border-color的值
ridge 定义3D垄状边框。其效果取决于border-color的值
inset 定义3D inset边框。其效果取决于border-color的值
outset 定义 3D outset边框。其效果取决于border-color的值
border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
例：div { width:300px; height:100px; border-style:solid;
border-width 边框宽度 medium | thin | thick | length
说明：thin 定义细的边框
medium 默认。定义中等的边框
thick 定义粗的边框
length 允许你自定义边框的宽度
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
例： div { width:300px; height:100px; border-style:solid; border-width:1px; ｝
border-color 边框颜色 color
说明：transparent 默认值。边框颜色为透明
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
例：div { width:300px; height:100px; border-style:solid; border-width:1px; border-color:#FF0000; }
border 边框样式 border-width || border-style || border-color
例：div { width:300px; height:100px; border-style:solid; border-width:1px; border-color:#FF0000; }
缩写后：div { width:300px; height:100px; border:1px solid #FF0000;}
border-radius 圆角效果 [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?向元素添加圆角边框
例：/* 所有角都使用半径为10px的圆角 */
div{ border-radius:10px;}
/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
div{ border-radius: 5px 4px 3px 2px; }
/*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/
div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
/*圆*/
div{ border-radius:50% }
border-image 边框图片 <‘ border-image-source ‘> || <‘ border-image-slice ‘> [ / <‘ border-image-width ‘> | / <‘ border-image-width ‘>? / <‘ border-image-outset ‘> ]? || <‘ border-image-repeat‘>边框样式使用图像来填充
注意：border-image-slice ： 是一个数值或百分比，不需要带单位（特指px）设置了border-image之后，border-style则不显示
例：.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }
box-shadow 盒子阴影 none | <shadow> [ , <shadow> ]*<shadow> = inset? && <length>{2,4} && <color>?
说明： box-shadow是向盒子添加阴影。支持添加一个或者多个
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
例：.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); } /*外阴影常规效果*/
.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }/*外阴影模糊外延效果*/
. inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; } /*内阴影效果*/
line-height 控制段落内每行高度 normal | length
例： p { line-height:25px;}p { line-height:150%}
text-indent 控制段落的首行缩进 length
例：p { text-indent:2em;}
text-align 控制段落对齐方式 left | right | center | justify
例： p { text-align:right;}p { text-align:center;}
letter-spacing 控制段落的文字间的距离 normal | length
例：p { letter-spacing:5px;}
text-overflow 控制文字内容溢出部分的样式 clip | ellipsis
说明：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
例：div,input{ overflow: hidden; /*条件1：超出部分隐藏*/
white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/}
word-wrap 控制内容超过容器的边界时是否断行normal | break-word
background-color 背景颜色 transparent | color
例： body { background-color:#CCCCCC;}h1 { background-color:#EDEDED;}
颜色之RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数
说明：color：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值
例：border-color:rgba(255 , 0 , 0 , .7);background-color:rgba( 100 , 120 , 60 , .5 );border-color:rgba(255 , 0 , 0 , .7);
gradient 渐变色彩 css3 gradient分为线性渐变(linear)和径向渐变(radial)
说明：第一个参数省略时，默认为“180deg”，等同于“to bottom”。第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。(颜色值后面可以追加百分比，表示这个颜色要占总背景颜色面积的百分比)
例：background-image:linear-gradient(to left, red 30%,blue);
background-image 背景图片 none | url ( url )
例：body { background-image:url(images/bg.gif);}
background-repeat 背景平铺方式 repeat | no-repeat | repeat-x | repeat-y
说明：repeat 默认。背景图像将在垂直方向和水平方向重复
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat 背景图像将仅显示一次
background-position 背景图像定位 左对齐方式 上对齐方式
例：body { background-position:left bottom;}
body { background-position:30% 20px;}
background-origin 背景原点 设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat此属性才会生效
说明：规定background-position属性相对于什么位置来定位
padding-box 背景图像相对于内边距框来定位
border-box 背景图像相对于边框盒来定位
content-box 背景图像相对于内容框来定位
例：background-origin ： border-box | padding-box | content-box;
background-clip 背景的显示区域 设定背景图像向外裁剪的区域
说明：border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
例：background-clip ： border-box | padding-box | content-box | text
标签：
原文地址：http://www.cnblogs.com/adda/p/5763392.html
