css文本样式总结
css文本样式总结
一、总结
一句话总结：
文本的这些样式中最常用的有 文本颜色、文本的水平对齐，文本修饰的删除线在电商网站用的多，优先掌握这些
1、设置文本颜色用什么属性？
color属性：例如 h1{color:#00ff00;}
2、设置文本方向用什么属性？
direction属性指定文本方向/书写方向，和 unicode-bidi 属性配合使用
3、设置文本的字符间距 用什么属性（这里是字符间距，不是单词之间的间距）？
letter-spacing 属性增加或减少字符间的空白（字符间距）：例如 h1 {letter-spacing:2px}
4、设置文本的单词之间的间距用什么属性？
word-spacing属性增加或减少字与字之间的空白：例如 p{word-spacing:30px;}
5、设置文本的行高用什么 属性？
line-height属性来设置行高：例如 p.small {line-height:70%;}
6、设置 文本的水平对齐方式用什么属性？
text-align属性指定元素文本的水平对齐方式：例如 h1 {text-align:center}
7、设置文本的 删除线、下划线、上划线这些用什么属性？
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等：h2 {text-decoration:line-through}
8、设置文本的首行缩进应该用什么属性？
text-indent 属性规定文本块中首行文本的缩进：例如 p{text-indent:50px;}
9、设置文本的大小写用什么属性？
text-transform 属性控制文本的大小写：例如 h1 {text-transform:uppercase;}
10、设置文本的空白处理（换行） 用什么属性？
white-space属性指定元素内的空白怎样处理：例如 p{white-space:nowrap;}
二、css文本效果
1、文本颜色
Color属性指定文本的颜色。
属性值
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。 |
| inherit | 规定应该从父元素继承颜色。 |
提示
请使用合理的背景颜色和文本颜色搭配，这样可以提高文本的可读性。
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
2、文本方向
direction属性指定文本方向/书写方向。
属性值
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本方向</title> 6 <style> 7 div.ex1 { 8 direction:rtl; 9 unicode-bidi: bidi-override; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div>一些文本。默认的书写方向。</div> 16 <div class="ex1">一些文本。 Right-to-left 方向。</div> 17 18 </body> 19 </html>
unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。
3、字符间距
letter-spacing 属性增加或减少字符间的空白（字符间距）
属性值
| 值 | 描述 |
|---|---|
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
4、文本字间距
word-spacing属性增加或减少字与字之间的空白。
注意： 负值是允许的。
属性值
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
p
{
word-spacing:30px;
}
5、行高
line-height属性来设置行高
属性值
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
p.small {line-height:70%;}
p.big {line-height:200%;}
6、 文本水平对齐
text-align属性指定元素文本的水平对齐方式。
属性值
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
注意：
text-align属性应该要设置在块级标签上面
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
7、文本修饰
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。
text-decoration 属性是以下三种属性的简写：
- text-decoration-line
- text-decoration-color
- text-decoration-style
语法
/*关键值*/
text-decoration: none; /*没有文本装饰*/
text-decoration: underline red; /*红色下划线*/
text-decoration: underline wavy red; /*红色波浪形下划线*/
/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
属性值
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
8、首行缩进
text-indent 属性规定文本块中首行文本的缩进。
注意： 负值是允许的。如果值是负数，将第一行左缩进。
属性值
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
p
{
text-indent:50px;
}
注意
如果是缩进2个字符的话，可以用em做单位
9、文本大小写
text-transform 属性控制文本的大小写。
属性值
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
参考：菜鸟学院css教程
https://www.runoob.com/css/css-text.html
