Đường dẫn trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Đường dẫn trong CSS

Với CSS, link (đường dẫn) có thể được định dạng bằng nhiều cách khác nhau:

Định dạng link

Link có thể được định dạng với một số thuộc tính trong CSS (như color, font-family, background…).

a {
    color: hotpink;
}

Ngoài ra, link cũng được định dạng tùy thuộc theo trạng thái của nó. Có bốn trạng thái đó là:

  • a:link – biểu thị rằng trang web này trình duyệt chưa lưu (tức người sử dụng lần đầu tiên click vào đường dẫn này).
  • a:visited – biểu thị rằng đường dẫn tới trang web này đã được lưu bởi trình duyệt (tức là người sử dụng đã click vào đường dẫn này trước đó rồi).
  • a:hover – biểu thị rằng khi người sử dụng di chuyển chuột qua phần tử mà chứa link đó (tức là phần tử đó là một link khi người sử dụng di chuyển chuột qua phần tử đó).
  • a:active – biểu thị đường link là active khi người sử dụng click chuột vào.
/* 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 thiết lập định dạng cho một số trạng thái link, một số quy tắc cần chú ý như sau:

  • a:hover phải xuất hiện sau a:link và a:visited
  • a:active phải xuất hiện sau a:hover

Hiệu ứng văn bản

Thuộc tính text-decoration thường được sử dụng để loại bỏ gạch chân dưới văn bản chứa link.

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Màu nền

Thuộc tính background-color được sử dụng để xác định màu nền cho link:

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Nâng cao – link dạng button

Ví dụ này sẽ nâng cao hơn một chút, kết hợp một số thuộc tính trong CSS để hiển thị link dạng button/boxes:

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