• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

4.3 文本大小写text-transform

一、text-transform属性

在CSS中,使用text-transform属性来转换文本的大小写,这个是针对英文而言,因为中文不存在大小写之分。

语法:

text-transform:属性值;

说明:

text-transform属性取值如下表:

表1 text-transform属性
属性值 说明
none 默认值,无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将每个英文单词的首字母转换成大写,其余无转换发生

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-transform属性</title>
    <style type="text/css">
        #p1{text-transform:uppercase;}
        #p2{text-transform:lowercase;}
        #p3{text-transform:capitalize;}
    </style>
</head>
<body>
    <p id="p1">大写:Rome was't built in a day.</p>
    <p id="p2">小写:Rome was't built in a day.</p>
    <p id="p3">仅首字母大写: Rome was't built in a day.</p>
</body>
</html>

在浏览器预览效果如下:

text-transform属性

二、text-transform和font-variant区别

大家参考下一节的font-variant属性就可以很清楚了,font-variant唯一的作用就是把英文文本转换成“小型”大写字母文本,这是“小型”的喔。一般极少用到font-variant属性,对于英文的大小写转换,我们用的是text-transform属性,而不是用font-variant属性。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部