蓝桥杯Web应用开发-CSS 基础语法3（文本属性）

news2024/10/6 14:26:42

CSS 基础语法-文本属性

专栏持续更新中

文本属性
文本属性用于定义文本的样式，通过文本属性，可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示：

属性	可取值	描述
line-height	normal、number、length、%	设置行高
text-indent	length、%	设置文本缩进
text-align	left、right、center、justify、start、end	设置对齐方式
letter-spacing	normal、length	设置字符间距
text-decoration	line、color、style、thickness	设置文本修饰
white-space	normal、pre、nowrap、pre-wrap、pre-line、break-spaces	规定如何处理空白
line-break	auto、loose、normal、strict、anywhere、unset	处理如何断开带有标点符号的文本的行

这里只给大家介绍两个最常用的文本属性 line-height 和 text-decoration。

line-height 的使用

line-height 用于设置多行元素的空间量，可取值具体说明如下：
• normal：取决于用户端。
• number：数字乘以元素的字体大小。
• length：指定长度用于计算高度。
• %：计算值是给定的百分比值乘以元素计算出的字体大小。

新建一个 index11.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height 的使用</title>
    <style>
      div {
        width: 300px;
        height: 400px;
        border: 1px solid;
        font-size: 15px;
        display: inline-block;
        vertical-align: top;
      }
      .div1 {
        line-height: 2; /*15 * 2*/
      }
      .div2 {
        line-height: 30%; /*15 * 30% */
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
    <div class="div2">
      <p>“海水呀，你说的是什么？”</p>
      <p>“是永恒的疑问。”</p>
      <p>“天空呀，你回答的话是什么？”</p>
      <p>“是永恒的沉默。”</p>
    </div>
  </body>
</html>

在这里插入图片描述

text-decoration 的使用

text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：
• none: 默认值，表示没有任何装饰效果。
• underline: 在文本下方添加下划线。
• overline: 在文本上方添加上划线。
• line-through: 在文本中间添加删除线。
• underline overline: 同时添加上划线和下划线。
• underline line-through: 同时添加下划线和删除线。
• overline line-through: 同时添加上划线和删除线。
• underline overline line-through: 同时添加上划线、下划线和删除线。

其他用法：
• text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
• text-decoration-color 设置线的颜色。
• text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
• text-decoration-thickness 设置线的粗细。

新建一个 index12.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-decoration 的使用</title>
    <style>
      .item1 {
        text-decoration: underline lime; /*下划线直线*/
      }
      .item2 {
        text-decoration: wavy overline lime; /*上划线波浪线*/
      }
      .item3 {
        text-decoration: line-through lime; /*中划线*/
      }
      .item4 {
        text-decoration: none; /*无样式*/
      }
      .item5 {
        text-decoration: dashed underline overline lime 5px; /*圆点上划线和下划线*/
      }
    </style>
  </head>
  <body>
    <p class="item1">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item2">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item3">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item4">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
    <p class="item5">太阳只穿一件朴素的光衣，白云却披了灿烂的裙裾。</p>
  </body>
</html>