Bài 15: CSS Links (Định kiểu liên kết với CSS)

Trong CSS, các liên kết (hyperlink) có thể được định kiểu theo nhiều cách khác nhau, như ví dụ bên dưới:
Liên kết dạng Text
Liết kết Button

---

Tạo kiểu cho các liên kết

Các liên kết có thể được tạo kiểu với bất kỳ thuộc tính nào của CSS như color, font-family, background, v.v.

Ví dụ 1

a {
color: hotpink;
}

Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.

Bốn trạng thái liên kết là:

• a:link – liên kết khi người dùng chưa truy cập vào
• a:visited – liên kết khi người dùng đã truy cập vào
• a:hover – liên kết khi người dùng di chuyển con trỏ chuột qua nó
• a:active – liên kết thời điểm nó được kích vào

Ví dụ 2

 /*link chưa ghé thăm */
a:link {
color: red;
}/*link đã ghé thăm */
a:visited {
color: green;
}
/*link chuột di qua */
a:hover {
color: hotpink;
}
/*link được chọn*/
a:active {
color: blue;
}

Khi tạo kiểu cho một số trạng thái liên kết, có một số quy tắc như sau:

• a:hover PHẢI đứng sau a:link và a:visited
• a:active PHẢI đứng sau a:hover

---

Thuộc tính Text Decoration

Thuộc tính text-decoration được dùng để loại bỏ dấu gạch chân ra khỏi liên kết.

Ví dụ

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

---

Thuộc tính Background Color

Thuộc tính background-color dùng để xác định màu nền cho liên kết.

Ví dụ

a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}

---

Nâng cao – Nút liên kết

Ví dụ sau đây kết hợp một số thuộc tính CSS để hiển thị các liên kết dưới dạng nút:

Ví dụ

 
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;
}