|
原文：http://andymao.com/andy/post/100.html
上一節(jié)：美化段落文本 Ⅰ
web標(biāo)準(zhǔn)知識(shí)——美化段落文本 Ⅱ
懶，可能是唯一解釋為什么這么長(zhǎng)時(shí)間才寫這一篇的主要原因。不述詳情，以此責(zé)心。
上一篇講了如何美化段落的基本形式，通過段距、首行縮進(jìn)、首行突出以及字體、大小、色彩等也作了簡(jiǎn)要的講述。由于很多知道在一些已有的資料里已經(jīng)有了，所以我這里就不多說了，主要還是要講一些應(yīng)用的技巧。今天要講的內(nèi)容是如何實(shí)現(xiàn)“首字下沉”，也就是我博客首頁(yè)上的效果，第一個(gè)字是很大的紅色楷體，陷于一段文字之首。這種做法在雜志中常見，但是在網(wǎng)頁(yè)中不那么常見。那么如何實(shí)現(xiàn)呢？其實(shí)很簡(jiǎn)單，只有一句CSS就可以了。下面列出，不喜歡讀很多文字的朋友可以就此句細(xì)細(xì)研究不用向下讀了。
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;}
如果你覺得還不是很清楚，那么這里就細(xì)細(xì)講述一下：
首先要在HTML中有一段自己的文本，是在<p></p>中的也好，在其它塊標(biāo)簽中都可以。給他個(gè)ID也好，class也好，直接的標(biāo)簽也可以，先找到這個(gè)選擇符，這里假設(shè)一段文字的id為article，那么給這段的CSS一開始就寫成
#article:first-letter {……}
:first-letter 是個(gè)偽類，用途是設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式表屬性。該語法屬CSS2范圍。詳細(xì)見《CSS2中文手冊(cè)》
這里再細(xì)說語句中的一個(gè)個(gè)屬性，首先我們要讓這個(gè)字大于正文中的字，那么給他的字體大小是正文內(nèi)容的2.5倍。當(dāng)然你也可以選擇3倍，4倍，這個(gè)根據(jù)自己的需要來作修改。
#article:first-letter { font-size:2.5em }
為什么要用em這個(gè)標(biāo)簽?zāi)兀恳驗(yàn)橛袝r(shí)候我們的讀者們會(huì)需要通過瀏覽器縮放的功能改變文字的大小，如果設(shè)為一個(gè)具體的大小，那么自然就會(huì)比例失調(diào)。這個(gè)大家可以動(dòng)手變動(dòng)一下看看找找感覺。有了大小了，但是字體不對(duì)，那么這里應(yīng)增加字體與字體加粗
#article:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; }
看過上一篇的朋友一定知道這樣的寫法是比較冗長(zhǎng)的，有比較簡(jiǎn)單的簡(jiǎn)寫方式。那么如何簡(jiǎn)寫請(qǐng)根據(jù)上篇提示動(dòng)手修改一下。我們發(fā)現(xiàn)這里還有一個(gè)line-heihgt:1.2em; 為什么要用這個(gè)？這是因?yàn)槲覀兺ǔ?huì)給這段文字設(shè)置一個(gè)行高，而這個(gè)行高通常是超過1.5em的，那就是說這樣的行高會(huì)使得首字離正文內(nèi)容有點(diǎn)遠(yuǎn)，并且不好看，那么自然要給這個(gè)首字一點(diǎn)特別的對(duì)待，當(dāng)然是1em還是1.1em都要根據(jù)自己的實(shí)際需要來修改調(diào)整。這里的數(shù)字不是一定的。
好了，到現(xiàn)在為此這個(gè)首字似乎還并沒有打算下沉的意思，那么這里的關(guān)鍵點(diǎn)就是 float:left; 對(duì)的，就是左浮動(dòng)。我們要知道，當(dāng)一個(gè)對(duì)象被設(shè)為浮動(dòng)屬性之后，不論原來是否是塊級(jí)元素都會(huì)具備塊級(jí)元素的特性。而周圍沒有被設(shè)定的文本流側(cè)會(huì)環(huán)繞著這個(gè)對(duì)象。圖片在文本中的環(huán)繞也是這個(gè)屬性。
#article:first-letter { font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em; float:left; }
動(dòng)手試試看，是不是已經(jīng)看到首字下沉了？當(dāng)然或許你看出來了，有點(diǎn)不那么整齊上面是不是多了一點(diǎn)出來？不用擔(dān)心，用padding來設(shè)置一下讓這個(gè)字頂部多點(diǎn)空間出來，讓這個(gè)首字和第一行齊平。
最后我還能說點(diǎn)什么？我想到了，有一次我試圖讓<div id="acticle"><p>……</p></div>中的P也能實(shí)現(xiàn)首字下沉，可是結(jié)果卻失敗了，得出的結(jié)論是：我們并不能隔著一層標(biāo)簽去控制子對(duì)象中的第一個(gè)字符。
當(dāng)然如果你對(duì)這個(gè)偽類產(chǎn)生興趣的話那么也推薦你接著研究一下：
Selector : first-line { sRules }
Selector1 Selector2 : first-child { sRules }
下一節(jié)：無序列表
本文鏈接：http://www.95time.cn/tech/web/2008/5976.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
