CSS常见样式总结

基本CSS样式总结：

1.字体CSS样式

font-family	宋体 新宋体 Arial，Helvetical，sans-serif Times New Roman，Times，serif Courier New，Courier，monospace 黑体 楷体_GB2312 仿宋_GB2312
font-size	20px 200%    相对于父节点 xx-small，x-small，small，medium，large，x-large，xx-large
font-style	normal     默认值 italic     斜体1 oblique    斜体2 inherit    从父元素继承字体样式
font-weight	normal bold bolder     比父节点粗 lighter    比父节点细 100 ~ 900（9级粗细字体）
color	red #ff0000 RGB(255,0,0) inherit
font-veriant 控制文字大小写	normal        默认，大小写不变 small-caps    英文小型大写字体 inherit
链接a	伪类选择符：link，visited，active，hover
text-indent 控制文字第一行的缩进	20px
text-align	left       默认值 center     right      往右靠 justify    向两边伸展对其 inherit
word-spacing 控制文字间空格距离	8px -8px
text-tranform 控制英文大小写	none          默认值 capitalize    单词首字母大写，其余小写 uppercase     全部大写 lowercase     全部小写 inherit
text-decoration 添加额外的文字修饰	none          默认值 underline     下划线 overline      上划线 line-through  中划线 blink         文字闪烁效果
white-space 控制回车、空格的显示	值       空白符    换行符    是否自动换行 pre-line   合并       保留       是 normal     合并       忽略       是 nowrap     合并       忽略       否 pre        保留       保留       否 pre-wrap   保留       保留       是
text-shadow（IE不支持） 控制文字的阴影	text-shadow : 横坐标偏移位置  纵坐标偏移位置  模糊半径  阴影颜色 , 横坐标偏移位置  纵坐标偏移位置  模糊半径  阴影颜色 , ··· ; text-shadow : 0 0 10px #fff , 0 0 40px #ff00de;
shadow滤镜	filter : shadow(Color=颜色值 , Direction=和垂直向上方向的夹角 , Strength=阴影宽度);
dropshadow滤镜	filter : dropshadow(color=颜色值 , offx=横坐标偏移位置 , offy=纵坐标偏移位置 , Positive=布尔类型0/1);
Transition(1) 控制文字变换速度	transition : CSS属性名字  变化时间  变化类型  等待时间 , CSS属性名字  变化时间  变化类型  等待时间 , ··· -webkit-transition   Safari,Chrome -moz-transition     Firefox -ms-transition      IE9 -o-transition       Opera Transition:background-color 1s ease-in-out 0s,color 1s ease-in-out 0s;    /* CSS标准 */
transition(2) 控制文字大小变化	rotate(30deg) scale(2) , scaleX, scaleY        在水平和垂直方向缩放 skew(30deg),skewX,skewY     在水平和垂直方向扭曲 translate(30px),translateX,translate                            在水平和垂直方向移动 matrix(1,0,1,0,100,100)
line-height 设置行间距	1.5em
marquee 实现文字的移动	direction : left/right behavior : scroll单方向循环 / slide（单方向不循环） / alternate（来回方向循环） loop                  循环的次数 scrollamount          控制内容移动的速度 scrolldelay           控制内容每次移动前的延时
position	absolute relative          left , right , top , z-index

 

2.图片CSS样式：

background-color	red #ff0000 rgb(255,0,0)
background-image	url(图片名字)；
background-repeat	repeat-x，repeat-y，repeat，no-repeat
background-position	横向位置  纵向位置； left/right/center    top/bottom/center
background-attachment 设置背景图片是否随滚动条一起滚动	fixed scrolled inherit
gradient 线性渐变	filter : progid : DXImageTransform . Microsoft . gradient ( enable=true , gradientType=0 , startColorStr=#f0f0f0 ,endColorStr=#020202 ) ;                                                                                 (IE6/IE7) enable滤镜开关gradientType : 1(水平渐变)0(垂直) background-image : -moz-linear-gradient(起始点|角度 , {颜色 位置} , {颜色 位置} , ···) background-image : -webkit-gradient(类型 , {位置1  半径} , {位置2  半径} , {目标位置颜色} , {目标位置颜色} , ···)                  (Safari,Chrome) 类型：radial/linear
border-color
border-width	5px
border-style	none               solid(实线) dashed(虚线)       dotted(点状)    double(双线)       groove(3D凹槽) ridge(3D垄状)      inset outset       inherit
width , height 控制图屏缩放	50% 50px
opacity 透明效果	filter : alpha(opacity=50)      (IE6/IE7) -ms-opacity : 0.5             -khtml-opacity : 0.5 -webkit-opacity : 0.5 opacity : 0.5
text-align 控制图片水平位置	left right center
vertical-align 控制图片垂直位置	baseline  bottom  middle sub               super text-bottom       top

 

 

3.表格CSS样式：

background
border	border-color , border-style , border-width border-collapse : collapse 表格边框合并为单一的边框
padding	2px
cellspacing 单元格之间的间隔	<table  border=”1”  cellpadding=”5”  cellspace=”6”>
colspan，rowspan	<td colspan=”3”>  <td rowspan=”4”>

 

4.列表CSS样式：

float 控制列表的方向	none left right
list-style-position 列表项图标的位置	inside outside
list-style-type	none   disc(默认)  circle   square   decimal(数字) decimal-leading-zero    lower-roman   upper-roman lower-alpha   upper-alpha    lower-greek lower-latin    upper-latin     cjk-ideographic(中文)
list-style-image	url(图片位置);

 

5.表单CSS样式：

input标签   type=”button”	button , checkbox , file , hidden , image , password , radio , reset , submit , text , date , range
select标签 单选菜单或复选菜单	<select> <option /><option /><option /> </select>
button标签 type=”submit”	submit , button , reset , input
textarea标签	<textarea cols=”30” rows=”5” wrap=”off” > Wrap=”off/soft/hard” (自动换行)
label标签	<label for=”obj”></label> <input id=”obj” />
border outline 边框属性	border-style outline-style
display	block , none , inline