CSS TEXT TRANSFORMATION

CSS TEXT TRANSFORMATION 属性允许你修改文本的大小写形式。

一、text-transform: uppercase;

text-transform: uppercase;属性被用来把文本转换成全部大写字母。

    
        p {
            text-transform: uppercase;
        }
    

在上面的例子中，<p> 标签中的文本会被全部转换成大写字母。这个属性的值为 uppercase。

使用这个属性可以很容易地让一个段落或标题在页面上更加显眼：

    
        <h3><span style="text-transform: uppercase;">categories</span></h3>
    

上面的 HTML 代码将 "categories" 转换成了大写，同时将它放到了一个页面标题中。

二、text-transform: lowercase;

text-transform: lowercase;属性被用来把文本转换成全部小写字母。

    
        p {
            text-transform: lowercase;
        }
    

在上面的例子中，<p> 标签中的文本会被全部转换成小写字母。这个属性的值为 lowercase。

一般来说，小写字母在页面上很少用到。这个属性只要在希望强调一些大写字母时才会用到。

三、text-transform: capitalize;

text-transform: capitalize;属性被用来把每个单词的第一个字母转换成大写字母。

    
        p {
            text-transform: capitalize;
        }
    

在上面的例子中，<p> 标签中的文本被转换成了每个单词的首字母大写形式。这个属性的值为 capitalize。

这个属性往往用在标题和段落中，可以使文本看起来更加优雅：

    
        <h2><span style="text-transform: capitalize;">a tale of two cities</span></h2>
    

这个例子的结果是，标题 "a tale of two cities" 变成了 "A Tale Of Two Cities"，使得它更加显眼。

四、text-transform: none;

text-transform: none;属性用于取消 text-transform 的值，使用文本的原始大小写。

    
        p {
            text-transform: none;
        }
    

在上面的例子中，<p> 标签中的文本会使用文本的原始大小写。

这个属性很少用到，因为 text-transform 属性默认值为 none，所以文本的大小写不会被修改。

五、text-transform: initial;

text-transform: initial;属性用于把 text-transform 属性重置为它的默认值。

    
        p {
            text-transform: initial;
        }
    

在上面的例子中，<p> 标签中的文本会使用原始大小写，这也是 text-transform 的默认值。

这个属性常用于取消一个继承过来的 text-transform 属性。例如：

    
        <div style="text-transform: uppercase;">
            <p>This is a paragraph</p>
            <p style="text-transform: initial;">This is another paragraph</p>
        </div>
    

这个例子中，第二个段落取消了继承的全部大写字母属性，从而使用文本的原始大小写。

六、text-transform: inherit;

text-transform: inherit; 属性用于继承父元素的 text-transform 的值。

    
        p {
            text-transform: inherit;
        }
    

在上面的例子中，父元素的 text-transform 值会被使用到 <p> 标签中的文本中。这个例子中使用的是默认值，即 text-transform: none;。

这个属性一般很少用到，因为 text-transform 默认值为 None，也就是文本大小写不会被修改。

七、总结

通过上述例子，我们了解到 CSS TEXT TRANSFORMATION 属性各个取值的特点和使用场景。

text-transform: uppercase;，把文本全部转化为大写字母，适用于强调和提示文本。

text-transform: lowercase;，把文本全部转化为小写字母，一般用于少见的罕见单词等场合。

text-transform: capitalize;，将每个单词的首字母大写，适用于标题和段落等需要一定格式的文本。

text-transform: none;，取消所设值，使用文本本身的大小写形式。

text-transform: initial;，重置为默认值，也就是文本的原始大小写形式。

text-transform: inherit;，继承父元素的 text-transform 的值。