写法
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
效果如下:
如上所示,想要获得几级标题的样式,只需要在前面添加几个#号就可以。需要注意的是,最后一个#和要显示的标题文字之间必须空开至少一个空格。
由于中文输入习惯,我们习惯在每个段落的开头缩进两个字符,这与我们的阅读习惯相符合。缩进两个字符其实就是使用空格键作为两个占位符,但是在markdown中的空格键会被累加消除(但是现在大部分网上的markdown编辑器或主流编辑器均有选项),因此我们需要使用HTML提供的空格实体实现段落的缩进。
全角空格(Em Space)它占据的宽度正好是1个中文字的宽度,并且可以累加,不会受到字体影响(其实有很多HTML的空格实体,看个人爱好而定)。因此,如果需要在每个段落开头实现缩进两个字符的效果,可以在段落文字前加上下面的代码:
段落的生成要和文字的换行进行区分,如果你在上个段落结束后,只按了一次Enter键,那么会得到如下效果:
所以一次Enter键只能得到换行的效果。如果你在上个段落结束后选择按下2次Enter键,那么就会得到如下效果:
分割线常用的符号有:减号-,星号*,下划线_
只要上面任意一种符号连续累加到三个或者三个以上就能形成分割线。效果如下:
对于标题,建议使用 # 号,几级标题就是几个 #;
对于段落,要按2次Enter区分,缩进用&emap;代表一个空格;
对于分割线,建议使用三个或以上的 * 号或者-号,以免与标题混淆。
原图样式)
今天我们讲一下几个文本标签<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小时内与您取得联系。