寫法
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題
效果如下:
如上所示,想要獲得幾級標題的樣式,只需要在前面添加幾個#號就可以。需要注意的是,最后一個#和要顯示的標題文字之間必須空開至少一個空格。
由于中文輸入習慣,我們習慣在每個段落的開頭縮進兩個字符,這與我們的閱讀習慣相符合。縮進兩個字符其實就是使用空格鍵作為兩個占位符,但是在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小時內與您取得聯系。