CSS的文本樣式
- 文本樣式
- 設定文本顏色
- 設定元素水平對齊方式
- 設定首行文本的縮進
- 設定文本的行高
- 設定文本的裝飾
文本樣式
| 屬性名 | 含義 | 舉例 |
|---|---|---|
| color | 設定文本顏色 | color:#00C |
| text-align | 設定元素水平對齊方式 | text-align:right |
| text-indent | 設定首行文本的縮進 | text-indent:20px |
| line-height | 設定文本的行高 | line-height:25px |
| text-decoration | 設定文本的裝飾 | text-decoration:underline |
設定文本顏色
?取值方法：
1.顏色名字
2.十六進制記法
3.R G B 三原色
4.RGBA 三原色，A是控制透明度 Alpha 0 -1 , 1完全不透明，0 完全透明
<p style="color: red;">使用顏色名稱</p>
<p style="color: #006699;">使用十六進制</p>
<p style="color: rgb(0,0,0);">使用十六進制</p>
<p style="color: rgba(0,0,0,1);">rgba透明度為1</p>
<p style="color: rgba(0,0,0,0);">rgba透明度為0</p>
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color: red;">使用顏色名稱</p>
<p style="color: #006699;">使用十六進制</p>
<p style="color: rgb(0,0,0);">使用十六進制</p>
<p style="color: rgba(0,0,0,1);">rgba透明度為1</p>
<p style="color: rgba(0,0,0,0);">rgba透明度為0</p>
</body>
</html>
效果截圖：
最后一行是完全透明看不到↓
這樣就可以看到了↓
設定元素水平對齊方式
文本的對齊方式 left right center
<p style="text-align: left;">文字對齊方向 left</p>
<p style="text-align: right;">文字對齊方向 right</p>
<p style="text-align: center;">文字對齊方向 center</p>
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="text-align: left;">文字對齊方向 left</p>
<p style="text-align: right;">文字對齊方向 right</p>
<p style="text-align: center;">文字對齊方向 center</p>
</body>
</html>
效果截圖：
設定首行文本的縮進
<p style="text-indent: 50px;">這里寫一段話</p>
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p >中國專業IT社區CSDN (Chinese Software Developer Network) 創立于1999年，致力于為中國軟體開發者提供知識傳播、在線學習、職業發展等全生命周期服務，
旗下擁有：專業的中文IT技術社區： CSDN.NET；移動端開發者專屬APP： CSDN APP、CSDN學院APP；
新媒體矩陣微信公眾號：CSDN資訊、程式人生、GitChat、CSDN學院、AI科技大本營、區塊鏈大本營、CSDN云計算、GitChat精品課、人工智能頭條、CSDN企業招聘；
IT技術培訓學習平臺： CSDN學院；技術知識移動社區： GitChat；IT人力資源服務：科銳福克斯；
高校IT技術學習成長平臺：高校俱樂部，</p>
<p style="text-indent: 50px;">中國專業IT社區CSDN (Chinese Software Developer Network) 創立于1999年，致力于為中國軟體開發者提供知識傳播、在線學習、職業發展等全生命周期服務，
旗下擁有：專業的中文IT技術社區： CSDN.NET；移動端開發者專屬APP： CSDN APP、CSDN學院APP；
新媒體矩陣微信公眾號：CSDN資訊、程式人生、GitChat、CSDN學院、AI科技大本營、區塊鏈大本營、CSDN云計算、GitChat精品課、人工智能頭條、CSDN企業招聘；
IT技術培訓學習平臺： CSDN學院；技術知識移動社區： GitChat；IT人力資源服務：科銳福克斯；
高校IT技術學習成長平臺：高校俱樂部，</p>
</body>
</html>
效果截圖：
效果很明顯吧，第一段話沒有加縮進，第二段話加了縮進
設定文本的行高
行高,一般用于配合著垂直居中使用, 將文本的 line-height 和容器的高度一致
<div style="border: solid 1px red;height: 100px;line-height: 100px;">
CSDN
</div>
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="border: solid 1px red;height: 100px;line-height: 100px;">
CSDN
</div>
</body>
</html>
效果截圖：
設定文本的裝飾
| text-decoration-line屬性值 | 說明 |
|---|---|
| none | 默認值定義的標準文本 |
| underline | 設定文本的下劃線 |
| overline | 設定文本的上劃線 |
| line-through | 設定文本的洗掉線 |
| text-decoration-style屬性值 | 說明 |
|---|---|
| solid | 默認值線條將顯示為單線 |
| double | 線條將顯示為雙線 |
| dotted | 線條將顯示為點狀線 |
| dashed | 線條將顯示為虛線 |
| wavy | 線條將顯示為波浪線 |
| text-decoration-color屬性值 | 說明 |
|---|---|
| 選擇顏色 | 線條顯示相應的顏色 |
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="text-decoration-line: none;">CSDN</div><br/>
<div style="text-decoration-line: line-through;">CSDN</div><br/>
<div style="text-decoration-line: underline;">CSDN</div><br/>
<div style="text-decoration-line: overline;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: solid;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: dashed;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: dotted;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: wavy;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: unset;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: double;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: none;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: solid;text-decoration-color: red;">CSDN</div><br/>
</body>
</html>
效果截圖：
效果可以疊加使用，如上↑
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/200759.html
標籤：其他