css中字间距怎么弄(Css字体间距的设置方法)(1)

(原图样式)

今天我们讲一下几个文本标签<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>

css中字间距怎么弄(Css字体间距的设置方法)(2)

第二个标签: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>

css中字间距怎么弄(Css字体间距的设置方法)(3)

第三个标签: 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>

css中字间距怎么弄(Css字体间距的设置方法)(4)

第四个标签,其实叫做选择器: ::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>

css中字间距怎么弄(Css字体间距的设置方法)(5)

第五个选择器: ::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>

css中字间距怎么弄(Css字体间距的设置方法)(6)

你学会了吗?有问题可以私聊我哦!

,