CSS 文本

文本是网页内容的核心，CSS 提供了大量属性来控制文本的外观，以提高可读性和视觉吸引力。

color

color 属性用于设置文本的颜色。

body {
  color: black; /* 设置默认文本颜色 */
}

h1 {
  color: #0000ff; /* 蓝色 */
}

p.highlight {
  color: rgb(255, 0, 0); /* 红色 */
}

text-align

text-align 属性用于设置块级元素内文本的水平对齐方式。

• left: (默认) 左对齐。
• right: 右对齐。
• center: 居中对齐。
• justify: 两端对齐。浏览器会调整单词之间的间距，使得每行文本的左右两端都对齐到容器的边缘。

h1 {
  text-align: center;
}

p {
  text-align: justify;
}

text-decoration

text-decoration 属性用于为文本添加或移除装饰线。它是一个简写属性。

• text-decoration-line: underline (下划线), overline (上划线), line-through (删除线)。
• text-decoration-color: 设置装饰线的颜色。
• text-decoration-style: solid (实线), wavy (波浪线), dotted (点状), dashed (虚线), double (双线)。

a {
  text-decoration: none; /* 移除链接的默认下划线 */
}

h2 {
  text-decoration: underline wavy red; /* 添加红色的波浪下划线 */
}

text-transform

text-transform 属性用于控制文本的大小写。

• uppercase: 将所有字符转换为大写。
• lowercase: 将所有字符转换为小写。
• capitalize: 将每个单词的首字母转换为大写。

p.uppercase {
  text-transform: uppercase;
}

text-indent

text-indent 属性用于指定文本块中第一行文本的缩进量。

p {
  text-indent: 50px; /* 首行缩进 50 像素 */
}

letter-spacing 和 word-spacing

• letter-spacing: 控制字符之间的间距（字间距）。
• word-spacing: 控制单词之间的间距。

h1 {
  letter-spacing: 3px;
}

p {
  word-spacing: 10px;
}

line-height

line-height 属性用于设置行与行之间的距离（行高）。为了获得更好的可读性，行高通常设置为字号的 1.5 到 2 倍。

p {
  line-height: 1.6; /* 设置行高为字号的 1.6 倍 */
}

text-shadow

text-shadow 属性用于为文本添加阴影。你可以指定水平偏移、垂直偏移、模糊半径和阴影颜色。

h1 {
  text-shadow: 2px 2px 5px red; /* 水平偏移2px，垂直偏移2px，模糊5px的红色阴影 */
}

通过组合这些文本属性，你可以精确地控制网页的排版，创造出美观且易于阅读的内容。