CSS hyperlink attribute analysis: text-decoration and color

CSS hyperlink attribute analysis: text-decoration and color

Hyperlink is one of the commonly used elements in web pages, which can establish connections between different pages. In order to make hyperlinks clearly identifiable and attractive on the page, CSS provides some properties to adjust the style of hyperlinks. This article will focus on text-decoration and color, two CSS properties related to hyperlinks, and provide you with specific code examples.

1. text-decoration attribute

The text-decoration attribute is used to control the underline and strikethrough effects of hyperlinks. It has the following values:

• none: means no decoration effect;
• underline: means using underline to decorate the hyperlink text;
• overline: means Use an overline to decorate the hyperlink text;
• line-through: means adding a strikethrough line on the hyperlink text.

The following is a sample code for the text-decoration attribute:

a {
  text-decoration: underline;   /* 下划线 */
}

a:visited {
  text-decoration: line-through; /* 链接被访问后添加删除线 */
}

a:hover {
  text-decoration: none;  /* 鼠标悬停时去除文本修饰 */
}

a:active {
  text-decoration: overline; /* 链接被点击时添加上划线 */
}

In the sample code, we specify different text-decoration values ​​for the a tag to achieve the corresponding decorative effect. Among them, the :visited pseudo-class represents the style after the link is visited, the :hover pseudo-class represents the style when the mouse is hovering, and the :active pseudo-class represents the style when the link is clicked.

2. color property

The color property is used to set the color of the hyperlink text. It can accept various color values ​​such as hexadecimal, RGB or color names. The following are several commonly used color setting methods:

• Hexadecimal color value: #RRGGBB;
• RGB color value: rgb(r, g, b);
• Color names: red, green, blue, etc.

The following is a sample code for the color attribute:

a {
  color: #FF0000;   /* 设置超链接文本为红色 */
}

a:visited {
  color: rgb(0, 255, 0);   /* 设置被访问过的链接文本为绿色 */
}

a:hover {
  color: blue;   /* 设置鼠标悬停时链接文本为蓝色 */
}

a:active {
  color: purple;   /* 设置链接被点击时链接文本为紫色 */
}

In the sample code, we set different color values ​​for the a tag to set the color of the hyperlink text respectively. Like the text-decoration property, you can use pseudo-classes to adjust the color of hyperlinks in different states.

By using the two CSS properties text-decoration and color, we can easily add decorative effects to hyperlinks and set text colors, thereby increasing the visual appeal and readability of web pages. I hope the content of this article can provide you with some help and guidance when designing and optimizing web hyperlinks.

The above is the detailed content of CSS hyperlink attribute analysis: text-decoration and color. For more information, please follow other related articles on the PHP Chinese website!