CSS-文本背景篇

font

font-face

• 可以将服务器中的字体直接提供给用户去使用
• 示例：

@font-face {
  font-family:'myfont' ;
  /* 服务器中字体的路径 */
  src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}

字体相关的样式

• color：用来设置字体颜色
• font-size：字体的大小
• font-family：字体族（字体的格式）
  • 可选值：
    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等宽字体
  • font-family 可以同时指定多个字体，多个字体间使用,隔开
  • 字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
• font 简写属性
  • 语法：font: 字体大小/行高 字体族
  • 行高 可以省略不写 如果不写使用默认值
• font-weight：字重，字体的加粗
  • 可选值：
    • normal：默认值 不加粗
    • bold：加粗
    • 100-900：九个级别（没什么用）
• font-style：字体的风格
  • 可选值：
    • normal：正常的
    • italic：斜体
• line-height：行高，文字占有的实际高度
  • 值：
    • 带有单位（px、em）的数值
    • 一个整数，行高将会是字体的指定的倍数
  • 行高经常还用来设置文字的行间距
  • 行高会在字体框的上下平均分配
  • 行间距 = 行高 - 字体大小
  • 字体框
    • 字体框就是字体存在的格子，设置 font-size 实际上就是在设置字体框的高度
  • 将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

图标字体（iconfont）

• 方案一：通过 font-face 的形式来对字体进行引入

• 方案二：fontawesome 使用步骤

  1. 下载 https://fontawesome.com/
  2. 解压
  3. 将 css 和 webfonts 移动到项目中
  4. 将 all.css 引入到网页中
     • <link rel="stylesheet" href="./fa/css/all.css">
  5. 使用图标字体
  • 直接通过类名来使用图标字体

• 示例：<i class="fas fa-bell" style="font-size:80px; color:red;"></i>

• 方案三：通过伪元素来设置图标字体

  1. 找到要设置图标的元素通过 before 或 after 选中
  2. 在 content 中设置字体的编码
  3. 设置字体的样式
  • 示例：

    li::before{
      content: '\f1b0';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      color: blue;
      margin-right: 10px;
    }

• 方案四：通过实体来使用图标字体：

  • &#x 图标的编码;
  • 示例：<span class="fas">&#xf0f3;</span>

阿里的字体库

<link rel="stylesheet" href="./iconfont/iconfont.css">

文本样式

text-align：文本的水平对齐

• left：左侧对齐
• right：右对齐
• center：居中对齐
• justify：两端对齐

vertical-align：设置元素垂直对齐的方式

• baseline：默认值，基线对齐
• top：顶部对齐
• bottom：底部对齐
• middle：居中对齐

text-decoration：设置文本修饰

• none：什么都没有
• underline：下划线
• line-through：删除线
• overline：上划线

white-space：设置网页如何处理空白

• normal：正常
• nowrap：不换行
• pre：保留空白

文本换行

• word-wrap: break-word;强制换行
  • 根据单词换行，页面可能留有空间，如果长单词新起一行也放不下，才会强制断句
• word-break：break-all;强制换行
  • 根据页面宽度换行，页面空间充分利用

背景

background-color：设置背景颜色

background-image：设置背景图片

• 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
• 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
• 如果背景的图片大于元素，将会一个部分背景无法完全显示
• 如果背景图片和元素一样大，则会直接正常显示
• 示例：background-image: url(“./img/1.png”);

background-repeat：用来设置背景的重复方式

• repeat 默认值 ， 背景会沿着 x 轴 y 轴双方向重复
• repeat-x 沿着 x 轴方向重复
• repeat-y 沿着 y 轴方向重复
• no-repeat 背景图片不重复

background-position：用来设置背景图片的位置

• 设置方式：
  1. 通过 top left right bottom center 几个方位的词来设置背景图片的位置
     使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是 center
  2. 通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量

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 两个样式 ，orgin 要在 clip 的前边

渐变

• 渐变是图片，需要通过 background-image 来设置

linear-gradient()：线性渐变，颜色沿着一条直线发生变化

• 线性渐变的开头，我们可以指定一个渐变的方向
  • to left
  • to right
  • to bottom
  • to top
  • deg deg 表示度数
  • turn 表示圈
• 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
• 示例：background-image: linear-gradient(to right, red,orange,yellow,green,indigo,violet);

repeating-linear-gradient() 可以平铺的线性渐变

radial-gradient() 径向渐变(放射性的效果)

• 默认情况下径向渐变的形状根据元素的形状来计算的
  • 正方形 –> 圆形
  • 长方形 –> 椭圆形
• 语法：radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
• 大小：
  • circle 圆形
  • ellipse 椭圆
  • closest-side 近边
  • closest-corner 近角
  • farthest-side 远边
• 位置：top right left center bottom
• 示例：background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)