How to set the capitalization of letters in css? The text-transform property sets the capitalization of letters (introduction)-CSS Tutorial-php.cn

How to set the capitalization of letters in css? The text-transform property sets the capitalization of letters (introduction)

青灯夜游

Release： 2018-10-12 10:29:51

Original

10259 people have browsed it

Sometimes we need to capitalize the first letter of an English word or pinyin; or we need to make all Chinese and English words in the entire text uppercase or lowercase. So what is the effect? This article will introduce to you how to set the case of letters in CSS, so that you can understand how the text-transform attribute sets the case of letters. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s learn about the related knowledge of text-transform attribute!

The text-transform attribute can control the case of text and will change the case of letters in the element, regardless of the case of the text in the source document. If the attribute value is capitalize, some letters are capitalized, but it is not clearly defined how to determine which letters are capitalized, it is up to the user agent to recognize the individual "words".

Let’s take a look at the attribute value of the text-transform attributeHow to control the upper and lower case of characters:

capitalize: Set text Each word in begins with a capital letter, that is, the first letter of each word is capitalized.

uppercase: Define only uppercase letters, and set each letter in the text to be displayed in uppercase.

lowercase Define no uppercase letters, only lowercase letters, and set each letter in the text to be displayed in lowercase.

We use a simple code example to learn more about how to implement the above attribute values.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Text-transform属性设置大小写</title>
		<style type="text/css">
			h1 {text-transform: uppercase}
			
			p.uppercase {text-transform: uppercase}
			
			p.lowercase {text-transform: lowercase}
			
			p.capitalize {text-transform: capitalize}
		</style>
	</head>
	<body>
		<h1>Text-transform属性设置大小写</h1>
		<p class="uppercase">Text-transform属性设置全大写</p>
		<p class="lowercase">Text-transform属性设置全小写</p>
		<p class="capitalize">Text-transform属性设置首字母大写</p>
	</body>
</html>

Copy after login

Rendering:

How to set the capitalization of letters in css? The text-transform property sets the capitalization of letters (introduction)

Note: All browsers support the text-transform attribute.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of How to set the capitalization of letters in css? The text-transform property sets the capitalization of letters (introduction). For more information, please follow other related articles on the PHP Chinese website!