CSS text-transform 属性

CSS text-transform 语法

在 CSS 中,text-transform 属性用于实现文本的大小写转换。

语法:

text-transform: 关键字;

说明:

text-transform 的取值有 4 种,如下表所示。

text-transform 属性取值
取值 说明
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>

页面效果如下图所示。

text-transform 示例

上一篇: text-indent

下一篇: text-shadow

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号