CSS text-transform 控制文章字母的大小寫

在 CSS 的設計中,你可以透過 text-transform 來控制文章中的文字字母大小寫,當然指的是英文字母而不是中文字母,瀏覽器會依照你的指示去呈現,無論原本的字母是大寫還是小寫,一律根據 text-transform 顯示。可以設定全部大寫、全部小寫或是只有第一個字母大寫。

CSS text-transform 範例
<span style="text-transform:uppercase;">Good Morning Piter.</span><br><!--定義所有字母均為大寫-->
<span style="text-transform:lowercase;">Good Morning Piter.</span><br><!--定義所有字母均為小寫-->
<span style="text-transform:capitalize;">Good Morning Piter.</span><!--定義單字的第一個字母大寫,其他字母小寫-->
呈現結果
GOOD MORNING PITER.
good morning piter.
Good Morning Piter.
所有主流的瀏覽器都支援 CSS text-transform 屬性,你可以根據自己的需求而採用哪種效果,預設值為 none,字母大小根據你所寫的大小而顯示,跟沒寫一樣的意思。

推薦給您的延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012