首页 > 代码库 > Css中如何使英文和拼音变成全大写、全小写和首字母大写？

Css中如何使英文和拼音变成全大写、全小写和首字母大写？

2024-11-24 22:49:39   203人阅读

想要实现英文和中文拼音变成全大写、全小写和首个字母大写，需要用到

css中text-transform样式属性，接下来介绍一下

1、text-transform的值

1）Capitalize：英文拼音的首字母大写

2）Uppercase：英文拼音字母全大写

3）Lowercase：英文拼音字母全小写

2、text-transform语法

text-transform:+值类型， 如：text-transform:Capitalize；

3、text-transform的简单使用

1）英文首字母大写

2）英文全大写

3）英文全小写

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css中text-transform的使用</title>
    </head>

    <style type="text/css">    
         .font1{
            text-transform:capitalize;  /***首字母大写**/
        }
        .font2{
            text-transform:uppercase;  /***英文全大写**/
        }
        .font3{
            text-transform:lowercase;  /***英文全小写**/
        }
    </style>
    <body>
        <span class="font1"> hello World </span><br/><br/>
         <span class="font2"> he is a sunny boy</span><br/><br/>
        <span class="font3">I AM A BLUNT MAN </span><br/>
    </body>
</html>

4、结果视图

技术分享

Css中如何使英文和拼音变成全大写、全小写和首字母大写？


联系
我们