Css3超链接-优快云博客

本文链接：https://blog.youkuaiyun.com/difgsief/article/details/115654466

本文介绍了CSS中的文本阴影效果和超链接伪类的使用方法。通过示例展示了如何设置文本阴影，以及如何利用a标签的伪类（如a:hover, a:active）来改变链接在不同状态下的样式。此外，还讲解了如何去除列表默认样式并自定义列表项的表现。这些技巧对于前端页面的美化和交互体验提升具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本阴影和超链接伪类

一.阴影


 /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #7955f5 10px 10px 3px;
        }

二.超链接伪类

正常情况下，a，a:hover

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接和伪类</title>
    <style type="text/css">
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: beige;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: #677780;
        }
        /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #7955f5 10px 10px 3px;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/1.jpg " width="500" height="300">
</a>
<p>
    <a href="#">码出高效</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>

</body>
</html>

3.6,列表(ul li)

#nav{
    width: 300px;
    background: #7955f5 ;
}
.title{
    font-family: 宋体;
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #9f2222;
}
/*ul li*/
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul{
    background: #7955f5;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 2em;
}
a{
    color: black;
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    color: cadetblue;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">家电</a> &nbsp;&nbsp;<a href="#">MP3</a> &nbsp;&nbsp;<a href="#">跑车</a> </li>&nbsp;&nbsp;
        <li><a href="#">手机</a> &nbsp;&nbsp;<a href="#">棒棒糖</a> &nbsp;&nbsp;<a href="#">游龙</a> </li>&nbsp;&nbsp;
        <li><a href="#">鼠标</a> &nbsp;&nbsp;<a href="#">棉花糖</a> </li>
        <li><a href="#">衣服</a>&nbsp;&nbsp;<a href="#">数码相机</a> &nbsp;&nbsp;<a href="#">票务</a> </li>&nbsp;&nbsp;
        <li><a href="#">帽子</a> &nbsp;&nbsp;<a href="#">老虎</a> </li>
        <li><a href="#">毛衣</a> &nbsp;&nbsp;<a href="#">彩票</a> &nbsp;&nbsp;<a href="#">负债</a> </li>&nbsp;&nbsp;
        <li><a href="#">毛裤</a> &nbsp;&nbsp;<a href="#">保健</a> &nbsp;&nbsp;<a href="#">宝剑</a> </li>&nbsp;&nbsp;
    </ul>

</div>

</body>
</html>