CSS text-transform 语法
在 CSS 中,text-transform 属性用于实现文本的大小写转换。
语法:
text-transform: 关键字;说明:
text-transform 的取值有 4 种,如下表所示。
| 取值 | 说明 |
|---|---|
| none(默认值) | 无转换 |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母转换为大写 |
提示: text-transform 属性是针对英文而言的,因为中文不存在大小写之分。
CSS text-transform 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 是 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS text-transform 示例
接下来,我们通过一个简单的例子来讲解一下 CSS text-transform 属性是如何使用的。
示例:text-transform 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p:nth-child(1) { text-transform: none; }
p:nth-child(2) { text-transform: uppercase; }
p:nth-child(3) { text-transform: lowercase; }
p:nth-child(4) { text-transform: capitalize; }
</style>
</head>
<body>
<p>Rome wasn't built in a day.</p>
<p>Rome wasn't built in a day.</p>
<p>Rome wasn't built in a day.</p>
<p>Rome wasn't built in a day.</p>
</body>
</html>页面效果如下图所示。

