CSS串聯樣式表教學『連結屬性一覽』

來源:互聯網
上載者:User
·     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 /*凸框*/

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.