CSS基本語法總整理

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檔