Sử dụng các bộ chọn giả CSS, cụ thể là:active,:hover,:link và:đã thăm, chúng ta có thể tạo kiểu cho các trạng thái khác nhau của một liên kết. Để có chức năng phù hợp, thứ tự của các bộ chọn này được cung cấp bởi:-:link,:đã thăm,:hover,:hoạt động.
Cú pháp
Cú pháp của thuộc tính CSS text-indent như sau -
a:(pseudo-selector) {
/*declarations*/
} Ví dụ
Các ví dụ sau minh họa kiểu dáng của các trạng thái khác nhau của liên kết -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: 20px;
display: flex;
float: left;
}
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: yellowgreen;
}
a:hover {
color: orange;
text-decoration: wavy underline;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Khi di chuột qua liên kết đầu tiên, chúng tôi nhận được kết quả sau -
Trong khi nhấp vào 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 {
display: flex;
float: left;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
font-size: 1.1em;
}
a:link {
text-decoration: none;
}
a:visited {
color: blueviolet;
}
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Khi di chuột qua liên kết đầu tiên, chúng tôi nhận được kết quả sau -
Trong khi nhấp vào liên kết đầu tiên, kết quả sau sẽ được trả về.
