CSS高级技巧（提高现有基础水平）
【摘要】 CSS高级技巧（提高现有基础水平）, 可以让我们的设计提升一个水平
1. 精灵图（缺点明显，故出现字体图标）
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术
核心原理︰将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以
使用精灵图核心︰
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为sprites精灵图或者雪碧图
- 移动背景图片位置，此时可以使用background-position。
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png) no-repeat -182px 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>2. 字体图标
主要用于显示网页通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
有优点有缺点
- 轻量级︰一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
- 灵活性∶本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器，请放心使用
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
2.1 重点（字体文件的使用步骤以及注意事项）
1.把下载包里面的fonts文件夹放入页面根目录下
页面在哪里fonts文件夹就放在哪里
四种字体格式的原因是因为兼容性
2.在CSS样式中全局声明字体︰简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题。
3.html标签内添加小图标。
在demo.html中复制上图的小边框
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）