精通CSS高级Web标准解决方案(4、对链接应用样式)
2014-06-12 22:54
246 查看
4.1 简单的链接样式
锚可以作为内部引用,也可以作为外部链接,应该区分对待。伪类选择器:
:link 用来寻找没有访问过的链接
:visited 用来寻找已经访问过的链接
a:link{color:blue};
a:visited{color:red};
动态伪类选择器:
:hover 用来寻找鼠标停留处的元素
:active 用来寻找被激活的元素
两个规则有相同的特殊性时,后定义的规则优先,因此在定义a元素伪类时使用以下顺序:
a:link a:visited a:hover a:active 即 LoVe HAte
4.2 让下划线更有趣
可以给a元素伪类设置背景图片实现一些有趣的下划线效果.a:hover,a:active{ font-weight: bold; /*text-decoration:underline;*/ background: url("./underline.gif") repeat-x left bottom; }
4.3 突出显示不同类型的链接
内部链接、外部链接、下载word、PDF的链接、订阅....可以使用属性选择器(比如根据href 属性的前缀或者后缀)为不同类型链接设置样式。4.4 创建按钮和翻转
4.4 已访问链接样式
4.4 纯CSS提示
相关文章推荐
- 精通CSS高级Web标准解决方案(5、对列表应用样式和创建导航条)
- 《精通CSS高级WEB标准解决方案》第四章:对应链接样式
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- 精通CSS高级Web标准解决方案(6、对表单与表格应用样式)
- 读书笔记--精通CSS高级Web标准解决方案(五)---链接样式
- 《精通CSS高级web标准解决方案》——第一章、第二章(为样式找到应用目标)即选择器
- 读书笔记--精通CSS高级Web标准解决方案(六)---无序列表样式
- 精通CSS高级Web标准解决方案
- 精通CSS高级Web标准解决方案:浮动
- 精通CSS高级Web标准解决方案(7、布局)
- 精通css高级web标准解决方案
- 精通CSS高级Web标准解决方案(2-1 可视化格式模型之框模型)
- 读书笔记--精通CSS高级Web标准解决方案(四)---CSS背景以及圆角框实现
- 《精通CSS高级WEB标准解决方案》第九章、bug和bug修复
- 精通CSS高级Web标准解决方案(1-1选择器)
- 精通CSS高级Web标准解决方案(2-2 可视化格式模型之定位概述)
- 精通CSS高级Web标准解决方案【读书笔记】
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 最佳CSS书推荐:《精通CSS - 高级Web标准解决方案》
- 精通CSS高级Web标准解决方案:相对定位与绝对定位