css樣式怎抹做?

 css樣式要怎麼做?

 可以跟我說步驟嗎?

 這樣我會比較好記

   

2 Answers

Rating
  • Elaine
    Lv 5
    1 decade ago
    Favorite Answer

    註:全形<>原皆為半形因顯示關係故用全形

    ★css樣式基本語法★

    <style type=text/css>

    <!--

    body,table{

    color : #999999 ; /*文字色彩*/

    font-family : 細明體 ; /*文字字型*/

    font-size : 9pt /*文字大小*/

    }

    -->

    </style>

    *將css樣式基本語法放在網頁原始碼<title>抬頭</title>後</head>前就可以了!*

    如需新增則將屬性套用或修改到

    <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軸的位置*/

    2008-05-22 02:56:22 補充:

    ★屬性應用-連結語法★

    <style type=text/css>

    <!--

    A:link/*超連結*/

    {color : #999999 ; /*文字色彩*/}

    A:visited/*瀏覽過的超連結*/

    {color : #999999 ; /*文字色彩*/}

    A:active/*按下連結*/

    {color : #999999 ; /*文字色彩*/}

    2008-05-22 02:56:41 補充:

    A:hover/*滑鼠移至連結*/

    color : #000000 ; /*文字色彩*/

    font-weight:bold; /*文字粗體*/

    -->

    </style>

    ★屬性應用-連結屬性一覽★

    A/*所有超連結*/

    A:link/*超連結文字格式*/

    A:visited/*瀏覽過的連結文字格式*/

    A:active/*按下連結的格式*/

    A:hover/*滑鼠移至連結*/

    2008-05-22 02:57:09 補充:

    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 箭頭朝左

    2008-05-22 02:57:39 補充:

    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; /*捲軸顏色*/

    2008-05-22 02:57:58 補充:

    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>

    2008-05-22 02:58:15 補充:

    ★屬性應用-刪除捲軸★

    <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>

    2008-05-22 02:58:27 補充:

    ★屬性應用-滑鼠移過連結位移★

    <style type="text/css">

    <!--

    a:hover{position:relative;top:1px;left:1px;}

    -->

    </style>

    說明:

    在a:hover 滑鼠移至連結的屬性做文字位置的變化

    top:1px;left:1px 位移數值

    right:1px;bottom:1px 可改變位移方向

    2008-05-22 02:58:37 補充:

    ★屬性應用-表格透明效果★

    <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檔

    Source(s): 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊, 自己分享+經驗+糖糖OCE css應用資訊
  • 1 decade ago

    除非妳指名須要用到css的哪些樣式

    否則要跟妳說步驟也不知從何講起

    建議妳買書來看會比較快....

    市面上的書大同小異

    挑妳自己看得順的就好了

    我想花個兩三天基本的語法大概就可以懂了

    還有html語法也要多了解

    畢竟這兩個是密不可分的

    Source(s): me
Still have questions? Get your answers by asking now.