Khóa học CSS - Bài 13 - Định dạng liên kết

Quay về MỤC LỤC TỰ HỌC CSS

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

Liên kết có 04 trạng thái sau:

·a:link – trạng thái bình thường, người dùng chưa bấm vào.

· a:visited – trạng thái người dùng đã bấm vào.

· a:hover – trạng thái người dùng rê chuột lên liên kết.

· a:active – trạng thái ngay thời điểm người dùng đang bấm liên kết.

04 trạng thái này ta phải tuân thủ thứ tự như trên khi khai báo trong CSS.

Ta có thể định dạng liên kết bằng các thuộc tính định dạng chữ.

Ví dụ:

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Và một thẻ liên kết trong phần body:

<a href="http://www.lophocvitinh.com">Lớp học vi tính .COM</a>

Các bạn thử 04 trạng thái của liên kết vừa nêu ở trên xem sao nhé.

2. Sử dụng Text Decoration

Thuộc tính text-decoration: none dùng để xóa đường gạch dưới trong liên kết.

Ví dụ:

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

3. Màu nền

Thuộc tính background-color dùng để xác định màu nền của liên kết.

Ví dụ:

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

4. Tạo nút liên kết

Ta có thể định dạng liên kết thành 01 nút bấm như sau:

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm