范仁义css3课程---7、文本样式2
一、总结
一句话总结：
设置文本水平对齐方式用text-align属性，设置文本修饰用text-decoration 属性，设置文本的首行缩进用text-indent 属性，设置文本的大小写用text-transform 属性
1、设置 文本的水平对齐方式用什么属性？
text-align属性指定元素文本的水平对齐方式：例如 h1 {text-align:center}
2、设置文本的 删除线、下划线、上划线这些用什么属性？
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等：h2 {text-decoration:line-through}
3、设置文本的首行缩进应该用什么属性？
text-indent 属性规定文本块中首行文本的缩进：例如 p{text-indent:50px;}
4、设置文本的大小写用什么属性？
text-transform 属性控制文本的大小写：例如 h1 {text-transform:uppercase;}
二、文本样式2
博客对应课程的视频位置：7、文本样式2
https://fanrenyi.com/video/10/35
1、 文本水平对齐
text-align属性指定元素文本的水平对齐方式。
属性值
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
注意：
text-align属性应该要设置在块级标签上面
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
2、文本修饰
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 | 定义穿过文本下的一条线。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
3、首行缩进
text-indent 属性规定文本块中首行文本的缩进。
注意： 负值是允许的。如果值是负数，将第一行左缩进。
属性值
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
p
{
text-indent:50px;
}
注意
如果是缩进2个字符的话，可以用em做单位
4、文本大小写
text-transform 属性控制文本的大小写。
属性值
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本样式2小实例</title> 6 <style> 7 p{ 8 /*text-align: right;*/ 9 /*text-decoration: underline;*/ 10 /*text-decoration: underline blue;*/ 11 /*font-size: 40px;*/ 12 /*text-indent: 2em;*/ 13 text-transform: capitalize; 14 } 15 /*span{*/ 16 /* text-align: right;*/ 17 /*}*/ 18 </style> 19 </head> 20 <body> 21 <div> 22 <div> 23 <h1>《满江红·怒发冲冠》（宋·岳飞）</h1> 24 <p> 25 怒发（髪）冲冠，凭栏（阑)处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切！ 26 靖康耻，犹未雪。臣子恨，何时灭！驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。 27 </p> 28 <!-- <span><span style="text-decoration: line-through;color: red;">原价998：</span>现价98</span>--> 29 30 31 </div> 32 <p> 33 Hair on End 34 (Tune: “The River All Red”) 35 Yue Fei 36 37 Hair on end and shoving my hat, 38 In wrath I lean on th’ balustrade, 39 While th’ rain leaves off its pitter-pat. 40 Eyes fixed skyward, I sign long and loud. 41 A hero’s fury fills my breast. 42 At thirsty, nothing achieved, unknown, 43 —but these to me are light as dust— 44 I’ve fought through eight-thousand li 45 Holding the field, under cloud and moon. 46 What I do mind, is not to let 47 My young head turn white in vain, 48 And be gnawed by empty sorrow then. 49 50 With the Jingkang Humiliation yet 51 Unavenged, unredressed, 52 How can a subject’s grievance be 53 Ever effaced from memory? 54 I’ll send war-chariots rough-shod 55 Through the gorges of Mt. Helan; 56 To quench my thirst, I’d drink the blood 57 Of Huns, while laugh and chat I can; 58 Heroic minded, to satiate hunger, 59 I would make Tartars’ flesh my fare. 60 ’Til our lost land is all retrieved, 61 Then to the Imperial Palace, there 62 I’ll make obeisance, relieved! 63 </p> 64 </div> 65 </body> 66 </html>
参考：菜鸟学院css教程
https://www.runoob.com/css/css-text.html