《CSS 实战指南》2024 第二章:CSS美化文本

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

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; }

Tags：text-decoration

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。