精通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
<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-读书记录 ch1-ch3
- 精通CSS-读书记录 ch4
- css 记录
- css常见属性记录(未完待续)
- 读书记录
- 精通css 01 选择器
- 韩顺平_php从入门到精通_视频教程_第17讲_div-css作业评讲③_学习笔记_源代码图解_PPT文档整理
- 精通 CSS+DIV 网页样式与布局 8
- 精通 CSS+DIV 网页样式与布局 22
- ie6,ie7,ie8 css bug兼容解决记录
- 精通 CSS+DIV 网页样式与布局 46
- 精通css摘抄——只摘抄精华
- js实用方法记录-js动态加载css、js脚本文件
- 精通 CSS+DIV 网页样式与布局 64
- css学习系列-精通css
- 精通 CSS+DIV 网页样式与布局 76
- 精通css(7)-实例
- 【CSS基础】琐碎记录
- 精通 CSS+DIV 网页样式与布局 84
- 精通 CSS+DIV 网页样式与布局 106