How to set link style in css

CSS is an essential part of web design. One of the most commonly used functions is to set link styles to make web pages look more beautiful, easy to read, and easy to use. This article will introduce how to use CSS to style links.

1. Attributes of link styles

There are several attributes in CSS that can be used to set link styles:

1) color: represents the color of the link, you can use the color name , RGB value, hexadecimal value, etc. to represent.

2) text-decoration: Indicates the underline of the link, which can be represented by none, underline, overline, line-through and other values.

3) background-color: Indicates the background color of the link, which is generally not used.

4) font-weight: Indicates the thickness of the link font, which can be represented by normal, bold, bolder, lighter and other values.

5) font-style: Indicates the style of the link font, which can be represented by normal, italic, oblique and other values.

2. How to set the link style

In order to make the link appear in a consistent style on the page, it is recommended to separate the link style from other text styles and set the link style in CSS.

Set global link style

You can set a consistent style for all links, such as setting the link color to red and removing the underline. The code is as follows:

a {
color: red;
text-decoration: none;
}

At the same time, you can also set different styles for links in different states, such as red for unvisited links and red for visited links. is green, the mouse-over link is blue, and the focus link is yellow. The code is as follows:

a:link {
color: red;
text-decoration: none;
}

a:visited {
color: green;
text-decoration: none;
}

a:hover {
color: blue;
text -decoration: underline;
}

a:focus {
color: yellow;
text-decoration: none;
}

In this way, all links All styles will be set according to these rules.

Set local link styles

If you only need to set special styles for certain links, you can set styles for them by adding class or id attributes to the links. For example, you can use the following code to set all external links in a page to black:

a.external {
color: black;
}

Link Text

Here, the link style will only be applied to links with a class attribute value of "external".

3. Best Practices

In addition to the above methods, the following are some best practices when setting link styles:

1) Avoid using pure underscores as links, because It can be confused with other underscores on the page, causing confusion for users.

2) It is recommended to add a title attribute to the link in the page text. The value of the title attribute will be displayed when the user hovers the mouse over the link to provide more information.

3) If your website design needs to emphasize a large number of links, consider using different colors or fonts to distinguish them from normal text.

4) In order to maintain the link style more conveniently, you can concentrate it in a special CSS file and then import it into the page.

In short, when designing web pages, it is very important to style links, because it will not only affect the user experience, but also affect search engine rankings. Hope this article is helpful to you!

The above is the detailed content of How to set link style in css. For more information, please follow other related articles on the PHP Chinese website!