图片整合技术
css精灵、雪碧图、css、sprite
图片整合技术：即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术
把很多张小图标整合成一张，使用背景属性来移动它的位置就行，这样做的谜底是为了网页进行优化
上网过程：
1：打开浏览器，在地址栏输入相关网址，访问相关网站
http https 超文本传输协议
https相对于http进行了加密，相对比较安全
2、输入网址后，向网址服务器发送请求，----发送报文（三次握手 编译 解析 编译）
3、接收到请求，进行判读，如果有资源就返回，么有资源就返回提示信息
4、服务器返回的资源其实是html文件、css文件、js文件、图片、音频等等
5、如果一个网站的图片过多的话，一次请求不可能把图片全部加载下路，分批次加载
实际开发这种图片优化的重要性“
（1）：如果图过大的话，耗费网络带宽
（2）：
。为什么要把小图整合成一张图呢？请求一次返回一张图，如果图比较多的话，发生很多次请求，请求发生过多的话，服务器压力比较大
下拉列框
子选择器：选择器>选择器{ } 起限定作用
文集选择器 作用：限定范围
语法：选择器选择器{}
如：<div class=".bg"></div> 用 div.bg
网页优化相关
1、css优化 >>>图片整合
2、base64格式使用 在网上搜 base64在线转行
为了图片相关优化，对小图片进行编码处理 （使用编码的好处 第一不用担心路径问题 第二 执行速度比图片加载快2）
3、iconfont字体图标 Github全球最大的程序托管平台
iconfont：字体图片 可以把图片当成字体，遵从字体的属性
4、关于logo的优化，实际开发中会给loto外层嵌套h1标记，因为h1标记的搜索权重是比较高的，一个页面只能有一个h1. 然后在添加一个a 再添加一个span加上网页名称，让span隐藏，别人检查的时候就能看到名称
电商网站一般把h1用作logo上面
5、关于超链接和图片上面的属性必须设置 a一般会给设置title属性，会使用a标记包裹热点图片，网络爬虫程序（搜索引擎）
在查看图片内容的时候，是识别不了图片的文字，想要找到他的内容创造一个良好的
通道，所以一般会给超链接设置title属性和属性值。对于图片来说也会直接设置title属性alt属性
css里面
最高的优先级：!important 如：font-size：66px !importan 还可以设置color等等
p{
/*最高优先级*/
color: yellow !important;
}
span{
font-size: 66px !important;
color: orange;
}
服务器字体：
作用：浏览器不支持艺术字体，可以使用服务器字体引入使用
@font-face {
/*字体名称咱们可以自定义*/
font-family:"嗷嗷叫";
src: url(灵动指书手机字体.ttf); 字体需下载 但仅限个人使用，如需大范围使用，请购买版权
}
p{
font-family: "嗷嗷叫";
font-size: 66px;
}
<!--iconfont字体图标 相当于把图标当做文字处理，所以我们使用文本的属性会起作用。性能比较高-->
iconfont引入：
<link rel="stylesheet" type="text/css" href="fonts(自定义文件夹，需拷贝下载的文件)/iconfont.css"/>
<span class="iconfont icon-feiji"></span>
iconfont名字为必须 需定义两个名称
