CSS常用属性大全

1、.CSS常用属性一 CSS 文字属性：color : #999999; /*文字颜色 */font-family :宋体 ,sans-serif; /*文字字体 */font-size : 9pt; /*文字大小 */font-style:itelic; /*文字斜体 */font-variant:small-caps; /*小字体 */letter-spacing : 1pt; /*字间距离 */line-height : 200%; /*设置行高 */font-weight:bold; /*文字粗体 */vertical-align:sub; /*下标字 */vertical-align:

2、super; /*上标字 */text-decoration:line-through; /*加删除线 */text-decoration: overline; /*加顶线 */text-decoration:underline; /*加下划线 */text-decoration:none; /*删除链接下划线 */text-transform : capitalize; /*首字大写 */text-transform : uppercase; /*英文大写 */text-transform : lowercase; /*英文小写 */text-align:right; /*文字右对齐 */t

3、ext-align:left; /*文字左对齐 */text-align:center; /*文字居中对齐 */text-align:justify; /*文字分散对齐 */vertical-align属性.vertical-align:top; /*垂直向上对齐 */vertical-align:bottom; /*垂直向下对齐 */vertical-align:middle; /*垂直居中对齐 */vertical-align:text-top; /*文字垂直向上对齐 */vertical-align:text-bottom; /*文字垂直向下对齐 */二、 CSS边框空白padding-

4、top:10px; /*上边框留空白 */padding-right:10px; /*右边框留空白 */padding-bottom:10px; /*下边框留空白 */padding-left:10px; /*左边框留空白三、 CSS符号属性list-style-type:none; /*不编号 */list-style-type:decimal; /*阿拉伯数字 */list-style-type:lower-roman; /*小写罗马数字 */list-style-type:upper-roman; /*大写罗马数字 */list-style-type:lower-alpha; /*小写英

5、文字母 */list-style-type:upper-alpha; /*大写英文字母 */list-style-type:disc; /*实心圆形符号 */list-style-type:circle; /*空心圆形符号 */list-style-type:square; /*实心方形符号 */list-style-image:url(/dot.gif); /*图片式符号 */list-style-position: outside; /*凸排 */list-style-position:inside; /*缩进 */四、 CSS背景样式background-color:#F5E2EC; /

6、*背景颜色 */.background:transparent; /*透视背景 */background-image : url(/image/bg.gif); /*背景图片 */background-attachment : fixed; /*浮水印固定背景 */background-repeat : repeat; /*重复排列 - 网页默认 */background-repeat : no-repeat; /*不重复排列 */background-repeat : repeat-x; /*在 x 轴重复排列 */background-repeat : repeat-y; /*在 y 轴重

7、复排列 */指定背景位置background-position : 90% 90%; /*背景图片 x 与 y 轴的位置 */background-position : top; /*向上对齐 */background-position : buttom; /*向下对齐 */background-position : left; /*向左对齐 */background-position : right; /*向右对齐 */background-position : center; /*居中对齐 */五、 CSS连接属性a /* 所有超链接 */a:link /*超链接文字格式 */a:visi

8、ted /*浏览过的链接文字格式*/a:active /*按下链接的格式 */a:hover /*鼠标转到链接 */鼠标光标样式：链接手指CURSOR: hand十字体 cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move.箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字 I 型 cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-

9、resize漏斗 cursor:wait光标图案 (IE6)p cursor:url(“光标文件名 .cur ”),text;六、 CSS框线一览表border-top : 1px solid #6699cc; /*上框线 */border-bottom : 1px solid #6699cc; /*下框线 */border-left : 1px solid #6699cc; /*左框线 */border-right : 1px solid #6699cc; /*右框线 */以上是建议书写方式, 但也可以使用常规的方式如下 :border-top-color : #369 /*设置上框线 to

10、p 颜色 */border-top-width :1px /*设置上框线 top 宽度 */border-top-style : solid/*设置上框线 top 样式 */其他框线样式solid /*实线框 */dotted /*虚线框 */double /*双线框 */groove /*立体内凸框 */.ridge /*立体浮雕框 */inset /*凹框 */outset /*凸框 */七、 CSS表单运用文字方块按钮复选框选择钮多行文字方块下拉式菜单选项 1 选项 2八、 CSS边界样式margin-top:10px; /*上边界 */margin-right:10px; /*右边界值

11、 */margin-bottom:10px; /*下边界值 */margin-left:10px; /*左边界值 */九、 CSS滤镜属性Filter：在样式中加上滤镜特效。由于此属性内容比较多，我们将到下一章单独对滤镜介绍。1.Alpha ：设置透明度Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity ：透明度级别，范围是0-100 ，0 代表完全透明，100 代表完全不透明。FinishOpacity ：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0

12、 到 100 。 Style ：设置渐变透明的样式，值为0 代表统一形状、1 代表线形、 2 代表放射状、 3 代表长方形。 Sta.rtX 和 StartY ：代表渐变透明效果的开始X 和 Y 坐标。 FinishX和 FinishY ：代表渐变透明效果结束X 和 Y 的坐标。2.BlendTrans：图像之间的淡入和淡出的效果BlendTrans(Duration=?) Duration：淡入或淡出的时间。注意：这个滤镜必须配合JS 建立图片序列，才能做出图片间效果。3.Blru：建立模糊效果Blur(Add=?, Direction=?, Strength=?) Add：是否单方向模糊，

13、此参数是一个布尔值，true （非 0）或 false （ 0）。 Direction：设置模糊的方向，其中0 度代表垂直向上，然后每 45 度为一个单位。Strength：代表模糊的象素值。4.Chroma ：把指定的颜色设置为透明Chroma(Color=?) Color：是指要设置为透明的颜色。5.DropShadow ：建立阴影效果DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定阴影的颜色。OffX ：指定阴影相对于元素在水平方向偏移量，整数。OffY ：指定阴影相对于元素在垂直方向偏移量，整数。Positive：是一个布

14、尔值，值为true （非 0）时，表示为建立外阴影；为false(0) ，表示为建立内阴影。6.FlipH：将元素水平反转7.FlipV：将元素垂直反转8.Glow ：建立外发光效效果Glow(Color=?, Strength=?)Color ：是指定发光的颜色。Strength ：光的强度，可以是1 到 255 之间的任何整数，数字越大，发光的范围就越大。9.Gray ：去掉图像的色彩，显示为黑白图象10. Invert ：反转图象的颜色，产生类似底片的效果11.Light ：放置光源的效果，可以用来模拟光源在物体上的投影效果注意：此效果需.要用 JS 设置光的位置和强度。12. Mask

15、：建立透明遮罩Mask(Color=?) Color：设置底色，让对象遮住底色的部分透明。13. RevealTrans ：建立切换效果RevealTrans(Duration=?, Transition=?)Duration ：是切换时间，以秒为单位。Transtition ：是切换方式，可设置为从0 到 23。注意：如果做页面间的切换效果，可以在区加上一行代码：。如果用在页面里的元素必须配合 JS 使用。14.Shadow：建立另一种阴影效果Shadow(Color=?, Direction=?) Color：是指阴影的颜色。Direction：是设置投影的方向，0 度代表垂直向上，然后每45 度为一个单位。15.Wave：波纹效果Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否显示原对象， 0 表示不显示，非0 表示要显示原对象。Freq ：设置波动的个数。LightStrength：设置