· a /*所有超級連結*/
· a:link /*超級連結文字格式*/
· a:visited /*瀏覽過的連結文字格式*/
· a:active /*按下連結的格式*/
· a:hover /*滑鼠移至連結*/
· 滑鼠游標樣式:
· 十字型 cursor:crosshair
· 箭頭朝下 cursor:s-resize
· 十字箭頭 cursor:move
· 箭頭朝右 cursor:e-resize
· 加一問號 cursor:help
· 箭頭朝左 cursor:w-resize
· 箭頭朝上 cursor:n-resize
· 箭頭朝右上 cursor:ne-resize
· 箭頭朝左上 cursor:nw-resize
· 文字I型 cursor:text
· 箭頭斜右下 cursor:se-resize
· 箭頭斜左下 cursor:sw-resize
· 漏鬥 cursor:wait
· 游標圖案(IE6) p {cursor:url("遊標檔案名稱.cur"),text;}
連結樣式範例:
套用"文字屬性"來做超級連結的效果
英文變大寫oecspace粗體,滑鼠移動過來看範例效果.按下去檢視文法
套用"邊框屬性"來做超級連結的效果
用了下邊框滑鼠移動過來看範例效果,按下去檢視文法
連結樣式範例三之立體按鈕效果
按下去看範例效果和檢視文法
單純的文字連結,只用CSS就可以變成特別的立體按鈕
width: 2cm;/* 連結寬度範圍*/
代表連結文字的寬度範圍,就是說按鈕效果的大小
如果你不設定這行按鈕就會依你的連結文字多與少而變得不規則
複製下方文法於< head>之間
你就會看到網頁所有連結都會變成立體按鈕喔!
同一網頁設定不同滑鼠移到連結效果:
一般用a:hover/*滑鼠移至連結*/只能讓網頁所有連結都引用這個動作
如何讓同一個網頁使用多個hover滑鼠移到連結的效果?往下看吧!!
多重連結效果:按此拷貝文法
滑鼠游標樣式可運用在任何標籤.例如:
整個網頁body{cursor:e-resize}
所有表格內table{cursor:e-resize}
使用圖案滑鼠游標例如:
body {cursor:url("mything.cur"),url("mything.cur"),text;}
當無法處理游標名單的第一個游標,則會以第二個游標代替
若無法處理任何定義的游標,最後便以一般游標text顯示 (圖案滑鼠游標寫法是W3C發布的標準)
|X| 大部份常寫為 cursor:url(img/cu*_*4.*ni) 這是錯誤的
CSS串聯樣式表教學『框線屬性一覽』:
· border-top : 1px solid #6699cc; /*上框線*/
· border-bottom : 1px solid #6699cc; /*下框線*/
· border-left : 1px solid #6699cc; /*左框線*/
· border-right : 1px solid #6699cc; /*右框線*/
·
以上是建議書寫方式,但也可以使用一般的方式 如下:
· border-top-color : #369 /*設定上框線top色彩*/
· border-top-width :1px /*設定上框線top寬度*/
· border-top-style : solid/*設定上框線top樣式*/
·
其它框線樣式
· solid /*實線框*/
· dotted /*虛線框*/
· double /*雙線框*/
· groove /*立體內凸框*/
· ridge /*立體浮凸框*/
· inset /*凹框*/
· outset /*凸框*/