主頁 > 知識庫 > CSS 美化段落文本之首字下沉

CSS 美化段落文本之首字下沉

熱門標簽:隨州外呼系統(tǒng)廠家 地圖標注樓盤 地圖標注微信好友 南昌電話機器人系統(tǒng) ai電話機器人效果差 快速更改地圖標注點標 蘇州做電話機器人 南山電話機器人 沈陽400電話辦理多少錢
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也好,直接的標簽也可以,先找到這個選擇符,這里假設(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這個標簽?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è)置一下讓這個字頂部多點空間出來,讓這個首字和第一行齊平。

    最后我還能說點什么?我想到了,有一次我試圖讓div id="acticle">p>……/p>/div>中的P也能實現(xiàn)首字下沉,可是結(jié)果卻失敗了,得出的結(jié)論是:我們并不能隔著一層標簽去控制子對象中的第一個字符。

    當(dāng)然如果你對這個偽類產(chǎn)生興趣的話那么也推薦你接著研究一下:
    Selector : first-line { sRules } 
    Selector1 Selector2 : first-child { sRules }

您可能感興趣的文章:
  • 使用JavaScript和CSS實現(xiàn)文本隔行換色的方法
  • CSS小例子(只顯示下劃線的文本框,像文字一樣的按鈕)
  • css文本框與按鈕美化效果代碼
  • 文本框css關(guān)閉輸入法
  • CSS漸變文本效果的兩種方法比較
  • 用css實現(xiàn)隱藏文本框
  • CSS控制文本自動換行的問題
  • 用CSS動態(tài)控制文本屬性
  • 詳解CSS不定寬溢出文本適配滾動

標簽:深圳 濰坊 商洛 昭通 石家莊 玉樹 大同 濰坊

巨人網(wǎng)絡(luò)通訊聲明:本文標題《CSS 美化段落文本之首字下沉》,本文關(guān)鍵詞  CSS,美化,段落,文本,之,首字,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS 美化段落文本之首字下沉》相關(guān)的同類信息!
  • 本頁收集關(guān)于CSS 美化段落文本之首字下沉的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章