范仁义css3课程---6、文本样式1
一、总结
一句话总结：
设置文本颜色用color属性，设置字符间距是letter-spacing属性，设置单词间距用word-spacing属性，设置文本行高用line-height属性
1、设置文本颜色用什么属性？
color属性：例如 h1{color:#00ff00;}
2、设置文本的字符间距 用什么属性（这里是字符间距，不是单词之间的间距）？
letter-spacing 属性增加或减少字符间的空白（字符间距）：例如 h1 {letter-spacing:2px}
3、设置文本的单词之间的间距用什么属性？
word-spacing属性增加或减少字与字之间的空白：例如 p{word-spacing:30px;}
4、设置文本的行高用什么 属性？
line-height属性来设置行高：例如 p.small {line-height:70px;}
二、文本样式1
博客对应课程的视频位置：6、文本样式1
https://www.fanrenyi.com/video/10/33
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、字符间距
letter-spacing 属性增加或减少字符间的空白（字符间距）
属性值
| 值 | 描述 |
|---|---|
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
3、文本字间距
word-spacing属性增加或减少字与字之间的空白。
注意： 负值是允许的。
属性值
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
p
{
word-spacing:30px;
}
注意：
原理是使单词间的空格变大
4、行高
line-height属性来设置行高
.p2{
/*word-spacing: 20px;*/
line-height: 35px;
}
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本样式1</title> 6 <style> 7 p{ 8 /*color: red;*/ 9 /*color: #00ff00;*/ 10 /*color: rgb(0,0,255);*/ 11 /*color: inherit;*/ 12 /*letter-spacing: normal;*/ 13 /*word-spacing: normal;*/ 14 line-height: 30px; 15 } 16 .span1{ 17 color: rgb(234,123,43); 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 <div> 24 <h1>《满江红·怒发冲冠》（宋·岳飞）</h1> 25 <p> 26 <span class="span1">怒发（髪）冲冠</span>，凭栏（阑)处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切！ 27 靖康耻，犹未雪。臣子恨，何时灭！驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。 28 </p> 29 30 </div> 31 <p> 32 Hair on End 33 (Tune: “The River All Red”) 34 Yue Fei 35 36 Hair on end and shoving my hat, 37 In wrath I lean on th’ balustrade, 38 While th’ rain leaves off its pitter-pat. 39 Eyes fixed skyward, I sign long and loud. 40 A hero’s fury fills my breast. 41 At thirsty, nothing achieved, unknown, 42 —but these to me are light as dust— 43 I’ve fought through eight-thousand li 44 Holding the field, under cloud and moon. 45 What I do mind, is not to let 46 My young head turn white in vain, 47 And be gnawed by empty sorrow then. 48 49 With the Jingkang Humiliation yet 50 Unavenged, unredressed, 51 How can a subject’s grievance be 52 Ever effaced from memory? 53 I’ll send war-chariots rough-shod 54 Through the gorges of Mt. Helan; 55 To quench my thirst, I’d drink the blood 56 Of Huns, while laugh and chat I can; 57 Heroic minded, to satiate hunger, 58 I would make Tartars’ flesh my fare. 59 ’Til our lost land is all retrieved, 60 Then to the Imperial Palace, there 61 I’ll make obeisance, relieved! 62 </p> 63 </div> 64 </body> 65 </html>
参考：菜鸟学院css教程
https://www.runoob.com/css/css-text.html