源于生活

标题: DIV CSS text-transform英文字母全大写小写_CSS首字母大写 [打印本页]

作者: kevin-ying    时间: 2014-8-2 05:49
标题: 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}
[attach]527[/attach]
text-transform结构分析图
二、英文或拼音单词首字母大写
此DIV CSS样式针对每个英文单词或拼音的首个字母大写
text-transform : capitalize
三、英文或拼音单词字母全大写   
此CSS样式实现无论拼音或单词英文字母都会全部实现转换为大写
text-transform : uppercase
四、英文或拼音单词字母全小写
此DIV+CSS样式实现无论拼音或字母或英文单词,本身是否大写都将转换为全部小写
text-transform : lowercase
五、CSS英文单词大写或小写案例
1、CSS代码片段:
  1. .shou_daxie{text-transform:capitalize}
  2. .quan_daxie{text-transform:uppercase}
  3. .quan_xiaoxie{text-transform:lowercase}
复制代码

2、HTML源代码片段:
  1. <div class="shou_daxie">
  2.     首字母大写 ni hao hello
  3. </div>
  4. <div class="quan_daxie">
  5.     字母全实现大写ni hao hello
  6. </div>
  7. <div class="quan_xiaoxie">
  8.     字母全实现小写ni HAo hEllo无论字母是否被大写都将被CSS小写
  9. </div>
复制代码

3、CSS英文字母大写小写,全小写大写,首字母(css text-transform)案例截图
[attach]528[/attach]
CSS首字母大写与英文字母全大写全小写案例截图
六、CSS字母大写与CSS字母小写总结   -   TOP
这里DIVCSS5介绍了css text-transform实现首字母大写、英文字母全小写、英文字母全大写使用与语法。如果要掌握可以复制DIV CSS大写小写案例代码亲自实践,灵活运用。对于文字排版,特别是英文或拼音字母要求大小写首字母大小写均可使用text-transform样式属性。

无论文中大写还是小写,无论是首字母大写还是全部大写或小写,我们可以使用text-transform来实现,同时要想实现文中字母大写后字母缩小我们可以使用css font-variant来实现。

作者: kevin-ying    时间: 2014-8-2 05:52
使用DIV+CSS让英文单词全大写之CSS font-variant英文字母全大写后缩小字体篇
平时我们会遇到在一篇文章中遇到英文单词或英文字母,但又想让这些字母无论是半角小写还是大写,统一让这些英文字母全变成大写,此时我们就可以使用CSS来让其英文字母变成全大写但字母会被缩小。此时我们就需要用到DIV CSS中样式属性font-variant

一、css font-variant语法   
font-variant : normal | small-caps
CSS参数:
normal : 正常的字体
small-caps : 让字母变成小型的大写字母字体并缩小字母

二、DIV+CSS font-variant实例   
DIVCSS5描述:
我们通过DIV CSS让文章中英文单词或字母都变大写并缩小显示。
Css样式选择器我们命名为divcss5,在html中用class引用。
1、CSS代码:
  1. .divcss5{font-variant:small-caps}
复制代码


2、HTML代码片段
  1. <div class="divcss5">
  2. font-variant:small-caps实现英文或拼音字母全大写并缩小字形显示
  3. </div>
复制代码

3、案例结果截图
[attach]529[/attach]

在DW软件中字体只被大写,而在浏览器中将会缩小并大写字体
通过css让英文或拼音字母全大写效果截图
说明:注意DIVCSS5对象内内容,被css设置font-variant后,对象内所有无论是大写字母还是小写字母,最终全显示为大写的字母。

三、CSS教程总结   
在我们日常制作网页时候,文章内插入英文教多是,需要对文章内英文字母显示大写的字母的时候我们就可以使用css样式表font-variant属性实现这一目的。
font-variant将文本里英文转为全大写,并以缩小方式显示。css font-variant实现全大写但英文或拼音字母会被缩小,如果要实现CSS英文只大写而不缩小请用css text-transform字体大小写样式。
另外CSS样式教程让文章英文或拼音字母变全大写之CSS text-transform。
以上是通过CSS样式让对象内容中出现无论大小写字母全变成大写字母。






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1