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 設定透明度(值越小越透明)


    資料來源:糖糖OCE
    http://www.hsiu28.net/
    資料篇排:小光
    ----------------------
    個人網:
    http://www.352661.org/