How CSS styles links
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!
