前言：

本文内容：CSS的作用及字体样式、文本样式

推荐免费CSS3基础讲解视频：【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

CSS的作用及字体样式

美化网页元素

  • 有效传递页面信息
  • 美化网页，来吸引用户
  • 凸显页面主题
  • 提高用户的体验

span标签：重点要突出的字，使用span嵌套。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title">Java</span>

</body>
</html>

字体样式

font-family 字体样式
font-size 字体大小
font-weight 字体粗细
color 字体颜色

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*字体样式
        font-family 字体样式
        font-size 字体大小
        font-weight 字体粗细
        color 字体颜色

        */
        body{
            font-family: "Times New Roman",宋体;
            color: cadetblue;
        }
        #title{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
欢迎学习<span id="title">Java</span>
<h1>钓竿</h1>
<p class="p1">a有个老人在河边钓鱼，一个小孩走过去看他钓鱼。老人技巧纯熟，所以没多久就钓上了满篓的鱼，老人见小孩很可爱，要把整篓的鱼送给他，小孩摇摇头，老人惊异的问道：“你为何不要？”</p>
<p>小孩回答：“我想要你手中的钓竿。”老人问：“你要钓竿做什么？”小孩说：“这篓鱼没多久就吃完了，要是我有钓竿，我就可以自己钓，一辈子也吃不完。”</p>
<p>我想你一定会说：好聪明的小孩。错了，他如果只要钓竿，那他一条鱼也吃不到。因为，他不懂钓鱼的技巧，光有鱼竿是没用的，因为钓鱼重要的不在钓竿，而在钓技。</p>
<p>I have searched a thousand years,And I have cried a thousand tears. I found everything I need, You are everything to me.</p>
</body>
</html>

文本样式

  1. 颜色

    颜色：
    RGB 0~F
    RGBA A的值：0~1

  2. 文本对齐方式

    text-align 排版
    vertical-align 水平对齐方式：需要参照物 a b

  3. 首行缩进

    text-indent: 2em 段落首行缩进 1em表示缩进一个字

  4. 行高

    height: 高度
    line-height: 行高
    行高与高度一致可让文本垂直居中

  5. 装饰

    上划线：text-decoration: overline;
    下划线：text-decoration: underline;

    中划线：text-decoration: line-through;

    去下划线：text-decoration: none;

  6. 文本图片水平对齐

    img,span{

    ​ vertical-align:middle;

    }

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*文本样式
        颜色：
            RGB 0~F
            RGBA A的值：0~1
        text-align 排版
        text-indent: 2em  段落首行缩进 1em表示缩进一个字
        height:  高度
        line-height:  行高
        行高与高度一致可让文本垂直居中
        vertical-align 水平对齐方式：需要参照物 a b
        上划线：text-decoration: overline;
        下划线：text-decoration: underline;
        中划线：text-decoration: line-through;
        去下划线：text-decoration: none;
        */
        h1{
            color: #2fc9d0;
            text-align: center;
        }
        .p1{
            /*上划线*/
            text-indent: 2em;
            text-decoration: overline;
        }
        .p4{
            text-indent: 2em;
            background: #c787af;
            height: 30px;
            line-height: 30px;
        }
        .p2{
            /*下划线*/
            text-decoration: underline;
        }
        .p3{
        /*中划线*/
        text-decoration: line-through;
    }
</style>
</head>
<body>
<h1>钓竿</h1>
<p class="p1">有个老人在河边钓鱼，一个小孩走过去看他钓鱼。老人技巧纯熟，所以没多久就钓上了满篓的鱼，老人见小孩很可爱，要把整篓的鱼送给他，小孩摇摇头，老人惊异的问道：“你为何不要？”</p>
<p class="p2">小孩回答：“我想要你手中的钓竿。”老人问：“你要钓竿做什么？”小孩说：“这篓鱼没多久就吃完了，要是我有钓竿，我就可以自己钓，一辈子也吃不完。”</p>
<p class="p3">我想你一定会说：好聪明的小孩。错了，他如果只要钓竿，那他一条鱼也吃不到。因为，他不懂钓鱼的技巧，光有鱼竿是没用的，因为钓鱼重要的不在钓竿，而在钓技。</p>
<p class="p4">I have searched a thousand years,And I have cried a thousand tears. I found everything I need, You are everything to me.</p>
</body>
</html>