使用DIV+CSS讓文章中英文單詞或拼音的第一個字母大寫、使用CSS讓文章中英文單詞或拼音全大寫、使用DIV CSS讓文章中出現英文單詞或拼音全小寫教程實例CSS text-transform實例布局教程
平時我們常常在國外報紙、英文文章、國外網站看見文章中英文單詞或拼音的首個字母大寫，或文章中拼音或英文單詞字母全小寫或全大寫，今天DIVCSS5為大家介紹讓英文單詞或拼音首個字母大寫、全文中英文單詞全大寫或小寫的方法教程，這里我們介紹使用text-transform來實現首字母大寫、全文大寫、全文小寫布局教程方法。
DIV CSS text-transform英文字母首字母大寫小寫-英文字母全小寫篇
一、結構語法 - TOP
1、text-transform 值：
Capitalize 英文拼音的首字母大寫
Uppercase 英文拼音字母全大寫
Lowercase 英文拼音字母全小寫
2、CSS text-transform語法結構
div{text-transform:capitalize}
text-transform結構分析圖
二、英文或拼音單詞首字母大寫 - TOP
此DIV CSS樣式針對每個英文單詞或拼音的首個字母大寫
text-transform : capitalize
三、英文或拼音單詞字母全大寫 - TOP
此CSS樣式實現無論拼音或單詞英文字母都會全部實現轉換為大寫
text-transform : uppercase
四、英文或拼音單詞字母全小寫 - TOP
此DIV+CSS樣式實現無論拼音或字母或英文單詞，本身是否大寫都將轉換為全部小寫
text-transform : lowercase
五、CSS英文單詞大寫或小寫案例 - TOP
1、CSS代碼片段：
- .shou_daxie{text-transform:capitalize}
- .quan_daxie{text-transform:uppercase}
- .quan_xiaoxie{text-transform:lowercase}
2、HTML源代碼片段：
- <div class="shou_daxie">
- 首字母大寫 ni hao hello
- </div>
- <div class="quan_daxie">
- 字母全實現大寫ni hao hello
- </div>
- <div class="quan_xiaoxie">
- 字母全實現小寫ni HAo hEllo無論字母是否被大寫都將被CSS小寫
- </div>
3、CSS英文字母大寫小寫，全小寫大寫，首字母（css text-transform）案例截圖
CSS首字母大寫與英文字母全大寫全小寫案例截圖
六、CSS字母大寫與CSS字母小寫總結 - TOP
這里DIVCSS5介紹了css text-transform實現首字母大寫、英文字母全小寫、英文字母全大寫使用與語法。如果要掌握可以復制DIV CSS大寫小寫案例代碼親自實踐，靈活運用。對于文字排版，特別是英文或拼音字母要求大小寫首字母大小寫均可使用text-transform樣式屬性。
CSS英文字母大寫后縮小：http://www.rs2pl.com/rumen/r308.shtml
無論文中大寫還是小寫，無論是首字母大寫還是全部大寫或小寫，我們可以使用text-transform來實現，同時要想實現文中字母大寫后字母縮小我們可以使用css font-variant來實現。如有任何疑問可到CSS論壇發表自己看法或疑問。
如需轉載，請注明文章出處和來源網址：http://www.rs2pl.com/rumen/r309.shtml
