资源

HTML & CSS Full Course - Beginner to Pro (2022) - YouTube

课程

Intro

​ In this full course, we learn how to build websites with HTML and CSS, and get started as a software engineer.

​ Additional Information: This HTML CSS full course is a series of HTML CSS tutorials, teaching the major skills that we need to create complex websites. Each HTML CSS tutorial builds on a project and provides some HTML CSS exercises to practice what we learned. By the end, we’ll learn the basics of web development and we’ll be on our way to becoming a web developer and software engineer.

​ 其他信息：这个 HTML CSS 完整课程是一系列的 HTML CSS 教程，教授我们创建复杂网站所需的主要技能。每个 HTML CSS 教程都建立在一个项目的基础上，并提供一些 HTML CSS 练习来练习我们所学的知识。到最后，我们将学会网站开发的基础知识，我们将在成为一名网站开发人员和软件工程师的路上。

1. HTML Basics

HTML: HyperText Markup Language (tool we use to create websites)

png

  • 1a. Create a button with the text “Click” inside
1
<button>Click</button>

  • 1b. Create 2 buttons. 1 with your name and 1 with your favorite food
1
2
<button>GZ</button>
<button>dumplings</button>

  • 1c. Create a paragraph with the text “Hello, World!” inside
1
<p>Hello, world!</p>

Hello, world!

  • 1d. Create a paragraph below the previous paragraph and write something you did today
1
2
<p>Hello, world!</p>
<p>Today I got up early.</p>

Hello, world!

Today I got up early.

png

  • 1e. Create a link to google.com (or a similar website for your country)
1
<a href="https://www.bilibili.com/">Open bilibili</a>

Open bilibili

  • 1f. Make the link from the previous exercise (1e.) open in a new tab
1
<a href="https://www.bilibili.com/" target="_">Open bilibili</a>

Open bilibili

**Challenge Exercise **

  • 1g. Try to copy this design using HTML (the link goes to amazon.com)
1
2
3
4
5
6
<a href="https://www.taobao.com/">Back to TaoBao</a>
<p>Nike Black Running Shoes</p>
<p>$39 - in stock.</p>
<p>Free delivery tomorrow.</p>
<button>Add to Cart</button>
<button>Buy now</button>

Back to TaoBao

Nike Black Running Shoes

$39 - in stock.

Free delivery tomorrow.

2. CSS Basics

CSS: Cascading Style Sheets (change the appearance of HTML elements)

Youtube & Tweet

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
<style>
    .subscribe-button {
        background-color: rgb(200, 0, 0);
        color: white;
        border: none;
        height: 36px;
        width: 105px;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 8px;
    }

    .join-button {
        background-color: white;
        border-color: rgb(41, 118, 211);
        border-style: solid;
        border-width: 1px;
        color: rgb(41, 118, 211);
        height: 36px;
        width: 62px;
        border-radius: 2px;
        cursor: pointer;
    }

    .tweet-button {
        background-color: rgb(2, 158, 255);
        color: white;
        border: none;
        height: 36px;
        width: 74px;
        border-radius: 18px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        margin-left: 8px;
    }
</style>
<button class="subscribe-button">
    SUBSCRIBE
</button>
<button class="join-button">
    JOIN
</button>
<button class="tweet-button">
    Tweet
</button>

png

Use CSS to recreate these buttons from famous websites:

png

  • 2a. Uber
  • 2b. Amazon
  • 2c. GitHub
  • 2d. Bootstrap
  • 2e. Linkedln
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
70
71
72
73
74
75
76
77
78
79
80
81
82
<style>
    .Uber-button{
        color: white;
        background-color: black;
        width: 105px;
        height: 36px;
        cursor: pointer;
    }
    .Amazon-button{
        background-color: rgb(255, 216, 20);
        width: 160px;
        height: 36px;
        border: none;
        font-size: 15px;
        border-radius: 18px;
        cursor: pointer;
    }
    .GitHub-button{
        color:white;
        background-color: rgb(46, 164, 79);
        height:40px;
        width:95px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
    }
    .Bootstrap-button-1{
        color:white;
        background-color: rgb(121, 82, 179);
        height:40px;
        width:105px;
        border: none;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
    }
    .Bootstrap-button-2{
        color:rgb(108, 117, 125);
        background-color: white;
        border-color: rgb(108, 117, 125);
        border-style: solid;
        border-width: 2px;
        height:40px;
        width:105px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
    }
    .Linkedln-button-1{
        color: white;
        background-color: rgb(10, 102, 194);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        width: 250px;
        cursor: pointer;
    }
    .Linkedln-button-2{
        color:rgb(10, 102, 194);
        background-color: white;
        border-color: rgb(10, 102, 194);
        border-style: solid;
        border-width: 2px;
        height:40px;
        width:75px;
        font-size: 15px;
        font-weight: bold;
        border-radius: 20px;
        cursor: pointer;
    }
</style>
<button class="Uber-button">Request now</button>
<button class="Amazon-button">Add to Chart</button>
<button class="GitHub-button">Sign up</button>
<button class="Bootstrap-button-1">Get started</button>
<button class="Bootstrap-button-2">Download</button>
<button class="Linkedln-button-1">Apply on company website</button>
<button class="Linkedln-button-2">Save</button>

png

png

**Challenge Exercise **

  • 2f. Continuing from exercise 1g. recreate this design using CSS:
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
<style>
    .title{
        margin: 20px 0px;
        font-size: 25px;
        font-weight: bold;
    }
    .price{
        color:rgb(0, 118, 0);
        font-size: 18px;
        font-weight: bold;
    }
    .Amazon-button-1{
        background-color: rgb(255, 216, 20);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        width: 140px;
        margin-right: 10px;
        font-size: 16px;
        cursor: pointer;
    }
    .Amazon-button-2{
        background-color: rgb(255, 164, 28);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        width: 140px;
        margin-right: 10px;
        font-size: 16px;
        cursor: pointer;
    }
</style>

<a href="https://www.taobao.com/">Back to TaoBao</a>
<p class="title">Nike Black Running Shoes</p>
<p class="price">$39 - in stock.</p>
<p>Free delivery tomorrow.</p>
<button class="Amazon-button-1">Add to Cart</button>
<button class="Amazon-button-2">Buy now</button>

png

3. Hovers, Transitions, Shadows

​ 注意 Transitions 属性不要放到 hover 里, 否则移出时不会有 Transitions 的效果。

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
<style>
    .subscribe-button {
        background-color: rgb(200, 0, 0);
        color: white;
        border: none;
        height: 36px;
        width: 105px;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 8px;
        transition: opacity 0.15s;
    }
    .subscribe-button:hover {
        opacity: 0.8;
    }
    .subscribe-button:active {
        opacity: 0.4;
    }
    .join-button {
        background-color: white;
        border-color: rgb(41, 118, 211);
        border-style: solid;
        border-width: 1px;
        color: rgb(41, 118, 211);
        height: 36px;
        width: 62px;
        border-radius: 2px;
        cursor: pointer;
        transition: background-color 0.15s,
            color 0.15s;
    }
    .join-button:hover {
        background-color: rgb(41, 118, 211);
        color: white;
    }
    .join-button:active{
        opacity: 0.7;
    }
    .tweet-button {
        background-color: rgb(2, 158, 255);
        color: white;
        border: none;
        height: 36px;
        width: 74px;
        border-radius: 18px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        margin-left: 8px;
        transition: box-shadow 0.15s;
    }
    .tweet-button:hover {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
    }
</style>
<button class="subscribe-button">
    SUBSCRIBE
</button>
<button class="join-button">
    JOIN
</button>
<button class="tweet-button">
    Tweet
</button>

png

Use CSS to recreate these buttons from famous websites:

gif

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<style>
    .Uber-button{
        color: white;
        background-color: black;
        width: 105px;
        height: 36px;
        cursor: pointer;
        transition: opacity 0.15s;
    }
    .Uber-button:hover {
        opacity: 0.7;
    }
    .Amazon-button{
        background-color: rgb(255, 216, 20);
        width: 160px;
        height: 36px;
        border: none;
        font-size: 15px;
        border-radius: 18px;
        cursor: pointer;
        transition: opacity 0.15s;
    }
    .Amazon-button:hover {
        background-color: rgb(238, 200, 9);
    }
    .GitHub-button{
        color:white;
        background-color: rgb(46, 164, 79);
        height:40px;
        width:95px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: box-shadow 0.15s;
    }
    .GitHub-button:hover {
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
    }
    .Bootstrap-button-1{
        color:white;
        background-color: rgb(121, 82, 179);
        height:40px;
        width:105px;
        border: none;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .Bootstrap-button-1:hover {
        background-color: rgb(86, 49, 128);
    }
    .Bootstrap-button-2{
        color:rgb(108, 117, 125);
        background-color: white;
        border-color: rgb(108, 117, 125);
        border-style: solid;
        border-width: 2px;
        height:40px;
        width:105px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.15s,
            color 0.15s;
    }
    .Bootstrap-button-2:hover{
        background-color: rgb(108, 117, 125);
        color: white
    }
    .Linkedln-button-1{
        color: white;
        background-color: rgb(10, 102, 194);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        width: 250px;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .Linkedln-button-1:hover{
        background-color: rgb(7, 57, 117);
    }
    .Linkedln-button-2{
        color:rgb(10, 102, 194);
        background-color: white;
        border-color: rgb(10, 102, 194);
        border-style: solid;
        border-width: 2px;
        height:40px;
        width:75px;
        font-size: 15px;
        font-weight: bold;
        border-radius: 20px;
        cursor: pointer;
        transition: border-width 0.15s,
            background-color 0.15s;
    }
    .Linkedln-button-2:hover {
        background-color: #EEF;
        border-width: 3px;
    }
</style>
<button class="Uber-button">Request now</button>
<button class="Amazon-button">Add to Chart</button>
<button class="GitHub-button">Sign up</button>
<button class="Bootstrap-button-1">Get started</button>
<button class="Bootstrap-button-2">Download</button>
<button class="Linkedln-button-1">Apply on company website</button>
<button class="Linkedln-button-2">Save</button>

**Challenge Exercise **

gif

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
<style>
    a:hover {
        color:rgb(198, 96, 22);
    }
    .title{
        margin: 20px 0px;
        font-size: 25px;
        font-weight: bold;
    }
    .price{
        color:rgb(0, 118, 0);
        font-size: 18px;
        font-weight: bold;
    }
    .Amazon-button-1{
        background-color: rgb(255, 216, 20);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        width: 140px;
        margin-right: 10px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .Amazon-button-1:hover {
        background-color: rgb(240, 200, 16);
    }
    .Amazon-button-1:active {
        opacity: 0.5;
    }
    .Amazon-button-2{
        background-color: rgb(255, 164, 28);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        height: 40px;
        width: 140px;
        margin-right: 10px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .Amazon-button-2:hover {
        background-color: rgb(237, 120, 8);
    }
    .Amazon-button-2:active {
        opacity: 0.5;
    }
</style>

<a href="https://www.taobao.com/">Back to TaoBao</a>
<p class="title">Nike Black Running Shoes</p>
<p class="price">$39 - in stock.</p>
<p>Free delivery tomorrow.</p>
<button class="Amazon-button-1">Add to Cart</button>
<button class="Amazon-button-2">Buy now</button>

4. Chrome DevTools & CSS Box Model

CSS Box Model

  • how much space an element takes up
  • how far it is away from other elements

gif

  • 4a. - 4e. Modify exercises 3a. - 3e. to use padding instead of height/width
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<style>
    .Uber-button{
        color: white;
        background-color: black;
        padding: 8px 10px;
        margin: 5px;
        vertical-align: top;
        cursor: pointer;
        transition: opacity 0.15s;
    }
    .Uber-button:hover {
        opacity: 0.7;
    }
    .Amazon-button{
        background-color: rgb(255, 216, 20);
        padding: 10px 26px;
        margin: 5px;
        vertical-align: top;
        border: none;
        font-size: 15px;
        border-radius: 18px;
        cursor: pointer;
        transition: opacity 0.15s;
    }
    .Amazon-button:hover {
        background-color: rgb(238, 200, 9);
    }
    .GitHub-button{
        color:white;
        background-color: rgb(46, 164, 79);
        padding: 10px 16px;
        margin: 5px;
        vertical-align: top;
        border: none;
        font-size: 15px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: box-shadow 0.15s;
    }
    .GitHub-button:hover {
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
    }
    .Bootstrap-button-1{
        color:white;
        background-color: rgb(121, 82, 179);
        padding: 10px 16px;
        margin: 5px;
        vertical-align: top;
        border: none;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .Bootstrap-button-1:hover {
        background-color: rgb(86, 49, 128);
    }
    .Bootstrap-button-2{
        color:rgb(108, 117, 125);
        background-color: white;
        border-color: rgb(108, 117, 125);
        border-style: solid;
        border-width: 2px;
        padding: 9px 16px;
        margin: 5px;
        vertical-align: top;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.15s,
            color 0.15s;
    }
    .Bootstrap-button-2:hover{
        background-color: rgb(108, 117, 125);
        color: white
    }
    .Linkedln-button-1{
        color: white;
        background-color: rgb(10, 102, 194);
        border-radius: 20px;
        border: none;
        font-size: 15px;
        font-weight: bold;
        padding: 12px 26px;
        margin: 5px;
        vertical-align: top;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .Linkedln-button-1:hover{
        background-color: rgb(7, 57, 117);
    }
    .Linkedln-button-2{
        color:rgb(10, 102, 194);
        background-color: white;
        border-color: rgb(10, 102, 194);
        border-style: solid;
        border-width: 2px;
        padding: 9px 16px;
        margin: 5px;
        vertical-align: top;
        font-size: 15px;
        font-weight: bold;
        border-radius: 20px;
        cursor: pointer;
        transition: border-width 0.15s,
            background-color 0.15s;
    }
    .Linkedln-button-2:hover {
        background-color: #EEF;
        border-width: 3px;
    }
</style>
<button class="Uber-button">Request now</button>
<button class="Amazon-button">Add to Chart</button>
<button class="GitHub-button">Sign up</button>
<button class="Bootstrap-button-1">Get started</button>
<button class="Bootstrap-button-2">Download</button>
<button class="Linkedln-button-1">Apply on company website</button>
<button class="Linkedln-button-2">Save</button>

png

  • 4f. Update the Tweet button to use padding instead of height/width
  • 4g. Use the Chrome DevTools to get the exact color for the Subscribe button and update it int the code
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
<style>
    .subscribe-button {
        background-color: rgb(193, 0, 0);
        color: white;
        border: none;
        padding: 10px 16px;
        border-radius: 2px;
        cursor: pointer;
        transition: opacity 0.15s;
        vertical-align: top;
    }
    .subscribe-button:hover {
        opacity: 0.8;
    }
    .subscribe-button:active {
        opacity: 0.4;
    }
    .join-button {
        background-color: white;
        border-color: rgb(6, 95, 212);
        border-style: solid;
        border-width: 1px;
        color: rgb(6, 95, 212);
        padding: 9px 16px;
        border-radius: 2px;
        cursor: pointer;
        transition: background-color 0.15s,
            color 0.15s;
    }
    .join-button:hover {
        background-color: rgb(6, 95, 212);
        color: white;
    }
    .join-button:active{
        opacity: 0.7;
    }
    .tweet-button {
        background-color: rgb(2, 158, 255);
        color: white;
        border: none;
        border-radius: 18px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        margin-left: 8px;
        transition: box-shadow 0.15s;
        padding: 10px 16px;
        vertical-align: top;
    }
    .tweet-button:hover {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
    }
</style>
<button class="subscribe-button">
    SUBSCRIBE
</button>
<button class="join-button">
    JOIN
</button>
<button class="tweet-button">
    Tweet
</button>

png

gif

**Challenge Exercise **

  • 4h. Pagination
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    button{
        padding: 6px 2px;
        margin: 0px 5px;
    }
    a{
        margin: 0px 2px;
    }
</style>
<button>
    Back
</button>
<a href="https://www.youtube.com/">1</a>
<a href="https://www.youtube.com/">2</a>
<a href="https://www.youtube.com/">3</a>
<a href="https://www.youtube.com/">4</a>
<a href="https://www.youtube.com/">5</a>
<button>
    Next
</button>

png

  • 4i. - 4k.
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
<style>
    button{
        background-color: rgb(11, 136, 6);
        color: white;
        font-size: 15px;
        margin: 10px;
        vertical-align: top;
        border:none;
        padding: 6px 10px;
    }
    .stretch_button{
        transition: padding 1s;
    }
    .stretch_button:hover{
        padding: 12px 30px;
    }
    ._3d_click_button {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }
    ._3d_click_button:active {
        margin-top: 15px;
        margin-left: 15px;
        box-shadow: none;
    }
    .margin_and_padding_together {
        transition: padding 0.3s,
                    margin 0.3s;
    }
    .margin_and_padding_together:hover {
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 15px;
        padding-right: 15px;
    }
</style>
<button class="stretch_button">Stretch</button>
<button class="_3d_click_button">Shadow</button>
<br/>
<button class="margin_and_padding_together">One</button>
<button class="margin_and_padding_together">Two</button>
<button class="margin_and_padding_together">Three</button>

png

5. Text Styles

  • CSS Specificity: class name selector > element name selector

  • google 搜索 html entity greater than 得到 > 的 Entity Number &#62;

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
70
71
72
73
74
<style>
    p {
        font-family: Arial;
        margin-top: 0;
        margin-bottom: 0;
    }
    .video-title {
        font-size: 18px;
        font-weight: bold;
        width: 280px;
        line-height: 24px;
        margin-bottom: 5px;
    }
    .video-stats {
        font-size: 14px;
        color: #606060;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .video-author {
        font-size: 14px;
        color: #606060;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .video-description {
        font-size: 14px;
        color:#606060;
        width: 280px;
        line-height: 20px;
        line-height: 22px;
        margin-top: 0;
        margin-bottom: 100px;
    }
    .apple-text {
        margin-bottom: 50px;
        font-size: 14px;
        background-color: #e34140;
        color: white;
        text-align: center;
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .shop-link {
        margin-left: 5px;
        cursor: pointer;
    }
    .shop-link:hover {
        text-decoration: underline;
    }
</style>

<p class="video-title">
    Talking Tech and AI with Google CEO Sundar Pichai!
</p>

<p class="video-stats">
    3.4M views &#183; 6month ago
</p>

<p class="video-author">
    Marques Brownlee &#10003;
</p>

<p class="video-description">
    Talking tech and AI on the heels of Google I/O.
    Also a daily driver phone reveal from Google's CEO.
    Shoutout to Sundar!
</p>

<p class="apple-text">
    Shop early for the best selection of holiday favourites.
    <span class="shop-link">Shop now &#62;</span>
</p>

png

png

  • 5a. font = Tahoma
1
2
3
4
5
6
7
8
9
<style>
    p {
        font-family: Tahoma;
        font-weight: bold;
        font-size: 24px;
    }
</style>

<p> This is Tahoma Font</p>

png

  • 5b. font = Arial
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    p {
        font-family: Arial;
    }
    .title {
        font-weight: bold;
        font-size: 24px;
        margin: 0;
    }
    .introduce {
        color: red;
        font-style: italic;
        font-size: 16px;
        margin-top: 10px;
    }
</style>

<p class="title">Biggest Deals of the Year!</p>
<p class="introduce">Sales end Tuesday</p>

png

  • 5c. font = Verdana
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
<style>
    p {
        font-family: Verdana;
    }
    .title {
        font-weight: bold;
        font-size: 20px;
        margin: 0;
    }
    .introduce {
        margin-top: 5px;
        color: #606060;
    }
    .decription {
        width: 300px;
    }
    .start_button {
        padding: 5px 12px;
        background-color: rgb(49, 126, 18);
        border: 0;
        border-radius: 5px;
        color: white;
    }
</style>

<p class="title">HTML CSS Course</p>
<p class="introduce">Beginner to Pro</p>
<p class="decription">
    In this course, we'll learn the skills
     you need to become a developer.
</p>
<button class="start_button">Get Started</button>

png

  • 5d. font = Arial
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
<style>
    p {
        font-family: Arial;
    }
    .title {
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        margin-bottom: 0;
    }
    .introduce {
        margin-top: 14px;
        text-align: center;
    }
    .link {
        text-align: center;
        color:rgb(0, 147, 196);
        cursor: pointer;
    }
    .link:hover {
        text-decoration: underline;
    }
</style>

<p class="title">Shopping for your business?</p>
<p class="introduce">See how Apple at Work can help.</p>
<p class="link">Learn more &#62;</p>

png

png

**Challenge Exercise **

  • 5e.
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
<style>
    p {
        text-align: center;
        font-family: Arial;
        margin: 0;
    }
    .new {
        font-weight: bold;
        color: orange;
    }
    .title {
        font-weight: bold;
        font-size: 20px;
        margin-top: 5px;
    }
    .decription {
        font-weight: bold;
        font-size: 35px;
        margin-top: 5px;
    }
    .price {
        margin-top: 10px;
    }
    .buy_button {
        margin-top: 10px;
        color:white;     
        font-family: Arial;
        border:none;
        padding: 5px 12px;
        border-radius: 16px;
        background-color: rgb(29, 115, 207);
    }
</style>

<p class="new">New</p>
<p class="title">MacBook Pro</p>
<p class="decription">Supercharged for pros.</p>
<p class="price">From $1999</p>
<center><button class="buy_button">Buy</button></center>

png

  • 5f.
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
<style>
    p {
        font-family: Arial;
        margin-top: 6px;
        margin-bottom: 6px;
    }
    .current {
        font-size: 32px;
    }
    .usd {
        color: #606060;
    }
    .rise {
        color:green;
    }
    .after_hours {
        color: #606060;
    }
    .decline {
        color:rgb(208, 0, 0);
    }
</style>
<p>
    <span class="current">1049.61 </span>
    <span class="usd">USD</span>
</p>
<p class="rise">+18.05 (1.75%) today</p>
<p>
    <span class="after_hours">After hours 1,048.00 </span>
    <span class="decline">-1.61 (0.15%)</span>
</p>

png

  • 5g.
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
<style>
    p {
        font-family: Arial;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .title {
        font-weight: bold;
    }
    .author {
        color:#888;
    }
    .at {
        color:rgb(31, 169, 255);
    }
    .text {
        margin-top: 18px;
    }
</style>
<p>
    <span class="title">freeCodeCamp.org</span>
    <span class="author">@freeCodeCamp 1h</span>
</p>
<p>As a web developer, you'll want to make your projects easy to use and navigate around.</p>
<p class="text">
    Here
    <span class="at">@chp_it</span>
    outlines the top skills new developers should have.
</p>

png

Icon
Icon
Icon
Icon
上一篇：Web-HTML & CSS Full Course - Beginner to Pro (2022) (6-11)
下一篇：Diary-都润回家才想着写寄了的河摆带学的时光真是屑啊