今天來說下HTML語言CSS樣式字體的文本縮進(jìn) text-indent
text-indent屬性用來指定文本的第一行的縮進(jìn) ， 通常是將段落的首行縮進(jìn) 。來看下語法使用:
div {
text-indent:10px;
}
來看下使用效果,使用前:
文章插圖
每一行沒有縮進(jìn)
使用后:
文章插圖
每個(gè)段落的第一行都縮進(jìn)了20px，具體代碼如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS樣式之文本縮進(jìn)</title>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大學(xué)，來到了北京,冬天的雪就像冷冷的冰雨 ，
在臉上胡亂的拍.搖啊搖，搖啊?。?搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間 。
</p>
<p>一片冰心在玉壺 ， 我勸天公重抖擻，不拘一格降人才 。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才 。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5 。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
需要縮進(jìn)的像素可以是任意值 ， 除了正的px,還可以是負(fù)的值，可以看下效果:
文章插圖
這不是我的瀏覽器壞了，展示不了段落首部，是將px修改為-20px
具體代碼如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS樣式之文本縮進(jìn)</title>
<style>
p {
text-indent: -20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大學(xué)，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間 。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才 。一片冰心在玉壺，我勸天公重抖擻 ， 不拘一格降人才 。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5 。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
根據(jù)大家寫文章段落的習(xí)慣，一般都是縮進(jìn)兩個(gè)字 ， 但是20px或者10px是不是2個(gè)字的長度呢，回答不是的 。縮進(jìn)字?jǐn)?shù)長度有專門的單位: em
通過設(shè)置該屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長度，甚至該長度可以是負(fù)值 。
em是一個(gè)相對(duì)單位，就是當(dāng)前元素 font-size 1個(gè)文字的大小，如果當(dāng)前元素沒有設(shè)置大小，則會(huì)按照1個(gè)父元素文字大小 。
我們來看下效果:
文章插圖
確實(shí)是縮進(jìn)了2個(gè)字的長度，看下對(duì)應(yīng)代碼:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS樣式之文本縮進(jìn)</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>第一年，我考上了大學(xué)，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間 。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才 。一片冰心在玉壺，我勸天公重抖擻 ， 不拘一格降人才 。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5 。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
每個(gè)段落第一行如果想要三個(gè)字間距，就是3em
【關(guān)于css首行縮進(jìn)的屬性 css首行縮進(jìn)2字符代碼】今天就先到這里，大家周末快樂~
以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：- 關(guān)于離婚協(xié)議書怎么寫 離婚協(xié)議書怎么寫
- 如何在CSS3中使用樣式屬性控制label標(biāo)簽寬度
- 二十首關(guān)于冬至的詩詞 冬至的古詩
- 翡翠手鐲保養(yǎng)小知識(shí) 關(guān)于翡翠手鐲知識(shí)
- 關(guān)于勞動(dòng)節(jié)的由來 勞動(dòng)節(jié)的由來
- 關(guān)于ecco這個(gè)品牌你了解多少 ECCO什么牌子
- 關(guān)于助聽器價(jià)格的說明 一個(gè)助聽器大約要多少錢
- 元旦放假安排 元旦
- 8k紙尺寸是多少？ 8K的紙是多大的紙
- 優(yōu)化Word文檔排版，實(shí)現(xiàn)首行縮進(jìn)效果