Home >Web Front-end >CSS Tutorial >Analyze the usage and example tutorials of text-transform
Analyze the usage and example tutorials of text-transform
- 零下一度Original
- 2017-06-19 11:24:132985browse
Syntax:
text-transform : none | capitalize | uppercase | lowercase
Parameters:
none : No transformation occurs
capitalize: Convert the first letter of each word to uppercase, and no conversion will occur
uppercase: Convert to uppercase
lowercase: Convert to lowercase
Instructions:
Retrieve or set the case of text in object .
The corresponding script feature is textTransform. Please see other books I have written.
text-transform and font-variantDifference
text-transform and font-variant can convert English text to upper and lower case. But the only function of font-variant is to convert English text into "small" uppercase text. Note that this is "small". Generally, the font-variant attribute is rarely used. For English case conversion, we use the text-transform attribute instead of the font-variant attribute.
Example
Edit
div { text-transform : none; }
div { text-transform : capitalize; }
div { text-transform : uppercase; }
div { text-transform : lowercase; }Note: 1. Use text-transform only for English and invalid for Chinese characters
2.Use text-transform You can use dreamweaver to see the instant effect
text-transform example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-transform_CSS参考手册_web前端开发参考手册系列</title>
<style>
.capitalize span{text-transform:capitalize;}
.uppercase span{text-transform:uppercase;}
.lowercase span{text-transform:lowercase;}
</style>
</head>
<body>
<ul>
<li>
<strong>将每个单词的首字母转换成大写</strong>
<div>原 文： <span>how do you do.</span></div>
<div>转换后： <span>how do you do.</span></div>
</li>
<li>
<strong>转换成大写</strong>
<div>原 文： <span>how do you do.</span></div>
<div>转换后： <span>how do you do.</span></div>
</li>
<li>
<strong>转换成小写</strong>
<div>原 文： <span>HOW ARE YOU.</span></div>
<div>转换后： <span>HOW ARE YOU.</span></div>
</li>
</ul>
</body>
</html>The above is the detailed content of Analyze the usage and example tutorials of text-transform. For more information, please follow other related articles on the PHP Chinese website!