帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> Div+CSS从入门到精通 >> 阅读文章

Div+CSS速成第五天:超链接伪类

来源:远方教程 作者:远方教程 发布时间:2015-03-19 查看次数:7266 访问[新版]

  今天我们开始学习《十天学会web标准(div+css)》超链接伪类,包含以下内容和知识点:

  1. 链接的四种样式
  2. 将链接转换为块状
  3. 用css制作按钮
  4. 首字下沉

  一、超链接的四种样式
  本来计划这节课放到第九章中讲解,但下边的章节都涉及到了,所以提前来学习一下,上节课讲解的内容比较多,这节课就少讲些,只要理解了伪类,就轻松多了。
  超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而构成一个网站。说到超链接,它涉及到一个新的概念:伪类,我们先看下超链接的四种样式:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
  以上分别定义了超链接未访问时的链接样式,已访问的链接样式,鼠标移上时链接样式和选定的链接样式。之所以称之为伪类,也就是说它不是一个真实的类,正常的类是以点开始,后边跟一个名称,而它是以a开始后边跟个冒号,再跟个状态限定字符;比如第三个a:hover的样式,只有当鼠标移动到该链接上时它才生效,而a:visited只对已访问过的链接生效。伪类使得用户体验大大提高,比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的,设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色,鼠标放上是红色加下划线,选定(按下)时为紫色,已访问过为灰色加删除线的实例来讲解一下。首先插入两个带超链接的内容:
<p><a href="#">这里是链接</a></p>
<p><a href="10.html">这里也是链接</a></p>

DIV CSS教程——第5天_超链接伪类

从上图中可以看出,插入的超链接默认是蓝色来下划线的,这是标签的默认样式所致,下来我们在css样式中定义

DIV CSS教程——第5天_超链接伪类
DIV CSS教程——第5天_超链接伪类
DIV CSS教程——第5天_超链接伪类

设置完a:link的样式后,下面分别设置a:visited ,a:hover ,a:active的样式

DIV CSS教程——第5天_超链接伪类
DIV CSS教程——第5天_超链接伪类
DIV CSS教程——第5天_超链接伪类

生成的源代码如下:

DIV CSS教程——第5天_超链接伪类

提示:可以先修改部分代码后再运行
 注意:四种状态的顺序一定不能颠倒,否则有些不生效

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部