(前端)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。

3、实际应用

a标签是一个行内标签，不能设置宽高。

a标签的一部分文本属性不能继承父级：color、text-decoration。代码↓

<!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;
        }
        body{
            font-size: 30px;
            color: #333;
            line-height: 50px;
            font-family: "微软雅黑";
            font-weight: bold;
            font-style: italic;
            text-indent: 2em;
            text-decoration: none;
            text-align: center;
        }
        div{
            width: 200px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">点我进百度</a>
    </div>
</body>
</html>

View Code

效果图↓

如果设置a标签的文字样式，color、text-decoration样式不能靠继承，只能单独设置。

a四个状态中：link和visited状态一般是一样的样式。代码↓

    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 30px;
            color: #333;
            line-height: 50px;
            font-family: "微软雅黑";
            font-weight: bold;
            font-style: italic;
            text-indent: 2em;
            text-decoration: none;
            text-align: center;
        }
        div{
            width: 200px;
            height: 50px;
            border: 1px solid #000;
        }
        a:link,a:visited{
            color: #333;
            text-decoration: none;
        }
        a:hover{
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">点我进</a>
    </div>
</body>
</html>

View Code

效果图↓

实际中除了color、text-decoration其他的文本样式都可以靠继承，或者都写在a选择器里，a盒子的内容也写在a标签选择器内。默认样式可以给四个状态都设置成一样的，然后谁发生变化就单独给谁设置伪类。

四个状态全部设置一样的：用a标签选择器。谁不一样的话就添加伪类单独设置，注意书写位置顺序。代码↓

        a{/*表示四个伪类的初始值都是以下的样式*/
            color: #333;
            text-decoration: none;
        }
        a:hover{/*hover需要设置另一个样式，所以把它拿出来单独设置*/
            color: red;
            text-decoration: underline;
        }

练习↓

<!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;
        }
        body{
            font-size: 30px;
            color: #333;
            line-height: 50px;
            font-family: "微软雅黑";
            font-weight: bold;
            text-decoration: none;
            text-align: center;
        }
        a{
            display: block;
            width: 200px;
            height: 50px;
            border: 1px solid #000;
            color: #333;
            text-decoration: none;
            background: pink;
        }

        a:hover{
            color:#fff;
            text-decoration: underline;
            background: green; 
        }
    </style>
</head>
<body>
    <a href="#">点我跳转</a>
</body>
</html>

View Code

效果图↓

鼠标悬停前→ 鼠标悬停后→