Rumah > hujung hadapan web > tutorial css > 解析text-transform的用法及实例教程

解析text-transform的用法及实例教程

零下一度
Lepaskan: 2017-06-19 11:24:13
asal
2901 orang telah melayarinya

语法: 
text-transform : none | capitalize | uppercase | lowercase 
参数: 
none :  无转换发生
capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
uppercase :  转换成大写
lowercase :  转换成小写 
说明: 
检索或设置对象中的文本的大小写。 
对应的脚本特性为textTransform。请参阅我编写的其他书目。 

text-transform和font-variant区别

text-transform和font-variant都能把英文文本转换大小写。但是font-variant唯一的作用就是把英文文本转换成“小型”大写字母文本,注意这是“小型”的。一般极少用到font-variant属性,对于英文的大小写转换,我们用的是text-transform属性,而不是用font-variant属性。

示例

编辑

div { text-transform : none; }
div { text-transform : capitalize; }
div { text-transform : uppercase; }
div { text-transform : lowercase; }
Salin selepas log masuk

注意:1.用text-transform只对英文起作用 对于汉字时失效

2.用text-transform 可以用dreamweaver看到即时的效果

text-transform的实例

<!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>
Salin selepas log masuk

Atas ialah kandungan terperinci 解析text-transform的用法及实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan