Shulou(Shulou.com)06/01 Report--

This article mainly introduces how CSS sets the style for links, which is very detailed and has certain reference value. Friends who are interested must finish reading it!

CSS link

We can style links in different ways.

There are many CSS properties that can set link styles (for example, color, font-family, background, and so on).

The particularity of links is that they can be styled according to the state they are in.

The four states of the link:

A:link-normal, unaccessed links

A:visited-links that the user has visited

A:hover-the mouse pointer is over the link

A:active-the moment the link was clicked

Example

A:link {color: # FF0000;} / * unaccessed links * / a:visited {color: # 00FF00;} / * visited links * / a:hover {color: # FF00FF;} / * move the mouse pointer over the links * / a:active {color: # 0000FF;} / * links being clicked * /

Tip: when styling different states of links, follow the rules in the following order:

A:hover must be after a:link and a:visited

A:active must be after a:hover

Text modification

The text-decoration attribute is mostly used to remove underscores from links:

A:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: underline;}

Background color

The background-color attribute specifies the background color of the link:

A:link {background-color: # B2FF99;} a:visited {background-color: # FFFF85;} a:hover {background-color: # FF704D;} a:active {background-color: # FF704D;}

More link styl

A.one:link {color: # ff0000;} a.one:visited {color: # ffcc00;} a.two:link {color: # ff0000;} a.two:visited {color: # 0000ff;} a.two:hover {font-size: 150%;} a.three:link {color: # ff0000;} a.three:visited {color: # 0000ff } a.three:hover {background: # 66ff66;} a.four:link {color: # ff0000;} a.four:visited {color: # 0000ff;} a.four:hover {font-family: "Microsoft Yahei";} a.five:link {color: # ff0000; text-decoration: none;} a.five:visited {color: # 0000ff; text-decoration: none;} a.five:hover {text-decoration: underline;}

Please move the mouse pointer over the links below to see how their styles change.

This link changes color

This link changes the font size

This link changes the background color

This link changes the font

This link changes the decoration of the text

Advanced-create a link box

A:link, a:visited {display:block; font-weight:bold; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none } a:hover, a:active {background-color: # 7A991A;} HuluMiao

Note: this example demonstrates a more advanced example that combines several CSS properties to display the link as a box.

The above is all the content of the article "how CSS styles links". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.