Analyze the usage and example tutorials of text-transform-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Analyze the usage and example tutorials of text-transform

零下一度

Jun 19, 2017 am 11:24 AM

text-transform Example Tutorial usage parse

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; }

Copy after login

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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn