CSS里面text-transform实现首个或全部字母大写或小写
想知道用css如何让英文字母文章第一个字母自动大写
当前位置：编程学习 > html/css >>
答案：使用DIV+CSS让文章中英文单词或拼音的第一个字母大写、使用CSS让文章中英文单词或拼音全大写、使用DIV CSS让文章中出现英文单词或拼音全小写教程实例CSS text-transform实例布局教程
平时我们常常在国外报纸、英文文章、国外网站看见文章中英文单词或拼音的首个字母大写，或文章中拼音或英文单词字母全小写或全大写，今天为大家介绍让英文单词或拼音首个字母大写、全文中英文单词全大写或小写的方法教程，这里我们介绍使用text-transform来实现首字母大写、全文大写、全文小写布局教程方法。
1、css text-transform属性语法
text-transform: none | capitalize | uppercase | lowercase
text-transform参数解释：
none : 默认无转换发生
capitalize : 将文章中出现每个单词或拼音的第一个字母转换成大写，其余无转换发生
uppercase : 将文章中所有英文单词拼音字母转换成大写
lowercase : 将文章中所有英文单词拼音字母转换成小写2、DIV+CSS text-transform实现字母大写实例
Hicoogle首字母大写实例描述：
我们通过DIV CSS让文章中出现英文单词或拼音字母的首个字母大写
Css选择器我们命名为Hicoogle,在html中用class引用。CSS代码：
.Hicoogle{text-transform:capitalize;}测试html内容：
<div>我是Hicoogle案例实验，<br />
abc我源代码是小写字母abc，<br />
我的CSS样式被设置text-transform样式为capitalize，<br />
文中拼音或英文单词首字母将被大写</div>完整DIV+CSS HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .Hicoogle{text-transform:capitalize;} </style> </head> <body> <div>我是Hicoogle案例实验，<br /> abc我源代码是小写字母abc，<br /> 我的CSS样式被设置text-transform样式为capitalize，<br /> 文中拼音或英文单词首字母将被大写</div> </body> </html>说明：通过css text-transform:capitalize让文中出现英文单词或拼音首个字母变大。
3、全部英文字母大写实例
DIVCSS5对文中出现全部英文和拼音字母大写描述：
我们通过DIV CSS让文章中出现所有英文单词或拼音字母的全部大写
Css样式选择器我们命名为divcss5,在html中用class引用（了解id与class区别）。
CSS代码：
.Hicoogle{text-transform:uppercase;}测试html内容：
<div>我是Hicoogle案例实验，<br />
abc我源代码是小写字母abc，<br />
我的CSS样式被设置text-transform样式为uppercase，<br />
文中拼音或英文单词全部字母将被大写</div>
此实例与另外font-variant有所区别，css font-variant是让文中字母大写但文字不会增大，而text-transform设置文中字母变大是将字母变成大写后文字也会增大。完整HTML源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .divcss5{text-transform:capitalize;} </style> </head> <body> <div>我是divcss5案例实验，<br /> abc我源代码是小写字母abc，<br /> 我的CSS样式被设置text-transform样式为uppercase，<br /> 文中拼音或英文单词全部字母将被大写</div> </body> </html>说明：我们使用text-transform:capitalize样式，即让文章中所有英文字母变成大写。
4、让文中英文字母或拼音字母全部小写实例
DIVCSS5对文中出现全部英文和拼音字母大写描述：
我们通过DIV CSS让文章中出现所有英文单词或拼音字母的全部大写
Css样式选择器我们命名为Hicoogle,在html中用class引用。CSS代码：
.Hicoogle{text-transform:lowercase;}测试html内容：
<div>我是Hicoogle案例实验，<br />
ABC我源代码是大写字母ABC，<br />
我的CSS样式被设置text-transform样式为uppercase，<br />
文中拼音或英文单词全部字母将被小写</div>完整DIV+CSS源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .divcss5{text-transform:lowercase;} </style> </head> <body> <div>我是DIVCSS5案例实验，<br /> ABC我源代码是大写字母ABC，<br /> 我的CSS样式被设置text-transform样式为uppercase，<br /> 文中拼音或英文单词全部字母将被小写</div> </body> </html>说明：我们使用css样式表，text-transform:lowercase即让文中无论大小写的字母都实现小写。
5、text-transform CSS教程总结
无论文中大写还是小写，无论是首字母大写还是全部大写或小写，我们可以使用text-transform来实现，同时要想实现文中字母大写后字母不变大我们可以使用css font-variant来实现。
- 更多html/css疑问解答：
- div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗？
- 用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用？
- 这个div 的css是如何编写的
- div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。
- 我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？
- css问题，跪求大大帮忙
- 请教网页设计高手，如下图的这种css代码怎么写？