Chúng tôi có thể tạo kiểu liên kết theo yêu cầu của chúng tôi. Chúng tôi khuyến nghị rằng các liên kết có kiểu phân biệt chúng với văn bản bình thường. Các kiểu liên kết mặc định cho các trạng thái liên kết khác nhau như sau -
| Trạng thái liên kết | Màu sắc |
|---|---|
| Đang hoạt động | # EE0000 |
| Tiêu điểm | # 5E9ED6 hoặc màu viền xanh lam tương tự trong trường hợp Windows và Mac, Đường viền # F07746 dành cho Linux trong khi màu chữ vẫn giữ nguyên |
| Di chuột | # 0000EE |
| Liên kết | # 0000EE |
| Đã ghé thăm | # 551A8B |
Lưu ý - Các màu trên có thể thay đổi với các phiên bản trình duyệt mới hơn. Để có chức năng thích hợp, thứ tự của các bộ chọn giả được cung cấp bởi:-:link,:đã thăm,:hover,:hoạt động.
Ví dụ
Các ví dụ sau minh họa các kiểu liên kết chuẩn
<!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://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Trạng thái hoạt động của liên kết được hiển thị trong đầu ra sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
Khi chúng tôi nhấp vào "2", chúng tôi nhận được kết quả sau
