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

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. 基于qml创建最简单的android机图像采集程序

    前提是在已经搭建为android编写程序的qt平台上面,我们只需要简单几部就可以搭建最简单的android机图像采集程序 1.生成新的ququick app 2.在配置中添加 multimedia,因 ...

  2. 20145329 《网络对抗技术》Web安全基础实践

    实践的目标 理解常用网络攻击技术的基本原理.Webgoat实践下相关实验:SQL注入攻击.XSS攻击.CSRF攻击. 实验后回答问题 (1)SQL注入攻击原理,如何防御 攻击原理 SQL注入即是指we ...

  3. 微信小程序——1、文件的认识

    主体文件的构成 微信小程序的主体由三个部分组成,需放在主目录中,名称也是固定的 app.js:微信小程序的主逻辑文件,主要用来注册小程序 app.json:微信小程序的主配置文件,对微信小程序进行全局 ...

  4. 利用.bat(批处理)来删除KEIL编译生成的无用文件

    新建一个.txt文件. 在里面输入如下内容: del *.bak /s del *.ddk /s del *.edk /s del *.lst /s del *.lnp /s del *.mpf /s ...

  5. shell编程学习笔记之特殊变量（$0、$1、$2、 $?、 $# 、$@、 $*）

    特殊变量($0.$1.$2. $?. $# .$@. $*) shell编程中有一些特殊的变量可以使用.这些变量在脚本中可以作为全局变量来使用. 名称 说明 $0 脚本名称 $1-9 脚本执行时的参数 ...

  6. shell下如何删除文件的某一列

    答:cat file | awk '{$1=null;print $0}' (删除第一列)

  7. hdu 6168 Numbers

    Numbers Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  8. 项目梳理6——使用WebApiTestClient为webapi添加测试

    1.使用nuget添加WebApiTestClient的引用 2.xxxxx.WebApi\Areas\HelpPage\Views\Help\Api.cshtml页面末尾添加如下代码: @Html. ...

  9. C# 新Form各事件执行顺序

    1. 构造函数 2. Load() 3. Show() 4. Acticated()

  10. 解决 Ubuntu 14.04 图形界面无法正常显示 问题

    参考: ubuntu清除系统缓存的方法 apt-get(四) 每天一个linux命令(33):df 命令 Ubuntu server 12.10 /dev/sda1 disk full 解决 Ubun ...