（原图样式）
今天我们讲一下几个文本标签<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>
你学会了吗？有问题可以私聊我哦！