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

零下一度 原创: 2017-06-19 11:24:13 2185浏览

语法：
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; }

注意：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>

以上就是解析text-transform的用法及实例教程的详细内容，更多请关注php中文网其它相关文章！

text-transform 教程实例用法解析 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：css属性中fontVariant的介绍与实例下一条：css中line-height的深入理解