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 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 với bất kỳ thuộc tính CSS nào (ví dụ:, colorv.v. font-family)
background.
Thí dụ
a {
color: hotpink;
}
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, không được kiểm traa:visited- một liên kết mà người dùng đã truy cậpa: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
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ố trạng thái liên kết, có một số quy tắc đặt hàng:
- a: hover PHẢI đến sau một: liên kết và a: đã thăm
- a: hoạt động PHẢI đến sau: di chuột
Trang trí văn bản
Thuộc text-decorationtính này chủ yếu được sử dụng để xóa gạch chân khỏi 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
Thuộc background-colortính có thể được sử dụng để chỉ định 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;
}
Các 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:
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;
}
Các ví dụ khác
Thí dụ
Ví dụ này trình bày 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;}
Thí 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;
}
Thí 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>