二、CSS 文本属性¶

包含内容

修饰线，首行缩进，行高，font 属性复合写法，内容水平居中，字间距，字符间距

1、text-decoration 修饰线¶

修饰线

用于设置文本的修饰线（下划线、上划线、贯穿线/删除线或闪烁）外观的

常用的属性值有以下三种

属性	描述
none	没有修饰线
underline	下划线
line-through	删除线

<style>
  a {
    /* 去掉下划线 */
    text-decoration: none;
  }
  p {
    /* 下划线 */
    text-decoration: underline;
  }
  div {
    /* 删除线 */
    text-decoration: line-through;
  }
</style>
<body>
  <a href="#">艾编程</a>
  <p>为每个互联网人提供高质量的终身学习平台</p>
  <div>删除线</div>
</body>

渲染效果： ![[Pasted image 20260225095725.png]]

扩展延伸：

text-decoration 它是以下四个属性的简写

属性	描述
text-decoration-line	文本修饰的位置，如下划线 underline，删除线 line-through
text-decoration-color	文本修饰的颜色
text-decoration-style	文本修饰的样式，如波浪线 wavy 实线 solid 虚线 dashed
text-decoration-thickness	文本修饰线的粗细

<style>
  .wavy {
    /* text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-thickness: 5px;
    text-decoration-style: wavy; */

    /* 以下属性等同于上面 4个属性的简写 */
    text-decoration: underline red 5px wavy; /*下划线 红色 粗细 波浪线 */
  }
</style>
<body>
  <div class="wavy">艾编程-为每个互联网人提供高质量的终身学习平台</div>
</body>

渲染效果： ![[Pasted image 20260225095826.png]]

2、text-indent 首行缩进¶

首行缩进

text-indent 属性定义首行文本内容之前的缩进量
比如：一般段落文字的第一行，会向内缩进两个字的间距大小
常用单位是 em ， em 是 CSS 中一个相对长度单位， 1em 相对于当前元素的 font-size ）；如果当前元素无 font-size 属性，则相当于父元素的 font-size 大小。
1em 是一个字符的宽度， 2em 表示 2 个字符的宽度

<style>
  body {
    font-size: 12px;
  }
  p {
    font-size: 20px;
  }
  .title {
    /* 首行缩进为 2个字符大小 2 * 20=40px */
    text-indent: 2em;
  }
  .em {
    /* 行缩进为 2个字符大小 2 * 12=24px */
    text-indent: 2em;
  }
</style>
<body>
  <p>艾编程，为每个互联网人提供高质量的终身学习平台</p>
  <p class="title">艾编程，为每个互联网人提供高质量的终身学习平台</p>
  <div class="em">艾编程，为每个互联网人提供高质量的终身学习平台</div>
</body>

![[Pasted image 20260225095945.png]]

3、line-height 行高¶

行高

line-height 是 CSS 中用于控制行间距的属性，但它也常被用来实现单行文本在容器内的垂直居中效果

<style>
  .line {
    border: 1px solid red;
    line-height: 50px;
  }
</style>
<p class="line">文字在高度为 50px 的容器中垂直居中</p>

![[Pasted image 20260225100049.png]]

如何测量行高

如何测量行高，有很多种方式，比如：从一行文字的最顶部到下一行文字的最顶部之间的距离，就是行高。

具体测量方式可以看下图 ![[Pasted image 20260225100122.png]]

注意

①② 是行高测量上的定义，③ 是行高的真实定义。
我们通常说的行高，是指一行文字所占的空间高度，然后文字在这个高度的垂直方向向居中显示。

3.1、line-height 行高值的 4 种写法¶

单位	实例	说明
px	line-height:30px;	行高为 30px
数值表示法	line-height:2;	行高为 font-size 的倍数，如果 font-size:20px；则 line-height:2；表示行高为 40px
百分比表示法	line-height:200%;	行高为 font-size 的百分比，如果 font-size:20px ，则 line-height:40px;
normal	line-height:normal;	默认值，大约为 line-height:1.2 ，但具体是多少，取决于元素的 font-family 。实际开发中，一般不会用这个值

<style>
  div {
    border: 1px solid red; /*边框线:1像素 实线 红色*/
    font-size: 20px; /*字体大小*/
  }
  .line1 {
    line-height: 30px; /*行高为30px*/
  }
  .line2 {
    line-height: 2; /*行高为字体2倍*/
  }
  .line3 {
    line-height: 300%; /*行高为字体3倍*/
  }
</style>
<body>
  <div class="line1">行高为 30px</div>
  <div class="line2">行高为 数值2</div>
  <div class="line3">行高为 300%</div>
</body>

![[Pasted image 20260225100203.png]]

3.2、行高最佳实践¶

TIP

推荐在 body 中设置 line-height 时使用无单位数值，比如 1.5 ，来控制整个页面的文字默认行高
主段落内容的 line-height 至少应为 1.5
实际工作中行高： 1.25 ， 1.5 ， 1.75 都是常用的倍数设置
如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。（移动端或响应式网站常用）

<style>
  p {
    font-size: 20px;
  }
  /* 当页面大于等于800px时，p标签字体大小为 20px */
  @media screen and (min-width: 800px) {
    p {
      font-size: 40px;
    }
  }
  p {
    margin: 0;
    /* 将值改成 1.5 才能支持响应式，
       所以这里的最佳值为 1.，而非固定值 30px */
    line-height: 30px;
  }
</style>
<body>
  <p>艾编程，为每个互联网人提供高质量的终身学习平台</p>
  <p>艾编程，为每个互联网人提供高质量的终身学习平台</p>
  <p>艾编程，为每个互联网人提供高质量的终身学习平台</p>
</body>

说明：

正常情况下字体大小为 20px，行高为 30px。
当页面宽度 >= 800px 时，字体大小为 40px，行高还为 30px，就造成文字因为行高不够，文字在垂直方向上挤到一起了。
如果把行高值改为 1.5，则行高在页面宽度 >=800px 时，行高被计算为 40 * 1.5 = 60px 。这样才是合理的（文字变大，行间距理应也变大）

![[Pasted image 20260225100344.png]]

4、font 属性 - 复合写法¶

TIP

font 属性可以用来作为 font-style ， font-weight ， font-size ， line-height 和 font-family 属性的合写

/* italic 字体倾斜，
   bold 加粗，
   20px 表示字体大小
   1.5 表示行高是字体大小的1.5倍
   "微软雅黑" Arial，表示字体类型微软雅黑，后备字体 Arial */
font: italic bold 20px/1.5 "微软雅黑", Arial;

font-style 和 font-weight 必须写在 font-size 之前

/*正确写法*/
font: bold italic 20px/1.5 "宋体";
font: 20px/1.5 "宋体";

/*错误写法*/
font: italic 20px/1.5 bold;
font: 20px/1.5 bold "宋体";

任何未指定的值都将设置为其对应的初始值（会覆盖先前使用非简写属性设置的值）

/* 20px 表示字体大小
   1.5 表示行高是字体大小的1.5倍
   "微软雅黑" Arial，表示字体类型微软雅黑，后备字体 Arial */
font: 20px/1.5 "微软雅黑", Arial;

<style>
  p {
    border: 1px solid red;
    /* 此行高不生效，因为 font连写时，30px/行高 ，这里默认有行高了 */
    /* line-height: 40px; */
    font: bold 30px "宋体";
    /* line-height 写在 font 下边，即可生效，此时 是覆盖了 font默认的行高 */
    line-height: 50px;
  }
</style>
<body>
  <p>连写时，即时没有写行高，本质上他也是采用了默认的行高</p>
</body>

渲染效果： ![[Pasted image 20260225100525.png]]

font 属性连写时，必须设置 font-size 和 font-family 才能生效

font: bold 30px; /* 这种写法是错的，不会生效 因为没有 font-family */

4.1、最佳实践¶

TIP

在项目开发中，一般都会在 body 选择器中，统一控制页面的默认字体大小，行高，字体类型，文字颜色。

body {
  font: 14px/1.5 "微软雅黑";
  color: #000;
}

注：

应用场景：（小米，京东等等一线互联网企业都这么用）

渲染效果： ![[Pasted image 20260225100649.png]]

5、text-align 行内容水平位置¶

TIP

定义行内容（例如文字、图片、行内块级元素）相对它的块父元素的水平对齐方式

text-align 常用属性值

属性值	描述
left	水平居左
right	水平居右
center	水平居中

案例

<style>
  div.left {
    text-align: left;
  }
  div.center {
    text-align: center;
  }
  div.right {
    text-align: right;
  }
</style>
<body>
  <div class="left">左边</div>
  <div class="center">中间</div>
  <div class="right">右边</div>
</body>

渲染效果： ![[Pasted image 20260225100753.png]]

6、word-spacing 字间距¶

TIP

word-spacing 表示字间距，对中文是无效的，仅对英文单词起作用

属性值	描述
normal	正常的单词间距，由当前字体和/或浏览器定义。
长度	通过指定具体的额外间距来增加字体的单词间距

<style>
  .spacing {
    word-spacing: 50px; /*英文单词间距*/
  }
</style>
<body>
  <h3 class="spacing">注意观察，汉字与英文之间的显示区别</h3>
  <h3 class="spacing">display is different</h3>
</body>

渲染效果： ![[Pasted image 20260225100906.png]]

7、letter-spacing 字符间距¶

TIP

letter-spacing 属性用于设置文本字符的间距表现

属性值	描述
normal	此间距是按照当前字体的正常间距确定的
长度	指定文字间的间距以替代默认间距。可以是负值如-10px，负值很大时，文字会被聚拢到一起。

<style>
  .spacing {
    letter-spacing: 30px; /*字间距*/
  }
</style>
<body>
  <h3 class="spacing">注意观察，汉字与英文之间的显示区别</h3>
  <h3 class="spacing">display is different</h3>
</body>

渲染效果： ![[Pasted image 20260225100945.png]]