App下載

CSS如何實(shí)現(xiàn)首字下沉效果？

猿友 2021-04-01 17:59:08 瀏覽數(shù) (5780)
反饋

我們?cè)陂_(kāi)發(fā) web 頁(yè)面時(shí)，如果是涉及到文字段落的開(kāi)發(fā)，需要對(duì)文字設(shè)置一些特殊樣式以增強(qiáng) web 頁(yè)面美觀，提升用戶體驗(yàn)度。那么今天 w3cschool 小編來(lái)教大家 CSS 如何實(shí)現(xiàn)首字下沉效果。

實(shí)現(xiàn)效果

CSS如何設(shè)置首字下沉

實(shí)現(xiàn)思路

先用?first-child?選擇器用于選取屬于其父元素的首個(gè)子元素，之后用偽元素?::first-letter?來(lái)選中一段文字的首字，然后使用?font-size?設(shè)置首字大小，?color?設(shè)置字體顏色，最后需要用? float ?屬性定義元素浮動(dòng)，脫離原來(lái)頁(yè)面的標(biāo)準(zhǔn)輸出流。

具體代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首字下沉 - 編程獅(w3cschool.cn)</title>
	 <style>
            p:first-child::first-letter{
                color: #c69c6d;
                font-size: 2em;
                float:left;
                margin: 0 .2em 0 0;
            }
        </style>
</head>
<body>
	<p>
        編程獅-w3cschool。隨時(shí)隨地學(xué)編程！w3cschool主要為初學(xué)者技術(shù)的人員提供在線學(xué)習(xí)教程和日常技術(shù)資料查詢服務(wù)。為了能更好的服務(wù)用戶，網(wǎng)站平臺(tái)中提供了大量的在線實(shí)例，通過(guò)實(shí)例，可以更好地學(xué)習(xí)如何建站。并且會(huì)根據(jù)當(dāng)前互聯(lián)網(wǎng)的變化實(shí)時(shí)更新內(nèi)容。
    </p>
</body>
</html>

以上就是 CSS 如何實(shí)現(xiàn)首字下沉效果？的全部?jī)?nèi)容。多 CSS 內(nèi)容的學(xué)習(xí)請(qǐng)關(guān)注 w3cschool 官網(wǎng)。

相關(guān) CSS 效果：CSS如何設(shè)置圖片旋轉(zhuǎn)、CSS如何實(shí)現(xiàn)陰影效果




CSS

0 人點(diǎn)贊