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 {color15b0:#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 | 设置字间距 |