最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

CSS text-transform实现首个或全部字母大写或小写

使用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来实现。

转载请注明:嗨酷哥,有你更酷! » CSS text-transform实现首个或全部字母大写或小写

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项