您的位置:首页 > Web前端 > CSS

精通CSS-读书记录 ch5-

2018-04-11 19:35 447 查看
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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  CSS