【CSS】【16】設定超連結的CSS樣式

技術小胖子發表於2017-11-08
CSS
超連結是網頁上最普通的元素，通過超連結能夠實現頁面的跳轉、功能的啟用等，因此超連結也是與使用者打交道最多的元素之一。在HTML語言中，超連結是用<a>標記來實現的，例如<a href=”www.iteye.com”>JAVA網站</a>，預設情況下超連結統一為藍色且有下劃線，被點選過的超連結則為紫色並且也有下劃線。可以點選本段的“JAVA網站”體驗一下。
一、偽類別概念：
      到目前我們已瞭解標記選擇器、類別選擇器、ID選擇器，其中類別選擇器使用.所標記（即div.intro就表示定義類別為intro的塊），而類似a:link或a:hover稱之為偽類別。
二、超連結的偽類別屬性：
a:link 超連結的普通樣式，即正常瀏覽狀態的樣式
a:visited 超連結被點選過後的樣式
a:hover 滑鼠經過超連結上時的樣式
a:active 在超連結上單擊時的樣式
三、舉例：
1、HTML內容：
<body>

   <a href=””>首頁</a>

   <a href=””>簡介</a>

   <a href=””>聯絡方式</a>

</body>
此時由於沒有設定任何樣式，其展示為HTML的預設樣式，效果如下：

221107124.jpg

2、CSS內容：

（1）設定網頁背景色為淡藍色

body

{

    background-color:#6699FF;

}

（2）設定字型為14畫素，實邊框，背景色為暗紅色，去除超連結的下劃線，為了美觀為其設定相應的間距

a

{

   font-size:14px;

   border:1px;

   background-color:#663333;

   text-decoration:none;

   padding:4px;

   margin:4px;        

}

（3）設定超連結普通樣式和超連結被單擊過後的樣式，使左、上邊框顏色比右、下邊框顏色深一些，字型設定為白色

a:link, a:visited

{

   color:#FFFFFF;

   border:solid;

   border-color:#330000 #336600 #336600 #330000;

}

（4）設定滑鼠在超連結上和單擊時的樣式，使左、上邊框顏色比右、下邊框顏色淺一些，字型設定為紅色

a:hover, a:active

{

   color:#FF0000;

   border:solid;

   border-color:#336600 #330000 #330000 #336600;

}

效果如下：

221119574.jpg

前兩個是超連結普通狀態樣式，後一個是滑鼠在超連結上的樣式。




     本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261767，如需轉載請自行聯絡原作者



相關文章