Liên kết CSS
Với CSS, các liên kết có thể được tạo kiểu theo nhiều cách khác nhau.
Liên kết văn bản Nút liên kết văn bản Nút liên kết Nút liên kết
Liên kết tạo kiểu
Các liên kết có thể được tạo kiểu bằng bất kỳ thuộc tính CSS nào (ví dụ: color
, font-family
, background
, v.v.).
Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.
Bốn trạng thái liên kết là:
-
a:link
- một liên kết bình thường, chưa được truy cập -
a:visited
- một liên kết mà người dùng đã truy cập -
a:hover
- một liên kết khi người dùng di chuột qua nó -
a:active
- một liên kết ngay khi nó được nhấp vào
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;
}
Hãy tự mình thử »Khi đặt kiểu cho một số trạng thái liên kết, có một số quy tắc thứ tự:
- a:hover PHẢI đặt sau a:link và a:visited
- a:active PHẢI xuất hiện sau a:hover
Trang trí văn bản
Thuộc tính text-decoration
chủ yếu được sử dụng để xóa phần gạch chân khỏi các 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;
}
Hãy tự mình thử »Màu nền
Thuộc tính background-color
có thể được sử dụng để chỉ định màu nền cho các 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;
}
Hãy tự mình thử »Nút liên kết
Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các liên kết dưới dạng hộp/nút:
Ví 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;
}
Hãy tự mình thử »Thêm ví dụ
Ví dụ
Ví dụ này minh họa cách thêm các kiểu khác vào siêu liên kết:
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover
{color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color:
#0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color:
#ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background:
#66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color:
#0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color:
#ff0000; text-decoration: none;}
a.five:visited {color: #0000ff;
text-decoration: none;}
a.five:hover {text-decoration: underline;}
Hãy tự mình thử »Ví dụ
Một ví dụ khác về cách tạo hộp/nút liên kết:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align:
center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active
{
background-color: green;
color: white;
}
Hãy tự mình thử »Ví dụ
Ví dụ này minh họa các loại con trỏ khác nhau (có thể hữu ích cho các liên kết):
<span style="cursor: auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor:
default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor:
move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor:
nw-resize">nw-resize</span><br>
<span style="cursor:
pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor:
se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor:
w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>
Hãy tự mình thử »