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;} |
如果你覺得還不是很清楚,那么這里就細(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è)字符的樣式表屬性。該語(yǔ)法屬CSS2范圍。詳細(xì)見《CSS2中文手冊(cè)》
這里再細(xì)說(shuō)語(yǔ)句中的一個(gè)個(gè)屬性,首先我們要讓這個(gè)字大于正文中的字,那么給他的字體大小是正文內(nèi)容的2.5倍。當(dāng)然你也可以選擇3倍,4倍,這個(gè)根據(jù)自己的需要來(lái)作修改。
#article:first-letter { font-size:2.5em } |
為什么要用em這個(gè)標(biāo)簽?zāi)兀恳驗(yàn)橛袝r(shí)候我們的讀者們會(huì)需要通過(guò)瀏覽器縮放的功能改變文字的大小,如果設(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; } |
好了,到現(xiàn)在為此這個(gè)首字似乎還并沒有打算下沉的意思,那么這里的關(guān)鍵點(diǎn)就是 float:left; 對(duì)的,就是左浮動(dòng)。我們要知道,當(dāng)一個(gè)對(duì)象被設(shè)為浮動(dòng)屬性之后,不論原來(lái)是否是塊級(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)然或許你看出來(lái)了,有點(diǎn)不那么整齊上面是不是多了一點(diǎn)出來(lái)?不用擔(dān)心,用padding來(lái)設(shè)置一下讓這個(gè)字頂部多點(diǎn)空間出來(lái),讓這個(gè)首字和第一行齊平。
最后我還能說(shuō)點(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 }
相關(guān)文章
激發(fā)你的靈感:50個(gè)優(yōu)秀的Favicons
激發(fā)你的靈感:50個(gè)優(yōu)秀的Favicons...2007-02-02padding、border會(huì)把div撐大的解決方法
所有HTML元素都可以看作盒子,CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實(shí)際內(nèi)容,盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素,因?yàn)镈iv添加了padding、border,Div的實(shí)際寬度=Div的初始固定值+邊距值+邊框值2023-09-09純CSS實(shí)現(xiàn)標(biāo)簽導(dǎo)航制作
2008-01-01CSS實(shí)現(xiàn)的一個(gè)圖片放大展示的一種思路
CSS實(shí)現(xiàn)的一個(gè)圖片放大展示的一種思路...2007-10-10使用text-align:justify實(shí)現(xiàn)兩端對(duì)齊一例
使用text-align:justify實(shí)現(xiàn)兩端對(duì)齊一例...2007-09-09