CSS cho phép chúng ta tạo kiểu cho các liên kết như mong muốn. Chúng tôi có thể định dạng văn bản, bằng cách thêm màu, nền, tăng kích thước, v.v. Hơn nữa, có thể thêm các hoạt ảnh để tạo hiệu ứng hình ảnh dễ chịu.
Để 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 kiểu của các liên kết với 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> Đầu ra
Điều này cho kết quả sau -
Khi di chuột qua liên kết thứ hai, chúng tôi nhận được kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
Khi di chuột qua liên kết thứ hai, chúng tôi nhận được kết quả sau
