欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。
今天我们要介绍的内容是使用 text-transform 属性进行文本转换。我们平时查看中英文混排的页面中，经常会使用到英文字母的大小写转换，CSS 样式表中通过 text-transform 属性提供了相应的文本转换功能。文本的大小写转换在空格处理之后进行，文本转换只对英文起作用，对中文无效，因为中文不区分大小文字。 text-transform 属性对英文文本进行大小写转换，具体属性值及描述如下所示： 值 描述
lowercase 表示将文本的所有字符转换成小写
uppercase 表示将文本的所有字符转换成大写
capitalize 表示将每个单词的首字母转换成大写，其它字符不变
initial 表示将属性值设置为默认值
inherit 表示文本元素采用其父元素 text-transform 的属性值
none 没有大写效果，文本按原样呈现，这是默认值
在模块 2 中将图片下的标题 h1 元素的 text-transform 属性设置为 capitalize， 将 h1 元素内文本首字体设置为大写。将 h2 元素的 text-transform 属性设置为 lowercase , 将 h2 元素内文本全部设置为小写。将 h3 元素的 text-transform 属性设置为 uppercase， 表示 h3 元素内的文本全部设置为大写。调整 CSS 样式定义如下所示：<style type="text/css">
.welcome h1 {
text-transform: capitalize;
color: #FF3EFF;
}
.welcome h2 {
text-transform: lowercase;
color: #0000FF;
}
.welcome h3 {
text-transform: uppercase;
color: #00DD00;
}
</style>
以上代码为了区分 h1-h3 不同的文本转换效果，使用了粉色、蓝色、绿色三种颜色进行区分，方便查看三种不同的文本转换效果。所有浏览器都支持 text-transform 属性。由于不同的浏览器，对单词的理解可能不同。比如，对于文本 “text-transform” ，Google Chrome 浏览器会把它整体看作一个单词，而 Firefox 浏览器把它看作是 “text” 和 “transform” 两个单词，中间用连字符连接。因此，在 text-transform 属性取值为 capitalize 时，在 Google Chrome 中得到的结果是 “Text-Transform”，而在 Firefox 中得到的结果是 “Text-transform”。而 CSS 规范并没有明确规定使用哪一种转换方式，所以它们都是正确的结果。注：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。使用 text-transform 属性的好处是，如果你需要将哪些元素变成大写，则无需修改元素本身的文本内容，只需使用 CSS 设置 text-transform 属性值就可以完成。这也是使用 CSS 便捷性的再一次体现。大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，调整页面效果如下：
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
