源于生活

标题: 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代码片段：

.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）案例截图

[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代码：

.divcss5{font-variant:small-caps}

复制代码

2、HTML代码片段

<div class="divcss5">
font-variant:small-caps实现英文或拼音字母全大写并缩小字形显示
</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/)