在前面的一篇文章中，我們已經闡述了CSS的基本文法，很基礎；其實學習任何一個東西，都必須從基礎開始。你沒有好的基礎，就想很鑽研的很輸入，那麼到頭來，還是有非常多的疑惑。其實我們學校裡邊上課，老師講的也是很基礎的東西，所以很乏味，造成很多同學不聽課，然後不知不覺的，老師就講到了一些執行個體的時候，自己才想著去鑽研，但是自己還得回頭看基礎。所以看這篇文章的時候，有不解的地方，回頭看第一篇文章精通CSS.DIV網頁樣式與布局（一）。
我們接著講:CSS文字效果
CSS文字樣式：首先我們講字型：在CSS中，我們採用了font-family來控制文字的字型。我們看一段代碼：
<html><head><title>文字字型</title><style><!--h2{font-family:黑體, 幼圓;}p{font-family:Arial, Helvetica, sans-serif;}p.kaiti{font-family:楷體_GB2312, "Times New Roman";}--></style> </head><body><h2>我是陳宗毅</h2><p>正在寫部落格</p><p class="kaiti">作者: 陳宗毅</p></body></html>
這段代碼裡邊，我們先看h2裡邊，有“font-family:黑體,幼圓;"這個的意思是：h2標記的裡邊，若是有黑體就用黑體，沒有黑體就用幼圓。下面的P標籤也是一樣。最後的作者也類似。我們看效果：
效果還是很樂觀的，h2黑體，最後作者用楷體。繼續往下看：文字大小。
我們先看代碼：
<html><head><title>文字大小</title><style><!--p.inch{ font-size: 0.5in; }p.cm{ font-size: 0.5cm; }p.mm{ font-size: 4mm; }p.pt{ font-size: 12pt; }p.pc{ font-size: 2pc; }--></style> </head><body><p class="inch">文字大小，0.5in</p><p class="cm">文字大小，0.5cm</p><p class="mm">文字大小，4mm</p><p class="pt">文字大小，12pt</p><p class="pc">文字大小，2pc</p></body></html>
這裡一共採用了5行做對比，第一行0.5in,第二行：0.5cm。……css控制文字大小是通過font-size來實現的。
效果：
我們繼續看，文字的顏色：我們先看代碼：
<html><head><title>文字顏色</title><style><!--h2{ color:rgb(0%,0%,80%); }p{color:#333333;font-size:13px;}p span{ color:blue; }--></style> </head><body><h2>冬至的由來</h2><p><span>冬至</span>過節源於漢代，盛於唐宋，相沿至今。《清嘉錄》甚至有“<span>冬至</span>大如年”之說。這表明古人對<span>冬至</span>十分重視。人們認為<span>冬至</span>是陰陽二氣的自然轉化，是上天賜予的福氣。漢朝以<span>冬至</span>為“冬節”，官府要舉行祝賀儀式稱為“賀冬”，例行放假。《後漢書》中有這樣的記載：“<span>冬至</span>前後，君子安身靜體，百官絕事，不聽政，擇吉辰而後省事。”所以這天朝庭上下要放假休息，軍隊待命，邊塞閉關，商旅停業，親朋各以美食相贈，相互拜訪，歡樂地過一個“安身靜體”的節日。</p><p>唐、宋時期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在這天要到郊外舉行祭天大典，百姓在這一天要向父母尊長祭拜，現在仍有一些地方在<span>冬至</span>這天過節慶賀。</p></body></html>
我們可以看的出來
文字顏色的表示方法有很多種，看h2裡邊的color:rgb(0%,0%,80%),採用了百分比來顯示，P標誌採用了十六進位來表示，span標誌則直接是blue。我們看顯示效果：
很有意思的表示方法；深藍色、藍色、黑色的效果。。大家可以看自己的喜好來進行選用。
我們繼續看文字的另外一個效果：粗細效果：我們為了一一顯示文字的粗細，採用了非常多行來進行對比：看代碼
<html><head><title>文字粗體</title><style><!--h1 span{ font-weight:lighter;}span{ font-size:28px; }span.one{ font-weight:100; }span.two{ font-weight:200; }span.three{ font-weight:300; }span.four{ font-weight:400; }span.five{ font-weight:500; }span.six{ font-weight:600; }span.seven{ font-weight:700; }span.eight{ font-weight:800; }span.nine{ font-weight:900; }span.ten{ font-weight:bold; }span.eleven{ font-weight:normal; }--></style> </head><body><h1>文字<span>粗</span>體</h1><span class="one">文字粗細:100</span><span class="two">文字粗細:200</span><span class="three">文字粗細:300</span><span class="four">文字粗細:400</span><span class="five">文字粗細:500</span><span class="six">文字粗細:600</span><span class="seven">文字粗細:700</span><span class="eight">文字粗細:800</span><span class="nine">文字粗細:900</span><span class="ten">文字粗細:bold</span><span class="eleven">文字粗細:normal</span></body></html>
再看一下效果：
100、200、300、400都沒有太大的區別，一直到500開始，他們的顯示效果跟bold粗體是一樣的，而100~400在直觀上看跟normal是一樣的。那麼font-weight在這個方面就做了很大的貢獻。
我們繼續看斜體：在CSS中控制斜體是通過font-style來控制的，如果是italic則表示是斜體，normal則表示是常規的。我們看代碼和效果：
<html><head><title>文字斜體</title><style><!--h1{ font-style:italic; }/* 設定斜體 */h1 span{ font-style:normal; }/* 設定為標準風格 */p{ font-size:18px; }p.one{ font-style:italic; }p.two{ font-style:oblique; }--></style> </head><body><h1>文字<span>斜</span>體</h1><p class="one">文字斜體</p><p class="two">文字斜體</p></body></html>
效果如下（我們看圖說話）：
我們這個h1與h1 span的效果可以看出：文字斜體中，這個“斜”沒有傾斜。
我們繼續看底線，頂劃線，刪除線：我們也是從代碼開始出發：
<html><head><title>文字底線、頂劃線、刪除線</title><style><!--p.one{ text-decoration:underline; }/* 底線 */p.two{ text-decoration:overline; }/* 頂劃線 */p.three{ text-decoration:line-through; }/* 刪除線 */p.four{ text-decoration:blink; }/* 閃爍 */--></style> </head><body><p class="one">底線文字，底線文字</p><p class="two">頂劃線文字，頂劃線文字</p><p class="three">刪除線文字，刪除線文字</p><p class="four">文字閃爍</p><p>正常文字對比</p></body></html>
我們很明顯的看出：text-decoration的屬性裡邊：underline、overline、line-through、blink.進行效果顯示：
當然閃爍效果我們沒有看的出來，大家可以自己實現。
我們繼續看英文字母大小寫：先從代碼入手
<html><head><title>英文字母大小寫</title><style><!--p{ font-size:17px; }p.one{ text-transform:capitalize; }/* 單詞首字大寫 */p.two{ text-transform:uppercase; }/* 全部大寫 */p.three{ text-transform:lowercase; }/* 全部小寫 */--></style> </head><body><p class="one">quick brown fox jumps over the lazy dog.</p><p class="two">quick brown fox jumps over the lazy dog.</p><p class="three">QUICK Brown Fox JUMPS OVER THE LAZY DOG.</p></body></html>
再看一下顯示效果：
text-transform屬性裡邊，capitalize（單字首大寫）、uppercase（全部大寫）、lowerca（全部小寫）。我們的進行了很好的對比。
我們通過一個簡單的執行個體來類比google公司的logo：
看代碼：
<html><head><title>Google</title><style><!--p{font-size:80px;letter-spacing:-2px;/* 字母間距 */font-family:Arial, Helvetica, sans-serif;}.g1, .g2{ color:#184dc6; }.o1, .e{ color:#c61800; }.o2{ color:#efba00; }.l{ color:#42c34a; }--></style> </head><body><p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p></body></html>
呢：
具體的程式碼分析，大家可以慢慢體會。主要的思路是用span來進行分離。
下一篇部落格中，我們繼續將會說到CSS是怎麼控制段落文字的。請大家繼續關注。謝謝。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
