CSS 外观属性

`color` 文本颜色

color 用于定义文本颜色，其取值有如下三种类型：

预定义的颜色值，如 red 、blue 、green 等
十六进制颜色值（最常用的方式），如 #FF0000 等
RGB 代码，如红色可以表示为 rgb(255,0,0) 或 rgb(100%,0%,0%)

需要注意：使用 RGB 代码时，如果某项取值为 0 ，百分号 % 也不能省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V27-文本颜色</title>
    <style>
        .c-red {
            color: red;
        }

        .c-green {
            /*等价于：#00FF00 , 两两相同可以简写为 #0F0*/
            color: #0F0;
        }

        #c-blue {
            color: rgb(0%, 0%, 100%)
        }
    </style>
</head>
<body>

<p class="c-red"> 标题1的描述</p>
<p class="c-green"> 标题2的描述</p>
<p id="c-blue"> 标题3的描述</p>
</body>
</html>

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

显示效果如下：

`line-height` 行间距

line-height 用于设置行间距，即字符之间的垂直距离。通常称为行高。常用的属性值单位有三种：

像素值 px (最常用)
相对值 em
百分比 %

通常情况下，行距比字号大 7 或 8 个像素即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V27-文本颜色</title>
    <style>
        .c-red {
            color: red;
            font-size: 22px;
            line-height: 30px;
        }

        .c-green {
            /*等价于：#00FF00 , 两两相同可以简写为 #0F0*/
            color: #0F0;
            font-size: 13px;
            line-height: 20px;
        }

        #c-blue {
            color: rgb(0%, 0%, 100%)
        }

    </style>
</head>
<body>

<p class="c-red">
    标题1的描述标题1的描述标题1的描述标题1的描述标题1的描述</p>
<p class="c-green"> 标题2的描述标题2的描述标题2的描述标题2的描述标题2的描述标题2的描述标题2的描述</p>
<p id="c-blue"> 标题3的描述</p>
</body>
</html>

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

显示效果如下：

`text-align` 水平对齐方式

text-align 用于设置文本内容的水平对齐，相当于 HTML 中的 align 对齐。取值有：

left 左对齐（默认值）
right 右对齐
center 居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V27-文本颜色</title>
    <style>
        h4 {
            text-align: center;
        }

        #align-right {
            text-align: right;
        }

        .align-left {
            text-align: left;
        }
    </style>
</head>
<body>
<h4>这是标题1</h4>
<p class="align-left"> 标题1的描述</p>
<p id="align-right"> 标题1的描述</p>
</body>
</html>

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

显示效果：

`text-indent` 首行缩进

text-indent 用于设置文本的首行缩进，取值有：

可以是不同单位的数值
em 字符宽度的倍数
相对于浏览器窗口宽度的百分比（%）
允许使用负值
建议使用 em 作为设置单位。1em=1个汉字的宽度 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V28-首行缩进</title>
    <style>
        .align-left {
            text-align: left;
            text-indent: 2em;
        }
    </style>
</head>
<body>
<p>普通文本无缩进普通文本无缩进普通文本无缩进普通文本无缩进普通文本无缩进</p>
<p class="align-left"> 首行缩进两个字符首行缩进两个字符首行缩进两个字符首行缩进两个字符</p>
<p class="align-left">ON THE 24th of February, 1810, the look-out at Notre-Dame de la Garde signalled the three-master,
    the Pharaon from Smyrna, Trieste, and Naples.</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

`letter-spacing` 字间距

letter-spacing 用于定义字间距（中英文字符均可以），即字符与字符之间的空白。取值可以是不同单位的数值，允许使用负值，默认为 normal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V28-首行缩进</title>
    <style>
        .letter-spacing {
            letter-spacing: 8px;
        }
    </style>
</head>
<body bgcolor="#87ceeb">
<p>普通文本字间距</p>
<p class="letter-spacing">修改普通文本字间距</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示效果：

`word-spacing` 单词间距

word-spacing 用于定义英文单词之间的间距，对中文字符无效。 取值可以为不同单位的数值，允许使用负值，默认为 normal。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V28-首行缩进</title>
    <style>
        .word-spacing {
            word-spacing: 10px;
        }
    </style>
</head>
<body bgcolor="#87ceeb">
<p class="word-spacing">词间距对汉字无效</p>
<p>ON THE 24th of February, 1810, the look-out at Notre-Dame de la Garde signalled the
    three-master, the Pharaon from Smyrna, Trieste, and Naples.</p>
<p class="word-spacing">ON THE 24th of February, 1810, the look-out at Notre-Dame de la Garde signalled the
    three-master, the Pharaon from Smyrna, Trieste, and Naples.</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

显示效果：

`word-break` 自动换行

取值有：

normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V28-首行缩进</title>
    <style>
        .word-break-normal {
            word-break: normal;
        }

        .word-break-all {
            word-break: break-all;
        }

        .word-break-keep-all {
            word-break: keep-all;
        }

    </style>
</head>
<body bgcolor="#87ceeb">
<p class="word-break-normal">ON THE 24th of February, 1810, the look-out at Notre-Dame de la Garde signalled the
    three-master, the Pharaon from Smyrna, Trieste, and Naples.</p>
<p class="word-break-all">ON THE 24th of February, 1810, the look-out at Notre-Dame de la Garde signalled the
    three-master, the Pharaon from Smyrna, Trieste, and Naples.</p>
<p class="word-break-keep-all">ON THE 24th of February, 1810, the look-out at Notre-Dame de la Garde signalled the
    three-master, the Pharaon from Smyrna, Trieste, and Naples.</p>
</body>
</html>

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

显示效果：

颜色半透明

在 CSS3 中可以给文字设置半透明颜色，格式为：color : rgba (r,g,b,a) ，其中的 a 即 alpha 透明度。

r、g、b 的取值范围是 0~255，a 的取值范围是 0~1 之间的小数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V28-首行缩进</title>
    <style>
        .c-red {
            color: rgb(100%, 0%, 0%);
        }

        .c-red-alpha {
            color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body bgcolor="#87ceeb">
<p class="c-red">普通文本</p>
<p class="c-red-alpha">半透明文本</p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

文字阴影

text-shadow 表示文字阴影效果，是 CSS3 中增加的内容。语法格式为：text-shadow : 水平位置垂直位置模糊距离阴影颜色;

属性	描述
`h-shadow`	必需，水平阴影的位置，允许负值
`v-shadow`	必需，垂直阴影的位置，允许负值
`blur`	可选，模糊的距离
`color`	可选，阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V28-首行缩进</title>
    <style>
        #shadow1 {
            font-size: 20px;
            text-shadow: 4px 4px 4px rgba(255, 0, 0, 0.8);
        }

        #shadow2 {
            font-size: 20px;
            text-shadow: 1px 2px 3px rgba(255, 0, 0, 0.8);
        }

        #shadow3 {
            font-size: 20px;
            text-shadow: 1px 2px;
        }
    </style>
</head>
<body bgcolor="#87ceeb">
<p>普通文本</p>
<p id="shadow1">阴影文本1</p>
<p id="shadow2">阴影文本2</p>
<p id="shadow3">阴影文本3</p>

</body>
</html>

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

显示效果：

综合案例

在使用链接伪类标签时，可以使用 a:hover{ } , 但这样会对全部的 <a></a> 生效。
也可以使用 .链接类名:hover{ } , 这样只对对应类名的 <a></a> 生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V31-综合案例</title>
    <style>
        body {
            color: #3e3e3e;
        }

        h1 {
            font-size: 20px;
            font-weight: normal;
            text-align: center;
        }

        div {
            font-size: 12px;
            text-align: center;
        }

        .news-source {
            color: #ff620e;
        }

        #look-num {
            color: green;
        }

        .collect {
            color: yellow;
        }

        .collect:hover {
            /*在使用链接伪类标签时，可以使用 a:hover ,这样会对全部的 <a></a> 生效
            也可以使用 .链接类名:hover , 这样只对对应类名的 <a></a> 生效 */
            color: red;
            font-size: 15px;
        }

        p {
            font-size: 14px;
            text-indent: 2em;
            line-height: 22px;
        }

        em {
            /*让倾斜的内容正常显示*/
            color: #51b7eb;
            font-style: normal;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<h1>山东舰文创全球首发</h1>
<div>2020年1月08日 16:16 &nbsp;&nbsp;&nbsp;&nbsp; 来源:
    <span class="news-source"> 百度新闻</span>
    <a href="#" id="look-num">666人查看</a>
    <a href="#" class="collect">收藏本文</a>
</div>
<hr/>

<p>
    <em>[央视网消息]</em>：昨天（7日），中国首艘国产航空母舰山东舰舰徽舰标设计理念及相关文创产品全球首发仪式在军事博物馆举行，中国军事文创从这里迈开步伐。
</p>
</body>
</html>

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

显示效果:

#CSS

上次更新: 2025/02/26, 08:57:57

← 选择器引入 CSS 样式表→

CSS 外观属性