CSS如何控制文本样式

发布时间：2025-04-13 16:49:26 作者：小樊
来源：亿速云阅读：106

CSS（层叠样式表）可以用来控制HTML元素的样式，包括文本样式。以下是一些常用的CSS属性，用于控制文本样式：

基本文本样式

color: 设置文本颜色。
```
p {
  color: red;
}
```
font-size: 设置文本大小。
```
p {
  font-size: 16px;
}
```

font-family: 设置文本字体。

p {
  font-family: Arial, sans-serif;
}

font-weight: 设置文本粗细。
```
p {
  font-weight: bold;
}
```
font-style: 设置文本样式（正常、斜体、倾斜）。
```
p {
  font-style: italic;
}
```

文本对齐和间距

text-align: 设置文本水平对齐方式（左对齐、右对齐、居中、两端对齐）。
```
p {
  text-align: center;
}
```
text-indent: 设置文本首行缩进。
```
p {
  text-indent: 2em;
}
```
line-height: 设置行高。
```
p {
  line-height: 1.5;
}
```
letter-spacing: 设置字符间距。
```
p {
  letter-spacing: 1px;
}
```

文本装饰

text-decoration: 设置文本装饰（删除线、下划线、上划线）。
```
p {
  text-decoration: underline;
}
```

文本转换

text-transform: 设置文本大小写转换（大写、小写、首字母大写）。
```
p {
  text-transform: uppercase;
}
```

文本溢出处理

overflow: 设置文本溢出时的显示方式（隐藏、滚动条、显示省略号）。
```
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```

示例

以下是一个综合示例，展示了如何使用上述属性来控制文本样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Styling Example</title>
  <style>
    p {
      color: blue;
      font-size: 18px;
      font-family: 'Times New Roman', Times, serif;
      font-weight: normal;
      font-style: normal;
      text-align: left;
      text-indent: 1em;
      line-height: 1.6;
      letter-spacing: 0.5px;
      text-decoration: none;
      text-transform: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
  </style>
</head>
<body>
  <p>This is a sample paragraph to demonstrate text styling in CSS.</p>
</body>
</html>

通过这些属性的组合使用，你可以灵活地控制HTML元素的文本样式，以满足不同的设计需求。

CSS如何控制文本样式

基本文本样式

文本对齐和间距

文本装饰

文本转换

文本溢出处理

示例

相关阅读