Article directory
CSS link
CSS can be used to style links, including unvisited links (a:link), visited links (a:visited), when the mouse is hovering over the link (a:hover), and when the link is clicked (a: active) these four states.
Here is an example:
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}
This code sets the styles of the four states of the link, and the color values can be changed as needed. The link color changes from normal unvisited red to visited green, to hotpink when the mouse is hovering over the link, and finally to blue when the link is clicked.
It should be noted that the order of style setting of these four states is specified. a:active must be after a:hover, and a:hover must be after a:link and a:visited. This ensures that when the mouse clicks on the link, the style displayed is the last defined style.
link style
In CSS, you can set the style of links through pseudo-class selectors, including unvisited links (a:link), visited links (a:visited), when the mouse is hovering over the link (a:hover) and These four states are when the link is clicked (a:active).
Here is an example:
/* 未被访问的链接 */
a:link {
color: #0080ff; /* 蓝色 */
}
/* 已被访问的链接 */
a:visited {
color: #804000; /* 棕色 */
}
/* 将鼠标悬停在链接上 */
a:hover {
color: #ff0000; /* 红色 */
}
/* 被选择的链接 */
a:active {
color: #00ff00; /* 绿色 */
}
In this example, the styles of the four states have been set. For specific effects, please refer to the colors corresponding to the color codes. The default color of links is blue, visited links are brown, turn to red when the mouse is hovering, and turn to green when clicked.
Common link styles
Here are some common link styles:
- Unvisited links: Usually represented by blue or black text, when the user hovers the mouse over the link, the color of the link may darken or lighten to remind the user that the link has not been visited yet.
- Visited links: usually represented by red or orange text to remind users that the link has been visited.
- When the mouse is hovering over a link: This is usually indicated by purple text to remind the user that the mouse is currently hovering over the link.
- When a link is clicked: Often the link's color changes to indicate that the link has been clicked or selected by the user.
In addition to color changes, you can also use pseudo-class selectors in CSS to define the styles of links in different states, including fonts, backgrounds, borders, etc.
Text decoration
Text modification of links can be achieved through the following CSS pseudo-classes:
a:link- Unvisited links. You can set text color, underline, etc.a:visited- Visited links. You can set text color, underline, etc.a:hover- Mouse over the link. You can set text color, underline, font size, background color, etc.a:active- When a link is clicked. You can set text color, underline, etc.
For example, the following code sets the text color of unvisited links to red and removes the underline; sets the text color of visited links to green and adds an underline; sets the text color to yellow when the mouse is hovering over the link and adds an underline; when the link is clicked Set the text color to blue and remove the underline.
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: underline;
}
a:hover {
color: yellow;
text-decoration: underline;
}
a:active {
color: blue;
text-decoration: none;
}
Note: The color value in the above code can be English, hexadecimal or RGB,
text-decorationincludingnone(no decoration),underline(underline),overline(overline) andline-through(strikethrough).
background color
The background color of the link can be implemented using the CSS pseudo-class selector. The specific code is as follows:
a:link, a:visited, a:hover, a:active {
background-color: #ffffff; /* 白色背景 */
}
a:active {
background-color: #f00; /* 红色背景 */
}
In this example, the background color of the link is white when it is unvisited, visited, mouse-over, and clicked. The background color only changes to red when the link is clicked. It should be noted that when setting the background color to ensure that the formatting and indentation of the style are not affected, you can use pretags to include code.
Case
1. Add different styles of hyperlinks
For example, the following code sets the text color of unvisited links to red, visited links to green, text color to yellow when the link is hovered over, and blue when the link is clicked:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active {
color: blue;
}
In addition, you can use other properties in CSS to set the font, background, border, etc. of the link, such as:
a:link {
font-weight: bold; /* 加粗字体 */
background-color: #f0f0f0; /* 灰色背景 */
}
a:visited {
font-style: italic; /* 斜体字体 */
border-bottom: 2px solid #000; /* 底部边框 */
}
a:hover {
text-decoration: underline; /* 下划线 */
cursor: pointer; /* 鼠标指针 */
}
a:active {
font-size: 14px; /* 字体大小 */
background-color: #fff; /* 白色背景 */
}
It should be noted that the color values in the above code can be English, hexadecimal or RGB, text-decorationincluding none(no decoration), underline(underline), overline(overline) and line-through(strikethrough).
2. Advanced - Create link box
If you want to create a link box, you can do it using HTML and CSS. Below is a simple sample code that creates a link box that will jump to the specified web page when the user clicks the link.
<!DOCTYPE html>
<html>
<head>
<style>
.link-box {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
background-color: #f5f5f5;
text-decoration: none;
color: #333;
}
.link-box:hover {
background-color: #e5e5e5;
}
</style>
</head>
<body>
<a href="https://www.csdn.net" class="link-box">
点击这里访问示例网站
</a>
</body>
</html>
The effect is as follows:
In the above code, <a>a link is created using the element and hrefthe attribute is set to the URL of the web page to be redirected. Then, use CSS styles to style the link box. .link-boxThe class defines the style of the link box, including the border, background color and text style. .link-box:hoverThe class defines the style when the mouse is hovering over the link box. Here it just changes the background color.
CSS styles can be adjusted as needed, such as changing border color, font size, etc. Make sure to replace the actual web page URL with the URL you want to redirect to.