text-transform CSS英文字母大小写

2016-02-20 21:35:04 DIV CSS text-transform英文字母大写小写,css英文字母大写,首字母大写,无论字母是否大写小写都全小写样式。

DIV CSS text-transform英文字母大写小写,css英文字母大写,首字母大写,无论字母是否大写小写都全小写样式。

CSS大写小写text-transform样式

CSS样式控制字母字符大写,包括了全英文字母大写与首字母大写。

一、小写大写CSS样式单词

font-variant 全大写并将小型显示
text-transform 可实现单词首字母大写,字母全小写与字母全大写。

二、全大写并小型缩小显示

1、CSS语法:
font-varian:small-caps 实现全大写并小型字体显示
font-varian:normal 正常的字体(默认)

2、font-varian案例
1)、CSS代码片段

.HTML8{font-variant:small-caps} 

2)、HTML代码片段

<div class="HTML8"> 
设置或检索对象中的文本是否为小型的大写字母。<br />
对应的脚本特性为fontvariant。
</div>

3)、案例结果截图

css font-variant全大写后字母缩小显示实例
font-variant全大写后字母缩小显示实例截图

font-variant将文本里英文转为全大写,并以缩小方式显示。

三、CSS text-transform大写小写

1、英文或拼音单词首字母大写
此DIV CSS样式针对每个英文单词或拼音的首个字母实现大写
text-transform : capitalize

2、英文或拼音单词字母全大写
此CSS样式实现无论拼音或单词英文字母都会全部实现转换为大写
text-transform : uppercase

3、英文或拼音单词字母全小写
此DIV+CSS样式实现无论拼音或字母或英文单词,本身是否大写都将转换为全部小写
text-transform : lowercase

4、CSS英文单词大写或小写案例
1)、CSS代码片段:

.shoudaxie{text-transform:capitalize} 
.quandaxie{text-transform:uppercase}
.quanxiaoxie{text-transform:lowercase}

2)、HTML源代码片段:

<div class="shoudaxie"> 
首字母大写ni hao hello
</div>
<div class="quandaxie">
字母全实现大写ni hao hello
</div>
<div class="quanxiaoxie">
字母全实现小写ni HAo hEllo无论字母是否被大写都将被CSS小写
</div>

3)、CSS大写小写(css text-transform)案例截图

css首字母、css字母全大写,css英文字母全小写实例截图
css首字母、css字母全大写,css英文字母全小写实例截图

四、CSS大写与CSS小写总结

这里HTML8介绍了两种CSS样式大写小写,一个是css font-variant实现全大写但字母会被缩小,另外一个是css text-transform实现首字母大写、字母全小写、字母全大写使用与语法。如果要掌握可以复制DIV CSS大写小写案例代码亲自实践,灵活运用。

更新