CSS 如何将字符串的首字母大写，其他字母小写

在本文中，我们将介绍如何使用CSS将字符串的首字母大写，并将其他字母转换为小写。这在设计网页时经常会遇到，特别是在标题、按钮文字等地方，可以帮助我们实现更好的排版效果。

阅读更多：CSS 教程

text-transform属性

CSS的text-transform属性可以帮助我们实现文字的大小写转换。其中，text-transform属性的取值包括：capitalize、uppercase、lowercase 和 none。

capitalize：将单词的第一个字母转换为大写，其他字母转换为小写。
uppercase：将所有字母转换为大写。
lowercase：将所有字母转换为小写。
none：使用文本的默认大小写。

我们要实现只将字符串的首字母大写，其他字母小写的效果，可以将text-transform属性的取值设置为capitalize。

.text {
  text-transform: capitalize;
}

示例

下面我们通过示例来演示如何使用CSS将字符串的首字母大写，其他字母小写。

<!DOCTYPE html>
<html>
<head>
  <style>
    .text {
      text-transform: capitalize;
    }
  </style>
</head>
<body>
  <h1 class="text">hello world</h1>
  <p class="text">this is a test</p>
</body>
</html>

在上面的示例中，我们使用了一个class为”text”的样式来设置首字母大写的效果。我们将标题和段落的文本内容分别设置为”hello world”和”this is a test”。在浏览器中打开这个页面，我们会发现首字母大写，其他字母小写的效果被成功应用到了文本中。

实际应用场景

这种将字符串的首字母大写，其他字母小写的效果在实际的网页设计中非常常见。比如，我们可以在网页的标题中使用这种效果，使标题看起来更加醒目和规范。同时，在按钮文字或导航链接中也可以应用这种效果，使用户更加易于理解和操作。

<!DOCTYPE html>
<html>
<head>
  <style>
    .title {
      text-transform: capitalize;
      font-size: 24px;
      color: #333;
    }
    .button {
      text-transform: capitalize;
      font-size: 14px;
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1 class="title">welcome to my website</h1>
  <button class="button">click me</button>
</body>
</html>

在上面的示例中，我们设置了标题文本的大小为24像素，颜色为#333。按钮的文本大小为14像素，背景颜色为#007bff，文字颜色为白色。同时，我们也应用了首字母大写的效果，使标题和按钮的文字看起来更加规范和美观。