今天要講的內(nèi)容是如何實現(xiàn)“首字下沉”，，第一個字是很大的紅色楷體，陷于一段文字之首。這種做法在雜志中常見，但是在網(wǎng)頁中不那么常見。那么如何實現(xiàn)呢？其實很簡單，只有一句CSS就可以了。
| Selector:first-letter {font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;} |
如果你覺得還不是很清楚，那么這里就細細講述一下：
首先要在HTML中有一段自己的文本，是在
中的也好，在其它塊標(biāo)簽中都可以。給他個ID也好，class也好，直接的標(biāo)簽也可以，先找到這個選擇符，這里假設(shè)一段文字的id為article，那么給這段的CSS一開始就寫成：
| #article:first-letter {……} |
:first-letter 是個偽類，用途是設(shè)置對象內(nèi)的第一個字符的樣式表屬性。該語法屬CSS2范圍。詳細見《CSS2中文手冊》
這里再細說語句中的一個個屬性，首先我們要讓這個字大于正文中的字，那么給他的字體大小是正文內(nèi)容的2.5倍。當(dāng)然你也可以選擇3倍，4倍，這個根據(jù)自己的需要來作修改。
| #article:first-letter { font-size:2.5em } |
為什么要用em這個標(biāo)簽?zāi)�？因為有時候我們的讀者們會需要通過瀏覽器縮放的功能改變文字的大小，如果設(shè)為一個具體的大小，那么自然就會比例失調(diào)。這個大家可以動手變動一下看看找找感覺。有了大小了，但是字體不對，那么這里應(yīng)增加字體與字體加粗。
| #article:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; } |
好了，到現(xiàn)在為此這個首字似乎還并沒有打算下沉的意思，那么這里的關(guān)鍵點就是 float:left; 對的，就是左浮動。我們要知道，當(dāng)一個對象被設(shè)為浮動屬性之后，不論原來是否是塊級元素都會具備塊級元素的特性。而周圍沒有被設(shè)定的文本流側(cè)會環(huán)繞著這個對象。圖片在文本中的環(huán)繞也是這個屬性。
| #article:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em; float:left; } |
動手試試看，是不是已經(jīng)看到首字下沉了？當(dāng)然或許你看出來了，有點不那么整齊上面是不是多了一點出來？不用擔(dān)心，用padding來設(shè)置一下讓這個字頂部多點空間出來，讓這個首字和第一行齊平。
最后我還能說點什么？我想到了，有一次我試圖讓
中的P也能實現(xiàn)首字下沉，可是結(jié)果卻失敗了，得出的結(jié)論是：我們并不能隔著一層標(biāo)簽去控制子對象中的第一個字符。
當(dāng)然如果你對這個偽類產(chǎn)生興趣的話那么也推薦你接著研究一下：
Selector : first-line { sRules }
Selector1 Selector2 : first-child { sRules }
