《精通CSS》阅读笔记 第四章

《精通CSS》阅读笔记 第四章

链接

:link 用来给没有被访问过的链接设定样式
:visited 用来设定已经访问过的链接的样式
:hover 动态伪类设定鼠标停留处元素的样式
:active 动态伪类用来寻找被激活的元素
由于伪类之间的特殊性是相同的，所以设定伪类样式时需要注意顺序。
合理的顺序是：a:link,a:visited,a:hover,a:active 简记为LoVe:HAte.
其中:link,:visited是A标签专用的，而:hover,:active等不限于A元素，也可以在其他某些元素上。

让链接看起来酷酷的
<ps:这个其实没有多少技术的东西在里面，关键是创意>
大家可以看看这里的例子： 示例下载

为链接添加有意义的修饰

1.标识离开网站的链接
方案1：给相应的链接加上一个适当的图标来标识链接的类型：比如该链接是否链接到网站外的地址；是否是一个email地址；是否启动一个im请求甚至于标识下载文件的类型等等。
改进方案：每个链接都加的话太麻烦，维护起来也不方便。可以采用属性选择器来帮助我们完成这样的工作。
比如想这样：
a[href^= "mailto"]{
    background:url(email.png) no-repeat right top;
    padding-right:10px;
}
但是IE6里面是不支持属性选择器的，只能变通一下：可以采用javascript+Dom的方式来完成。可以在这个地方查看：http://simonwillison.net/2003/Mar/25/getElementsBySelector/
里面提到的SimonWillison写的getElementBySelector方法。
大家可以看看这里的例子： 示例下载

把链接做的像按钮

思路：将链接的可响应事件的响应区域扩大到整个背景区域，这样看起来这个链接象是个按钮。
实现：其实很简单只需要设置A标签的display：block就可以了。这样的话A会一改自己的行内元素的性质，转换成一个块元素。这样就达到目的了。
问题：IE5.x如果不设置元素的width，height的话，即时设置了display：block也是没有用的，所有要显示的设置width，height的值。
大家可以看看这里的例子： 示例下载

图像翻转

方案1：简单翻转：利用颜色的反差来形成翻转效果。
方案2：具有图像的翻转 由于多图片翻转在第一次载入的时候回出现图像短暂延迟的，造成闪烁效果。
改进方案2：Pixy方法，替换图片时显示图片不同部位。
利用这样技术的一种应用：标识那些链接已经被访问过了，这个看起来还挺个性的。
大家可以看看这里的例子： 示例下载

纯CSS工具提示

其实就是把预先设置好的提示信息隐藏了，在适当是时机显示在适当的位置。
还是看例子来的实在。示例下载

平凡而简单的人一个，无权无势也无牵无挂。一路厮杀，只进不退，死而后已，岂不爽哉！
收起对“车”日行千里的羡慕；收起对“马”左右逢缘的感叹；目标记在心里面，向前进。一次一步，一步一脚印，跬步千里。
这个角色很适合现在的我。