一般而言，我們在使用英文時，其實在打字的時候，就已經過會分大小寫了，而在中文的世界裡，中文是無大小寫的，所以使用上，其實不是太多，但有些時候，我們在編寫英文網頁的時候，因某種需求或要求，你必須將所有文章改成一致大寫或小寫，也許可以用WORD 複製貼上轉換一下就可以了，但如果文章的數量較外龐大，光是用CTRL+C 和 CTRL+V ，你的手就夠累的，還是來介紹一下唄！
來寫HTML 吧！
<!doctype html> <html> <head> <meta charset="utf-8"> <title>魚和橙</title> </head> <body> <articleclass="a1"> <h1>This is my font</h1> <p>The results of a survey <strong>KEYWORD</strong> Friday showed <span>that 70 percent</span> of local <em>salaried employees</em> are hesitant(1) about getting married, citing insufficient(2) savings and job instability as the reasons. </p> </article> </body> </html>
先來看看原本的輸出吧！
我們利用CSS，利用 text-transform 將<h1>都改成大寫，而將<strong>都改成小寫吧！
<style type="text/css"> h1 { text-transform: uppercase; } strong { text-transform: lowercase; } </style>
先來看結果輸出：
<h1> 利用 uppercase 將整段文字都改成了大寫，而<strong> 利用 lowercase 將原本大寫，都改成了小寫。
這個設定也會繼承，當你要讓子類有不一樣的大小寫，如果父類已設定，但你的子類並不希望和父類有相同的設定的話，就必須在子類中設定 text-transform: none; 來解除父類的設定。
沒有留言:
張貼留言