制作网页时，如果我们要对输出的英文字母进行大写小转换，通常使用编程语言自带的文本转换函数，如ASP程序自带的：

LCase(string) 函数 --LCase 函数用于将 string 转换为小写形式；

UCase(string) 函数 --UCase 函数用于将 string 转换为大写形式。

 

其实早从 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">bekda.COM</p>
<p class="txt2">bekda.COM</p>
<p class="txt3">bekda.COM</p>
<p class="txt4">bekda.COM</p>

 

输出结果：

bekda.COM

Bekda.COM

BEKDA.COM

bekda.com

 

注意：

此方法仅改变字母输出的显示形式，并没有实质改变字母的大小写，如果你将输出的字母进行拷贝，会发现字母依旧保留了原有的大小写样式。