css超链接伪类详解

思诚代码块

于 2022-02-03 18:19:51 发布

阅读量1.2k

点赞数 1

分类专栏： CSS 系列笔记+源码展示文章标签： css3 html 超链接伪类前端

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122757638

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天我们来讲一下css超链接伪类

看源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    a{
    text-decoration: none;    /*取消下划线*/
    color: black;
}
    </style>
</head>
<body>
<a href="#"></a>
<img src="images/dq.png" alt="">
<p>
    <a href="#">java开发手册</a>
</p>
<a href="#">作者:孤尽老师</a>
<p>
    ¥99
</p>
</body>
</html>

看结果：
在这里插入图片描述
看这个代码块：

a:hover{
        /*鼠标悬浮的颜色*/
        color: red;
    }

结果

在这里插入图片描述

  a:active{
        /*鼠标点上去长按不放*/
        color: green;
    }

结果：
在这里插入图片描述

源码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*默认的颜色*/
    a{
    text-decoration: none;
    color: black;
}
    a:hover{
        /*鼠标悬浮的颜色*/
        color: red;
    }
    a:active{
        /*鼠标点上去长按不放*/
        color: green;
    }
    a:link{
        color: #a52a2a;
    }
   #price{
       text-shadow: deeppink 10px 10px 2px;    
       /*text-shadow:第一个参数：   deeppink：阴影颜色  */
   /*text-shadow:第二个参数：  10px ：水平偏移  */
   /*text-shadow:第三个参数：  10px ：垂直偏移  */
   /*text-shadow:第四个参数：  10px ：阴影半径  */
       /*阴影效果*/
   }

    </style>
</head>
<body>
<a href="#"></a>
<img src="images/dq.png" alt="">
<p>
    <a href="#">java开发手册</a>
</p>
<a href="#">作者:孤尽老师</a>
<p id="price">
    ¥99
</p>
</body>
</html>