读《精通css》--第五章对链接应用样式

一. 基于层叠对链接选择器进行排序:

  L :link     V :visited    H :hover    F :focus    A a:active

  锚链接选择器:L、V。只适用于锚点。

  动态选择器:H、F、A。兼容性问题考虑。

  选择器的次序之所以重要是由CSS的层叠引起的,当两个选择器具有相同的特殊性时,后定义的会覆盖前面的。

二. 创建应用了样式的链接下划线:

  1.简单的:加粗、加下划线、自定义下划线的样式(变成虚线)

  2.奇特的:添加背景图片。

三. 使用属性选择器对外部链接应用样式:

  :target伪类为目标元素设置样式。IE9及其以上的现代浏览器支持。

  以...开始:[attr^=val]    例如:a[href^="http:"],对要链接到外部的链接进行标记,也是对用户的提示

  以...结尾:[attr$=val]    例如:a[href$=".doc"],对要下载的文档进行标记,提醒用户点击即进行下载文件

四. 使链接表现得像按钮:

  display: block;

  1. 简单的翻转:通过改变背景颜色或者边框颜色、字体颜色等

  2. 图像翻转:通过改变背景图片-------这有个问题:在浏览器第一个加载鼠标悬停的图像时有短暂的延迟,会造成闪烁效果。

  3. Pixy样式的翻转:解决上述的问题,使用单个图像(好处:减少了服务器请求的数量)。

    在IE下仍然会向服务器请求新的图像,这会产生轻微的闪烁。为了避免闪烁,可以将其应用到父元素;另一种避免闪烁的办法是在IE专用的css文件中包含一下代码:

      html { filter: expression(document.execCommand("BackgroundImageCache",false,true)); }

  4. CSS精灵:包含许多不用的图标、按钮或图形的单个图像。-----好处:减少web浏览器发出的服务器请求,显著加快下载速度;另外,将所有按钮、图片和各种图形集中在一个地方可以提高可维护性。

  5. 用CSS3实现翻转:两个新属性 gradient 和 box-reflect

五. 创建已访问链接样式:要注意在链接被访问后的样式,这样可以避免不必要的“回溯”操作。

六. 创建纯CSS的工具提示:可以利用title属性,也可以自己写利用display:block/none

时间: 2024-08-04 15:32:38

读《精通css》--第五章对链接应用样式的相关文章

web—第四章css&第五章

web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个css文件很多东西都可以在css里面而且修改的话非常方便,但是我还是有一些问题,就是老师叫我们做注册表的时候:年月日我真不相信是用下拉列表一个一个打上去的,我一开始想用时间轴但是太难啦,老师也没说. 随着时间过得很快国庆节也要来临了,这几天老师似乎有点急但是又怕教不好我们所以课程会有点紧张,但是我觉得还是很好跟上

《Java从入门到精通》第五章

第五章 字符串 5.1 String 类 5.1.1  声明字符串 String str=[null] 5.1.2  创建字符串 String (char a[] 方法): String(char a[],int offset,int length);//参数offset表示开始截取字符串的位置,length表示截取字符串的长度 String(char[].value)//该构造方法可分配一个新的string对象,使其表示字符数组参数中所有元素连接的结果: 5.2 连接字符串 5.2.1  连接

读《精通css》--第二章基础知识

一. 常用的选择器:类型选择器和后代选择器.ID选择器和类选择器.伪类选择器(:link,:visited,:hover,:active,:focus) 二. 通用选择器:*  ( 通配符,也可以用来对某个元素的所有后代应用样式) 三. 高级选择器:CSS有向后兼容性,即如果浏览器不理解某个选择器,那么它会忽略整个规则.对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级选择器. 1. 子选择器和相邻同胞选择器:> +    (IE6不支持) 2. 属性选择器:根据属性是否存在 或者 属

近期读精通CSS高级Web标准解决方案(第2版)的小心情

首先,我想说,我真的为这本书着迷.近期读这本书,就像在和一位智者对话,又或者像是在和一个志同道合的朋友聊天,它耐心的把我在学习和实践的过程中所积攒的疑惑和思考的问题一 一解答.这本书不是一本CSS入门书,建议有CSS基础的同学阅读,相信你会和我一样,惊喜的发现这本书里蕴藏的宝藏.由于第二版是2010年出版的,那个时候CSS3还没有得到各大浏览器很好的支持,所以有些内容现在已经不适用了,但是,这本书更多的是教会我了解技术发展的历史,了解在那个技术受限的年代,作者是如何去思考和解决问题的.就像大漠老

《Java从入门到精通》第五章学习笔记

第5章 数组 一.一维数组 1.创建 一维数组实质上是一组相同类型数据的集合,在Java中数组不属于数据类型,而是一种对象. 数组的两种声明方式: int[] arr1;int arr2[]; 数组声明之后,在使用之前还需要先分配内存空间: arr1=new int[3];  //数组元素个数为3,即长度为3:arr2=new int[2]; 声明和分配空间也可以一并操作: int arr1[]=new int[3];int arr2[]=new int[2]; 元素赋值的两种方法: arr1[

记一记读<<精通CSS>>的一些理解(一)

我在读书的过程慢慢理解到读书就是一个心境沉定的过程. 1:块的垂直外边距叠加:只有普通文档流才会发生外边距叠加,行内框(内联标签)/浮动框或者绝对定位框之间的外边距不会叠加.其实外边距叠加这个特性 有时候在布局时候是很有好处的. 2:关于相对定位(relative)和绝对定位(position  脱离文档流)的理解(图) IE6下的绝对定位有一点小bug,只需要给相对定位的框设置宽度和高度即可解决问题(不用理IE6啦,忽略此问题) 3:固定定位相对于可视窗口定位(fixed) 4:浮动(floa

读《精通CSS:高级Web标准解决方案》

因为最近在看<精通CSS:高级Web标准解决方案>,做了一些记录. 因为很多开发人员对于XHTML2的开发不满,于是出现了WHATWG和W3C的分裂,WHATWG决定开发自己的规范,也就是HTML5,而W3C的XHTML2标准已被放弃,HTML5成为了W3C的正式标准.XHTML和HTML的区别就是XHTML严格遵守XML编码规定,浏览器会依据文档的MIME类型来解析文档,如果不遵循规范会导致错误,而HTML却是很宽松的. Doctype类型和浏览器模式,DTD(文档定义类型)是一组机器可读的

《精通CSS》对链接应用样式

CSS的链接伪类选择器: :link --- 用来选择没有被访问过的链接 :visited --- 用来选择被访问过的链接 :hover --- 用来选择鼠标悬停的元素 :active --- 用来选择被激活的元素,对于链接来说,激活发生在链接被点击时 大多数人最初使用这些选择器的目的之一是去掉链接下面的下划线,然后在鼠标停留在链接上或者点击时再打开下划线.实现的方法是将未访问的和已访问的链接的text-decoration属性设置为none,将鼠标停留和激活的链接的text-decoratio

读《编写可维护的JavaScript》第五章总结

第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页面添加行为 我们的目标:确保对一个组件的修改不会经常性地影响其他部分. 结果: 遇到和文本或结构相关的问题,通过查找HTML即可定位 当发生了样式相关的问题,你知道问题出现在CSS中 对于那些行为相关的问题,你直接去JavaScript中找到问题所在 5.2 将JavaScript从CSS中抽离 I