CSS学习笔记-07-字体与背景

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()

  默认情况下径向渐变的形状是根据元素的形状来计算的

  正方形 --》圆形

  长方形 --》 椭圆形