整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
tml字間距怎么設(shè)置？
大家好，這節(jié)課主要來(lái)講解一下在html中如何設(shè)置字間距。通常使用CSS的letter-spacing屬性，這個(gè)屬性可以直接在html元素的style屬性中設(shè)置，或者在一個(gè)獨(dú)立的CSS文件中。下面是兩種常見的設(shè)置方法。
·首先來(lái)看第一種方法：內(nèi)欄樣式。在p標(biāo)簽的后面加上style，等于下入設(shè)置為5個(gè)PX，保存運(yùn)行?？梢钥吹竭@里設(shè)置成了字間距為5個(gè)PX。
·當(dāng)然還可以通過層疊樣式表，也就是CSS樣式表來(lái)實(shí)現(xiàn)在一個(gè)獨(dú)立的CSS文件或html文檔的head部分的style標(biāo)簽中設(shè)置字間距。例如現(xiàn)在新建了一個(gè)style點(diǎn)CSS這樣的文件，可以設(shè)置它的letter-spacing，點(diǎn)10個(gè)PX，然后保存。
·并且在html文件中引入CSS樣式表，保存運(yùn)行。稍等一下，要把引號(hào)去掉運(yùn)行?？梢钥吹剿?0個(gè)PX像素，在letter-spacing屬性接受不同的單位，例如像素PX點(diǎn)PT EM等單位，可以根據(jù)需要選擇合適的單位來(lái)設(shè)置字間距。
以上就是html如何設(shè)置字間距的方式和方法。
原圖樣式）
今天我們講一下幾個(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">
今天我們來(lái)測(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ì)了嗎？有問題可以私聊我哦！
說(shuō)完HTML語(yǔ)言CSS字體的縮進(jìn)text-indent,接下來(lái)我們講下字體的行間距屬性 line-height. 該屬性用來(lái)設(shè)置行間的距離，也就是我們經(jīng)常說(shuō)的行高?？梢钥刂莆淖中信c行之間的距離。
來(lái)一起看下line-height的語(yǔ)法:
p {
line-height:20px;
}
怎么理解行間距呢？看下面這個(gè)圖就可以理解了
對(duì)于一行文字來(lái)說(shuō)，文字上面和上一行文字的下面，文本高度，文字的下面和下一行文字的上面，三者加起來(lái)就是整個(gè)行間距。
來(lái)看下具體的效果:
可以看出，段落間的行間距是16px,如果是一行文字的話，可以看的更清楚
<!DOCTYPE html>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
