大家好，课课家小编今天教程是编程语言，愿意飞到教学文本教你一个很实用的，重要的网页设计技巧div css语言之一：“CSS Sprite”的应用程序。
在“CSS Sprite的技能，不仅可以帮助我们减少绘制的虚拟主机端的数量（并因此减少读取主机数），加快页面的打开速度，你还可以做进一步的网页，以提高搜索引擎排名，所以我们要学习这种一动，它会在发布的时候被应用，这样你可以很容易到达的页面优化的效果哦！
这一次，我们开始与流行的图标说明开始练了，其实原理很简单，就是需要使用的页面图标以图解合并进去，然后图标div css语法指定个人的位置，而不是HTML架构插入图片一个接一个，浪费宝贵的时间与空间哦。在完成说明之后，下面的副作用：
CSS-图标雪碧
然后打开你使用的网页编辑器，按照我们的步骤教学实践起来！
[步骤一]新的HTML页面首先，我们创建一个新的HTML页面，结构非常简单，如图示：
步骤一：创建一个新的HTML页面
编写的代码:(课程名称将是更重要的，使用的第3题。）
第一步：创建一个新的HTML页面（代码）
【第二步】额外的CSS样式表，并使用ID和类选择器。
添加空白div CSS文件（“flycan.css”），并附加只是HTML页。 （如图所示第7行）
然后，先用做单独性，设置版本的整体结构，但有重复
标签是用来做“AA”个人类选择器组命名〜“DD” 。
以此方式，代码HTML部分就完成了。
第二步：额外的CSS样式表，使用ID和类
[步骤三]div css语法开“flycan.css”文件，开始#BOX开始应用预先准备的背景图像上，输入宽度和高度（以像素为单位等于背景图像大小），并在屏幕设置为水平设置的。
第三步：CSS语法 – ＃BOX
接下来，准备图标图像文件的组合说明，在这个例子中，我们已建立了每个图标大小是40PX * 40PX，这个图表4家公司合并后是40PX * 160px的宽度和高度。
第三步：div css语法 – 图标标识合并成一个
然后，我们写了常见的div css语法
标记：（主要是图标的图片作为“背景图片”，而行的高度，设置共同边界，文本）
上面案例所示，我们做单独的设置图标旁边的位置（即类=“AA”〜“DD”这部分），这是主要使用的“CSS雪碧”这种教学文章的，请见下表：
步骤三：div css-分别设置图标位置
输入“背景位置”每个图标的价值，我记得第一级，后纵;
需要注意的是y轴部分中，如果顺序地从顶部至底部，然后负增量：0，-40px，-80px，-160px。
第三步：div css-背景位置书写
所有上述语法输入，大功告成啰！
最后，我们再证明，以帮助您快速查看这篇文章的主要结构：
这样的教学实践“CSS Sprite”后，从现在开始，课课家在线学习平台希望每个人都可以学习和使用，然后向更先进的div css语言前方道路哦！ ^ _ ^
