CSS Sprites优化网页代码的方法

2016-02-19 23:59 6 1 收藏

下面图老师小编跟大家分享一个简单易学的CSS Sprites优化网页代码的方法教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中,即你的一张CSS Sprites由10张图片组成,那将避免9次HTTP请求,这减少的9次请求时延,正是加速的加载时间。这也有问题,跟每个HTTP请求的服务器开销一样,需由Apache的子进程管理,占用20MB的内存。你最好帮你的服务器进程减少HTTP请求:卸载媒体到Web前端Amazon S3,诸如此类。

    下面是两个CSS Sprites,一个是Google的,一个是PaulStamatiou的。

    照猫画虎,把你网站上经常使用的web图片元素打包比如你的Logo,RSS图标,还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具,把它们放在单个的图片里。你可以尽贴着放置图片,但要是你稍微留点白再下一步选中会更简单些,然后保存图片。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    编写CSS代码

    有了CSS Sprites,你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理:只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击,选择编辑切片。在弹出的窗口会有图片的分辨率和位置。

    在这个示例中,我选用大小为42×42px的图,它有336px的偏移(译注:是指左偏移)并紧贴着顶部。这样便形成了相应的CSS:

a.stammy, a.stammy:hover{
     background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
     display:block;
     height:42px;
     width:42px;
     text-indent:-9999px;
     overflow:hidden;
}

    CSS选择器对所有含 class="stammy" 属性的链接都有效。背景属性载入精灵图片,然后设置背景图位置为负值(其必为负)。如果图片离顶部有10个像素,那背景位置应该是-336px -10px。之后在CSS中设置了宽和高。我对悬停伪类(hover pseudoclass)也进行了设置,因为有一次当我悬停在该类的链接上时,会改变链接的悬停状态的颜色,从而背景图会消失。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    设置溢出隐藏解决当你选择要替换的文本的时候,那高亮部分会一直延伸到屏幕左侧的烦人问题,正如Rob所说。对其他所有图片如法炮制,并对每个选择器命名。

    编写XHTML代码

    目今你已经对每个图片有一些CSS选择器。至此你已经搞定了大问题,还差最后一步。现在只需对每个选择器创建链接。

a class="stammy" href="http://whatever.com" title="Paul Stamatiou"Paul Stamatiou/a

    相当简单吧?用CSS和链接设置类,将精灵的信息组合起来,只显示精灵的一部分。虽此,因为我们甚至没使用一个img标签,我们不能设置alt属性,而这对移动用户、搜索引擎、屏幕阅读器之类的来说至关重要。将文字写在链接中,再用CSS文本缩进将其移出屏幕范围,这样你就无需吧文字叠在图片上而同样具有可用性。

来源:http://www.tulaoshi.com/n/20160219/1630978.html

延伸阅读
标签: Web开发
原文:CSS雪碧:要还是不要? 译自:To Sprite Or Not To Sprite 声明,本文中所称 CSS雪碧 即为 CSS Sprites ,这个词组一直没有一个固定或者约定俗成的中文翻译,一些人开始称之为CSS雪碧,我们且当作一次尝试吧,如果大家觉得不妥,今后还会继续直称CSS Sprites。神飞(vocal) CSS雪碧 已经出现一段时间了,并上升为一种可以让你的网...
标签: Web开发
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 Spec...
标签: Web开发
一、不要将整个页面放到到一个table中     一般大家都是用表格来进行布局的,将整个页面的内容都塞进了一个Table(表格)里,然后再由单元格td来划分各个“块”的布局,这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的,如果某些内容无法访问,就会拖延整个页面的访问速度。在布局时...
标签: Web开发
一、使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100e...
标签: Web开发
为什么进行CSS代码优化 呢? 好,有两个原因。它可以帮助你变得更小的CSS文件大小和更好的写的代码。这个方法的优化工作实际,让你决定你想要多少压缩。从超压(几乎读和编辑被人类)视觉愉悦。我喜欢这个标准设置,因为它会给你一个小的。 另一个凉爽的特征是,它能帮助你用速记编码。我绝不是一位专家在样式表。我并不拥有所有...

经验教程

531

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部