【HTML+CSS】CSS高级技巧：精灵图+字体图标+CSS三角应用

学习视频及笔记参考来源：

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

---

一、精灵图

1、精灵图的理解

（1）核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

（2）目的：有效的减少服务器接收和请求的次数，提高页面的加载速度。

2、精灵图的语法

/* 1、先导入精灵图作为背景图。 */
/* 2、定位到想要的图标的位置 */
/* 注意：x轴向右边走为正值，左边走为负值；y轴向下走为正值，向上走为负值。*/

background: url(images.jpg);
background-position: -100px 0;

二、字体图标

1、字体图标的理解

（1）字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

（2）优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
• 兼容性：几乎支持所有的浏览器，请放心使用。

（3）精灵图与字体图标的选择问题：

        字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

        ① 如果遇到一些结构和样式比较简单的小图标，就用字体图标。

        ② 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

2、字体图标的下载、引入、追加

2.1 下载

• icomoon字库：http://icomoon.io
• 阿里 iconfont 字库 http://www.iconfont.cn/

 2.2 引入

（1）以icomoon为例，进入网站下载所需要的字体图标。

  

（2）解压文件，把下载包里面的fonts文件夹放入页面根目录下。