DIV CSS text-transform英文字母全大写小写_CSS首字母大写
使用DIV+CSS让文章中英文单词或拼音的第一个字母大写、使用CSS让文章中英文单词或拼音全大写、使用DIV CSS让文章中出现英文单词或拼音全小写教程实例CSS text-transform实例布局教程
平时我们常常在国外报纸、英文文章、国外网站看见文章中英文单词或拼音的首个字母大写,或文章中拼音或英文单词字母全小写或全大写,今天DIVCSS5为大家介绍让英文单词或拼音首个字母大写、全文中英文单词全大写或小写的方法教程,这里我们介绍使用text-transform来实现首字母大写、全文大写、全文小写布局教程方法。
DIV CSS text-transform英文字母首字母大写小写-英文字母全小写篇
一、结构语法 - TOP
1、text-transform 值:
Capitalize 英文拼音的首字母大写
Uppercase 英文拼音字母全大写
Lowercase 英文拼音字母全小写
2、CSS text-transform语法结构
div{text-transform:capitalize}
text-transform结构分析图
二、英文或拼音单词首字母大写 - TOP
此DIV CSS样式针对每个英文单词或拼音的首个字母大写
text-transform : capitalize
三、英文或拼音单词字母全大写 - TOP
此CSS样式实现无论拼音或单词英文字母都会全部实现转换为大写
text-transform : uppercase
四、英文或拼音单词字母全小写 - TOP
此DIV+CSS样式实现无论拼音或字母或英文单词,本身是否大写都将转换为全部小写
text-transform : lowercase
五、CSS英文单词大写或小写案例 - TOP
1、CSS代码片段:
- .shou_daxie{text-transform:capitalize}
- .quan_daxie{text-transform:uppercase}
- .quan_xiaoxie{text-transform:lowercase}
2、HTML源代码片段:
- <div class="shou_daxie">
- 首字母大写 ni hao hello
- </div>
- <div class="quan_daxie">
- 字母全实现大写ni hao hello
- </div>
- <div class="quan_xiaoxie">
- 字母全实现小写ni HAo hEllo无论字母是否被大写都将被CSS小写
- </div>
3、CSS英文字母大写小写,全小写大写,首字母(css text-transform)案例截图
CSS首字母大写与英文字母全大写全小写案例截图
六、CSS字母大写与CSS字母小写总结 - TOP
这里DIVCSS5介绍了css text-transform实现首字母大写、英文字母全小写、英文字母全大写使用与语法。如果要掌握可以复制DIV CSS大写小写案例代码亲自实践,灵活运用。对于文字排版,特别是英文或拼音字母要求大小写首字母大小写均可使用text-transform样式属性。
CSS英文字母大写后缩小:http://www.divcss5.com/rumen/r308.shtml
无论文中大写还是小写,无论是首字母大写还是全部大写或小写,我们可以使用text-transform来实现,同时要想实现文中字母大写后字母缩小我们可以使用css font-variant来实现。如有任何疑问可到CSS论坛发表自己看法或疑问。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r309.shtml
必备CSS教程 Essential CSS Tutorials
- • css英文首字母大写
- • css 删除线
- • div css 虚线
- • css 注释
- • html 注释
- • css 文本
- • css 超链接(css a)
- • css 优化压缩
- • css id(css #)
- • css class(css .)
- • css ul li列表
- • css 圆角圆边
- • css 父级子级
- • css 指针概念
- • css overflow
- • html px em pt网页单位
- • css img图片
- • css class id
- • css link与@import区别
- • css 选择器
- • css引入html
必备HTML基础教程 Essential HTML Tutorials
- • html img图片标签
- • html em标签(EM强调标签)
- • html strong加粗(strong标签)
- • html B加粗(b加粗标签)
- • strong与B加粗区别
- • h1 h2 h3 h4标签(html标题标签)
- • html A超链接锚文本
- • html注释
- • html head头部标签
- • html title标题标签
- • html meta标签
- • html link标签
- • html i斜体标签
- • html u下划线标签
- • html s删除线标签
- • html换行br标签
- • html p段落标签
- • p标签与br标签区别
- • html div标签元素
- • html span标签
- • html font标签
- • html script标签
- • html px em pt网页单位
- • html ul li列表
- • ol li列表
- • dl dt dd标签组
- • table tr td表格
- • table tr th表格
- • html form表单
- • html form input
- • html form textarea文本区域
- • html select下拉与跳转(Html select)
- • html iframe框架
- • html网页结构
- • htm html shtml区别用法
- • 网页编码charset
- • UTF-8 GBK UTF8 GB2312区别联系
- • 先写html还是先写CSS
- • 显示扩展名
- • html标签大全集合
- • html常用标签
- • 网页源代码是什么
最新文章NEWS
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-02-04 10:47 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。