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

Bộ chọn pseudo class

Một liên kết <a> có 04 trạng thái khác nhau bao gồm: link, visted, 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 css khác nhau thông qua việc sử dụng các bộ chọn pseudo class sau:

• a:link - xác định kiểu cho các liên kết bình thường hoặc chưa được click.

• a:visited - xác định kiểu cho các liên kết mà người dùng đã click vào xem.

• a:hover - xác định kiểu cho một liên kết khi người dùng di chuyển con trỏ chuột lên nó.

• a:active - xác định kiểu cho các liên kết khi chúng được nhấp vào.

CSS cho thẻ link

Chúng ta có thể chỉ định bất kỳ thuộc tính CSS nào như color, font, background, border... cho các bộ chọn để tùy chỉnh của các liên kết giống như làm việc với văn bản.

Ví dụ:

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

Nếu chúng ta không thích gạch chân mặc định trên các liên kết chúng ta có thể sử dụng thuộc tính text-decoration của CSS để loại bỏ.

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

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

CSS cho link giống như button

a:link, a:visited {
    color: white;
    background-color: #1ebba3;
    display: inline-block;
    padding: 10px 20px;
    border:2px solid #099983;
    text-decoration: none;
    text-align: center;
    font:14px Aria, sans-serif;
}

a:hover,a:active{
    background-color: #9c6ae1;
    border-color: #7443b6;
}