在网页设计中，CSS（层叠样式表）扮演着至关重要的角色，它赋予了网页丰富多彩的外观和专业的排版。本文将深入介绍一系列与文本样式相关的CSS属性，包括颜色、字体、对齐方式、间距调整等，通过实例帮助你掌握这些基本而又强大的工具。
1. color - 文本颜色
设置文本的颜色。颜色值可以是颜色名称、十六进制、RGB、RGBA等。
示例:
p {
color: #336699; /* 使用十六进制颜色 */
}
2. font-family - 字体选择
指定文本的字体系列。可以列出多个字体作为备选，以逗号分隔。
示例:
body {
font-family: Arial, sans-serif; /* 如果Arial不可用，则使用系统默认的无衬线字体 */
}
3. font-size - 字体大小
设置文本的字体大小。可以是绝对单位（如px）、相对单位（如em、rem）或关键词（如small、large）。
示例:
h1 {
font-size: 2em; /* 相对于父元素的字体大小 */
}
4. font-weight - 字体粗细
控制文本的粗细。常见值有normal、bold、100到900。
示例:
strong {
font-weight: bold; /* 加粗文本 */
}
5. font-variant - 字体变体
用于设置小型大写字母。主要值有normal和small-caps。
示例:
summary {
font-variant: small-caps; /* 将文本转换为小型大写字母 */
}
6. font-style - 字体风格
定义文本的风格，如斜体。常见值有normal、italic、oblique。
示例:
em {
font-style: italic; /* 斜体文本 */
}
7. line-height - 行高
控制行与行之间的垂直间距。
示例:
p {
line-height: 1.5; /* 设置为正常行高的1.5倍 */
}
8. letter-spacing - 字符间距
调整字符间的水平间距。
示例:
h2 {
letter-spacing: 2px; /* 增加标题字符间的间距 */
}
9. text-align - 文本对齐
设置文本的水平对齐方式。可选值有left、right、center、justify。
示例:
p.centered {
text-align: center; /* 文本居中对齐 */
}
10. text-indent - 首行缩进
指定段落首行的缩进量。
示例:
p {
text-indent: 2em; /* 首行缩进2个字符宽度 */
}
11. text-transform - 文本转换
控制文本的大小写。可用值有none、uppercase、lowercase、capitalize。
示例:
nav a {
text-transform: uppercase; /* 转换为大写 */
}
12. white-space - 白色空间处理
控制元素中的空白如何处理。常用值有normal、pre、nowrap。
示例:
.preformatted {
white-space: pre; /* 保留空格和换行，如同HTML源码 */
}
13. word-spacing - 单词间距
调整单词间的水平间距。
示例:
.spaced-out {
word-spacing: 5px; /* 增加单词间的间距 */
}
通过上述示例，我们可以看到，CSS文本样式属性为我们提供了强大的灵活性和控制力，使得网页内容不仅易于阅读，还能根据设计需求展现出丰富的视觉效果。掌握这些属性，是每一位前端开发者的基础，也是进阶设计美感的关键。
