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

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. 05: MySQL高级查询

    MySQL其他篇 目录: 参考网站 1.1 GROUP BY分组使用 1.2 mysql中NOW(),CURDATE(),CURTIME()的使用 1.3 DATEDIFF() 函数 1.4 DATE ...

  2. C语言程序设计实习报告

    C语言程序设计实习报告 简介 语言实践心得体会范文在科技高度发展的今天,计算机在人们之中的作用越来越突出.而c语言作为一种计算机的语言,我们学习它,有助于我们更好的了解计算机,与计算机进行交流,因此, ...

  3. 20145318《网络对抗》MSF基础应用

    20145318 <网络对抗> MSF基础应用 实验内容 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.具体需要完成(1)一个主动攻击,如ms08_067;(2)一 ...

  4. CAN/J1850/

    (1)CAN:(差分信号)有信号CANH=3.5V,CANL=1.5V, 没有信号CANH=2.5V,CANL=2.5V 速率:CAN系统又分为高速和低速,高速CAN系统采用硬线是动力型,速度:500 ...

  5. JRebel for IntelliJ 热部署破解方法

    1.打开idea,然后打开设置. 2.点击Plugins 3.重启之后点击 4.下载激活JRebel的插件,下载地址:https://github.com/ilanyu/ReverseProxy/re ...

  6. 《Python程序设计（第3版）》[美] 约翰·策勒（John Zelle） 第 2 章 答案

    判断对错1．编写程序的好方法是立即键入一些代码,然后调试它,直到它工作.2．可以在不使用编程语言的情况下编写算法.3．程序在写入和调试后不再需要修改.4．Python 标识符必须以字母或下划线开头.5 ...

  7. RedHat6使用CentOS yum源 换yum

    yum 简单介绍一下 yum 主要功能是更方便的添加/删除/更新RPM 包,自动解决包的倚赖性问题,便于管理大量系统的更新问题. yum 可以同时配置多个资源库(Repository),简洁的配置文件 ...

  8. 【安装】Mysql在Linux上安装

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:mysql-5.6.37-linux-glibc2.12- ...

  9. 51NOD 1057 N的阶乘

    1057 N的阶乘 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   输入N求N的阶乘的准确值.   Input 输入N(1 <= N <= 10000) ...

  10. CenterOS下从零起步简单部署RockMongo

    使用Mongodb,对于调试Query,查看Collection等状态,有Rockmongo是非常方便的. 研究了下Rockmongo的部署,主要是依赖PHP环境的web服务器,当前有两种服务器,一种 ...