CSS text-transform
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.