font-family 设置字体名称
可以使用多个名称，用逗号分隔，浏览器则按照先后顺序依次使用可用字体
p { font-family:'宋体','黑体','Arial'; }
font-size 设置字体大小
length 用长度值指定文字大小，不允许负值
percentage 用百分比指定文字大小，其百分比取值是基于父对象中字体的尺寸，不允许负值
p { font-size:14px;}
font-weight 控制字体粗细
normal 正常的字体，相当于数字值400
bold 粗体，相当于数字值700
100~900 定义由细到粗的字符
p { font-weight:bold;}
font-style 控制字体是否倾斜
normal 指定文本字体样式为正常的字体
italic 指定文本字体样式为斜体，对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique 指定文本字体样式为倾斜的字体，人为的使文字倾斜，而不是去选取字体中的斜体字
p { font-style: italic;}
color 文本颜色
text-decoration 文本装饰线条
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本的一条线
blink 定义闪烁的文本
p { text-decoration:overline;}
text-shadow 文本阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色
h1{ text-shadow: 2px 2px 2px #ff0000;}
宽度 width : auto | length
高度 height : auto | length
外边距 margin : auto | length
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left 设置左边的外边距
margin-right 设置右边的外边距
缩写型式：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距 左右边距
margin: 上边距 左右边距 下边距
内边距 padding : length
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left 设置左边的内边距
padding-right 设置右边的内边距
透明度 opacity :
number值为 0.0-1.0 之间的小数
兼容全浏览器的写法：
div{ filter:alpha(opacity=50); } /* IE6-IE8 */
div{ opacity:0.5; } /* 现代浏览器 */
border-style 边框样式
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 设置右边框线
border-width 边框宽度
thin 定义细的边框
medium 默认。定义中等的边框
thick 定义粗的边框
length 允许你自定义边框的宽度
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
border-color 边框颜色
transparent 默认值。边框颜色为透明
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
三角形
border-radius 边框圆角
半圆
border-image 边框图片
设置了border-image之后，border-style则不显示
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移，是一个数值或百分比，不需要带单位
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否应平铺(repeated)铺满(rounded)拉伸(stretched)
box-shadow 盒子阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影(outset)改为内部阴影
使用方法：box-shadow : X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
line-height 设置行间的距离(行高)
p { line-height:25px;}
p { line-height:150%;}
text-indent 规定文本块中首行文本的缩进
p { text-indent:2em;}
text-align 规定元素中的文本的水平对齐方式
left 把文本排列到左边
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
letter-spacing 增加或减少字符间的空白(字符间距)
p { letter-spacing:5px;}
text-overflow 规定当文本溢出包含元素时发生的事情
clip 当内联内容溢出块容器时，将溢出部分裁切掉
ellipsis 当内联内容溢出块容器时，将溢出部分替换为（...）
text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
word-wrap 允许长单词或url地址换行到下一行
normal 允许内容顶开或溢出指定的容器边界
break-word 内容将在边界内换行。如果需要，单词内部允许断行
background-color 背景颜色
transparent 默认。背景颜色为透明
gradient 渐变色彩
css3 gradient分为线性渐变(linear)和径向渐变(radial)
background-image:linear-gradient(to left, red 30%,blue);
background-image 背景图片
body { background-image:url(images/bg.gif);}
background-repeat 背景平铺方式
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-clip 背景的显示区域
设定背景图像向外裁剪的区域
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
【 微信扫一扫 】
