CSS text-transform 属性

CSS text-transform 属性用于指定文本的大小写转换方式，可以将文本转换为大写、小写、首字母大写或者不变。它有如下语法：

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

属性值

none：默认值，保持文本不变
capitalize：将每个单词的第一个字母转换为大写字母
uppercase：将文本转换为大写字母
lowercase：将文本转换为小写字母
initial：将属性设置为其初始值
inherit：从父元素继承该属性值

使用方式

我们可以在 CSS 样式表中使用该属性，如下所示：

h1 {
  text-transform: uppercase;
}

p {
  text-transform: capitalize;
}

可以看到，上述代码中，我们将 h1 元素的文本转换为大写，而将 p 元素的文本首字母大写。

注意事项

text-transform 属性只会影响视觉效果，不会改变文本本身；
该属性可以应用于任何元素；

兼容性

text-transform 属性兼容性良好，在主流浏览器上均支持，包括 Chrome、Firefox、Edge、Safari 和 Opera。

示例

下面是一个文本大小写转换的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .uppercase {
        text-transform: uppercase;
      }
      .lowercase {
        text-transform: lowercase;
      }
      .capitalize {
        text-transform: capitalize;
      }
    </style>
  </head>
  <body>
    <h1 class="uppercase">This is uppercased text</h1>
    <p class="lowercase">THIS IS LOWERCASED TEXT</p>
    <p class="capitalize">this is capitalized text</p>
  </body>
</html>

代码解释：

在上述代码中，定义了三个 CSS 类名，分别设置了大写、小写、首字母大写。然后，在 HTML 中分别实例化这三个类，并渲染出页面效果。

结束语

CSS text-transform 属性是一个非常有用的文本样式属性，可以用来改变文本的大小写形式，让它更加符合需求。在使用该属性时，需要考虑到不同的浏览器兼容性，以及特殊场景下的使用方式。

CSS text-indent 属性 CSS top 属性