《CSS实战手册》2024版：第二章 - 文本美化技巧

文本的字体、大小、颜色和样式

CSS 美化文本可以通过以下方式实现：

1. 字体样式：使用 font-family 属性设置字体族，如 "Arial", "Times New Roman", "Verdana" 等。
2. 字体大小：使用 font-size 属性设置字体大小，如 "12px", "1em", "100%" 等。
3. 字体粗细：使用 font-weight 属性设置字体粗细，如 "normal", "bold", "bolder" 等。
4. 字体样式：使用 font-style 属性设置字体样式，如 "normal", "italic", "oblique" 等。
5. 文本对齐：使用 text-align 属性设置文本对齐方式，如 "left", "right", "center" 等。
6. 文本装饰：使用 text-decoration 属性设置文本装饰，如 "none", "underline", "overline", "line-through" 等。
7. 文本颜色：使用 color 属性设置文本颜色，如 "red", "#FF0000", "rgb(255, 0, 0)" 等。
8. 文字阴影：使用 text-shadow 属性设置文字阴影效果，如 "2px 2px 2px #000"。
9. 文字转换：使用 text-transform 属性设置文字转换方式，如 "uppercase"（大写）、"lowercase"（小写）和 "capitalize"（首字母大写）。
10. 文字间距：使用 letter-spacing 属性设置字母之间的间距，如 "2px"、"0.1em" 等。
11. 文字行高：使用 line-height 属性设置文字行高，如 "1.5"、"1.5em"、"150%" 等。

以下是一些示例代码：

/* 设置字体样式 */p {font-family: Arial, sans-serif;}/* 设置字体大小 */h1 {font-size: 24px;}/* 设置字体粗细 */strong {font-weight: bold;}/* 设置字体样式 */em {font-style: italic;}/* 设置文本对齐 */ul {text-align: left;}/* 设置文本装饰 */a {text-decoration: underline;}/* 设置文本颜色 */h2 {color: #FF0000;}/* 设置文字阴影 */h3 {text-shadow: 2px 2px 2px #000;}/* 设置文字转换 */p {text-transform: capitalize;}/* 设置文字间距 */p {letter-spacing: 1px;}/* 设置文字行高 */p {line-height: 1.5;}

CSS文本的对齐、缩进和行高可以通过以下属性进行设置：

1. 对齐（text-align）：用于设置文本的水平对齐方式，可选值有 left、right、center 和 justify。

p { text-align: center; }

1. 
   
2. 缩进（text-indent）：用于设置文本的首行缩进，可以设置为固定像素值或百分比。

p { text-indent: 2em; }

1. 行高（line-height）：用于设置文本行之间的垂直间距，可以设置为固定像素值或百分比。

p { line-height: 1.5; }

CSS文本的装饰和转换可以通过以下属性进行设置：

1. 文本装饰（text-decoration）：用于设置文本的装饰效果，可选值有 none、underline、overline、line-through 和 blink。

p { text-decoration: underline; }

2. 文本转换（text-transform）：用于设置文本的大小写转换方式，可选值有 none、capitalize、uppercase 和 lowercase。

h1 { text-transform: uppercase; }

3. 文本阴影（text-shadow）：用于设置文本的阴影效果，可以设置水平偏移、垂直偏移、模糊距离和颜色。

p { text-shadow: 2px 2px 4px #000000; }