我們?cè)陂_(kāi)發(fā) web 頁(yè)面時(shí)，如果是涉及到文字段落的開(kāi)發(fā)，需要對(duì)文字設(shè)置一些特殊樣式以增強(qiáng) web 頁(yè)面美觀，提升用戶(hù)體驗(yàn)度。那么今天 w3cschool 小編來(lái)教大家 CSS 如何實(shí)現(xiàn)首字下沉效果。
實(shí)現(xiàn)效果
實(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ù)的人員提供在線(xiàn)學(xué)習(xí)教程和日常技術(shù)資料查詢(xún)服務(wù)。為了能更好的服務(wù)用戶(hù)，網(wǎng)站平臺(tái)中提供了大量的在線(xiàn)實(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)陰影效果
