CSS text-transform

2025年3月26日 | 阅读 2 分钟

此 CSS 属性允许我们更改文本的大小写。它用于控制文本的资本化。此 CSS 属性可用于使文本全部为小写或全部为大写，或者可以将每个单词的首字母转换为大写。

语法

让我们通过示例讨论它的属性值。

capitalize

它将每个单词的首字母转换为大写。它不会将数字后的第一个字母大写。它只影响单词的首字母，而不是更改单词中其余字母的大小写。

如果我们应用 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> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: capitalize</h2> 
        <p>hello world</p> 
        <p>WELCOME to the javaTpoint</p> 
		
</body> 
  
</html>

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> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: uppercase</h2> 
        <p>hello world</p> 
        <p>WELCOME to the javaTpoint</p> 
		
</body> 
  
</html>

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> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: lowercase</h2> 
        <p>HELLO WORLD</p> 
        <p>WELCOME TO THE JAVATPOINT</p> 
		
</body> 
  
</html>

无

这是默认值，没有资本化。它按原样渲染文本。

语法

示例

<!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> 
    <center> 
        <h1>CSS text-transform property</h1> 
  
        <h2>text-transform: none</h2> 
        <p>Hello World</p> 
        <p>Welcome to the javaTpoint.</p> 
		
</body> 
  
</html>

下一个话题CSS outline

CSS text-transform

capitalize

uppercase

lowercase

无

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS text-transform

capitalize

uppercase

lowercase

无

相关帖子

Absolute vs Relative CSS

CSS Background-color

CSS Outline

CSS Login

CSS min-height

CSS Button Hover Effects

CSS clearfix

Text Ellipsis CSS

word-break property

Normalize CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器