欢迎来到HELLO素材网! 南京网站制作选择顺炫科技
丰富的DIV CSS模版、JS,jQuery特效免费提供下载

transform 首字母大写

发表于2019-06-05 23:22| 次阅读| 来源网络整理| 作者session

摘要:DIV+CSS text-transform让文章中英文单词或拼音的第一个字母大写、利用CSS让文章中英文单词或拼音全大写、利用DIV CSS让文

利用DIV+CSS让文章中英文单词或拼音的第一个字母大写、利用CSS让文章中英文单词或拼音全大写、利用DIV CSS让文章中出现英文单词或拼音全小写教程实例CSS text-transform实例规划教程

往常咱们经常在国外报纸、英文文章、国外网站看见文章中英文单词或拼音的首个字母大写,或文章中拼音或英文单词字母全小写或全大写,今天CSS5为大家引见让英文单词或拼音首个字母大写、全文中英文单词全大写或小写的方法教程,这里咱们引见利用text-transform来完成首字母大写、全文大写、全文小写规划教程方法。

DIV CSS text-transform英文字母首字母大写小写-英文字母全小写篇

一、构造语法

1、text-transform 值:
Capitalize 英文拼音的首字母大写
Uppercase 英文拼音字母全大写
Lowercase 英文拼音字母全小写

2、CSS text-transform语法构造

div{text-transform:capitalize}

css text-transform构造剖析图


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

css英文字母全大写小写与首字母大写运用示范案例截图


CSS首字母大写与英文字母全大写全小写案例截图

六、CSS字母大写与CSS字母小写总结

这里CSS5引见了css text-transform完成首字母大写、英文字母全小写、英文字母全大写利用与语法。假设要掌握可能复制DIV CSS大写小写案例代码亲身实际,灵敏使用。对于文字排版,顺便是英文或拼音字母要求大小写首字母大小写均可利用text-transform样式属性。

CSS英文字母大写后增加://www.css5.com.cn/css/308.shtml

无论文中大写还是小写,无论是首字母大写还是全副大写或小写,咱们可能利用text-transform来完成,同时要想完成文中字母大写后字母增加咱们可能利用css font-variant来完成。如有任何疑难可到CSS论坛发表本人认识或疑难。