css学习（5）

精灵图

使用精灵图核心：

精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中。这个大图片河南高考人数也称为sprites精灵图或者雪碧图移动背景图片位置，此时可以使用background-position。移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。因为一般情况下都是往上往左移动，所以数值是负值。使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

字体图标

字体图标iconfont展示的是图标，本质属于字体。

优点：轻量级、灵活性、兼容性。适合应对于结构样式比较简单的图标

字体图标的下载

icomoon字库：

阿里iconfont字库：

字体图标的引入

将fonts文件夹放入根目录中

通过css引入到页面中：

@font-face {  font-family: 'icomoon';/* fonts同级目录中有一个style.css中有 */  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),    url('fonts/icomoon.woff') format('woff'),    url('fonts/icomoon.ttf')  format('truetype'),    url('fonts/icomoon.svg#sofiaprolight')  format('svg');  font-weight: normal;  font-style: normal;  font-display: block;}

在标签中输入fonts同级目录中的html页面中想要图标对应的小框框。

<span></span>

声明字体图标

span {/* 声明字体图标以后就可以用文字属性控制图标了 */font-family: 'icomoon';font-size: 100px;color: pink}

字体图标的追加

把原先压缩包里面的lection.json重新上传，然后选中自己想要的新图标，重新安徽省大学排名下载替换原来的文件即可。

css三角

.box {    /* 大小为0的盒子 */    width: 0;    height: 0;  /* 为了兼容性问题 */  line-height: 0;  font-size: 0;    /* 将除了上边框以外全设置为透明，就能实现显示三角形了 */    border: 10px solid transparent;    border-top-color: teal;}

css用户界面样式

鼠标样式cursor

default：小白 默认

pointer：小手

move：移动

text：文本

not-allowed：禁止

轮廓线outline

outline：0 ｜none；（取消表单的轮廓线）

文本域防止拖拽

resize：none

vertical-align

实现图片或者表单（行内元素或行内块元素）和文字垂直对齐。

图片和文字默认是基线对齐

vertical-align：baline｜bottom｜middle｜top

溢出文字省略号显示

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

.span {    /* 先强制一行内显示文本 */    white-space: nowrap;    /* 超出部分隐藏 */    overflow: hidden;    /* 文字用省略号替代超出的部分 */    text-overflow: ellipsis;}

多行文本溢出显示省略号（有兼容性的问题）

.mult {    /* 超出部分隐藏 */    overflow: hidden;    /* 文字用省略号替代超出的部分 */    text-overflo网络掉线w: ellipsis;    /* 弹性伸缩盒子模型显示 */    display: -webkit-box;    /* 限制在一个块元素显示的文本行数 */ cars是什么意思   -webkit-line-clamp: 2;    /* 设置或检索伸缩盒对象的子元素的排列方式 */    -webkit-box-orient: vertical;}

css三角形强化

.box {width: 0;height: 0;    /* 去掉下边框，调大上边框，这样左右两侧的三角形就可以是自定义的直角三角形了 */border-top: 100px solid pink;    border-right: 50px solid skyblue;    border-bottom: 0px solid blue;    border-left: 50px solid green纳米学习;}

css的初始化

css的初始化也成为cssret