css怎么设置字体间距(css文字行间距怎么设置)
(原图样式)
今天我们讲一下几个文本标签text-indent
,letter-spacing
和line-height
,并附加讲一下first-line
和first-letter
的使用方法。
先上源码:
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
}
今天我们来测试一下自己间距的设置方法,主要标签有text-indent
、letter-spacing
和line-height
,附加讲一下first-line
和first-letter
的样式。
第一个标签:text-indent(设置抬头距离css缩进)
css样式:
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
}
第二个标签:letter-spacing(设置字与字之间的间距)
css样式:
.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(设置行高,就是每一行的高度)
css样式:
.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;
}
第四个标签,其实叫做选择器: ::first-line(设置第一行的样式)
.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/*字体加粗*/;
}
第五个选择器: ::first-letter(设置第一行的第一个字的样式)
.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;
}
你学会了吗?有问题可以私聊我哦!