CSS07

精灵图

为什么需要精灵图

服务器频繁接收和发送请求图片，造成服务器请求压力很大，大大降低页面的加载速度。
因此出现css精灵技术（也称CSS Sprites）

核心原理：
将页面中的一些小的背景图片整合到一张大的图片

作用：
有效的减少了服务器接收和发送请求次数

背景图片默认贴左上角对齐

1、代码：background：url（images/。。。）no-repeat -180px 0
2、一般情况下，精灵图都是负值，x轴往右边走是正，往左边走是负

字体图标

字体图标使用场景：主要用于显示网页中通用的、常用的一些小图标
精灵图的缺点：
1、图片文件还是很大
2、图片本身放大和缩小会失真
3、一旦图片制作完毕想要更换非常复杂

展示的是图片，实际上是字体
轻量级：减少了服务器的请求
灵活性：本质是文字，可以随意的改变
兼容性：几乎支持所有浏览器
不能完全替换精灵图，简单的小图标用字体图标来做

字体图标是一些网页常见的小图标，直接从网上下载

如何添加小三角

.box{
	width:0px;
	height:0px;
	line-height=0;
	font-size=0;
	border:10px(小三角大小) solid transparent
	border-top-color:pink;(要哪个方向的小三角)

CSS用户界面样式

1、更改用户的鼠标样式

cursor：pointer；
1、default：小白（默认）
2、pointer：小手
3、move：移动
4、text：文本
5、not-allowed：禁止

2、表单轮廓

给表单添加outline：0或者outline：none；就取消了表单的轮廓线

3、防止表单域拖拽

给文本域添加resize：none；就使文本域右下角不可拖拽

vertical-align（只针对于行内元素或者行内块元素有效）

实现图片或者表单（行内块元素）和文字的垂直对齐（给图片位置）
vertical-align：
baseline：默认，元素在父元素的
top：元素的顶端与行中最高元素的顶端对齐
middle：把此元素放在父元素的中部
bottom：把元素的顶端与行中最低的元素的顶端对齐。

文本域也属于行内块元素。

溢出的文字用省略号显示

1、单行文本溢出显示省略号：

*1、先强制一行内显示：
white-space：nowrap；（normal默认是换行）
*2、溢出部分隐藏：
overflow：hidden；
*3、文字用省略号替代超出部分
text-overflow：ellipsis；

2、多行文本溢出

LOGO SEO优化