HTML之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: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; /*             文字右对齐 */ 
text-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-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; /*                 小写英文字母 */ 
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; /*       背景颜色 */ 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 轴重复排列 */ 
指定背景位置
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:visited /*       浏览过的链接文字格式 */ 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-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 /*            设置上框线 top  颜色*/ 
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; /*          右边界值 */ 
margin-bottom:10px; /*        下边界值 */ 
margin-left:10px; /*          左边界值*/ 
九、CSS滤镜属性
Filter    ：在样式中加上滤镜特效。 由于此属性内容比较多， 我们将到下一章单独对滤镜介绍。 1.Alpha ：设置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, Finis hY=?)  
Opacity ：透明度级别，范围是 0-100 ，0 代表完全透明， 100 代表完全不透明。 FinishOpac ity ：设置渐变的透明效果时，用来指定结束时的透明度，范围也是 0 到 100 。Style ：设 置渐变透明的样式，值为 0 代表统一形状、 1 代表线形、 2 代表放射状、 3 代表长方形。 StartX  和StartY ：代表渐变透明效果的开始 X 和Y 坐标。 FinishX    和FinishY  ：代表渐变透明 效果结束 X和Y 的坐标。
2.BlendTrans  ：图像之间的淡入和淡出的效果
BlendTrans(Duration=?) Duration         ：淡入或淡出的时间。 注意：这个滤镜必须配合 JS 建立 图片序列，才能做出图片间效果。
3.Blru  ：建立模糊效果
Blur(Add=?, Direction=?, Strength=?) Add              ：是否单方向模糊，此参数是一个布尔值，  t rue （非 0）或 false  （0）。 Direction    ：设置模糊的方向，其中 0 度代表垂直向上，然后 每45 度为一个单位。  Strength   ：代表模糊的象素值。
4.Chroma ：把指定的颜色设置为透明
Chroma(Color=?) Color    ：是指要设置为透明的颜色。
5.DropShadow：建立阴影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color                ：指定阴影的颜色。 OffX ：指 定阴影相对于元素在水平方向偏移量，整数。   OffY ：指定阴影相对于元素在垂直方向偏移 量，整数。  Positive    ：是一个布尔值，值为 true （非 0）时，表示为建立外阴影；为 fals e(0) ，表示为建立内阴影。
6.FlipH  ：将元素水平反转
7.FlipV  ：将元素垂直反转
8.Glow ：建立外发光效效果 Glow(Color=?, Strength=?)  Color ：是指定发光的颜色。
Strength  ：光的强度，可以是 1 到255 之间的任何整数，数字越大，发光的范围就越大。
9.Gray ：去掉图像的色彩，显示为黑白图象
10.         Invert   ：反转图象的颜色，产生类似底片的效果
11.         Light  ：放置光源的效果，可以用来模拟光源在物体上的投影效果   注意：此效果需要用 JS 设置光的位置和强度。
12.         Mask：建立透明遮罩
Mask(Color=?) Color     ：设置底色，让对象遮住底色的部分透明。
13.         RevealTrans ：建立切换效果RevealTrans(Duration=?, Transition=?)  
Duration  ：是切换时间，以秒为单位。
Transtition     ：是切换方式，可设置为从 0 到23。
注意：如果做页面间的切换效果，可以在 <head>区加上一行代码： <Meta http-equiv=Page -enter content=revealTrans(Transition=?,Duration=?) > 。如果用在页面里的元素必须 配合 JS 使用。
14.  Shadow：建立另一种阴影效果  Shadow(Color=?, Direction=?) Color ：是指阴影的
颜色。
Direction   ：是设置投影的方向， 0 度代表垂直向上，然后每 45 度为一个单位。
15.         Wave：波纹效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add                 ：表示是否显示原对 象，0 表示不显示，非 0 表示要显示原对象。  Freq ：设置波动的个数。 LightStrength    ：设 置波浪效果的光照强度，从 0 到100。0 表示最弱， 100 表示最强。  Phase ：波浪的起始相 角。从0 到100 的百分数值。（例如：25 相当于 90 度，而50 相当于 180 度。） Strength   ： 设置波浪摇摆的幅度。
16.         Xray ：显现图片的轮廓， X 光片效果
注意：在使用 CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这 样没有区域的元素不能使用 CSS滤镜，对这样的元素我们可以设置元素的  Height  和Width 样式或坐标来实现。 "