text-transform

text-align | text-decoration | text-indent | text-overflow | text-shadow | text-transform

text-transform

指定文字的大小寫，可設為：

1. none：不改變原字，此為預設值。
2. capitalize：每個字詞的第一個字母，大寫。
3. lowercase：字母都變成小寫。
4. uppercase：字母都變成大寫。
5. inherit：繼承父元素的特徵值。

<span style='text-transform: capitalize'> text-transform: capitalize</span><br /> <span style='text-transform: uppercase'> text-transform: uppercase</span><br /> <span style='text-transform: lowercase'> TEXT-TRANSFORM: LOWERCASE </span>

• 上面 capitalize 的例子，在 Firefox text-transform 會變成 Text-transform；在 IE6, Safari, Chrome 則變成 Text-Transform。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {text-decoration:underline;} .hvr:hover {text-decoration:overline;} .hvr:active {text-decoration:line-through;} </style> <span class=hvr> 射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </span>

javascript 應用。可以用 style 物件 的特徵 textTransform 讀取或設定特徵值。 <div id='atr3' style='text-align:right; text-decoration:none; text-indent:40px; text-transform:uppercase; background:blue; width:150px; height:100px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲. </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.textTransform ); </script>