当前位置：首页 > news >正文

CSS Text（文本）学习笔记

news 2025/7/17 11:42:31

一、文本格式化

CSS 提供了多种文本格式化属性，用于控制文本的外观和布局。这些属性可以改变文本的颜色、对齐方式、修饰、大小写转换、缩进等。

1. 文本颜色

CSS 的 color 属性用于设置文本的颜色。颜色可以通过以下方式指定：

十六进制值：如 #FF0000 表示红色。
RGB 值：如 rgb(255, 0, 0) 表示红色。
颜色名称：如 red。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head>
  <style>
    body { color: red; }
    h1 { color: #00ff00; }
    h2 { color: rgb(255, 0, 0); }
  </style>
</head>
<body>
  <h1>这是一个绿色的标题</h1>
  <h2>这是一个红色的副标题</h2>
  <p>这是一个红色的段落。</p>
</body>
</html>

预览

注意：根据 W3C 标准，如果定义了颜色属性，还必须定义背景色属性。

二、文本对齐方式

text-align 属性用于设置文本的水平对齐方式。它有以下几种值：

left：左对齐（默认值）。
right：右对齐。
center：居中对齐。
justify：两端对齐，使每行的左右两端都对齐。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { text-align: center; }
    p.date { text-align: right; }
    p.main { text-align: justify; }
  </style>
</head>
<body>
  <h1>这是一个居中的标题</h1>
  <p class="date">日期：2025-04-05</p>
  <p class="main">这是一个两端对齐的段落，每一行的左右两端都对齐。</p>
</body>
</html>

预览

三、文本修饰

text-decoration 属性用于设置或删除文本的装饰。常见的值包括：

none：无装饰。
underline：下划线。
overline：上划线。
line-through：删除线。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head>
  <style>
    a { text-decoration: none; }
    h1 { text-decoration: overline; }
    h2 { text-decoration: line-through; }
    h3 { text-decoration: underline; }
  </style>
</head>
<body>
  <a href="#">这是一个无下划线的链接</a>
  <h1>这是一个有上划线的标题</h1>
  <h2>这是一个有删除线的标题</h2>
  <h3>这是一个有下划线的标题</h3>
</body>
</html>

预览

注意：不建议对非链接的文本使用下划线，因为这可能会让用户混淆。

四、文本转换

text-transform 属性用于控制文本的大小写。它有以下几种值：

none：默认值，不进行转换。
uppercase：将文本转换为大写。
lowercase：将文本转换为小写。
capitalize：将每个单词的首字母大写。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head>
  <style>
    p.uppercase { text-transform: uppercase; }
    p.lowercase { text-transform: lowercase; }
    p.capitalize { text-transform: capitalize; }
  </style>
</head>
<body>
  <p class="uppercase">这是一个大写的段落。</p>
  <p class="lowercase">这是一个小写的段落。</p>
  <p class="capitalize">这是一个首字母大写的段落。</p>
</body>
</html>

预览

五、文本缩进

text-indent 属性用于设置文本的第一行缩进。它通常用于段落的首行缩进，以增强文本的可读性。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head>
  <style>
    p { text-indent: 50px; }
  </style>
</head>
<body>
  <p>这是一个有首行缩进的段落。通过设置 text-indent 属性，可以让段落的第一行缩进一定的距离，从而增强文本的可读性。</p>
</body>
</html>

预览

六、其他文本属性

CSS 还提供了其他一些文本属性，用于进一步控制文本的格式和布局：

letter-spacing：设置字符之间的间距。
line-height：设置行高。
text-shadow：设置文本阴影。
vertical-align：设置元素的垂直对齐方式。
white-space：设置元素中空白的处理方式。
word-spacing：设置单词之间的间距。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head>
  <style>
    p.letterspacing { letter-spacing: 2px; }
    p.lineheight { line-height: 1.5; }
    p.textshadow { text-shadow: 2px 2px 4px #000000; }
    p.verticalalign { vertical-align: middle; }
    p.whitespace { white-space: nowrap; }
    p.wordspacing { word-spacing: 10px; }
  </style>
</head>
<body>
  <p class="letterspacing">这是一个字符间距为 2px 的段落。</p>
  <p class="lineheight">这是一个行高为 1.5 的段落。</p>
  <p class="textshadow">这是一个有文本阴影的段落。</p>
  <p class="verticalalign">这是一个垂直对齐的段落。</p>
  <p class="whitespace">这是一个禁止换行的段落。</p>
  <p class="wordspacing">这是一个单词间距为 10px 的段落。</p>
</body>
</html>