Ví dụ về kiểu liên kết CSS

Liên kết hoặc siêu liên kết là một phần thiết yếu của trang web. Nó cho phép khách truy cập điều hướng qua trang web. Do đó, tạo kiểu cho các liên kết đúng cách là một khía cạnh quan trọng của việc xây dựng một trang web thân thiện với người dùng

Xem hướng dẫn về liên kết HTML để tìm hiểu thêm về liên kết và cách tạo liên kết

Một liên kết có bốn trạng thái khác nhau — link, visited, active và hover. Bốn trạng thái này của một liên kết có thể được tạo kiểu khác nhau thông qua việc sử dụng các bộ chọn lớp giả neo sau đây

• a. liên kết - xác định kiểu cho các liên kết bình thường hoặc không được truy cập
• a. đã truy cập - xác định kiểu cho các liên kết mà người dùng đã truy cập
• a. di chuột - xác định kiểu cho một liên kết khi người dùng đặt con trỏ chuột lên nó
• a. hoạt động - xác định kiểu cho các liên kết khi chúng được nhấp vào

Bạn có thể chỉ định bất kỳ thuộc tính CSS nào bạn muốn. g. color, font,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

0,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

1, v.v. vào từng bộ chọn này để tùy chỉnh kiểu liên kết, giống như bạn làm với văn bản bình thường

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}

Thứ tự mà bạn thiết lập kiểu dáng cho các trạng thái liên kết khác nhau là rất quan trọng, bởi vì quy tắc kiểu dáng được xác định cuối cùng sẽ được ưu tiên hơn các quy tắc kiểu dáng được xác định trước đó

Ghi chú. Nói chung, thứ tự của các lớp giả phải như sau —

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

2,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

3,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

4,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

5,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

6 để chúng hoạt động bình thường

---

Sửa đổi kiểu liên kết tiêu chuẩn

Trong tất cả các trình duyệt web chính như Chrome, Firefox, Safari, v.v. liên kết trên các trang web có gạch chân và sử dụng màu liên kết mặc định của trình duyệt, nếu bạn không đặt kiểu dành riêng cho chúng

Theo mặc định, các liên kết văn bản sẽ xuất hiện như sau trong hầu hết các trình duyệt

• Một liên kết chưa được truy cập dưới dạng văn bản màu xanh được gạch chân
• Một liên kết đã truy cập dưới dạng văn bản màu tím được gạch chân
• Một liên kết hoạt động dưới dạng văn bản màu đỏ được gạch dưới

Tuy nhiên, không có thay đổi về giao diện của liên kết trong trường hợp trạng thái di chuột. Nó vẫn giữ nguyên màu xanh, tím hoặc đỏ tùy thuộc vào trạng thái nào (i. e. chưa được truy cập, đã truy cập hoặc đang hoạt động) họ đang ở trong

Bây giờ hãy xem cách tùy chỉnh các liên kết bằng cách ghi đè kiểu dáng mặc định của nó

Đặt màu tùy chỉnh của liên kết

Chỉ cần sử dụng thuộc tính CSS color để xác định màu bạn chọn cho các trạng thái khác nhau của liên kết. Nhưng khi chọn màu, hãy đảm bảo rằng người dùng có thể phân biệt rõ ràng giữa văn bản bình thường và liên kết

Hãy thử ví dụ sau để hiểu cơ bản nó hoạt động như thế nào

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Xóa gạch chân mặc định khỏi liên kết

Nếu bạn không thích gạch chân mặc định trên các liên kết, bạn chỉ cần sử dụng thuộc tính CSS

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

8 để loại bỏ nó. Ngoài ra, bạn có thể áp dụng kiểu dáng khác trên các liên kết như màu nền, viền dưới, phông chữ đậm, v.v. để làm cho nó nổi bật hơn một chút so với văn bản bình thường

Ví dụ sau đây cho thấy cách xóa hoặc đặt gạch dưới cho các trạng thái khác nhau của liên kết

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

---

Làm cho các liên kết văn bản trông giống như các nút

Bạn cũng có thể làm cho các liên kết văn bản thông thường của mình trông giống như nút bằng cách sử dụng CSS. Để làm được điều này, chúng ta cần sử dụng thêm một số thuộc tính CSS như

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

9,

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

1,

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

1,

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

2, v.v. Bạn sẽ tìm hiểu chi tiết về các thuộc tính này trong các chương sắp tới

Liên kết tạo kiểu CSS là gì?

4 trạng thái của liên kết là gì?

CSS nội tuyến với ví dụ là gì?