设置超链接样式

最新推荐文章于 2025-03-20 06:35:11 发布

原创最新推荐文章于 2025-03-20 06:35:11 发布 · 5.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

CSS+DIV网页样式布局专栏收录该内容

3 篇文章

订阅专栏

1.认识伪类和伪对象

伪类就是根据一定的特征对元素进行分类，而不是根据元素的名称、属性或内容。原则上特征是不能根据HTML文档的结构推断得到的。伪类可以是动态的，当用户与HTML文档进行交互时，一个元素可以获取或者拾取某个伪类。例如，鼠标指针经过就是一个动态特征，任意一个元素都可能被鼠标经过，当然鼠标也不可能永远停留在同一个元素上面，这种特征对于某个元素来说可能随时消失。

比较实用的伪类包括 :link、:hover、:active、:visited、:focus，比较实用的伪类对象包括 :first-letter和:first-line

伪类	说明
:link	超链接对象未访问前的样式
:hover	鼠标移过对象时的样式
:active	在对象被鼠标单击后到被释放之间这段时间的样式
:visited	超链接对象呗访问之后的样式
:focus	对象称为输入焦点时的样式
:first-child	对象的第一个子对象的样式
:first	对于页面的第一页使用的样式

2.定义超链接样式

在伪类和伪对象中，与超链接相关的四个伪类选择器应用比较广泛。

a:link 定义超链接的默认样式
a:visited 定义超链接被访问后的样式
a:hover 定义鼠标经过超链接的样式
a:active 定义超链接被激活时的样式，如鼠标单击之后，到鼠标被松开之间的这段时间的样式

超链接的四种状态样式的排列顺序是有要求的，一般不能随意调换。先后顺序应该是：link、visited、hover、active

超链接的四种状态并非都必须要定义，可以定义其中的两个或三个。

下划线是超链接的基本样式，但是很多网站并不喜欢使用，所以在建站之初，就彻底清除了所有超链接的下划线。

a{text-decoration:none;}

不过从用户体验的角度分析，如果取消下划线效果之后，可能会影响部分用户对网页的访问。因为下划线效果能很好的提示访问者当前鼠标经过的文字是一个超链接。超链接的下划线效果不仅仅是一条实线，也可以根据需要定制。定制主要思路如下：

借助超链接元素a的底部边框线来实现
利用背景图像来实现

3.经典样式设计（设计滑动样式）

利用背景图像的动态滑动技巧可以设计很多精致的超链接样式，这种技巧也被称为滑动门技术。

对于背景图片来说，超链接的宽度可以小于等于背景图像的宽度，但是高度要保持一致。、

技巧：

利用相同大小但不同效果的背景图像进行轮换。图像样式的关键是背景图像的设计，以及集中不同效果的背景图像是否能够过渡自然、切换吻合。
将所有背景图像组合在一张图中，然后利用CSS技术进行精确定位，以实现在不同状态下显示为不同的背景图像，这种技巧也被称为CSS Sprites.CSS Sprites加速的关键不是降低重量，而是减少个数。浏览器每显示一张图片都会向服务器发送请求，所以图片越多请求次数越多，造成延迟的可能性也就越大。

在photoshop中设计两张大小相同，但是效果略有不同的两张图像，然后将两张图像拼接成一张图像。

<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">博客</a></li>
</ul>
</body>

<style type="text/css">
    li
    {
        float:left;       /*浮动显示，以便并列显示各项*/
        list-style:none;  /*清除项目符号*/
        margin:0;         /*清除缩进*/
        padding:0;        /*清除缩进*/
    }
    a
    {
        text-decoration:none;  /*清除下划线*/
        display:inline-block;  /*行内块状元素显示*/
        width:150px;           /*固定宽度*/
        height:32px;           /*固定高度*/
        line-height:32px;      /*行高等于高度，设计垂直居中*/
        text-align:center;     /*文本水平居中显示*/
        color:White;           /*字体颜色白色*/
        background:url(background.jpg) no-repeat center top; /*定义背景图像，禁止平铺，居中*/
    }
    a:hover
    {
        background-position:center bottom;  /*定义背景图像，显示下半部分*/
        color:Gray;                         /*定义字体颜色为灰色*/
    }
</style>

效果：