html 图片部分区域超链接,css中关于超链接的部分学习心得_html/css_WEB-ITnose

5268f80b9b1e01f982625ef6fac83ca1.png

在《精通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属性自带的提示那样呆板。

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值