首页 > web前端 > css教程 > css如何设置英文首字母大写

css如何设置英文首字母大写

云罗郡主
发布: 2018-12-01 11:43:01
原创
15622 人浏览过

我们经常在英文报纸上看到首个单词大写,那么单词首字母大写如何设置,可能很多人遇到这种问题都不知道怎么操作,下面我们来讲解一下css如何设置英文首字母大写?

css如何设置首字母大写

实现英文首字母大写可以使用div+css,div+css中的一个text-transform属性可以设置字母大小写,以及字母全文大写和字母全文小写。

一:text-transform结构语法:

text-transform属性有三个属性,分别是Capitalize,Uppercase和Lowercase。

Capitalize表示无论字母是大写还是小写,全部都转为首字母大写,语法:div{text-transform:capitalize};

Uppercase表示无论字母是大写还是小写,全部都转为字母全部大写,语法:div{text-transform:uppercase} ;

Lowercase表示无论字母是大写还是小写,全部被CSS转为字母全部小写,语法:div{text-transform:lowercase} 

二:代码案例如下:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1{text-transform:capitalize}
h2{text-transform:uppercase} 
h3{text-transform:lowercase} 
</style>
</head>
<body>
<h1>php.cn</h1>
<h2>php.cn</h2>
<h3>php.cn</h3>
</body>
</html>
登录后复制

显示效果如下:

css如何设置首字母大写

无论字母大小还是小写,我们都是可以使用text-transform样式属性去设置,以上就是对css如何设置英文首字母大写的全部介绍,如果你想了解更多有关CSS3教程,请关注php中文网。


以上是css如何设置英文首字母大写的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板