Liên kết là một kết nối từ trang web này sang trang web khác. Thuộc tính CSS có thể được dùng để tạo kiểu cho liên kết.
States of Link: Trước khi thảo luận về thuộc tính CSS, quan trọng là biết các trạng thái của liên kết. Liên kết có thể tồn tại ở các trạng thái khác nhau và có thể được tạo kiểu bằng pseudo-classes.
Dưới đây là bốn trạng thái của liên kết:
- a:link => Đây là một liên kết bình thường chưa được truy cập.
- a:visited => Đây là liên kết đã được người dùng truy cập ít nhất một lần.
- a:hover => Đây là liên kết khi chuột di chuyển qua nó.
- a:active => Đây là liên kết vừa được nhấp vào.
Syntax:
a:link {
color:color_name;
}color_name có thể được cung cấp ở bất kỳ định dạng nào như tên màu (green). HEX value (#5570f0) hoặc RGB value rgb(25, 255, 2). Có một trạng thái khác là 'a:focus'. Nó được sử dụng để tập trung khi người dùng dùng phím tab để điều hướng.
The default value of links:
- Theo mặc định, các liên kết được tạo sẽ được gạch chân.
- Khi chuột di chuyển qua liên kết, nó sẽ thay đổi thành biểu tượng bàn tay.
- Liên kết bình thường/chưa truy cập có màu xanh lam.
- Liên kết đã truy cập có màu tím.
- Liên kết đang hoạt động có màu đỏ.
- Khi một liên kết được tập trung, nó có một đường viền xung quanh.
Example: Ví dụ này cho thấy cách sử dụng cơ bản của liên kết trong CSS.
html<!DOCTYPE html>
<html>
<head>
<title>CSS links</title>
<style>
p {
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<p>
<a href="https://www.geeksforgeeks.org/">
GeeksforGeeks Simple Link
</a>
</p>
</body>
</html>
Output:
CSS Properties of Links: Một số thuộc tính CSS cơ bản của liên kết được liệt kê dưới đây:
- color
- font-family
- text-decoration
- background-color
color: Thuộc tính CSS này được sử dụng để thay đổi màu của văn bản liên kết.
Syntax:
a {
color: color_name;
}
Example: Ví dụ này cho thấy cách sử dụng thuộc tính color trong liên kết.
html<!DOCTYPE html>
<html>
<head>
<title>Link color property</title>
<style>
p {
font-size: 20px;
text-align: center;
}
/*unvisited link will appear green*/
a:link {
color: red;
}
/*visited link will appear blue*/
a:visited {
color: blue;
}
/*when mouse hovers over link it will appear orange*/
a:hover {
color: orange;
}
/*when the link is clicked, it will appear black*/
a:active {
color: black;
}
</style>
</head>
<body>
<p>
<a href="https://www.geeksforgeeks.org/">
GeeksforGeeks
</a>
This link will change colours with different states.
</p>
</body>
</html>
Output:
font-family: Thuộc tính này được dùng để thay đổi kiểu chữ của liên kết. Nó sử dụng thuộc tính font-family.
Syntax:
a {
font-family: "family name";
}
Example: Ví dụ này cho thấy cách dùng thuộc tính font-family trong liên kết.
html<!DOCTYPE html>
<html>
<head>
<style>
/*Initial link font family arial*/
a {
font-family: Arial;
}
p {
font-size: 30px;
text-align: center;
}
/*unvisited link font family*/
a:link {
color: Arial;
}
/*visited link font family*/
a:visited {
font-family: Arial;
}
/*when mouse hovers over it will change to times new roman*/
a:hover {
font-family: Times new roman;
}
/*when the link is clicked, it will changed to Comic sans ms*/
a:active {
font-family: Comic Sans MS;
}
</style>
</head>
<body>
<p>
<a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks
</a>
a Computer Science Portal for Geeks.
</p>
</body>
</html>
Output:
Text-Decoration: Thuộc tính này thường được dùng để xóa hoặc thêm gạch chân vào liên kết.
Syntax:
a {
text-decoration: none;
}
Example: Ví dụ này cho thấy cách sử dụng thuộc tính text-decoration trong liên kết.
html<!DOCTYPE html>
<html>
<head>
<title>Text decoration in link</title>
<style>
/*Set the font size for better visibility*/
p {
font-size: 2rem;
}
/*Removing underline using text-decoration*/
a {
text-decoration: none;
}
/*underline can be added using
text-decoration:underline;
*/
</style>
</head>
<body>
<p>
<a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks
</a>
a Computer Science Portal for Geeks.
</p>
</body>
</html>
Output:
background-color: Thuộc tính này được dùng để đặt màu nền cho liên kết.
Syntax:
a {
background-color: color_name;
}
Example: Ví dụ này cho thấy cách dùng thuộc tính background-color trong liên kết.
html<!DOCTYPE html>
<html>
<head>
<title>background color</title>
<style>
/*Setting font size for better visibility*/
p {
font-size: 2rem;
}
/*Designing unvisited link button*/
a:link {
background-color: powderblue;
color: green;
padding: 5px 5px;
text-decoration: none;
display: inline-block;
}
/*Designing link button when mouse cursor hovers over it*/
a:hover {
background-color: green;
color: white;
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p>
<a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks
</a>
a Computer Science Portal for Geeks.
</p>
</body>
</html>
Output:
CSS Link Button: Liên kết CSS cũng có thể được tạo kiểu bằng các nút/hộp. Ví dụ sau cho thấy cách thiết kế liên kết CSS như các nút.
Example: Ví dụ này cho thấy cách dùng liên kết như một nút.
html<!DOCTYPE html>
<html>
<head>
<title>Link button</title>
<style>
/*Setting font size for better visibility*/
p {
font-size: 2rem;
}
a {
background-color: green;
color: white;
padding: 5px 5px;
border-radius: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p>
<a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks
</a>
a Computer Science Portal for Geeks.
</p>
</body>
</html>
Output:
