CSS学习(5)
精灵图
使用精灵图核心:
- 精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为sprites精灵图或者雪碧图
- 移动背景图片位置,此时可以使用background-position。
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
- 因为一般情况下都是往上往左移动,所以数值是负值。
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置。
字体图标
字体图标iconfont展示的是图标,本质属于字体。
优点:轻量级、灵活性、兼容性。适合应对于结构样式比较简单的图标
字体图标的下载
icomoon字库:https://icomoon.io/
阿里iconfont字库:https://www.iconfont.cn/
字体图标的引入
将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
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论,欢迎说说您的想法!