现在的位置: 网页制作教程网站制作教程 >正文
CSS

CSS控制转换字母的大写和小写

发表于2017/1/5 网站制作教程 0条评论 ⁄ 热度 1,689℃

为了网页的美观,我们有时需要对网页的字母统一样式,强制网页内字母的大小写样式。

转换字母的大小写,之前我们一般用程序来转换输出,比如:ASP大小写字母转换

enjoy css

其实,我们可以用css来控制转换字母的大写和小写。它们之间的区别:

  • 程序转换:实质改变字母的大小写
  • CSS转换:仅改变字母输出的显示形式,并没有实质改变字母的大小写,如果你将输出的字母进行拷贝,会发现字母依旧保留了原有的大小写样式。

其实早从 CSS1 开始,就存在一个用于控制文本大小写输出的 text-transform 属性,属性值如下表所示:

属性值 功能说明
none 默认,不转换
capitalize 首字母转换为大写,其他不转换
uppercase 全部转换为大写
lowercase 全部转换为小写

另外还有一个属性值:inherit(从父元素继承 text-transform 属性的值),因 IE 等浏览器不兼容,不在表中列出。

<style>
.txt1{text-transform:none}	/*默认不转换*/
.txt2{text-transform:capitalize}	/*首字母转换为大写,其他不转换*/
.txt3{text-transform:uppercase}	/*全部转换为大写*/
.txt4{text-transform:lowercase}	/*全部转换为小写*/
</style>
<p class="txt1">webym.net</p>
<p class="txt2">webym.net</p>
<p class="txt3">webym.net</p>
<p class="txt4">webym.net</p>

输出结果:

webym.net

Webym.Net

WEBYM.NET

webym.net

大家看到了吧,利用css就可以轻松控制网页内容中字母大小写的显示。

  • 暂无评论