Go to page2.html
page2.html
Link States
page2.html
CSS link states:
- a:link
- a:visited
- a:hover
- a:focus
- a:active
Go to page1.html
Thêm một ví dụ đơn giản nữa về 5 trạng thái của một liên kết:
link-states-example.css
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}
link-states-example.html
Link States
CSS Link State Example:
There are several browsers available, such as
Mozilla Firefox,
Google Chrome, and
Microsoft Edge.
2- CSS text-decoration
Theo mặc định các liên kết thường có một "đường gạch dưới" [underline]. Chúng ta thường hay sử dung CSS text-decoration với giá trị none để loại bỏ "đường gạch dưới" [underline] này.
Các giá trị có thể của CSS text-decoration:
- overline
- line-through
- underline
- none
text-decoration-example.css
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: #BAE498;
}
a:focus {
text-decoration: underline;
font-weight: normal;
}
a:active {
text-decoration: underline;
color: red;
font-weight: bold;
}
text-decoration-example.html
CSS Link text-decoration
CSS text-decoration
This is a Link
Xem thêm:
Apple Facebook Google