精通CSS-读书记录 ch5-

5.1 简单的链接样式

<a name="mainContent">Welcome</a></h1>

<p><a href="mainContent">skip to  main content</a></p>

:active是用来寻找到被激活的元素，对于链接来说，激活发生在链接被单击时。

:focus选中元素时（比如用键盘）

text-decoration:none/underline

选择器的次序非常重要这是层叠造成的，当两个规则具有相同的特殊性时，后定义的规则优先。（但是伪类是处理的不同情境啊...）为了确保不会发生这种情况，最好按照以下次序应用链接样式：

:link :visited :hover :focus :active 简记：Lord Vader Hates Fury Animals

5.2 让下划线更有趣

（考虑色盲症）

5.2.2 奇特的链接下划线

可以使用图像创建链接下划线。《精通》里面使用了动图做下划线非常炫目！仿佛电流！

5.3 已访问链接的样式

5.4 为链接目标设置样式

我刚刚想起<a>既然是行内元素为何能设置padding-bottom???

我连块状元素和行内元素都没有搞好T T

6.8 CSS图像映射

今天下午做的笔记全丢了 哎............

图像映射示意图：

《精通CSS》在图片上放了一个列表，然后将每个列表元素绝对定位到相应位置。注意这里的a是透明的。（突然意识到这一点还觉得小神奇的...）

啊我擦，笔记又丢了。

《精通》还讲了另一种映射，其实差不多，但是学习了一种技巧，即是在a标签中嵌套两个span标签（两个标签也有嵌套），可以做出两层外框效果。以及文字的隐藏和显现不一定非要用display, opacity等，更改其位置也行啊！

6.9 远距离翻转

是一种鼠标悬停事件，它在页面的其它地方触发显示方式的改变。实现方法是：在锚链接内内嵌套一个或多个元素；然后，使用绝对定位对嵌套的元素分别定位。尽管显示在不同的地方，但是它们都包含咋同一个父锚中，所以可以对同一个鼠标悬停事件做出反应。

6.10 对于定义列表的简短说明

还有第三种常被忽视的列表类型——定义列表。有两个核心组件组成：定义术语<dt>和一个或多个定义描述<dd>

推荐阅读：http://24ways.org/2007/my-other-christmas-present-is-adefinition-list