CSS设置动态超链接

HTML中，超链接是通过标记<a>实现的，具体的地址使用标记<a>的href属性。

<ahref="http://blog.csdn.net/nangeali">ali的博客</a>

默认的情况下，浏览中的超链接统一为蓝色并且有下划线，点击过后的超链接则为紫色，而且也有下划线。

CSS可以设置超链接的各种属性，比如字体、颜色和背景等等，而且，可以通过伪类别制作很多动态效果。

首先，去掉超链接的下划线：

a{text-decoration:none;}

此时，无论是超链接本身，还是点击过的超链接下划线都去掉了。

CSS的伪类别——Anchor Pseudo Classes，使用伪类别制作动态下过，具体的属性如下：

A:link——超链接的普通样式，正常浏览器中的样式。

A:visited——点击过的超链接的样式。

A:hover——鼠标指针经过超链接上时的样式。

A:active——在超链接上单击时，即当前激活时，超链接的样式。

<html><head><title></title><style><!--a:link{color:#005799;text-decoration:none;}a:visited{color:#0000;text-decoration:none;}a.hover{color:#ffff00;text-decoration:underline;}--></style></head><body><table width="600px"cellpadding="2" class="chara1" align="center"><tr><td><a href="#">首页</a></td><td><a href="#">心情日记</a></td><td><ahref="#">Free</a></td><td><a href="#">一起走到</a></td><td><a href="#">从明天起</a></td><td><a href="#">纸飞机</a></td><td><a href="#">下一站</a></td></tr>   </table></body>
</html>

可以看出，超链接本身都是深蓝色，没有下划线，点击过后变成了黑色也没有下划线，当鼠标指针经过时，超链接变成了黄色，而且有下划线。

此外，各种背景、边框和排版的效果都可以加入到超链接的几个伪属性中，当前激活状态a:active，一般显示的情况非常少，很少使用。

当用户单击一个超链接之后，焦点很容易就会转移到其他地方，比如新打开的窗口等，此时，超链接就不是当前激活状态了。

CSS设置动态超链接相关推荐

CSS设置按钮式超链接
CSS设置按钮式超链接网页上有很多超链接都是按钮的形式,这些都使用了各种图片,这里通过CSS普通的属性实现按钮的效果. 首先,建立最简单的HTML页面,代码如下: <table width=& ...
VUE项目中CSS设置动态宽度的方法
网上找到三种方法: 一.使用cumputed 首先你务必看Vue的官方文档.涉及到的基础知识有: 绑定内联样式的使用 computed的使用文档写的都是基础使用.那么在项目实战中如何使用,两步就能实 ...
利用css设置使超链接不能点击或者失效
cursor:pointer; pointer-events: none; 第一行是使鼠标变成箭头而不再是小手形状第二行是使超链接失效代码不仅是a标签,iframe标签也有效,示例如下: < ...
html文字超链接不让变色,css不让超链接变色怎么设置？
[相关推荐:css在线手册] 链接有四个状态a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被 ...
html导航栏中加超链接,用CSS设置超链接与导航菜单.ppt
水平菜单水平菜单可以自由地转换为竖直菜单和折行菜单玻璃效果的菜单基本页面设置菜单整体效果应用滑动门技术用CSS设置链接与导航菜单在HTML语言中,超链接是通过标记来实现的,链接的具体地 ...
CSS设置无需表格的菜单
CSS设置无需表格的菜单项目列表的符号可以设置list-style-type属性值为none,然后,制作各种各样的菜单和导航条,来显示项目的列表. 首先,建立一个HTML结构,将菜单的各个项用项目列 ...
【html】如何解决标签设置成超链接后字体格式及颜色变化的问题
问题描述: 如图所示,将一个标签设置成超链接后字体颜色和格式会发生改变,如果我只想让它保持原来的格式应该怎么办? 解决方法: 在a标签中添加一个属性: style="color:inheri ...
CSS a控制超链接文字样式
超链接的代码 <a href="http://www.divcss5.com/" target="_blank" title="关于div cs ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...

CSS设置动态超链接

CSS设置动态超链接相关推荐

最新文章

热门文章