Liên hệ
css

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

Sử dụng pseudo selector :link, :visited, :active, :hover và text-decoration để định dạng cách hiện thị các link bằng CSS

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

Các liên kết (link) bạn có thể điều chỉnh bởi các thuộc tính CSS đã biết như (color, font-family, background ...).

Ở đây 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 selector, cụ thể như sau:

  • a:link - kiểu bình thường khi link chưa được bấm vào
  • 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
  • a:hover - hiện thị khi chuột phía trên link

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>
Màu đỏ khi chuột di chuyển trên link

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>

Vui lòng đăng ký ủng hộ kênh