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 nút liên kết nút liên kết
Liên kết kiểu dáng
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ụ: 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 chúng đang ở.state they are in.
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 biết đếna: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 mouses qua nóa:active- một liên kết ngay khi nó được nhấp vào
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
a:link {
color: red;
}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
a:visited {
color: green;
}
/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
a:hover {
color: hotpink;
}
/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
a:active {
color: blue;
}
Hãy tự mình thử »
Khi thiết lập 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: Di chuột phải đến sau A: Liên kết và A: Đã truy cập
- A: Hoạt động phải đến sau A: Di chuột
Trang trí văn bản
Thuộc tính text-decoration chủ yếu được sử dụng để loại bỏ các lớp dưới khỏi các liên kết:
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
text-decoration: none;
}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
text-decoration: none;
}
/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
text-decoration: underline;
}
/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
text-decoration: underline;
}
Hãy tự mình thử »
Khi thiết lập 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: Di chuột phải đến sau A: Liên kết và A: Đã truy cập
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
background-color:
yellow;
}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
background-color: cyan;
}
/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
background-color: lightgreen;
}
/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
background-color: hotpink;
}
Hãy tự mình thử »
Khi thiết lập 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: Di chuột phải đến sau A: Liên kết và A: Đã truy cập
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
background-color: red;
}
Hãy tự mình thử »
Khi thiết lập kiểu cho một số trạng thái liên kết, có một số quy tắc đặt hàng:
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}
/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
/ * Liên kết đã chọn */a: Active {& nbsp; Màu sắc: màu xanh;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}
Hãy tự mình thử »
a.four:visited {color: #0000ff;}
a.four:hover
{font-family: monospace;}
Khi thiết lập 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.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}
Hãy tự mình thử »
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
/ * Chuột qua liên kết */ a: Hover {& nbsp; & nbsp; color: hotpink;}
background-color: green;
color: white;
}
Hãy tự mình thử »
Thí dụ
/ * Liên kết không được xác định */a: link {& nbsp; màu đỏ;}
/ * Liên kết đã truy cập */a: Đã truy cập {& nbsp; màu xanh lá cây;}
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
Hãy tự mình thử »
Khi thiết lập kiểu cho một số trạng thái liên kết, có một số quy tắc đặt hàng:
Exercise:
A: Di chuột phải đến sau A: Liên kết và A: Đã truy cập
{
color: red;
}
This is a heading
This is a paragraph
This is a link
A: Hoạt động phải đến sau A: Di chuột