CSStext（文本）屬性可定義文本外觀，比如文本顏色，對齊文本，裝飾文本，文本縮進，行間距等
4.1文本顏色
color屬性用于定義文本顏色，
div {
color: red;
}
顏色表示方法：
| 表示 | 屬性值 |
| 預定義顏色值 | red，green，blue，pink |
| 十六進制 | #FF0000,#FF6600,#29D794 |
| RGB代碼 | rgb(255,0,0)或rgb（100%，0%，0%） |
開發中最常用的是16進制
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS文本外觀屬性之顏色</title> <style> div { /* color: pink; */ /* color: #ff0000; */ color: rgb(200,0,0); } </style> </head> <body> <div>聽說喜歡pink色的男生，都喜歡男人</div> </body> </html>
4.2 對齊文本
text-align 屬性用于設定元素內文本內容的水平對齊方式，
div {
text-align: center;
}
| 屬性值 | 解釋 |
| left | 左對齊（默認值） |
|
right |
右對齊 |
| center | 居中對齊 |
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字對齊</title> <style> h1 { /* 本質是讓h1盒子里面的文字水平居中對齊 */ text-align: center; } </style> </head> <body> <h1>文本對齊</h1> </body> </html>
4.3裝飾文本
text-decoration 屬性規定添加到文本的修飾，可以給文本添加下劃線，洗掉線，上劃線等
| 屬性值 | 描述 |
| none | 默認，沒有裝飾線（最常用） |
| underline | 下劃線，鏈接a自帶下劃線（常用） |
| overline | 上劃線（幾乎不用） |
| line-through | 洗掉線（不常用） |
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS文本裝飾之裝飾文本</title> <style> div { /* 下劃線 */ /* text-decoration: underline; */ /* 洗掉線 */ text-decoration: line-through; /* 上劃線 */ /* text-decoration: overline; */ } a { /* 取消a默認的下劃線 */ text-decoration: none; } </style> </head> <body> <div> 粉紅色的回憶 </div> <a href="#">粉紅色的回憶</a> </body> </html>
4.4文本縮進
text-indent屬性用來指定文本的第一行縮進，通常將段落的首行縮進
div {
text-indent： 10px;
}
通過設定該屬性，所有元素的第一行都可以所及一個給定的長度，甚至該長度可以是負值
p{
text-indent: 2em;
}
em 是一個相對單位，就是當前元素（front-size）1個文字的大小，如果當前元素沒有設定大小，則會按照父元素的1個文字大小
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本縮進</title> <style> p { /* 文本的第一行縮進多少距離 */ text-indent: 20px; } h4 { /* 如果此時寫了2em 則是當前元素 2個文字大小的距離 */ text-indent: 2em; } </style> </head> <body> <p>生活不易，但是千萬不能放棄</p> <p>一定不能頹廢，要努力</p> <p>還要自信</p> <h4>just learn---------------------------------------------------------------------------------------------------</h4> </body> </html>
4.5行間距
line-height屬性用于設定行間距里（行高），可以控制文字行與行之間的距離
p{
line-height: 26px;
}
上間距下間距共同構成line-height（行高）
代碼示范
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行間距</title> <style> div { line-height: 26px; } </style> </head> <body> <div>中國人</div> </body> </html>
4.6文本屬性總結
| 屬性 | 表示 | 注意點 |
|
color |
文本顏色 | 我們通常用16進制比如 而且是簡寫模式 #ff |
| text-align | 文本對齊 | 可以設定文字水平的對齊方式 |
| text-indent | 文本縮進 | 通常我們用于段落首行縮進2個字的距離 text-indent：2em; |
|
text-decoration |
文本修飾 | 記住添加下劃線 underline 取消下劃線none |
| line-height | 行高 | 控制行與行之間的距離 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34085.html
標籤：Html/Css
上一篇：3.CSS字體屬性
下一篇：5.CSS的引入方式