Định dạng liên kết <a> bằng CSS

Định dạng liên kết

Các liên kết trong trang (link trong website được tạo ra bởi thẻ <a>) bạn có thể điều chỉnh hiện thị bởi các thuộc tính CSS đã biết như (color, font-family, font-size, font-weight ...).

Ngoài ra có thể thiết lập thêm kiểu cho các link (liên kết) phụ thuộc vào trạng thái của link. Để làm điều này sử dụng pseudo class selector, cụ thể như sau:

• a:link - kiểu bình thường khi link chưa từng được bấm vào (mặc định chữ xanh, có gạch chân)
• a:visited - kiểu hiện thị khi link đã từng được truy cập
• a:active - hiện thị khi chuột bấm vào (trước khi nhả)
• a:hover - hiện thị khi chuột phía trên link
• a:focus - hiện thị khi đang nhận input (khi tab dịch đến liên kết).

Ví dụ sau sẽ chuyển màu chữ link thành màu đỏ khi chuột di chuyển trên link

<style>
    .examp1:hover {
        color: red;
    }
</style>

<a class="examp1" href="https://xuanthulab.net/" target="_blank">
   Màu đỏ khi chuột di chuyển trên link
</a>

Kết quả:

Mặc định các link có dòng kẻ phía dưới dòng text của link. Nếu bạn muốn loại bỏ nó thì dùng CSS cho link: text-decoration: none;

<style>
    examp1:link {
       text-decoration: none;
    }
</style>

<a class="examp1" href="https://xuanthulab.net/" target="_blank">
   Màu đỏ khi chuột di chuyển trên link
</a>