7、字体与背景
7.1、图标字体(iconfont)
fontawesome使用步骤:
-
1、下载https://fontawesome.com/
-
2、解压
-
3、将css和webfonts移动到项目中
-
4、将alll.css引入到网页中
-
5、使用图标字体
-
直接通过类名来使用图标
<i class="fas fa-bell"></i> <i class="fas fa-dragon" style="font-size: 100px;color: rebeccapurple;"></i>
-
通过伪元素来设置图标字体
7.2、行高
行高(line height)
-
行高指的是文字占有的实际高度
-
可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接为行高设置一个整数
-如果是一个整数的话,行高将会是字体的指定的倍数
-
通常将行高和盒子高设置为一样的值,使单行文字垂直居中
7.3、文本样式
-
文本的水平对齐:text-align
可选值:
- left 左侧对齐
- right 右侧对齐
- center 居中对齐
- justify 两端对齐
-
文本的垂直对齐:vertical-align
可选值:
- baseline:默认值 基线对齐
- top: 顶部对齐
- bottom:底部对齐
- middle :居中对齐
-
文本修饰:text-decoration
可选值:
- none 什么都没有
- underline 下划线
- line-through 删除线
- overline 上划线
-
设置网页如何处理空白:white-space
可选值:
- normal 正常
- nowrap 不换行
- pre 保留空白
-
文本省略号
.box{ width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
7.4、背景
-
设置背景颜色:background-color
-
设置背景图片:background-image:url()
-可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
-如果背景的图片小于元素,则背景图片会自动在元素中平铺满
-如果背景的图片大于元素,将会一个部分背景无法完全显示
-如果背景的图片和元素一样大,将会正常显示
-
设置背景的重复方式:background-repeat
可选值:
-
repeat 默认值,背景会沿着xy轴双方向平铺
-
repeat-x 沿着x轴方向平铺
-
repeat-y 沿着y轴方向平铺
-
no-repeat 不平铺
-
-
设置背景图片的位置:background-position
设置方式
-
通过top left bottom center right 几个表示方位的词来设置背景
使用方位词时必须要同时指定两个值,如果只写一个值,那么第二个值默认为center
-
-
通过偏移量来指定背景图片的位置
水平方向的偏移量 垂直方向的偏移量
-
设置背景的范围:background-clip
可选值:
- border-box 默认值,背景会出现在边框的下边
- padding-box 背景不会出现在边框,只出现在内容区和内边距
- content-box 背景只会出现在内容区
-
背景图片偏移量计算的原点:background-origin
可选值:
-
padding-box 默认值, background-position从内边距开始算
-
content-box 背景图片的偏移量从内容区处计算
-
border-box 背景图片的变量从边框处开始计算
-
-
设置图片的大小:background-size
第一个值表示宽度
第二个值表示高度
如果只写一个,则第二个值默认为auto
可选值:
-
cover 图片的比例不变,将元素铺满
-
contain 图片的比例不变,将图片在元素中完整显示
-
-
背景图片是否跟着元素移动:background-attachment
可选值:
- scroll 默认值 背景图片会跟元素移动
- fixed 背景图片会固定在页面中,不会随元素移动
-
简写属性:background: ;所有背景相关的样式都可以通过该样式来设置,并且该样式没有顺序要求,也没有哪个属性是必须写的
- 注意:background-size必须写在background-position的后边,并且使用/隔开
- background-origin background-clip 两个样式 origin要在clip的前边
7.5、雪碧图的使用
雪碧图的使用步骤:
- 1、先确定要使用的图标
- 2、测量图标的大小
- 3、根据测量结果创建一个元素
- 4、将雪碧图设置为元素的背景图片
- 5、设置偏移量以显示想要显示的图标
雪碧图的特点:
- 一次性将多个图片加载到页面,降低请求的次数,加快访问速度,提升用户的体验
7.6、线性渐变
渐变是图片,需要通过background-image来设置
-
linear-gradient()
linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域,线性渐变的开头,我们可以指定一个渐变的方向
可选值:
- to left
- to right
- to top
- to bottom
- deg deg表示度数
- turn 表示圈
渐变也可以同时指定多个颜色,多个颜色默认平均分布,例如linear-gradient(red,yellow,blue,green)
-
repeating-linear-gradient() 可以平铺的线性渐变
7.7、径向渐变
-
径向渐变(放射性效果):radial-gradient()
默认情况下径向渐变的形状是根据元素的形状来计算的
正方形 --》圆形
长方形 --》 椭圆形