《精通CSS高级WEB标准解决方案》第四章:对应链接样式
2010-04-22 11:38
459 查看
我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
第四章、对应链接样式
4.1 简单的链接样式
第四章、对应链接样式
4.1 简单的链接样式
/*所有链接红色*/ a{color:red;} /*未访问链接蓝色,已访问红色*/ a:link{color:blue;} a:visited{color:green} /*鼠标悬停时链接红色*/ a:hover,active{color:red;} /*平时不显示下划线,鼠标悬停时显示下划线*/ a:link,avisited{text-decoration:none;} a:hover,a:active{text-decoration:underline}4.2 让下划线更有趣
/*用加粗效果代替下划线*/ a:link,avisited{ text-decoration:none; font-weight:bold; } /*鼠标悬停时显示下划线*/ a:hover,avisited{ text-decoration:none; border-bottom:1px dotted #000; } /*改变下划线式样*/ a:hover,a:active{ border-bottom-style:solid; } /*用图片绘制下划线*/ a:link,a:visited{ color:#666; text-decoration:none; background:url(images/underline1.gif) repeat-x left bottom; } /*鼠标悬停时显示动画背景*/ a:hover,a:active{ background-image:url(images/underline1-hover.gif); }4.3 突出不同类型的链接
/*为所有外部链接添加一个类,为该类添加一个外部邮件图标*/ .external{ backgrount:url(images/externallink.gif) no-repeat right top; padding-right:10px; } /*不用手工添加类,自动判别外部链接(仅新版本浏览器可用)*/ a[href^="http:"]{ background:url(images/externallink.gif) no-repeat right top; padding-right:10px; } /*本站链接除外*/ a[href^="http://www.cn09.com"],a[href^="http://cn09.com"]{ background-image:none; padding-right:0; } /*类似的,可用添加邮件链接图标*/ a[href^="mailto:"]{ background:url(images/email.png) no-repeat right top; padding-right:10px; } /*非标准协议如aim*/ a[href^="aim:"]{ background:url(images/im.png) no-repeat right top; padding-right:10px; } /*pdf和word文档*/ a[href$=".pdf"]{ background:url(images/pdflink.gif) no-repeat right top; padding-right:10px; } a[href$=".doc"]{ background:url(images/doc.gif) no-repeat right top; padding-right:10px; }4.4 创建按钮和翻转
/*链接显示为按钮*/ a{ display:block; width:6em;/*保持IE5.x以下版本兼容*/ padding:0.2em; line-height:1.4; background-color:#94b8e9; border:1px solid black; color:#000; text-decoration:none; text-align:center; } /*翻转*/ a:hover{ background-color:#369; color:#fff; } /*具有图像的翻转*/ a:link,a:visited{ display:block; width:200px; height:40px; color:#000; text-decoration:none; background:#94b8e9 url(images/button.gif) no-repeat left top; text-indent:50px; } a:hover{ background:#369 url(images/button_over.gif) no-repeat left top; color:#fff; } /*一幅图像,*/ a:link,a:visited{ display:block; width:200px; height:40px; line-height:40px; color:#000; text-decoration:none; background:#94B8E9 url(images/pixy-rollover.gif) no-repeat left top; text-indent:50px; } a:hover{ background-color:#369; background-position:right top; color:#fff; }4.5 已访问的链接样式
/*在已访问的链接后打钩*/ a:visited{ padding-right:20px; background:url(check.gif) right middle; } /*整个UL列表中的系列链接中,已访问的打钩*/ ul { list-style:none; } li{ margin:5px 0; } li a{ display:block; width:300px; height:30px; line-height:30px; color:#000; text-decoration:none; background:#94b8e9 url(images/visited.gif) no-repeat left top; text-indent:10px; } li a:visited{ background-position:right top; }4.6 纯CSS工具提示
/*用CSS定制的精美提示代替HTML标签的title属性 *目前只有FIREFOX等浏览器才能支持 */ <p> 欢迎访问<a href="http://www.cn09.com" class='tooltip'> cn09.com<span>(JQUERY论坛)</span></a> </p> a.tooltip{ position:relative; } a.tooltip sapn{ display:none; } a.tooltip:hover span{ display:block; position:absolute; top:1em; left:2em; } a.tooltip:hover span{ display:block; position:absolute; top:1em; left:2em; padding:0.2em 0.6em; border:1px solid #996633; background-color:#ffff66; color:#000; }
相关文章推荐
- 精通CSS高级Web标准解决方案(4、对链接应用样式)
- 读书笔记--精通CSS高级Web标准解决方案(五)---链接样式
- 精通CSS高级Web标准解决方案(6、对表单与表格应用样式)
- 《精通CSS高级WEB标准解决方案》第五章、对列表应用样式和创建导航条
- 读书笔记--精通CSS高级Web标准解决方案(六)---无序列表样式
- 《精通CSS高级web标准解决方案》——第一章、第二章(为样式找到应用目标)即选择器
- 精通CSS高级Web标准解决方案(5、对列表应用样式和创建导航条)
- 精通CSS高级Web标准解决方案(7、布局)
- 精通CSS高级Web标准解决方案
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 读书笔记--精通CSS高级Web标准解决方案(四)---CSS背景以及圆角框实现
- 精通CSS高级Web标准解决方案:背景图像基础
- 再次阅读《精通CSS-高级Web标准解决方案(第二版)》
- 精通CSS高级Web标准解决方案(3-1 背景图像与图像替换)
- 精通css 高级web标准解决方案——可视化格式模型-定位模型
- 精通CSS高级Web标准解决方案(1-2 层叠与特殊性)
- 精通CSS高级Web标准解决方案(2-1 可视化格式模型之框模型)
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)1~3章
- 精通css 高级web标准解决方案——可视化格式模型-盒模型
- 精通CSS高级Web标准解决方案:空白边叠加