[Web 前端] 009 css 常用的文本樣式設置
阿新 • • 發佈：2019-05-01
常用 def oct table ora pre normal text -i
常用的文本 css 樣式
- 概覽
| 參數 | 釋義 | 舉例 |
|---|---|---|
| color | 設置文字的顏色 | color:red; |
| font-size | 設置文字的大小 | font-size:12px; |
| font-family | 設置文字的字體 | font-family:‘微軟雅黑‘; |
| font-style | 設置字體是否傾斜 | font-style:‘normal‘; 設置不傾斜 font-style:‘italic‘; 設置傾斜 |
| font-weight | 設置文字是否加粗 | font-weight:bold; 設置加粗 font-weight:normal; 設置不加粗 |
| line-height | 設置文字的行高 | line-height:24px; |
| text-decoration | 設置文字的下劃線 | text-decoration:none; 將文字下劃線去掉 |
| text-indent | 設置文字首行縮進 | text-indent:24px; 設置文字首行縮進24px |
| text-align | 設置文字水平對齊方式 | text-align:center; 設置文字水平居中 |
- 舉例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title>> <style type="text/css"> .box{ color: red; /* 設置字體為紅色 */ font-size: 20px; /* 設置字體大小為 20px */ font-family: consolas; /* 設置字體為 consolas */ font-style: normal; /* 設置字體不傾斜 */ font-weight: bold; /* 字體加粗 */ line-height: 20px; /* 設置文字行高 */ text-decoration: none; /* 不設下劃線 */ text-indent: 30px; /* 首行縮進 30px */ text-align: center; /* 設置文字水平居中 */ } </style> </head> <body> <div class="box"> 1234567890 <br> abcdefghijklmnopqrstuvwxyz <br> 一二三四五六七八九十 <br> </div> </body> </html>
- 效果截圖
- 補充：為了便於觀察，上圖的藍色邊框是截圖後加的
[Web 前端] 009 css 常用的文本樣式設置