css語法好好玩

有說明css的網站連結:

ＣＳＳ語法教學

常用ＣＳＳ樣式屬性

影音上傳教學 　奇摩影片分享

色碼表　

1.固定背景

background-attachment:
fixed ．當拉動捲軸時，背景圖不會移動
scroll ．當拉動捲軸時，背景圖跟著移動(預設選項)

background-color:black．背景色，如沒有設定背景圖或背景圖不能顯示，背景顏色才出來

background-image:url(背景圖網址)．不用背景圖可刪除此列

background-repeat: repeat．　背景圖自動複制並填滿整個網頁畫面，只適合有背景圖時，不用可改為no-repeat

background-attachment: fixed．　當拉動捲軸時，背景圖不會移動，只適合有背景圖時，不用可刪除此列

背景語法範例：(背景圖填滿整個頁面，而且拉動捲軸時，背景圖不會移動。)

body{
background-color:背景色;
background-image:url(背景圖網址);
background-repeat: repeat;
background-attachment: fixed;}

玄音測試版的固定背景語法：800*600的解析度螢幕，自製背景大小為780*440即可。

在ＣＳＳ內容，找到下面這兩個項目語法，改一下網址跟固定值即可固定背景。

/*Background*/　（基本設定的背景圖改成自製的背景圖）

body{background:#000000 url(http://home.pchome.com.tw/good/zz14723/cloud/12-1.jpg ) no-repeat;}

 

/*Background image for whole page*/　（自選背景圖片）

body {background-image: url(http://home.pchome.com.tw/good/zz14723/cloud/12-1.jpg); background-repeat:repeat;background-attachment: fixed;}　（背景固定值為fixed）

2.改變滑鼠指標 

以下是一般直接貼入CSS語法的不同滑鼠指標效果
cursor:auto　文字I型
cursor:crosshair　十字型
cursor:default　箭頭
cursor:pointer　手指
cursor:e-resize　箭頭朝右
cursor:ne-resize　箭頭朝右上
cursor:nw-resize　箭頭朝左上
cursor:n-resize　箭頭朝上
cursor:se-resize　箭頭斜右下
cursor:sw-resize　箭頭斜左下

cursor:s-resize　箭頭朝下
cursor:w-resize　箭頭朝左
cursor:move　十字箭頭

cursor:text　文字I型
cursor:wait　漏斗
cursor:help　加一問號

-------------------------------------

改變滑鼠指標語法範例：（滑鼠指標是十字；指向連結時，會改為疑問指標）

body{cursor:crosshair}
a:hover{cursor:help}

覆製上面語法或套用不同指標效果，然後直接貼在ｃｓｓ底下就可以了。

IＥ 6 專用樣式---改變滑鼠指標為圖片

目前只能在 IE 6 中才能顯示正常（不過一般都看得見），滑鼠圖的製作方法要運用Microangelo軟件。

body 整個網頁
a:hover 指向連結時

改變滑鼠指標為圖片語法範例：語法直接加入ｃｓｓ最底端就可以了。

body{cursor:URL(http://homelf.kimo.com.tw/zz14723/cursor34.ani);}

a:hover{cursor:URL(http://homelf.kimo.com.tw/zz14723/cursor27.ani);}

注意：

游標副檔名需是：.ani(動畫圖片) 或 .cur(靜態圖片)

http://home.kimo.com.tw/a815182/ani/1_index.htm　滑鼠游標圖案素材

http://sheng.phy.nknu.edu.tw/wjs-13ani.htm　阿盛滑鼠游標圖素材

或者自己做游標圖：MicroAngelo 5 + 中文化程式　軟體下載

奇摩網頁可以上傳游標檔案圖。

3.捲軸變色

捲軸顏色生成器：http://hw-driver-bal.nctu.net:52833/pub/slime/teach/Bar.htm

html{
SCROLLBAR-FACE-COLOR: 色碼;                     /*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:色碼;              /*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: 色碼;               /*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: 色碼;                 /*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: 色碼;      /*設定右立體面顏色*/  
SCROLLBAR-ARROW-COLOR: 色碼;                 /*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: 色碼;                   /*設定軸軌的顏色*/
}

 捲軸變色語法範例：將語法直接貼在CSS最底端即可。

html{

SCROLLBAR-FACE-COLOR: #000000;

 SCROLLBAR-HIGHLIGHT-COLOR: #6c48d8;

 SCROLLBAR-SHADOW-COLOR: #0048fc;

 SCROLLBAR-3DLIGHT-COLOR: #000000;

 SCROLLBAR-ARROW-COLOR: #d8b4d8;

 SCROLLBAR-TRACK-COLOR: #000048;

 SCROLLBAR-DARKSHADOW-COLOR: #6cd800;

 SCROLLBAR-BASE-COLOR: #480090

}

4.自訂欄位連結動畫。

點入自訂欄位，填上自訂欄位名稱，之後在自訂欄位內容貼上語法，不管是貼圖語法或連結語法就可以了。

5.文章標題前加圖片。

文章標題前面加圖片：（※小圖片大小最好在W31*H20以內）

小圖示、icon素材網站：http://a120.loxa.edu.tw/material/icon_01.htm

/*article content module*/

.yblogcnt .blgtitlebar {margin-bottom:12px;zoom:1;}

.yblogcnt .blgtitlebar h2 {font-size:126%;font-weight:bold;background:url(圖片網址) no-repeat;padding-left:32px;}

.yblogcnt .blgtitlebar h2 a {color:#標題字顏色; padding-right:5px;}

語法範例：(文章標題前面加圖片)

覆製下列語法，直接貼在ＣＳＳ底端即可。

/*article content module*/

.yblogcnt .blgtitlebar {margin-bottom:12px;zoom:1;}

.yblogcnt .blgtitlebar h2 {font-size:126%;font-weight:bold;background:url(http://tw.yimg.com/i/tw/blog/smiley/39.gif) no-repeat;padding-left:32px;}

.yblogcnt .blgtitlebar h2 a {color:#FFFFFF; padding-right:5px;}

※網址及標題字色碼可自行更換。

6.當滑鼠移到連結上時，無底線，字變紅色。

a: {font-family:"Comic Sans MS";font-size:10pt;color:色碼;font-weight:bold;text-decoration:none}   - 所有超連結

a:active {font-size:10pt;color:色碼;text-decoration:none}     -  執行中的連結

a:link  {font-size:10pt;color:色碼;text-decoration:none}         - 正常的連結

a:visited {font-size:10pt;color:色碼;text-decoration:none}    - 參觀過的連結

a:hover {font-size:110pt;color:色碼;position:relative;top:2px;left:2px;}    - 當滑鼠移到連結上的時候

 ---------------------------------------------------------------------------------
font-size:10pt - 字體大小，只需要更改10pt，如12pt就可以改變字體大小

如 : font-size:12pt

 text-decoration : none - 連結無底線，任選以下語法，將 none 更改就可以了

none(連結無底線)、underline(連結加底線)、overline(連結加頂線)、linethrough(連結加刪除線)、blink(連結閃爍)  

如 :text-decoration : blink (連結閃爍) 

-------------------------------------------------------------------------

語法範例：將下面語法覆製，貼在　/*Links*/　下面（覆蓋原先的設定）

a: {font-family:"Comic Sans MS";font-size:10pt;color:FFFFFF;font-weight:bold;text-decoration:none}

a,a:link,a:visited{color:#FFFFFF;}

a:hover {font-size:10pt;color:RED;text-decoration : NONE}

※色碼可以自行更改，寫英文的顏色也可以。

a:link→正常連結顏色

a:hover→游標滑過時變色

以上就是我列出的ＣＳＳ語法說明，祝福您玩的愉快。