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;