为了网页的美观,我们有时需要对网页的字母统一样式,强制网页内字母的大小写样式。
转换字母的大小写,之前我们一般用程序来转换输出,比如:ASP大小写字母转换
其实,我们可以用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就可以轻松控制网页内容中字母大小写的显示。
声明:如需转载,请注明来源于www.webym.net并保留原文链接:http://www.webym.net/jiaocheng/501.html