css中关于超链接的部分学习心得

在《精通CSS》一书中,作者对于超链接部分的解说。
1、在CSS中,两个规则的优先级一样高的时候,后定义的规则优先,所以对于超链接的几个伪选择器,一般的顺序是:a:link,a:visited,a:hover,a:focus,a:active;这个不用专门去记下来,当你做上几个简单的例子之后就会记下来了,实践出真知啊~
2、可以用简单的图片来做出更炫的CSS超链接效果来,例如下划线。还可以做一些特殊的图标来表达连接的与众不同与样式。
3、在CSS3中,可以通过子字符串匹配来寻找元素,更省力地完成更灵活的链接样式,例如寻找以文本http:开头的所有链接:

a[href^="http:"]{
     background:url() no-repeat right top;
}

这样就可以突出显示所有的外部链接。当然,对于自己站点的链接,你可以专门设置来取消:

a[href^="http://www.yoursite.com"],a[href^="http://yoursite.com"]{
       background-image:none;
}

还有你可以给用特殊样式表明下载的文档和提要:

a[href$=".pdf"]{
      background:url(img/pdflink.gif) no-repeat right top;
}

(其作用是将带pdf关键字的全部附上特定的标识)

4、创建按钮链接
简单的就是用display:block,将你的行级元素转换成块级,然后给其背景颜色的变化来实现按钮的链接和变化;
还有一种就是通过事先绘制好的按钮图标的变化,来实现图像翻转效果;
Pixy样式翻转:将所有的按钮绘制在一张图片上,然后通过background-position来实现在不同的状态下显示不同的部分,这样的好处是,可以将多个图像的服务器调用数量大大减少;
受Pixy的启发,CSS精灵应运而生,其想法是将一个网站的导航等需要大量图片的内容全部放在一个图片上,对于大型网站而言,这可以大大降低服务器损耗。
5、通过CSS3的text-shadow、box-shadow和border-radius等属性,可以实现按钮效果,这样可以避免加图片进去。
6、CSS还有非常强大的功能,就是可以通过display属性和hover属性,设置诸如工具提示、资料卡(例如知乎等网站的资料卡弹出)、以及商城的二级菜单等更为丰富多彩的效果,而不像title属性自带的提示那样呆板。

时间: 2024-11-03 22:23:25

css中关于超链接的部分学习心得的相关文章

【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大家有一些帮助: a:link { color: #000000; text-decoration: none } a:visited { color: #000000; text-decoration: none } a:hover { color: #ff7f24; text-decoration

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现

CSS中filter滤镜的学习笔记

1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) } Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity.finishOpacity.style.startX.startY.finishX.finishY.add.direction.strength blur 在指定的方向和位置上产生动感模糊效果 a

CSS中filter滤镜学习笔记

1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) } Filter样式 简要说明 支持参数 alpha 设置图片或文字的不透明度 opacity.finishOpacity.style.startX.startY.finishX.finishY.add.direction.strength blur 在指定的方向和位置上产生动感模糊效果 a

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n

CSS重要属性之float学习心得

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,

CSS中对图片(background)的一些设置心得总结

写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接拖到html里,这就需要对图片的css样式进行一些调整,鉴于我总是记不住一些样式属性而无法让图片按我的想法摆放,不得已每次都要百度一下,几次下来,让我很是恼火,于是专门整理了一些css中关于图片的一些属性设置,置于此,以供下次望及时查看(废话真多): css2中关于background的属性有: b

本周CSS学习心得交流

总的来说CSS分为CSS和CSS3,只不过CSS3是在CSS基础上增添了新属性,而且CSS3的兼容性暂时不好,也就是chrome支持,其他浏览器兼容性不强. CSS的主要作用就是为我们的HTML增添样式,比如颜色,大小等,所以我们要使用CSS必须先选取到HTML的元素, 即选择器的用法,能选取到你需要改变的HTML元素,选择器分为很多种,常用的也就4种,可以去W3SCHOOL上面去查询.这里还涉及到元素的命名,主要使用的是id命名,class命名,name命名,各选取的方式也不同,在CSS中常用

CSS属性之float学习心得

全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6