CSS text-transform 屬性 - 網頁設計教學站

CSS text-transform 屬性的功能是用來定義網頁中的英文單字字母大小寫，這是 CSS 的一個非常便利的功能，因為打字有時候難免打太快，文章中的英文字母不小心就可能會打錯大小寫，設計可以輕易的透過 text-transform 屬性來控制，減少錯誤的情況，另外還有一種常用的情況，就是希望網頁中文字全面性的控制大小寫，例如所有字母全部自動變成大寫字體或全部單字的第一個英文字母呈現大寫字體，其餘都用小寫字母顯示，這樣可以很輕易的創造出整齊的文字視覺效果。

CSS text-transform 屬性語法

text-transform: 大小寫設定;

CSS 的 text-transform 屬性只有一個設定方式，但是有三種效果，分別條列於下：

text-transform:uppercase; ←定義每個英文單字的字母均為大寫字體。
text-transform:lowercase; ←定義每個英文單字的字母均為小寫字體。
text-transform:capitalize; ←定義每個英文單字的第一個字母為大寫字體，其餘字母為小寫字體。

CSS text-transform 屬性範例

第一行：He likes to travel around. 
第二行：This brand's cake quite famous. 
第三行：Do you need a cup of tee.

範例的效果

第一行：He likes to travel around.
第二行：This brand's cake quite famous.
第三行：Do you need a cup of tee.

範例中總共有三行一般的英文句子，其中有大寫英文字母也有小寫英文字母，我們將 CSS text-transform 屬性的三種效果分別套用至這三行英文句子中，從範例的呈現效果可以看到 text-transform 屬性很輕易的就把句子中的字母大小寫控制完成。我們為了簡化範例，所以只寫出用 span 區域標示文字，實際上 text-transform 屬性還可以套用到 DIV 區塊、文字輸入欄位 input type= text、textarea ... 等不同的網頁元素中，更多種應用方式就看各位設計師的實際需求自己決定囉！

延伸閱讀

§ 工商服務：想學英文單字嗎？推薦給您：英文單字筆記部落格。