整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天來說下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
今天就先到這里，大家周末快樂~
于具有很多屬性的標(biāo)簽，我希望在新行上分割每個(gè)屬性，當(dāng)按Enter鍵調(diào)用新行時(shí)，它應(yīng)該只縮進(jìn)一個(gè)標(biāo)簽。
以下示例輸出我想如何縮進(jìn)我的屬性：
<svg width="300px" height="150px"> <ellipse class="fill-current" cx="150" cy="75" rx="100" ry="75" /> </svg>
但PHPStorm會(huì)自動(dòng)嘗試將我所有的行縮進(jìn)到當(dāng)前屬性：
<svg width="300px" height="150px"> <ellipse class="fill-current" cx="150" cy="75" rx="100" ry="75" /> </svg>
我無法在設(shè)置（編輯器 - >代碼樣式 - > HTML）中找到任何選項(xiàng)來更改此行為。有誰知道這個(gè)問題的解決方案？
這背后的原因是因?yàn)槲医?jīng)常在我的HTML模板中使用自定義標(biāo)簽。有時(shí)候我自己的標(biāo)簽很長，并且是2個(gè)或（罕見的情況下）3個(gè)單詞的組合，并且在新行上啟動(dòng)所有額外屬性并且它不應(yīng)該在標(biāo)簽的末尾對(duì)齊。自己縮進(jìn)屬性是很麻煩的。我想自動(dòng)化它。
原圖樣式）
今天我們講一下幾個(gè)文本標(biāo)簽<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加講一下<code>first-line</code>和<code>first-letter</code>的使用方法。
先上源碼：
<!DOCTYPE html>
<html>
<head>
<title>css文本標(biāo)簽介紹</title>
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
}
</style>
</head>
<body>
<div class="wenben">
今天我們來測(cè)試一下自己間距的設(shè)置方法，主要標(biāo)簽有<code>text-indent</code>、<code>letter-spacing</code>和<code>line-height</code>,附加講一下<code>first-line</code>和<code>first-letter</code>的樣式。
</div>
</body>
</html>
第一個(gè)標(biāo)簽：text-indent（設(shè)置抬頭距離css縮進(jìn)）
css樣式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
}
</style>
第二個(gè)標(biāo)簽：letter-spacing(設(shè)置字與字之間的間距)
css樣式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
}
</style>
第三個(gè)標(biāo)簽： line-height(設(shè)置行高，就是每一行的高度)
css樣式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
</style>
第四個(gè)標(biāo)簽，其實(shí)叫做選擇器: ::first-line(設(shè)置第一行的樣式)
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
.wenben::first-line{
color:blue;
font-weight: bold/*字體加粗*/;
}
</style>
第五個(gè)選擇器: ::first-letter(設(shè)置第一行的第一個(gè)字的樣式)
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
.wenben::first-line{
color:blue;
font-weight: bold/*字體加粗*/;
}
.wenben::first-letter{
font-size: 24px;
color: white;
font-weight: normal;
border: 1px solid red/*設(shè)置文字邊框*/;
background-color:blue/*設(shè)置文字背景*/;
padding: 2px;
}
</style>
你學(xué)會(huì)了嗎？有問題可以私聊我哦！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
