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