粗体
font-weight 属性可以设置文本的粗细。
它有两个属性:
- normal 普通粗细
- bold 粗文本
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>font-weight</title> <style> .a{ font-weight:nomal; } .b{ font-weight:bold; } </style></head><body><h1>利永贞网</h1><p class="a">学编程，上利永贞网</p><p class="b">study hard, improve every day</p></body></html> |
斜体
font-style 属性可以设置文本倾斜。
它有3个属性:
- normal 正常显示
- italic 手写风格斜体
- oblique 斜体
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>font-style</title> <style> .a{ font-style:nomal; } .b{ font-style:italic; } .c{ font-style:oblique; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p><p class="c">study hard, improve every day</p></body></html> |
大写和小写
text-transform 属性可以设置文本的大写或小写。
它有3个属性:
- upercase 使文本大写显示
- lowercase 使文本小写显示
- captialize 使每个单词的首字母大写
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-transform</title> <style> .a{ text-transform:uppercase; } .b{ text-transform:lowercase; } .c{ text-transform:capitalize; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p><p class="c">study hard, improve every day</p></body></html> |
下划线和删除线
text-decoration 属性可以给文本设置线条。
它有5个属性:
- none 删除文本的装饰线
- underline 在文本底部增加一条实线
- overline 在文本顶部增加一条实线
- line-through 在文本中间穿一条线
- blink 文本动态闪烁
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-decoration</title> <style> .a{ text-decoration:none; } .b{ text-decoration:underline; } .c{ text-decoration:overline; } .d{ text-decoration:line-through; } .e{ text-decoration:blink; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p><p class="c">study hard, improve every day</p><p class="d">study hard, improve every day</p><p class="e">study hard, improve every day</p></body></html> |
行间距
line-height 属性可以设置行间距。
行间距会使文本垂直方向的空隙增大。
设置行间距单位使用em，不要使用px，这样的好处是可以根据用户选择的文本大小来设定。
行间距的初始值最好设定在1.4em~1.5em之间。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>line-height</title> <style> .a{ line-height:1.4em; } .b{ line-height:2.4em; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p></body></html> |
字母间距
letter-spacing 属性可以设置字母间距。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>letter-spacing</title> <style> .a{ letter-spacing:2em; } .b{ letter-spacing:1em; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p></body></html> |
单词间距
word-spacing 属性可以设置单词之间距离。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>word-spacing</title> <style> .a{ word-spacing:2em; } .b{ word-spacing:1em; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p></body></html> |
对齐方式
text-align属性可以设置文本的对齐方式。
它有4个属性:
- left 设置文本左对齐
- right 设置文件右对齐
- center 设置文本居中显示
- justify 设置文本两端对齐
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align</title> <style> .a{ text-align:left; } .b{ text-align:right; } .c{ text-align:center; } .d{ text-align:justify; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p><p class="c">study hard, improve every day</p><p class="d">study hard, improve every day</p></body></html> |
垂直对齐
vertical-align 垂直对齐通常在文本做为内联元素时使用。
它的属性有：
- baseline 使元素的基线与父元素的基线对齐
- sub 使元素的基线与父元素的下标基线对齐
- super 使元素的基线与父元素的上标基线对齐
- text-top 使元素的顶部与父元素的字体顶部对齐
- text-bottom 使元素的底部与父元素的字体底部对齐
- middle 使元素的中部与父元素的基线加上父元素x-height的一半对齐
- top 使元素及其后代元素的顶部与整行的顶部对齐
- bottom 使元素及其后代元素的底部与整行的底部对齐
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align</title> <style> .a{ vertical-align:text-top; } .b{ vertical-align:middle; } .c{ vertical-align:text-bottom; } </style></head><body><h1>利永贞网</h1><p>study hard, improve every day</p><p>study hard, improve every day</p><p>study hard, improve every day</p></body></html> |
文本缩进
text-indent 属性可以设置首行文本缩进。
中文的首行缩进两个字可以设置为2em。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-indent</title> <style> .a{ text-indent:2em; } </style></head><body><h1>利永贞网</h1><p class="a">一日，许褚走马入东门，正迎许攸，攸唤褚曰：“汝等无我，安能出入此门乎？”褚怒曰：“吾等千生万死，身冒血战，夺得城池，汝安敢夸口！”攸骂曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔剑杀攸，提头来见曹操，说“许攸如此无礼，某杀之矣。”操曰：“子远与吾旧交，故相戏耳，何故杀之！”深责许褚，令厚葬许攸。乃令人遍访冀州贤士。冀民曰：“骑都尉崔琰，字季珪，清河东武城人也。数曾献计于袁绍，绍不从，因此托疾在家。”操即召琰为本州别驾从事，而谓曰：“昨按本州户籍，共计三十万众，可谓大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相争，冀民暴骨原野，丞相不急存问风俗，救其涂炭，而先计校户籍，岂本州士女所望于明公哉？”操闻言，改容谢之，待为上宾。</p><p>study hard, improve every day</p></body></html> |
投影
text-shadow 属性可以设置文本的投影效果。
它有4个值，同时使用，也可以有选择地使用：
- 第一个值 设置阴影左右延伸长度，负值向左，正值向右
- 第二个值 设置阴影上下延伸长度，负值向上，正值向下
- 第三个值 设置阴影的模糊程度
- 第四个值 设置阴影的颜色
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>text-align</title> <style> .a{ text-shadow:1px 1px 0px #df3232; } .b{ text-shadow:1px 1px 5px #df3232; } .c{ text-shadow:2px 2px 9px #red; } .d{ text-shadow:1px 1px 10px blue; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p class="b">study hard, improve every day</p><p class="c">study hard, improve every day</p><p class="d">study hard, improve every day</p></body></html> |
首字母
:first-letter 属性可以设置首字母
它是一个伪选择器。
示例:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>:first-letter</title> <style> .b:first-letter{ font-size:2em; font-weight:bold; } </style></head><body><h1>利永贞网</h1><p class="a">学编程，上利永贞网</p><p class="b">study hard, improve every day</p></body></html> |
首行文本
:first-line属性可以设置首字母
它是也一个伪选择器。
示例:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>:first-line</title> <style type="text/css"> p.a:first-line { font-weight: bold; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p>学编程，上利永贞网</p><p>study hard, improve every day</p> </body></html> |
链接样式
链接样式也是伪选择器，有两个：
:link 未访问过的链接样式
:visited 已经单击过的样式
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>链接样式</title> <style type="text/css"> a:link{ color:#000; } a:visited{ color:#982312; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p>study hard, improve every day</p> </body></html> |
响应用户
响应用户有3个伪选择器：
:hover 鼠标悬停时的样式
:active 用户在元素上操作时生效
:focus 元素拥有焦点时生效
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>链接样式</title> <style type="text/css"> a:link{ color:#000; } a:visited{ color:#982312; } a:hover{ color:yellow; } a:active{ color:red; } a:focus{ color:blue; } </style></head><body><h1>利永贞网</h1><p class="a">study hard, improve every day</p><p>study hard, improve every day</p> </body></html> |