css文本样式和字体样式

本节介绍的是css常用的字体样式和文本样式

字体样式：
1.控制字体粗细的font-weight
2.字体风格font-style
3.行高line-height
4.以及字体综合font
文本样式：
5.水平对齐text-align
6.文本修饰text-decoration
7.文本缩进text-indent

---

1.font-weight字体粗细

• 作用：设置文字是否加粗显示，一般是用于重点内容
• 属性名：font-weight
• 属性值：单词类型、数字类型

单词类型：normal、bold、bolder、lighter
数字类型：100-900的整百数字

属性值	作用
normal	默认（400）
bold	加粗（700）
bolder	更粗
lighter	细体

代码示范：

 p{
        font-weight: bold;
      }
 a{
        font-weight: 700;
      }

点击尝试

---

2.字体风格font-style

• 作用:设置文字是否斜体显示
• 属性名：font-style

• 属性值：normal、italic、oblique

  属性值	作用
  normal	默认字体
  italic	设置斜体文字，主要针对英文以字体中的斜体样式显示
  oblique	设置斜体文字，只将文字倾斜显示，与字体无关

代码示范：

.italic{
        font-style: italic;
      }

.oblique{
        font-style: oblique;
      }

点击尝试

---

3.行高line-height
作用：设置一行文字实际占用高度，文字字号在行高中是垂直居中的
属性名：line-height
属性值：数字、长度、百分百、关键词（normal）

注意：无单位数字乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法！！！
代码示范：

p{
        line-height: 2;
      }

a{
         line-height:20px;
      }

点击尝试

---

4.以及字体综合font
概念：font综合里有五个单一属性，分别为：字体（family）、字号（size）、行高（inline-height）、加粗（weight）、斜体（style）。属性值要2个到多个以上才可以使用，并且要用空格按顺序分开。

写法1：font综合书写时，必须要有字号和字体参与，字号在前，字体再后，顺序颠倒无效

代码示范：

p{
font：14px "楷体"；
}

写法2：对字号、行高、字体书写时，顺序必须是字号/行高、字体，且字号和行高之间要用/分隔出来
代码示范：

p{
font：14px/2 "宋体"；
}

写法3：必须按照顺序书写：斜体、粗细、字号/行高、字体书写，斜体和粗细不分先后，但要在字号前面
代码示范:

p{
font：italic bolder  14px/2 "宋体"；
}

点击尝试

---

5.水平对齐text-align

• 作用：给文本类水平方向对齐，也就是x轴，在盒子中，不论文本是单行还是多行都会对应方向对齐。
• 属性值：left、center、right

属性值	作用
left	向左对齐，默认值
center	居中对齐，较为常用
right	向右对齐

代码示范：

.center{
  text-align:center;
}
.left{
  text-align:left;
}
.right{
  text-align:right;
}

点击尝试

---

6.文本修饰text-decoration

• 作用：设置文本整体是否有线条的修饰效果

• 属性值：none、overline、line-through、underline

  属性值	作用
  none	没有修饰，默认值，一般用于清除a标签默认值
  overline	上划线
  line-through	中划线，用作删除线，与del标签默认值一致
  underline	下划线，a标签默认值

  代码示范：

  .none{
  text-decoration:none;
  }
  .overline{
  text-decoration:overline;
  }
  .line{
  text-decoration:line-through;
  }
  .underline{
  text-decoration:underline;
  }

  点击尝试

---

7.文本缩进text-indent
作用：设置首行方向缩进，左负右正进行区分方向缩进
属性值：px、em、百分比

属性值	作用
px单位	表示首行缩进多少px
em单位	首行缩进几个中文字符位置
百分比	首行缩进父级标签的width百分比

代码示范：

p{
   text-indent:2em;
}

点击尝试