Embedded Files
Các trạng thái của liên kết. Một liên kết sẽ luôn có bốn trạng thái:
Trạng thái link – nếu người dùng chưa từng viếng thăm địa chỉ trang web của liên kết này
Trạng thái visited – nếu người dùng đã từng viếng thăm địa chỉ trang web của liên kết này
Trạng thái hover – khi người dùng dí con chuột vào liên kết
Trạng thái active – khi người dùng nhấn con chuột vào liên kết
Ta có thể định dạng cho liên kết dựa theo trạng thái của nó. Ví dụ mình muốn:
Nếu bạn chưa từng vào http://utnhan.wap.sh/ thì liên kết sẽ có (MÀU ĐEN)
Nếu bạn đã từng vào http://utnhan.wap.sh/ thì liên kết sẽ có (MÀU ĐỎ)
Khi dí chuột vào liên kết này thì nó sẽ có (MÀU XANH)
Khi nhấn chuột vào liên kết này thì nó sẽ có (MÀU VÀNG)
Chúng ta sử dụng cú pháp:
<style type="text/css">
.abc:link{
color:black;
}
.abc:visited{
color: red;
}
.abc:hover{
color: green;
}
.abc:active{
color:yellow;
}
</style>
<a href="http://utnhan.wap.sh/" class="abc" target="_blank">Liên kết đến trang</a>
Lưu ý: Khi ta định dạng cho liên kết theo trạng thái, thì các trạng thái phải được sắp xếp theo đúng thứ tự từ trên xuống dưới là: link, visited, hover, active
Tạo nút liên kết (Link Button). Chúng ta có thể sử dụng các thuộc tính đã học như: background-color, color, margin, padding, border,.... kết hợp với các trạng thái của liên kết để tạo ra liên kết có hình dạng giống như một cái nút. Ví dụ dưới đây là đoạn CSS định dạng liên kết cái nút màu trắng có viền xanh khi rê chuột vào thì chuyển sang màu xanh.
<style type="text/css">
.lienket{
background-color: white;
color: black;
border: 2px solid #73AD21;
border-radius:5px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Lucida Sans Unicode";
}
.lienket:hover{
background-color: #73AD21;
color:white;
}
.lienket:active{
background-color: green;
border-color: green;
}
</style>
<a href="http://utnhan.wap.sh/" class="lienket" target="_blank">Liên kết đến trang</a>
Google Sites
Report abuse