資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法律學樣式連結使用 CSS 處理
CSS 允許我們根據需要為連結新增樣式。我們可以設定文字格式，包括新增顏色、背景、增加大小等。此外，還可以新增動畫以建立令人愉悅的可視效果。
為了獲得適當的功能，偽選擇器的順序為：:link、:visited、:hover、:active。
示例
以下示例說明如何使用 CSS 為連結新增樣式 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</body>
</html>輸出
這樣就可以得到以下輸出 −
當滑鼠懸停在第二個連結上時，我們會得到以下輸出 −
示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html>輸出
這樣就可以得到以下輸出 −
當滑鼠懸停在第二個連結上時，我們會得到以下輸出
更新時間：08-Jan-2020
141 次瀏覽
廣告