小白干货：一文梳理css文字样式

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

CSS 的文字样式是每个页面中都会用到的，今天瑶琴带大家学习文字样式的属性和属性值，这也是初学者必须要掌握的内容。

下面是一些常见的文字样式属性以及它们的取值：

1.字体样式（Font Styles）：

font-family：定义字体系列。可以指定一组字体名称，浏览器将按顺序查找可用的字体。例如：font-family: Arial, sans-serif;

font-size：定义字体大小。可以使用像素（px）、百分比（%）、em等单位。例如：font-size: 16px;

font-weight：定义字体粗细。通常取值为 normal（默认）或 bold（粗体）。例如：font-weight: bold;

font-style：定义字体样式。可以取值为 normal（默认）、italic（斜体）或 oblique（倾斜）。例如：font-style: italic;

2.文字颜色（Text Color）：

color：定义文字颜色。可以使用颜色名称、十六进制值或RGB值。例如：color: #333;

3.文字对齐（Text Alignment）：

text-align：定义文字水平对齐方式。可以取值为 left（左对齐）、right（右对齐）、center（居中对齐）或 justify（两端对齐）。例如：text-align: center;

4.文本装饰（Text Decoration）：

text-decoration：定义文本装饰效果。常见取值包括 none（无装饰）、underline（下划线）、overline（上划线）和 line-through（删除线）。例如：text-decoration: underline;

5.文本转换（Text Transformation）：

text-transform：定义文本转换。可以将文本转换为大写、小写或首字母大写。例如：text-transform: uppercase;

6.文字阴影（Text Shadow）：

text-shadow：为文字添加阴影效果。该属性通常需要指定阴影的水平偏移、垂直偏移、模糊半径和颜色。例如：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

7.文字间距（Letter Spacing）：

letter-spacing：定义字符之间的间距。可以为正值增加间距，为负值减少间距。例如：letter-spacing: 2px;

8.文字行高（Line Height）：

line-height：定义行高，即文本行与行之间的垂直间距。可以使用像素、百分比或无单位值。例如：line-height: 1.5;

9.文字溢出处理（Text Overflow）：

text-overflow：定义当文字溢出容器时的处理方式，常见取值为 ellipsis（省略号）。例如：text-overflow: ellipsis;

10.文字缩进（Text Indent）：

text-indent：定义首行文本的缩进量。可以使用像素或其他单位。例如：text-indent: 20px;

这些是 CSS 中用于设置文字样式的一些常见属性和值。你可以根据需要组合和调整这些属性，以实现所需的文字外观和排版效果。在实际项目中，你还可以使用伪类选择器（如 :hover）来创建交互式的文本样式。这块内容是前端开发者必须掌握的。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。