• 技术文章 >web前端 >前端问答

    css怎么实现英文小写转为大写

    青灯夜游青灯夜游2022-04-25 18:35:47原创286

    转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css实现英文小写转为大写

    在css中,可以使用text-transform属性来将小写英文字母(文本)转为大写。

    可分两种情况:

    实现示例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            p {
                font-variant: small-caps;
                /*把段落设置为:小型大写字母字体(即文字的大小不变,只不过文字都变成了大小字母)*/
            }
            span[first] {
     
                text-transform: capitalize /*使每个单词的首字母变为大写。*/
                    /* capitalize可以使每个单词的首字母变为大写 */
                    /* uppercase 定义仅有大写字母 */
                    /* lowercase 定义无大写字母,仅有小写字母 */
                    /* inherit 规定应该从父元素继承 text-transform 属性的值。 */
            }
            span[second] {
                text-transform: uppercase /*把所有的字母都变成大写。*/
                    /* capitalize可以使每个单词的首字母变为大写 */
                    /* uppercase 定义仅有大写字母 */
                    /* lowercase 定义无大写字母,仅有小写字母 */
                    /* inherit 规定应该从父元素继承 text-transform 属性的值。 */
            }
        </style>
    </head>
     
    <body>
        <p>hello</p>
        <span first>heloodj sdKUv dIfvh</span>
        <hr>
        <span second>heloodj sDFuv difvh</span>
    </body>
     
    </html>

    1.png

    说明:text-transform 属性

    text-transform 属性控制英文文本的大小写。

    可设置的属性值:

    描述
    none默认。定义带有小写字母和大写字母的标准的文本。
    capitalize文本中的每个单词以大写字母开头。
    uppercase定义仅有大写字母。
    lowercase定义无大写字母,仅有小写字母。

    (学习视频分享:css视频教程web前端

    以上就是css怎么实现英文小写转为大写的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:es6中symbol的用法是什么 下一篇:es6怎么判断是否为数组
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css与xml的区别是什么• css中行距用什么表示• css3清除浮动的几种方式是什么• css3中transition是什么意思• css3线性渐变可以实现三角形吗• css3新增伪类选择器有哪些
    1/1

    PHP中文网