登录  /  注册
首页 > web前端 > css教程 > 正文

CSS页面布局常用知识汇总(超链接样式)

yulia
发布: 2018-09-20 16:09:56
原创
2659人浏览过

CSS中的知识非常多,我们不可能全都记得住。闲暇时整理了一些CSS页面布局的常用知识,这篇文章就和大家分享一下CSS超链接样式的常用知识。需要的朋友可以参考一下,希望可以帮助到你。

设计网页时,我们可以通过伪类对链接的样式进行控制,引导用户浏览网页,增加互动的丰富元素。

1、链接的属性

超链接的标签为,网页上的超链接一般用来链接文字或者图片。超链接有4个伪类,分别代表链接的不同状态。

a: link(超链接未被访问前的样式) 

a: visited(链接地址被访问过后的样式) 

a: hover(鼠标悬停时的样式) 

a: active(鼠标点击与释放之间的样式)

2、链接的设置顺序和继承性

设置顺序 

四个伪类的设置需要有固定顺序,不然就会得不到期望的效果。顺序为: a: link、a: visited、a: hover、a: active.

继承性 

我们知道,文本的修饰是不可继承的,一旦为元素定义了文本样式,在其子元素中该样式便不可取消。但是使用伪类定义超链接时,使用文本修饰,子元素可以覆盖原来的链接样式。

3、一个实例

<html>
<head>
<style type="text/css">
    a:link{color:red;}
    a:visited{color:green;}
    a:hover{color:yellow;}
    a:active{color:orange;}
</style>
</head>
<body>
    <a href="https://www.baidu.com"> 超链接 </a>
</body>
</html>
登录后复制

以上就是CSS页面布局常用知识汇总(超链接样式)的详细内容,更多请关注php中文网其它相关文章!

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学