App下載

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

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

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

實現(xiàn)效果

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

實現(xiàn)思路

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

具體代碼

<!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。隨時隨地學(xué)編程！w3cschool主要為初學(xué)者技術(shù)的人員提供在線學(xué)習教程和日常技術(shù)資料查詢服務(wù)。為了能更好的服務(wù)用戶，網(wǎng)站平臺中提供了大量的在線實例，通過實例，可以更好地學(xué)習如何建站。并且會根據(jù)當前互聯(lián)網(wǎng)的變化實時更新內(nèi)容。
    </p>
</body>
</html>

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

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




CSS

0 人點贊