整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天来说下HTML语言CSS样式字体的文本缩进 text-indent
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。来看下语法使用:
div {
text-indent:10px;
}
来看下使用效果,使用前:
每一行没有缩进
使用后:
每个段落的第一行都缩进了20px，具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式之文本缩进</title>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，
在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>
<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>
</body>
</html>
需要缩进的像素可以是任意值，除了正的px,还可以是负的值，可以看下效果:
这不是我的浏览器坏了，展示不了段落首部，是将px修改为-20px
具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式之文本缩进</title>
<style>
p {
text-indent: -20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，
在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>
<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>
</body>
</html>
根据大家写文章段落的习惯，一般都是缩进两个字，但是20px或者10px是不是2个字的长度呢，回答不是的。缩进字数长度有专门的单位: em
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
em是一个相对单位，就是当前元素 font-size 1个文字的大小，如果当前元素没有设置大小，则会按照1个父元素文字大小。
我们来看下效果:
确实是缩进了2个字的长度，看下对应代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式之文本缩进</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，
在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>
<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>
</body>
</html>
每个段落第一行如果想要三个字间距，就是3em
今天就先到这里，大家周末快乐~
于具有很多属性的标签，我希望在新行上分割每个属性，当按Enter键调用新行时，它应该只缩进一个标签。
以下示例输出我想如何缩进我的属性：
<svg width="300px" height="150px"> <ellipse class="fill-current" cx="150" cy="75" rx="100" ry="75" /> </svg>
但PHPStorm会自动尝试将我所有的行缩进到当前属性：
<svg width="300px" height="150px"> <ellipse class="fill-current" cx="150" cy="75" rx="100" ry="75" /> </svg>
我无法在设置（编辑器 - >代码样式 - > HTML）中找到任何选项来更改此行为。有谁知道这个问题的解决方案？
这背后的原因是因为我经常在我的HTML模板中使用自定义标签。有时候我自己的标签很长，并且是2个或（罕见的情况下）3个单词的组合，并且在新行上启动所有额外属性并且它不应该在标签的末尾对齐。自己缩进属性是很麻烦的。我想自动化它。
原图样式）
今天我们讲一下几个文本标签<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>
你学会了吗？有问题可以私聊我哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
