为了网页的美观,我们有时需要对网页的字母统一样式,强制网页内字母的大小写样式。
转换字母的大小写,之前我们一般用程序来转换输出,比如:ASP大小写字母转换
其实,我们可以用css来控制转换字母的大写和小写。它们之间的区别:
程序转换:实质改变字母的大小写
CSS转换:仅改变字母输出的显示形式,并没有实质改变字母的大小写,如果你将输出的字母进行拷贝,会发现字母依旧保留了原有的大小写样式。
其实早从 CSS1 开始,就存在一个用于控制文本大小写输出的 text-transform 属性,属性值如下表所示:
属性值
功能说明
none
默认,不转换
capitalize
首字母转换为大写,其他不转换
uppercase
全部转换为大写
lowercase
全部转换为小写
另外还有一个属性值:inherit(从父元素继承 text-transform 属性的值),因 IE 等浏览器不兼容,不在表中列出。
.txt1{text-transform:none}/*默认不转换*/
.txt2{text-transform:capitalize}/*首字母转换为大写,其他不转换*/
.txt3{text-transform:uppercase}/*全部转换为大写*/
.txt4{text-transform:lowercase}/*全部转换为小写*/
输出结果:
大家看到了吧,利用css就可以轻松控制网页内容中字母大小写的显示。
声明:如需转载,请注明来源于并保留原文链接:/jiaocheng/501.html