CSS教程
CSS进阶

CSS text-transform

CSS text-transform属性允许我们更改文本的大小写。它用于控制文本大写。此CSS属性可用于以全小写或全大写形式显示文本,或将每个单词的首字符转换为大写。
语法
text-transform: capitalize| uppercase | lowercase | none | initial | inherit;
让我们一起讨论其属性值和示例。

capitalize

它将每个单词的第一个字符转换为大写。数字后的第一个字母不会大写。它只会影响单词的第一个字母,而不会更改单词中的其余字母。
如果我们将 大写属性应用于已经具有大写字母的单词,那么该单词的字母将不会转换为小写。
此属性的说明如下。
语法
text-transform: capitalize;
示例
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS text-transform Property
    </title>
    <style>
body{
text-align:center;
}
        h1 {
            color: blue;
        }
        p{
            text-transform: capitalize;
        }
    </style>
</head>
<body>
        <h1>CSS text-transform property</h1>
        <h2>text-transform: capitalize</h2>
        <p>hello world</p>
        <p>WELCOME to the lidihuo</p>
</body>
</html>
输出:

CSS text-transform property

text-transform: capitalize

hello world

WELCOME to the lidihuo

uppercase

顾名思义,它将单词的所有字符转换为大写。
语法
text-transform: uppercase;
示例
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS text-transform Property
    </title>
    <style>
body{
text-align:center;
}
        h1 {
            color: blue;
        }
        p{
            text-transform: uppercase;
        }
    </style>
</head>
<body>
        <h1>CSS text-transform property</h1>
        <h2>text-transform: uppercase</h2>
        <p>hello world</p>
        <p>WELCOME to the lidihuo</p>
</body>
</html>
输出:

CSS text-transform property

text-transform: uppercase

hello world

WELCOME to the lidihuo

lowercase

它将单词的所有字符转换为小写。
语法
text-transform: lowercase;
示例
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS text-transform Property
    </title>
    <style>
body{
text-align:center;
}
        h1 {
            color: blue;
        }
        p{
            text-transform: lowercase;
        }
    </style>
</head>
<body>
        <h1>CSS text-transform property</h1>
        <h2>text-transform: lowercase</h2>
        <p>HELLO WORLD</p>
        <p>WELCOME TO THE lidihuo</p>
</body>
</html>
输出:

CSS text-transform property

text-transform: lowercase

HELLO WORLD

WELCOME TO THE lidihuo

none

这是不带大写字母的默认值。
语法
text-transform: none;
示例
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS text-transform Property
    </title>
    <style>
body{
text-align:center;
}
        h1 {
            color: blue;
        }
        p{
            text-transform: none;
        }
    </style>
</head>
<body>
        <h1>CSS text-transform property</h1>
        <h2>text-transform: none</h2>
        <p>Hello World</p>
        <p>Welcome to the lidihuo.</p>
</body>
</html>
输出:

CSS text-transform property

text-transform: none

Hello World

Welcome to the lidihuo.

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4