:::連結文字變色:::
    
   

1. 要連結變色的文字需設定成「自動」。

2. 顏色更改可用數值( 大小寫均可 ),如:000099 就會顯示是深藍色,ffff00 也會顯示紅色,與 red 一樣。

3. 加在網頁後,全頁連結的文字都會產生變色效果,如某段連結文字不想隨之而變,只要把它設定顏色即可。

  
 ( 1. 連結時無底線 )貼在<head> 這裡 </head>••••••••﹝範例﹞ ▲TOP

可修改的部份:(在 HTML 修改色彩)
A:link {color: #666666}
→一般連結:灰色
A:link{text-decoration: none} →連結無底線
A:visited {color: #666666}
→參觀過的連結:灰色
A:visited{text-decoration: none}  →參觀過無底線
A:active {color: #666666}
→正在執行的連結:灰色
A:hover {color: #ff3300} →滑鼠接觸連結上:紅色

A:hover{position:relative;top:1px;left:1px;} →接觸時連結字體會有下壓的效果,數目越大,位置移動就會越大。

   
( 2. 連結時有底線與頂線 )<head> 這裡 </head> •••••﹝範例﹞ ▲TOP

      
( 3. 連結時底線與頂線是虛線 )<head> 這裡 </head> •••••﹝範例﹞ ▲TOP

可修改的部份:(在 HTML 修改)

border-bottom-style : dotted;

border-bottom-color : #ffcc00; → 連結底線的色彩

border-bottom-width : 1px; → 連結底線的寬度,可改1~5。

border-top-style : dotted;

border-top-color : #ffcc00; → 連結頂線的色彩

border-top-width : 1px;  → 連結頂線的寬度,可改1~5。

          
( 4. 連結時有底線、頂線與標記 )<head> 這裡 </head> •••••﹝範例﹞ ▲TOP

可修改的部份:(在 HTML 修改)

a:hover {color:#fba900; text-decoration:underline overline;background-color:#ffffac;} → 頂線與底線的色彩,標記的色彩。

              
( 5. 連結線是方框 )<head> 這裡 </head> •••••﹝範例﹞ ▲TOP

可修改的部份:(在 HTML 修改)
border-top-style : solid;  → 頂框線
border-left-style : solid; → 左邊的框線 
border-right-style : solid;  → 右邊的框線
border-bottom-style : solid;  → 底框線
border-color : #ffcc00 #ffcc00 #ffcc00 #ffcc00;  → 上、左、下、右四邊色彩
border-width : 1px 1px 1px 1px;  →  上、左、下、右四邊框線寬度
padding-top : 2px; →下壓時頂框線與字體的距離
padding-left : 1px; →下壓時左框線與字體的距離
padding-right : 1px; →下壓時右框線與字體的距離
padding-bottom : 1px; →下壓時底框線與字體的距離

    
( 6. 連結線是虛線框 )<head> 這裡 </head>•••••﹝範例﹞ ▲TOP

可修改的部份:(在 HTML 修改)

1. 與「4.連結線是方框」相同,只是 「solid」 改成 「dotted」。

  
( 7. 三條連結線 )<head> 這裡 </head>•••••﹝範例﹞ ▲TOP

可修改的部份:(在 HTML 修改)

1. 第一個色彩是連結字的色彩,第二個色彩是滑鼠接觸連結字的變色。

 --隨意玩網--語法練習--
△TOP