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

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）英文全小写

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>css中text-transform的使用</title>
  6.     </head>
  7.  
  8.     <style type="text/css">
  9.          .font1{
  10.             text-transform:capitalize;  /***首字母大写**/
  11.         }
  12.         .font2{
  13.             text-transform:uppercase;  /***英文全大写**/
  14.         }
  15.         .font3{
  16.             text-transform:lowercase;  /***英文全小写**/
  17.         }
  18.     </style>
  19.     <body>
  20.         <span class="font1"> hello World </span><br/><br/>
  21.          <span class="font2"> he is a sunny boy</span><br/><br/>
  22.         <span class="font3">I AM A BLUNT MAN </span><br/>
  23.     </body>
  24. </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. SCP报错:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    经过google,出现这个问题的原因是,这是ssh的问题, GkFool大神说(第一次使用SSH连接时,会生成一个认证,储存在客户端的known_hosts中) 我的解决办法是: ssh-keygen ...

  2. Codeforces 788A Functions again - 贪心

    Something happened in Uzhlyandia again... There are riots on the streets... Famous Uzhlyandian super ...

  3. 本地连接VM virtualBox ubuntu16.04 中的Mysql数据库

    1.打开mysql配置文件vim /etc/mysql/mysql.conf.d/mysqld.cnf     将bind-address = 127.0.0.1注销 2.重启ubuntu数据库 3. ...

  4. Codeforces Round #429 (Div. 2)

    A. Generous Kefa   One day Kefa found n baloons. For convenience, we denote color of i-th baloon as  ...

  5. 基于nodejs环境，用npm简单搭建一个本地服务器Live-server的使用

    用npm 或者cnpm进行全局安装 cnpm install -g live-server 运行后就可以直接给你虚拟一个本地服务器,而且还可以热同步 运行 live-server

  6. python 字符串转变量方法

    1.response=eval('requests.'+func.lower())(destURL, headers=requestHeaders, data=postData, params=que ...

  7. MVC ---- 如何扩展方法

    先定义一个扩展类: public static class StringExtend { //扩展一个string的方法 public static bool IsNullOrEmpty(this s ...

  8. C# 二进制图片串互转

    C# byte数组与Image的相互转换   功能需求: 1.把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库. 2.把从数据库读取的byte数组转换为Image对 ...

  9. Codeforces 893E - Counting Arrays

    893E - Counting Arrays 思路:质因子分解. 对于每个质因子,假设它有k个,那么求把它分配到y个数上的方案数. 相当于把k个小球分配到y个盒子里的方案数. 这个问题可以用隔板法(插 ...

  10. Codeforces 614E - Necklace

    614E - Necklace 思路:如果奇数超过1个,那么答案是0:否则,所有数的gcd就是答案. 构造方案:每个数都除以gcd,如果奇数个仍旧不超过1个,找奇数个那个在中间(如果没有奇数默认a), ...