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中有一段自己的文本，是在<p></p>中的也好，在其它塊標籤中都可以。給他個ID也好，class也好，直接的標籤也可以，先找到這個選擇符，這裡假設一段文字的id為article，那麼給這段的CSS一開始就寫成：

#article:first-letter {……}

:first-letter 是個偽類，用途是設定對象內的第一個字元的樣式表屬性。該文法屬CSS2範圍。詳細見《CSS2中文手冊》

這裡再細說語句中的一個個屬性，首先我們要讓這個字大於本文中的字，那麼給他的字型大小是本文內容的2.5倍。當然你也可以選擇3倍，4倍，這個根據自己的需要來作修改。

#article:first-letter { font-size:2.5em }

為什麼要用em這個標籤呢？因為有時候我們的讀者們會需要通過瀏覽器縮放的功能改變文字的大小，如果設為一個具體的大小，那麼自然就會比例失調。這個大家可以動手變動一下看看找找感覺。有了大小了，但是字型不對，那麼這裡應增加字型與字型加粗。

#article:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; }

好了，到現在為此這個首字似乎還並沒有打算下沉的意思，那麼這裡的關鍵點就是 float:left; 對的，就是左浮動。我們要知道，當一個對象被設為浮動屬性之後，不論原來是否是區塊層級元素都會具備區塊層級元素的特性。而周圍沒有被設定的文字資料流側會環繞著這個對象。圖片在文本中的環繞也是這個屬性。

#article:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em; float:left; }

動手試試看，是不是已經看到首字下沉了？當然或許你看出來了，有點不那麼整齊上面是不是多了一點出來？不用擔心，用padding來設定一下讓這個字頂部多點空間出來，讓這個首字和第一行齊平。

最後我還能說點什嗎？我想到了，有一次我試圖讓<div id="acticle"><p>……</p></div>中的P也能實現首字下沉，可是結果卻失敗了，得出的結論是：我們並不能隔著一層標籤去控制子物件中的第一個字元。

當然如果你對這個偽類產生興趣的話那麼也推薦你接著研究一下：
Selector : first-line { sRules }
Selector1 Selector2 : first-child { sRules }