如何使用 CSS 设计文本段落的首字母？

在 CSS 中，我们可以使用::first-letter 伪元素来选取文本块的第一个字母，并对其进行样式设置。

语法

p::first-letter {
    /* 样式设置 */
}

样式设置

font-size

设置字体大小。

p::first-letter {
    font-size: 2em;
}

font-family

设置字体族。

p::first-letter {
    font-family: 'Times New Roman', Times, serif;
}

font-weight

设置字体粗细。

p::first-letter {
    font-weight: bold;
}

color

设置字体颜色。

p::first-letter {
    color: red;
}

background-color

设置首字母背景颜色。

p::first-letter {
    background-color: yellow;
}

text-transform

设置字母大小写转换。

p::first-letter {
    text-transform: uppercase;
}

vertical-align

设置文本垂直对齐方式。

p::first-letter {
    vertical-align: middle;
}

示例

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
    background-color: yellow;
    text-transform: uppercase;
    vertical-align: middle;
}

以上代码会将文本段落的首字母设置为红色加粗的大写字母，并用黄色背景突出显示。