CSS 文本格式
代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水香木鱼的博客</title> <style> .demo-wrap { width: 96.5%; border: 1px solid gray; padding: 8px; --darkreader-inline-border-top: #4c4c4c; --darkreader-inline-border-right: #4c4c4c; --darkreader-inline-border-bottom: #4c4c4c; --darkreader-inline-border-left: #4c4c4c; } .demo-h1 { text-align: center; color: rgb(167, 201, 66); --darkreader-inline-color: #bdd772; } .demo-p { text-indent: 50px; text-align: justify; letter-spacing: 3px } </style> </head> <body> <div class="demo-wrap"> <h1 class="demo-h1">水香木鱼的博客</h1> <p class="demo-p"> 这是一个专注大前端领域技术探索的博客， 里面包括HTML/CSS—Nodejs等所有前端方面的技术整理。 </p> </div> </body> </html>
效果演示：
1.文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
一个网页的背景颜色是指在主体内的选择：
body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
2.文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
3.文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
a {text-decoration:none;}
也可以这样装饰文字：
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
4.文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
5.文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
CSS文本属性
| 属性 | 描述 |
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中的空白处理方式 |
| word-spacing | 设置字间距 |