阅读模式:

CSS学习(5)

阅读量:11  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:CSS学习(5)精灵图使用精灵图核心:精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites精灵图或者雪碧图移动背景图片位置,此时可以使用background-position。移动的距离就......

CSS学习(5)

CSS学习(5)

精灵图

使用精灵图核心:

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

字体图标

字体图标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

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: