前端课程第9弹CSS

学习目标

一、精灵图

1.1 为什么需要精灵图？

精灵技术的目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

1.2 精灵图（sprites）的使用

使用精灵图核心：

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为sprites精灵图 或者 雪碧图
3. 移动背景图片位置，此时可以使用 background-position
4. 移动的距离就是这个目标图像的x和y坐标。注意网页中的坐标有所不同（右下为正）

二、字体图标

2.1 字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标

字体图标可以为提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

2.2 字体图标的优点

注：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化

字体图标使用可以分为：

1.字体图标的下载

Icon Font & SVG Icon Sets ❍ IcoMoon

2.字体图标的引入（引入到html）

3.字体图标的追加（以后添加新的小图标）

三、CSS三角

四、CSS用户界面样式

• 更改用户鼠标样式
• 表单轮廓
• 防止表单域拖拽

4.1 鼠标样式cursor

4.2 表单轮廓线outline

4.3 防止拖拽文本域 resize

五、vertical align 属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

（用于设置一个元素的垂直对齐方式，但只对行内元素或者行内块元素有效）

图、表单都属于行内块元素

5.1 解决图片底部默认空白缝隙问题

六、溢出的文字省略号显示

1.单行文本溢出显示省略号--必须满足三个条件

2.多行文本溢出显示省略号

七、常见布局技巧

1. margin赋值应用

2. 文字围绕元素浮动

3. 行内块元素的巧妙应用

4. CSS三角强化

八、CSS初始化

不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式（也称CSS rest）

每个网页都必须首先进行CSS初始化