(原圖樣式)
今天我們講一下幾個文本标簽<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文本标簽介紹</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">
今天我們來測試一下自己間距的設置方法,主要标簽有<code>text-indent</code>、<code>letter-spacing</code>和<code>line-height</code>,附加講一下<code>first-line</code>和<code>first-letter</code>的樣式。
</div>
</body>
</html>
第一個标簽:text-indent(設置擡頭距離css縮進)
css樣式:
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
}
</style>
第二個标簽:letter-spacing(設置字與字之間的間距)
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>
第三個标簽: line-height(設置行高,就是每一行的高度)
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>
第四個标簽,其實叫做選擇器: ::first-line(設置第一行的樣式)
<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>
第五個選擇器: ::first-letter(設置第一行的第一個字的樣式)
<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/*設置文字邊框*/;
background-color:blue/*設置文字背景*/;
padding: 2px;
}
</style>
你學會了嗎?有問題可以私聊我哦!
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!