Bài 35: Tạo css cho link trong html

Với CSS, các liên kết có thể được thể hiện nhiều kiểu theo những cách khác nhau.

Text Link Text Link Link Button Nút liên kết

---

Liên kết Styling

Liên kết có thể được theo kiểu với bất kỳ thuộc tính CSS (ví dụ như color , font-family , background , vv).

Thí dụ

a {
    color: hotpink;
}

Ngoài ra, các liên kết có thể được theo kiểu khác nhau tùy thuộc vào những gì nhà nước họ đang ở.

Bốn liên kết các quốc gia là:

• a:link - một liên kết unvisited bình thường
• a:visited - một liên kết người dùng đã ghé thăm
• a:hover - một liên kết khi người sử dụng chuột trên nó
• a:active - một liên kết thời điểm nó được nhấp

Thí 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;
}

Khi đặt kiểu cho một số tiểu bang liên kết, có một số quy tắc thứ tự:

• a: hover phải đến sau khi một: liên kết và a: visited
• a: active phải đến sau khi một: hover

---

Trang trí văn bản

Các text-decoration tài sản chủ yếu được sử dụng để loại bỏ đường gạch dưới từ các liên kết:

Thí dụ

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

---

Màu nền

Các background-color tài sản có thể được sử dụng để chỉ định một màu nền cho các liên kết:

Thí dụ

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

---

Nâng cao - Nút kết

Ví dụ này cho thấy một ví dụ tiên tiến hơn, nơi chúng tôi kết hợp một số thuộc tính CSS để hiển thị liên kết như hộp / nút:

Thí dụ

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;
}