資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的標準連結樣式
我們可以根據需要為連結設定樣式。建議連結的樣式應使其與普通文字區分開來。不同連結狀態的預設連結樣式如下所示：
連結狀態 |
顏色 |
|---|---|
啟用 |
#EE0000 |
聚焦 |
Windows 和 Mac 系統下為 #5E9ED6 或類似的藍色陰影輪廓，Linux 系統下為 #F07746 輪廓，同時文字顏色保持不變 |
懸停 |
#0000EE |
連結 |
#0000EE |
已訪問 |
#551A8B |
注意 - 以上顏色可能會隨著瀏覽器新版本的釋出而改變。為了保證正常功能，偽選擇器的順序為：:link, :visited, :hover, :active。
標準連結
以下示例說明了標準連結樣式：
示例
讓我們現在看看程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://tutorialspoint.tw/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html>
非標準連結
我們在這裡設定了一個連結，並使用 text-decoration 屬性和 none 值刪除了文字修飾：
示例
讓我們現在看看程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
#one {
color: black;
text-decoration: none;
}
#two {
font-style: italic;
box-shadow: inset 0 0 8px coral;
}
table, td {
font-size: 1.4em;
padding: 8px;
text-align: center;
border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html>
使用 CSS 偽類操作連結
當我們使用 <a> 元素建立連結時，可以使用各種偽類來設定連結顏色、已訪問連結顏色、懸停、活動連結等。我們使用偽類實現了相同的效果：
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
示例
讓我們現在看看程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>
更新於: 2023-12-27
333 次瀏覽
廣告