Tạo kiểu, Viết CSS cho Link

Trong bài hướng dẫn tự học CSS này, bạn sẽ học cách viết CSS để tạo kiểu cho các trạng thái khác nhau của một đường link (liên kết).

Tạo kiểu các link với CSS

Link (liên kết) hoặc siêu liên kết là một phần thiết yếu của một trang web.

Nó cho phép khách truy cập điều hướng qua lại các trang trên (và ngoài) 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.

Một liên kết có bốn trạng thái khác nhau:

• link
• visited
• active
• hover

Bốn trạng thái 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 Selector sau đây.

• a:link – Dùng để tạo kiểu cho liên kết thông thường, chưa được click
• a:visited – Dùng để tạo kiểu cho liên kết đã được người dùng truy cập
• a:active – Dùng để tạo kiểu cho các liên kết khi chúng được nhấp vào.
• a:hover – Dùng để tạo kiểu cho các liên kết khi di chuột qua

Bạn có thể chỉ định bất kỳ thuộc tính CSS nào bạn muốn, ví dụ: Màu sắc, phông chữ, nền, đường viền, v.v. cho mỗi 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 thông thường.

Đây là một ví dụ

HTML:

<a href="https://niithanoi.edu.vn">Học Lập trình</a>

CSS:

a:link {    /* Link chưa được truy cập */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* Link đã truy cập */
    color: #ff00ff;
}
a:hover {    /* Di chuyển qua link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* Link được kích hoạt */
    color: #00ffff;
}

Thứ tự mà bạn đang đặt kiểu cho các trạng thái liên kết khác nhau rất quan trọng.

Bởi vì những gì được viết ở cuối cùng được ưu tiên hơn các kiểu được định nghĩa trước đó.

Lưu ý: Nói chung, thứ tự của chúng nên như sau: link, :visited, :hover, :active, :focus để có thể hoạt động đúng

Viết CSS tạo kiểu cho các link

Trong tất cả các trình duyệt web chính như Chrome, Firefox, Safari, v.v., các liên kết trên các trang web đều 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 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 unvisited link có màu xanh, gạch chân.
• Một visited link có màu tím, gạch chân.
• Một active link có màu đỏ, gạch chân.

Tuy nhiên, không có thay đổi về sự xuất hiện của liên kết trong trường hợp trạng thái di chuột (hover).

Nó vẫn có màu xanh lam, tím hoặc đỏ tùy thuộc vào trạng thái (nghĩa là không được theo dõi, truy cập hoặc hoạt động) mà nó đang ở.

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 mặc định của nó.

Thiết lập màu của link

Chỉ cần sử dụng thuộc tính màu sắc trong CSS để xác định màu bạn chọn cho trạng thái khác nhau của liên kết.

Nhưng khi chọn màu, đảm bảo rằng người dùng có thể phân biệt rõ ràng giữa văn bản và liên kết thông thường.

Hãy thử ví dụ sau để hiểu cách thức hoạt động của nó:

HTML:

<a href="https://niithanoi.edu.vn">Học Lập trình</a>

CSS:

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

Xóa phần gạch chân mặc định khỏi các 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 tex-decoration trong CSS để loại bỏ nó.

Note: Thực tế thì các trang web hiện đại thường thể hiện các đường link bằng màu sắc, không có gạch chân, khi hover thì sẽ có màu sắc khác.

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ư background color, bottom boder, bold, v.v. để làm cho nó nổi bật hơn văn bản bình thường tốt hơn một chút.

Ví dụ sau đây cho thấy cách xóa hoặc đặt gạch chân 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;
}

Tạo liên kết văn bản trông giống như các nút bấm

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 bạn trông giống như nút bấm bằng CSS.

Để làm điều này, chúng ta cần sử dụng thêm một số thuộc tính CSS như:
background-color, border, display, padding …

Bạn sẽ tìm hiểu về các tính chất này một cách chi tiết trong các bài viết sắp tới.

Hãy xem ví dụ sau và xem nó thực sự hoạt động như thế nào:

HTML:

<p><a href="#">CSS cho Liên Kết</a></p>

CSS:

a {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #00b3ad;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;
    border-radius: 30px;
}
a:link, a:visited {
    color: white;
    background-color: #003999;
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #003999;
}

Như vậy là bài viết này mình vừa hướng dẫn bạn cách tạo kiểu cho các đường link (Viết CSS cho link).

Hãy luyện tập lại các ví dụ và thay đổi để thực sự thuần thục bạn nhé, học lập trình quan trọng nhất là thực hành đó.

>> Tham khảo ngay KHÓA HỌC LẬP TRÌNH FULL STACK nếu bạn thực sự muốn học lập trình một cách bài bản

Chúc bạn học tốt.

Học tiếp: CSS List

Đọc thêm: CSS Text