css如何实现英文小写转为大写
css如何实现英文小写转为大写
发布时间：2022-05-02 14:42:21 来源：高防服务器网 阅读：60 作者：iii 栏目：web开发
这篇文章主要介绍“css如何实现英文小写转为大写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css如何实现英文小写转为大写”文章能帮助大家解决问题。
转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css实现英文小写转为大写
在css中，可以使用text-transform属性来将小写英文字母（文本）转为大写。
可分两种情况：
-
所有的英文字母都变成大写：使用“
text-transform: uppercase;”样式 -
英文文本中每个单词的首字母变为大写：使用“
text-transform: capitalize;”样式
实现示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { font-variant: small-caps; /*把段落设置为:小型大写字母字体(即文字的大小不变，只不过文字都变成了大小字母)*/ } span[first] { text-transform: capitalize /*使每个单词的首字母变为大写。*/ /* capitalize可以使每个单词的首字母变为大写 */ /* uppercase 定义仅有大写字母 */ /* lowercase 定义无大写字母，仅有小写字母 */ /* inherit 规定应该从父元素继承 text-transform 属性的值。 */ } span[second] { text-transform: uppercase /*把所有的字母都变成大写。*/ /* capitalize可以使每个单词的首字母变为大写 */ /* uppercase 定义仅有大写字母 */ /* lowercase 定义无大写字母，仅有小写字母 */ /* inherit 规定应该从父元素继承 text-transform 属性的值。 */ } </style> </head> <body> <p>hello</p> <span first>heloodj sdKUv dIfvh</span> <hr> <span second>heloodj sDFuv difvh</span> </body> </html>
说明：text-transform 属性
text-transform 属性控制英文文本的大小写。
可设置的属性值：
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
关于“css如何实现英文小写转为大写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注高防服务器网行业资讯频道，小编每天都会为大家更新不同的知识点。
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[