文章内容如有不对，请各位看官多多指正，非常感谢。
文章目录
CSS精灵图
- 什么是精灵图
一个网页中往往会应用到很多或大或小的icon图像作为修饰，当网页中的图像过多时(比如王者荣耀官网，淘宝官网等)，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，便出现了CSS精灵图技术
2. 精灵图工作原理
将网页中的一些小的icon图像整合到一图片中，这样服务器就只需要请求一次就能拿到所有所需图像，提高页面的加载速度。(个人理解：为了减少向服务器发送请求的次数，我们在浏览网页的时候，加载了很多不必要的东西，所以这就可能导致我们现在的流量用的嘎嘎快)。
例如王者官网：down.png (320×244) (gtimg.cn)
- 精灵图使用核心
background: url(images/sprites.png) no-repeat -155px -106px1.精灵技术主要针对背景图片使用, 就是把多个小背景图片整合到一张大图片中
2.移动背景图片位置, 此时可以使用background-position
3.移动的距离就是这个目标图片的x和y坐标. 注意网页中的坐标有所不同
4.因为一般情况下都是精灵图往上往左移动, 所以数值是负值
5.使用精灵图的时候需要精确测量, 每个小背景图片的大小和位置
CSS字体图标
- 字体图标的产生
尽管网页中有精灵图技术来减轻服务器端的压力，但若是使用精灵图来导入图片弊端也是非常明显。比如：图片文件较大；图片本身放大或缩小会失真；一旦图片制作完毕想要更换非常复杂等等。伴随着问题的出现，便产生了字体图标iconfont.
- 字体图标的优点
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来。其原理也只向服务器发送了一次请求，减轻了服务器压力。
灵活性：展示的是图标，本质其实是文字，可以随意的改变颜色、产生阴影、透明明果、旋转等。
兼容性：几乎支持所有的刘览器。
- 字体图标的使用
推荐几个比较好的字体图标网站：
icomoon.io/
www.iconfont.cn/
1. 在icomoon.io网站上下载好图标，将下载包里的fonts文件夹放在页面根目录下。
2. 在CSS样式中全局声明字体(代码如下)：简单理解把这些字体文件通过css引入到我们页面中。一定要注意字体文件路径的问题。/* 字体声明 */ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal ;3. 在html标签内添加小图标(如下图)
4. 在标签中写上相关样式就能在页面中展示出来了，在样式中必须指定字体font-family，且与字体声明代码中的一致。
CSS用户界面样式
所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式cursor
li { cursor: pointer; }
属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
- 表单轮廓outline
给表单添加outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框input{ outline: none; }
- 防止拖拽文本域resize
textarea{ resize: none; }
总结
- 个人认为CSS要想熟练掌握，首先得自己动手多去实践，然后观察样式的变化；其次，多找一些网站去看它的源码并理解是如何布局的
- 真正的大师永远怀着一颗学徒的心。
