15. Link trong CSS

Link trong CSS: bạn có thể tùy chỉnh kiểu liên kết (link) để thay đổi cách chúng hiển thị và tương tác với người dùng. Dưới đây là một số cách bạn có thể tùy chỉnh liên kết trong CSS:

1. Màu Chữ Cho Liên Kết (Link Color): Điều chỉnh màu sắc của văn bản liên kết.

css

/* Đặt màu chữ cho liên kết là màu xanh dương */
a {
    color: blue;
}

/* Đặt màu chữ cho liên kết khi hover là màu đỏ */
a:hover {
    color: red;
}

2. Gạch Chân Chữ (Text Decoration): Điều chỉnh việc gạch chân liên kết khi hover hoặc khi đã được truy cập.

css

/* Loại bỏ gạch chân chữ cho liên kết */
a {
    text-decoration: none;
}

/* Thêm gạch chân khi hover vào liên kết */
a:hover {
    text-decoration: underline;
}

/* Thêm gạch chân khi liên kết đã được truy cập */
a:visited {
    text-decoration: underline;
}

3. Biểu Tượng Chuột Trỏ (Cursor): Điều chỉnh kiểu biểu tượng chuột trỏ khi di chuột qua liên kết.

css

/* Đặt biểu tượng chuột trỏ là bàn tay khi hover vào liên kết */
a:hover {
    cursor: pointer;
}

4. Kiểu Nền Liên Kết (Background): Điều chỉnh kiểu nền khi hover hoặc khi liên kết đã được truy cập.

css

/* Thêm nền màu khi hover vào liên kết */
a:hover {
    background-color: lightgrey;
}

/* Thêm nền màu khi liên kết đã được truy cập */
a:visited {
    background-color: lightblue;
}

5. Chuyển Đổi Thông Qua Màu Sắc (Color Transition): Sử dụng thuộc tính transition để tạo hiệu ứng mượt mà khi màu chữ thay đổi khi hover.

css

/* Tạo hiệu ứng chuyển đổi màu sắc mượt mà khi hover vào liên kết */
a {
    color: blue;
    transition: color 0.3s ease;
}

a:hover {
    color: red;
}

Nhớ rằng, tùy chỉnh liên kết trong CSS giúp bạn tạo ra trải nghiệm người dùng tốt hơn và làm cho các liên kết trên trang web của bạn trở nên hấp dẫn hơn.