Đường dẫn trong CSS

Chấn Phong

Với CSS, đường dẫn có thể được tạo kiểu cách rất đa dạng.

Tạo kiểu cách cho đường dẫn

Đường dẫn được tạo kiểu cách bằng các đặc tính như color, font-family, background…

a {
 color: hotpink;
}

Ngoài ra, đường dẫn cũng được tạo kiểu cách khác nhau tùy theo trạng thái của chúng. Có 4 trạng thái của đường dẫn, gồm:

a:link - đường dẫn bình thường chưa được người dùng truy cập
a:visited - đường dẫn đã được người dùng truy cập
a:hover - đường dẫn mà người dùng rê chuột qua
a:active - đường dẫn khi được click vào

Khi tạo kiểu cách cho đường dẫn theo trạng thái đường dẫn cần tuân theo một số quy định:

a:hover phải đi sau a:link và a:visited
a:active phải đi sau a:hover

Text Decoration

Đặc tính text-decoration thường được dùng để loại bỏ dấu gạch chân khỏi đường dẫn.

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 tính background-color được dùng để chọn màu nền cho đường dẫn.

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 bấm vào đường dẫn

Dưới đây là ví dụ nâng cao khi kết hợp một số đặc tính CSS để hiển thị đường dẫn dưới dạng hộp/nút bấm.

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