CSS如何實現首字下沉效果？

猿友 2021-04-01 17:59:08 瀏覽數 (7454)

反饋

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

實現效果

CSS如何設置首字下沉

實現思路

先用?first-child?選擇器用于選取屬于其父元素的首個子元素，之后用偽元素?::first-letter?來選中一段文字的首字，然后使用?font-size?設置首字大小，?color?設置字體顏色，最后需要用? 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。隨時隨地學編程！w3cschool主要為初學者技術的人員提供在線學習教程和日常技術資料查詢服務。為了能更好的服務用戶，網站平臺中提供了大量的在線實例，通過實例，可以更好地學習如何建站。并且會根據當前互聯網的變化實時更新內容。
    </p>
</body>
</html>

以上就是 CSS 如何實現首字下沉效果？的全部內容。多 CSS 內容的學習請關注 w3cschool 官網。

相關 CSS 效果：CSS如何設置圖片旋轉、CSS如何實現陰影效果