(Front-end) html and css css 20, a modification of hyperlinks

html structure: a hyperlink

<a href="http://www.baidu.com" target="_blank">超级链接 </a>

1, a four states

a label different from the other tags, it has four display state can be set in different display styles, the code ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0 ; 
        } 
        / * Link Color Blue * / 
        A: Link { 
            Color : Blue ; 
        } 
        / * link on a link state of the interface refresh purple color * / 
        A: visited { 
            Color : Purple ; 
        } 
        / * mouse pointer over stopped at the red color link link state * / 
        A: hover { 
            color : red ; 
        } 
        / * time point link does not stay green color wash link state * / 
        A: Active { 
            color : green ; 
        } 
    </style > 
</ head > 
< body > 
    < A the href = "http://www.baidu.com" > Click to Baidu </ A > 
</ body > 
</ HTML >

View Code

Renderings make the brain look like.

These four states are generated according to a user's action changes, the action does not occur, the corresponding style is not loaded up.

Such as: .box this selector style to his staff added manually add these styles will load as soon as the page loads.

A state where four of example: a: hover, it adds that user behavior corresponding state property, these styles does not load immediately when the page is loaded, only the user behavior triggered this state, these styles will be loaded .

: hover pseudo-class which is called the selectors with the same weight class selector.

2, a tag writing order four states

a four pseudo-class has its own weight, the same weight, depending on the order of writing, there is a cascading effect. Code ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        a:link{
            color: blue;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: green;
        }
        a:visited{
            color: purple;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点我进百度</a>
</body>
</html>

View Code

I visited into the bottom of, when you first load the click of connection time, the effect of which four will normally appears when you load a second time, you will find that hover, click on the link color when the effects have been visited stacked away, that is, no matter how you get, this link is purple.

So writing order of these four states are: link, visited, hover, active

Remember sequence: Love and guidelines L O V E HA TE .