(前端)html与css css 20、超级链接a的修饰

html结构：超级链接a

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

1、a的四个状态

a标签与其他标签不同，它有四个显示状态，可以设置不同的显示样式，代码↓

<!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:visited{
            color: purple;
        }
        /*鼠标指针悬停在链接上状态 链接颜色红色*/
        a:hover{
            color: red;
        }
        /*点住链接不撒手时状态 链接颜色绿色*/
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点击转到百度</a>
</body>
</html>

View Code

效果图脑补一下就好。

这四个状态是根据用户的动作产生变化，动作未发生，对应的样式也不会加载出来。

如：.box 这个选择器，给他添加的样式是工作人员手动添加的，在网页加载时这些样式会立即加载。

a的四个状态里例如：a：hover，它添加的是用户行为对应的状态属性，这些样式在加载网页时不会立即加载，只有用户行为触发了这种状态时，这些样式才会被加载。

:hover 这就叫做伪类 这个选择器与类选择器权重一样。

2、a标签四个状态的书写顺序

a的四个伪类都有自己的权重，权重相同，根据书写顺序不同，会有层叠效果。代码↓

<!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

我把visited放到最下面，当你第一次加载点击连接的时候，这4个效果都会正常出现，当你第二次加载时，你会发现悬停、点击时候的链接颜色效果都被visited层叠掉，也就是无论你怎么弄，这个链接就是紫色。

所以这四个状态的书写顺序是：link，visited，hover，active

记住顺序：爱恨准则 Love hate。

(前端)html与css css 20、超级链接a的修饰

1、a的四个状态

2、a标签四个状态的书写顺序

猜你喜欢