css如何實現首字下沉效果？偽元素+浮動實現效果（程式碼實例）
- 青灯夜游原創
- 2018-10-12 11:50:175233瀏覽
在word文件中有一個首字下沉功能，可以在文章的排版時使用，有時能為文章增色不少。那麼css可以實現這樣的效果嗎？這篇文章就為大家介紹css是如何實現首字下沉效果的，讓大家可以了解如何用css的偽元素 浮動實現首字下沉效果。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
在css中首字下沉效果都是能過偽元素::first-letter來實現。其實實作原理非常的簡單，就是把首字font-size值設定較大，然後能過float來實作。
下面我們就透過簡單的程式碼範例來看看css是怎麼實現首字下沉效果的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首字下沉</title>
<style>
p::first-letter{
color: #c69c6d;
font-size: 2em;
float:left;
margin: 0 .2em 0 0;
}
</style>
</head>
<body>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
</body>
</html>效果圖：
上例中是將所有段落的首字下沉，如果只需要實現某段的首字下沉效果，那還需要配合其它的選擇器來實現。這裡我們來看看首段首字下沉的實作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首字下沉</title>
<style>
p:first-child::first-letter{
color: #c69c6d;
font-size: 2em;
float:left;
margin: 0 .2em 0 0;
}
</style>
</head>
<body>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
</body>
</html>效果圖：
#總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS基礎影片教學！
相關推薦：
以上是css如何實現首字下沉效果？偽元素+浮動實現效果（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn