CSS Links
21/05/2019
Trong CSS, Thẻ link được style theo nhiều cách khác nhau.
Text LinkText LinkLink ButtonLink Button
Styling links
Trong CSS, thẻ link có thể được style với bất kì thuộc tính nào (size, color, background,...)
Ví dụ:
a {
color: red;
}
Ngoài ra, Link có thể được CSS theo trạng thái mà nó đang có, có 4 trạng thái cơ bản:
- a:link - trạng thái bình thường, user chưa nhấn chuột vào (unvisited)
- a:visited - thẻ link này user đã nhấn chuột vào (visited)
- a:hover - khi user đưa chuột lên thẻ link
- a:active - thời điểm khi thẻ link đang được click vào
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Khi style CSS cho thẻ link, có một số quy tắc :
- a:hover PHẢI ở sau a:link and a:visited
- a:active PHẢI ở sau a:hover
Text Decoration
Thuộc tính text-decoration thường được dùng để remove underline cho thẻ link.
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Background Color
Thuộc tính background-color thường được dùng để thiết lập màu nền cho thẻ link.
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Nâng cao - Link Button
Ví dụ dưới đây cho chúng ta thấy với CSS, ta có thể style thẻ link thành 1 nút button:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Kết quả hiển thị:
Bài học CSS Links đến đây là kết thúc. Chúc các bạn học tốt !
