css text-indent屬性怎么實(shí)現(xiàn)首行縮進(jìn)

發(fā)布時(shí)間：2020-09-22 11:02:19 來源：億速云閱讀：155 作者：小新欄目：web開發(fā)

這篇文章主要介紹css text-indent屬性怎么實(shí)現(xiàn)首行縮進(jìn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

我們在設(shè)計(jì)網(wǎng)站HTML文章頁樣式時(shí)，文章展示的效果是直接影響到整個(gè)站的美觀程度以及整個(gè)站的質(zhì)量。我們都知道，在做Word文檔時(shí)候，都需要段落分明，描述清晰。那么我們在網(wǎng)站上發(fā)布的文章，也最好要段落分明得展現(xiàn)，比如最常見的首行縮進(jìn)。這時(shí)就離不開強(qiáng)大的 css樣式中text-indent屬性！

下面我們通過最簡單的例子來介紹css文本首行縮進(jìn)即text-indent屬性的使用方法及相關(guān)知識(shí)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css首行縮進(jìn)的代碼使用示例</title>
    <style>
        p {text-indent:36px;}
     </style>
</head>
<body>
<p>
    這里是關(guān)于css文本縮進(jìn)的一段文字。這里是關(guān)于css文字縮進(jìn)的一段文字。這里是關(guān)于css首行縮進(jìn)的一段文字。
    這里是關(guān)于css文本縮進(jìn)的一段文字。這里是關(guān)于css文字縮進(jìn)的一段文字。這里是關(guān)于css首行縮進(jìn)的一段文字。
    這里是關(guān)于css文本縮進(jìn)的一段文字。這里是關(guān)于css文字縮進(jìn)的一段文字。這里是關(guān)于css首行縮進(jìn)的一段文字。
</p>
</body>
</html>

上述代碼在瀏覽器訪問效果如下圖：

css text-indent屬性怎么實(shí)現(xiàn)首行縮進(jìn)

我們從圖中可以發(fā)現(xiàn)，這個(gè)html段落產(chǎn)生了首行縮進(jìn)的效果。這里大家顯然可以發(fā)現(xiàn)是css中哪個(gè)樣式屬性在起作用吧？就是text-indent樣式屬性了！那么text-indent是什么意思呢？其實(shí)顯而易見這個(gè)樣式屬性的作用就是能使文本進(jìn)行首行縮進(jìn)效果，比如使html首行縮進(jìn)2個(gè)字符、縮進(jìn)1字符等等需求，而且這里也提醒一下各位，text-indent樣式屬性是可以有負(fù)值的，負(fù)值的話文本段落首行就會(huì)縮進(jìn)到左邊了。一般情況不使用負(fù)值。

以上是css text-indent屬性怎么實(shí)現(xiàn)首行縮進(jìn)的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css text-indent屬性怎么實(shí)現(xiàn)首行縮進(jìn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽