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.文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
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 |
设置字间距 |