您的位置:CSS主页 > CSS基础 >

css text-transform英文字母大写小写样式教程

 

DIV+CSS样式实现首字母大写、css英文字母全大写和英文字母全小写样式布局。css text-transform英文字母大写小写教程篇.

css大小写字母目录
  1. 字母大小写css语法
  2. 案例讲解字母大小写
  3. css text-transform字母大小写样式总结

一、字母大小写css语法   -   TOP

字母大小写CSS样式单词为text-transform,以下为大家介绍几种英文、拼音字母大写小写常用三种效果,一般默认text-transform:none,默认字母大小写保持本身输入字母大小写效果。如果要让CSS字体字母大小写不同样式如下语法。

1、css首字母大写(英文第一个字母转为大写)
text-transform :capitalize
此样式将让英文单词或拼音字母首字母大写。

2、css英文字母全大写
text-transform :uppercase
将英文字母无论大写还是小写字母都全部转换为大写。

3、css英文字母全小写
text-transform :lowercase
将英文字母无论大写还是小写字母都全部转换为小写。

图解text-transform字母大小写css样式属性


text-transform基础知识教程图

二、案例讲解字母大小写   -   TOP

我们让分别新建4个不同css class命名的div对象盒子,展示css字母随输入大小写、字母css第一个字母首字母大写、使用css实现全部英文字母大写和div css样式使用字母全小写。

1、案例片段CSS代码
 

  1. .thinkcss{text-transform:none} 
  2. .thinkcss1{text-transform:capitalize} 
  3. .thinkcss2{text-transform:uppercase} 
  4. .thinkcss3{text-transform:lowercase} 

2、案例片段html代码

  1. <div class="thinkcss">我的字母有大写有小写 aBcdE</div> 
  2. <div class="thinkcss1">我首字母第一个字母将大写 abcde</div> 
  3. <div class="thinkcss2">字母全大写 abcde</div> 
  4. <div class="thinkcss3">字母全小写 AbCde</div> 

3、案例效果截图


text-transform样式案例与指示截图

注意观察不同颜色框住字母对应CSS字母大小写效果
1)、红色,CSS设置文字字母大小写无样式,保持与输入字母大小写相同
2)、蓝色,div css设置字母首字母,第一个字母无论大小写都将转换为大写
3)、黑色,css样式设置无论英文字母组里有无大小写,字母都将全部转换为大写
4)、粉红,css div设置英文字母组无论大小写的字母都全部转变为了小写

演示地址http://www.thinkcss.com/yanshi/css-text-transform.html

三、css text-transform字母大小写样式总结   -   TOP

我们使用div+css text-transform样式即可实现无论输入字母单词、拼音等字母组是否大小写字母,都可以使用css大小写是实现统一。灵活运用text-transform即可实现我们需要的英文字母字体大小写效果。

标签(Tag): text transform 大小写 字母大写 字母小写

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-10-09     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/c79.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息