网页设计-CSS语法总整理

基本语法====================================
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 细明体 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>

文字属性一览================================
color : #999999 /*文字色彩*/
font-family : 细明体 /*文字字型*/
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 /*文字置中对齐*/

背景语法===================================
<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景图片*/
background-repeat : no-repeat; /*不重复排列*/
background-position : 90 90; /*背景图片x与y轴的位置*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>

背景属性一览================================
background-color:#F5E2EC /*背景色彩*/
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轴的位置*/

连结语法====================================
<style type=text/css>
<!--
A:link/*超连结*/
{color : #999999 ; /*文字色彩*/}                                      
A:visited/*浏览过的超连结*/
{color : #999999 ; /*文字色彩*/}                                      
A:active/*按下连结*/
{color : #999999 ; /*文字色彩*/}                                
A:hover/*滑鼠移至连结*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗体*/
-->
</style>

连结属性一览==================================
A/*所有超连结*/
A:link/*超连结文字格式*/
A:visited/*浏览过的连结文字格式*/
A:active/*按下连结的格式*/
A:hover/*滑鼠移至连结*/
text-decoration:none;/*删除连结线*/}
{cursor:s-resize;/*滑鼠指标样式*/
font-weight:bold; /*文字粗体*/
border : 1px dotted #cc3300 ; /*文字框线*/}

滑鼠指标样式一览===============================
cursor:crosshair 十字型 cursor:s-resize 箭头朝下
cursor:move 十字箭头 cursor:e-resize 箭头朝右
cursor:help 加一问号 cursor:w-resize 箭头朝左
cursor:n-resize 箭头朝上 cursor:ne-resize 箭头朝右上
scursor:nw-resize 箭头朝左上 cursor:text 文字I型
cursor:se-resize 箭头斜右下 cursor:sw-resize 箭头斜左下
cursor:wait 漏斗 cursor:nono  预设

彩色卷轴=======================================
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*卷轴颜色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*卷轴左与上内边框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*卷轴右与下内边框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*卷轴左与上外边框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*卷轴右与下外边框*/
SCROLLBAR-ARROW-COLOR: #336699; /*卷轴箭头*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*卷轴底色*/
}
-->
</style>

删除卷轴=====================================
<style type=text/css>
<!--
BODY{overflow:hidden; /*删除卷轴*/}
-->
</style>

<style type=text/css>
<!--
BODY{overflow-x:hidden; /*删除水平卷轴*/}
-->
</style>

<style type=text/css>
<!--
BODY{overflow-y:hidden; /*删除垂直卷轴*/}
-->
</style>

滑鼠移过连结位移============================
<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
说明:
在a:hover 滑鼠移至连结的属性做文字位置的变化
top:1px;left:1px 位移数值
right:1px;bottom:1px 可改变位移方向

表格透明效果================================
<style type=text/css>
<!--
table{FILTER: Alpha(opacity=60);/*表格透明*/}
-->
</style>
说明:
opacity=60 设定透明度(值越小越透明)

外部呼叫================================
<link rel=stylesheet type="text/css" href="档名.css">

更改滑鼠================================
<style type="text/css">
<!--
body {cursor:url("滑鼠网址"),url("滑鼠网址"),text;}
-->
</style>

*须为ani档及cur档