CSS学习(5)
程序员文章站
2022-06-10 14:23:45
CSS学习(5) 精灵图 使用精灵图核心: 精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中。 这个大图片也称为sprites精灵图或者雪碧图 移动背景图片位置,此时可以使用background-position。 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所 ......
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 }
字体图标的追加
把原先压缩包里面的selection.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:baseline|bottom|middle|top
溢出文字省略号显示
单行文本溢出显示省略号--必须满足三个条件
.span { /* 先强制一行内显示文本 */ white-space: nowrap; /* 超出部分隐藏 */ overflow: hidden; /* 文字用省略号替代超出的部分 */ text-overflow: ellipsis; }
多行文本溢出显示省略号(有兼容性的问题)
.mult { /* 超出部分隐藏 */ overflow: hidden; /* 文字用省略号替代超出的部分 */ text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本行数 */ -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的初始化也成为cssreset