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

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、结果视图

aaarticlea/png;base64,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" alt="" width="244" height="144" />

Css中如何使英文和拼音变成全大写、全小写和首字母大写？的更多相关文章

  1. CSS通过text-transform实现大写、小写和首字母大写转换

    再日常项目中可能会用到一些特殊的样式,比如大写字母转小写.小写字母转大写.首字母大写等. 可以通过 CSS 的 text-transform 属性来实现: text-transform 转换不同的文本 ...

  2. CSS实现英文或拼音单词首字母大写

    CSS实现英文或拼音单词首字母大写,只需要在css样式中加入: text-transform: capitalize 即可. 测试代码如下: <!doctype html> <htm ...

  3. CSS中使用text-transform实现首字母大写

    CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要text-transform属性了. ...

  4. Python中文转拼音代码(支持全拼和首字母缩写)

    本文的代码,从https://github.com/cleverdeng/pinyin.py升级得来,针对原文的代码,做了以下升级:     1 2 3 4 1.可以传入参数firstcode:如果为 ...

  5. 使用uiautomation自动化重命名pdf书签，使全大写字母变成首字母大写

    今天下载了一个英文pdf书籍,但书签全是大写英文字母,看上去有点别扭,于是想办法用自动化重命名pdf书签, 使书签全部变成首字母大写. pdf原始书签如下图: 重命名后的pdf书签 自动化动态效果图, ...

  6. 【Python实践-6】将不规范的英文名字，变为首字母大写，其他小写的规范名字

    #利用map()函数,把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字. def f1(s): s=s.capitalize() return s list1= ['adam', 'L ...

  7. java中pojo对象首字母大写导致无法赋值问题

    命名规范(文末附有java命名规范)中指出,属性变量命名应采用驼峰命名的方式,即首字母小写,其他单词首字母大写: 但有时候我们对接三方的接口时,想要封装实体类来接受,但是发现接收到的参数的变量首字母是 ...

  8. 小tips：JS/CSS实现字符串单词首字母大写

    css实现: text-transform:capitalize; JS代码一: String.prototype.firstUpperCase = function(){ return this.r ...

  9. javascript面试题：如何把一句英文每个单词首字母大写？

    上周看到大家在JS群讨论如何把一句英文句子单词收割字母大写,大家都说用正则简单,对于正则还是有点模糊,于是乎自己敲了下 //面试题:如何把一句英文每个单词首字母大写? var str="wh ...

随机推荐

  1. TimeUnit简析

    TimeUnit是java.util.concurrent包下面的一个类,主要有两种功能: 1.提供可读性更好的线程暂停操作,通常用来替换Thread.sleep() 2.提供便捷方法用于把时间转换成 ...

  2. 安装VS提示系统找不到指定路径

    解决办法:删除C:\ProgramData\Package Cache快捷方式

  3. 「不定期更新」MacOS 编辑器使用小技巧

    Visual Studio Code Ctrl + CMD + 上下箭头:上下移动当前的代码块: Shift + Alt + 上下箭头:快速复制当前的代码块: 我最新欢的插件列表: Prettier: ...

  4. P3066 [USACO12DEC]逃跑的BarnRunning Away From

    目录 题目 思路 错误&&注意 代码 题目 luoguP3066 思路 虽说这个题目有多种做法,但 左偏树算法: 我们发现这个合并的时候并不好合并,因为存的值不是固定的 那我们是不是可 ...

  5. POJ 3533 Light Switching Game（三维Nim积）题解

    思路:三维Nim积 代码: #include<set> #include<map> #include<stack> #include<cmath> #i ...

  6. 常见几种校验方法（CS和校验、CRC16、CRC32、BCC异或校验）

    总结一些通讯协议中常用到的几种校验方法: 1.CS和校验(如:标准188协议校验方式) /// <summary> /// CS和校验 /// </summary> /// & ...

  7. UVa 1001 奶酪里的老鼠（Dijkstra或Floyd）

    https://vjudge.net/problem/UVA-1001 题意:一个奶酪里有n个洞,老鼠在奶酪里的移动速度为10秒一个单位,但是在洞里可以瞬间移动.计算出老鼠从A点到达O点所需的最短时间 ...

  8. UVa 11729 突击战

    https://vjudge.net/problem/UVA-11729 题意:有n个部下,每个部下需要完成一项任务.第i个部下需要你话B分钟交代任务,然后立刻执行J分钟完成任务.安排交代任务顺序并计 ...

  9. hdu 5587 Array 二分

    Array Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Problem ...

  10. JavaMail直接发送邮件

    一般用JavaMail发送邮件都需要先登录到外部smtp服务器(如smtp.163.com) 二次转发,其实只要得到域名的邮件交换服务器地址(MX)就可以直接将邮件发出 这里用到了dnsjava(下载 ...