CSS link style settings

CSS link style settings

CSS link style. When we read an article, sometimes the mouse slides down some text, and some text falls down.

Dashes, or color changes. In fact, we all know that this is a link. When Slide lines and colors change, they are all links.

When we set the link style. We briefly introduced what a style is. You may ask, wow, what a style is, and how it is not defined.

In fact, we do not have a better definition. We only need to understand it. But I still don't understand. No. Please let me know:

Different links can have different styles. The link styles can be any CSS attribute, such as color, font, and background. Slow down

We often see some links without underscores when the mouse is not placed on the top. When I have no intention of moving the mouse over, there is an underscore. What is the problem, in fact, we should first take a look at the status of the link. sliding the mouse over the link is different from leaving the link ., Links can be in four states: link indicates the link that has not been accessed, visited indicates the accessed link, hover indicates the mouse slides, and active indicates the mouse clicks the link, we can set different links to achieve the effect we want on the link. There are many link styles and patterns. Let's briefly introduce a style here:

Color settings:

A: link {color: red ;}
A: visited {color: blue ;}
A: hover {color: black ;}
A: active {color: green ;}

In this way, we set the link style. We will consider the four states of the link one by one. In this example, we set the starting color of the link to red, blue after access, and black when the mouse slides onto the link, when we click the link, the link becomes green. This means that the link style changes with the status. In fact, we can regard the first two States as static and the last two States as dynamic. The static state is the initial state. If no operation is performed, the dynamic state is

The link generates an operation. In the above example, we understand these four states and the basic mode for Link style settings. In addition, you can set the color of the connected font.

Text modification:

Here, the text modification is the same as the text modification we encounter in the text format (for details, see CSS text format ). in the color settings above, we introduced four States. We also need to use these four states for text modification. When reading an article, we often see the underline at the place where the mouse slides. This is what we do in text modifier. The text modifier of the link is to modify the text of the link font, the attributes used are:

Text-decoration, for example:

A: link {text-decoration: none ;}
/* There is no underline before access */
A: visited {text-decoration: none ;}
/* There is no underline after access */
A: hover {text-decoration: underline ;}
/* There is a slide line when the mouse slides to the text */
A: active {text-decoration: underline ;}
/* Underline when the mouse clicks */

Here, we need to know the text-modified values, which are underline, none, overline, and default underlines, therefore, you can set the underline to none in the static state when you move the mouse over it.

Background color:

The above settings are the font color settings and font modification settings for links. We can also set the background color for the link.

The attribute used is the keyword background-color. Of course, the attribute value is the color value:

A: link {background-color: red ;}
A: visited {background-color: blue ;}
A: hover {background-color: orange ;}
A: active {background-color: black ;}

Setting the background color can help us set beautiful links, but up till now, we are still unable to break away from the four statuses of the Framework. What should we do:

Now we have a lot of freedom to set this link.

A: link, a: visited
{
Display: block;
Font-weight: bold;
Color: red;
Background-color: #98bf21;
Width: 120px;
Text-align: center;
Padding: 4px;
Text-decoration: none;
}
A: hover, a: active
{
Background-color: # 7A991A;
}