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 的值。