Các thuộc tính CSS liên quan đến phông chữ

Articles

Bài viết này giải thích các thuộc tính CSS liên quan đến phông chữ.

Bạn có thể tìm hiểu các trường hợp sử dụng và cách viết các thuộc tính như font-style và font-family.

YouTube Video

Tạo HTML để xem trước

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Kiểu chữ (liên quan đến phông chữ)

Thuộc tính `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size là một thuộc tính CSS được sử dụng để xác định kích thước văn bản trong một phần tử. Nó được sử dụng để điều chỉnh tầm quan trọng trực quan của văn bản và cải thiện khả năng đọc. font-size có thể được xác định bằng các đơn vị và phương pháp khác nhau.

Các cách chính để chỉ định giá trị

Giá trị tuyệt đối(px, pt)

Nếu bạn muốn sử dụng kích thước cố định không phụ thuộc vào trình duyệt hoặc thiết bị, hãy xác định kích thước phông chữ bằng các đơn vị tuyệt đối như pixel hoặc point.

1p {
2    font-size: 16px;
3}

px: Pixel là đơn vị phổ biến nhất. Xác định kích thước theo từng bước tăng 1 pixel.

1p {
2    font-size: 12pt;
3}

pt: Point là đơn vị thường được sử dụng trong in ấn. 1 point là 1/72 của một inch.

Giá trị tương đối(em, rem, %)

Bạn cũng có thể xác định kích thước phông chữ tương đối dựa trên kích thước phông chữ của một phần tử cha hoặc gốc. Điều này phù hợp với thiết kế đáp ứng.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em là một đơn vị tương đối dựa trên kích thước phông chữ của phần tử cha. Nếu font-size của phần tử cha là 16px, thì 1em bằng 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem là một đơn vị tương đối dựa trên kích thước phông chữ của phần tử gốc (thường là phần tử <html>).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % được xác định dưới dạng phần trăm so với kích thước phông chữ của phần tử cha.

Từ khóa

Bạn cũng có thể sử dụng từ khóa để dễ dàng xác định kích thước thân thiện với người dùng.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Những từ khóa này xác định các kích thước phông chữ cơ bản thay đổi theo trình duyệt nhưng dễ sử dụng.

Từ khóa tương đối

Bạn có thể xác định kích thước phông chữ tương đối bằng cách sử dụng từ khóa liên quan đến phần tử cha hoặc kích thước văn bản xung quanh.

1p {
2    font-size: larger;
3}

larger: larger làm cho kích thước phông chữ lớn hơn kích thước của phần tử cha.

1p {
2    font-size: smaller;
3}

smaller: smaller làm cho kích thước phông chữ nhỏ hơn kích thước của phần tử cha.

Ví dụ sử dụng phổ biến

Trong thiết kế đáp ứng, em và rem thường được sử dụng để xác định kích thước phông chữ linh hoạt dựa trên kích thước của phần tử cha hoặc phần tử gốc.
Trong thiết kế cố định hoặc thiết kế chính xác, thường sử dụng px để cố định kích thước.

Ví dụ về điều chỉnh kích thước phông chữ

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Kết luận

font-size là một thuộc tính quan trọng để điều chỉnh tầm quan trọng trực quan và khả năng đọc của văn bản. Điều quan trọng là sử dụng đơn vị và từ khóa phù hợp theo mục đích thiết kế hoặc để thiết kế đáp ứng linh hoạt.

Thuộc tính `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

Thuộc tính font-family có thể chủ yếu chỉ định hai loại giá trị sau:.

Tên phông chữ cụ thể: Chỉ định tên của một phông chữ cụ thể. Chỉ định các phông chữ được cài đặt trên hệ thống hoặc có sẵn dưới dạng phông chữ web.
- Ví dụ:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Nhóm phông chữ tổng quát: Chỉ định một nhóm phông chữ dự phòng sẽ được sử dụng khi không có phông chữ cụ thể.
- Ví dụ:
  - serif: Serif (ví dụ: Times New Roman, Georgia)
  - sans-serif: Sans-serif (ví dụ: Arial, Verdana)
  - monospace: Monospace (ví dụ: Courier New, Lucida Console)
  - cursive: Cursive (ví dụ: Comic Sans MS)
  - fantasy: Fantasy (ví dụ: Papyrus, Impact)

Cách Chỉ Định `font-family`

Khi chỉ định nhiều phông chữ, nên tách tên các phông chữ bằng dấu phẩy và liệt kê một phông chữ tổng quát làm dự phòng ở cuối.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

Trong trường hợp này, nếu không có Times New Roman, thì sẽ sử dụng Georgia, và nếu cả hai đều không có, thì một phông chữ serif sẽ được sử dụng.

Thuộc tính `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight là một thuộc tính CSS được sử dụng để chỉ định độ dày của văn bản. Nó đóng vai trò quan trọng trong việc nhấn mạnh và tạo phong cách cho văn bản và được sử dụng để thay đổi kiểu phông chữ. font-weight có thể được chỉ định bằng số hoặc từ khóa để thể hiện một dải độ dày từ mỏng đến đậm.

Các Giá Trị Chính của `font-weight`

Từ khóa

1p {
2    font-weight: normal; /* Default thickness */
3}

normal đại diện cho độ dày phông chữ tiêu chuẩn. Nó thường tương ứng với 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold đại diện cho văn bản được in đậm. Nó thường tương ứng với 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder đại diện cho văn bản đậm hơn so với phần tử cha của nó.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter đại diện cho văn bản nhạt hơn so với phần tử cha của nó.

**Giá Trị Số

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight cũng có thể được chỉ định dưới dạng số, nằm trong khoảng từ 100 đến 900. Số nhỏ hơn tạo ra văn bản mỏng hơn, và số lớn hơn tạo ra văn bản đậm hơn. Thông thường, các họ phông chữ hỗ trợ một dải độ dày cụ thể, nhưng không phải tất cả các số đều có sẵn cho tất cả các phông chữ.

100: Mỏng
200: Siêu nhẹ
300: Nhẹ
400: Bình thường
500: Trung bình
600: Thêm đậm
700: Đậm
800: Rất đậm
900: Đen

Ví dụ về Cách Sử Dụng `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Cách Sử Dụng Thực Tế

Văn bản tiêu chuẩn thường sử dụng 400 (normal).
Đối với tiêu đề hoặc các phần nhấn mạnh, thường sử dụng 700 (bold).
Tùy thuộc vào thiết kế, các độ dày trung gian như 500 hoặc 600 cũng có thể được sử dụng để tránh nhấn mạnh quá mức.

Tóm tắt

font-weight là một thuộc tính xác định độ dày của văn bản, sử dụng các từ khóa như normal hoặc bold, hoặc số từ 100 đến 900.
lighter và bolder điều chỉnh tương ứng với độ dày của phần tử cha.
Việc chọn font-weight phù hợp dựa trên thiết kế và khả năng đọc là rất quan trọng.

Thuộc tính `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style là một thuộc tính CSS dùng để chỉ định kiểu của ký tự, đặc biệt là để áp dụng kiểu nghiêng hoặc kiểu bình thường. Thuộc tính này thường được sử dụng để nhấn mạnh văn bản và thiết kế, đặc biệt là trong tiêu đề và trích dẫn.

Các giá trị chính của `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal là kiểu ký tự tiêu chuẩn (thường là các ký tự thẳng đứng).

`italic`

1p {
2    font-style: italic;
3}

italic làm cho văn bản nghiêng (chữ nghiêng). Kiểu này có thể được áp dụng nếu họ phông chữ hỗ trợ chữ nghiêng.

`oblique`

1p {
2    font-style: oblique;
3}

oblique làm cho văn bản nghiêng. Khác với italic, nếu phông chữ không có phiên bản nghiêng, thì kiểu này có thể làm văn bản nghiêng một cách nhân tạo.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Chỉ định một góc với oblique để làm nghiêng văn bản theo góc được chỉ định. Đặc tả này nhằm tùy chỉnh thêm oblique. Hiện tại, hầu hết các trình duyệt không hỗ trợ chỉ định góc, nhưng một số trình duyệt có hỗ trợ.

Cách sử dụng `font-style`

italic thường được sử dụng để nhấn mạnh, trích dẫn và tiêu đề sách.
oblique thường được sử dụng khi phông chữ không bao gồm kiểu chữ nghiêng, như một cách để nghiêng văn bản một cách giả lập.
normal được sử dụng khi chuyển về kiểu chữ bình thường.

Tóm tắt

font-style được sử dụng để điều chỉnh độ nghiêng của văn bản, với ba giá trị chính: normal, italic, và oblique.
Trong thiết kế, chữ nghiêng thường được sử dụng để nhấn mạnh văn bản, và nếu phông chữ không hỗ trợ, oblique có thể được dùng để làm nghiêng văn bản.

Thuộc tính `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

Thuộc tính color là một thuộc tính cơ bản trong CSS để chỉ định màu của văn bản. Thuộc tính này được sử dụng để thay đổi màu văn bản của các phần tử HTML và có thể chỉ định màu theo nhiều định dạng khác nhau.

Giải thích:

Lớp color-red chỉ định màu văn bản là đỏ bằng cách sử dụng từ khóa.
- Bạn có thể chỉ định tên màu như red, blue, green được định nghĩa trong CSS.
Lớp color-hex chỉ định màu bằng cách sử dụng mã màu thập lục phân.
- Bạn có thể chỉ định bằng 3 chữ số như #F00. Trong trường hợp này, #F00 là cùng một màu với #FF0000.
Lớp color-rgb chỉ định màu bằng cách sử dụng định dạng RGB.
- RGB: Chỉ định các thành phần đỏ, xanh lá, và xanh dương trong phạm vi từ 0 đến 255.
Lớp color-rgba sử dụng định dạng RGBA để thêm độ trong suốt.
Lớp color-hsl chỉ định màu bằng cách sử dụng định dạng HSL.
- Màu sắc có thể được chỉ định bằng sắc độ, độ bão hòa, và độ sáng. Sắc độ được chỉ định từ 0 đến 360 độ, và độ bão hòa cùng độ sáng được chỉ định từ 0% đến 100%.
Lớp color-hsla sử dụng định dạng HSLA để thêm độ trong suốt.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các quy tắc CSS `@`Các thuộc tính CSS liên quan đến văn bản

Các thuộc tính CSS liên quan đến phông chữ

YouTube Video

Tạo HTML để xem trước

Kiểu chữ (liên quan đến phông chữ)

Thuộc tính font-size

Các cách chính để chỉ định giá trị

Giá trị tuyệt đối(px, pt)

Giá trị tương đối(em, rem, %)

Từ khóa

Từ khóa tương đối

Ví dụ sử dụng phổ biến

Ví dụ về điều chỉnh kích thước phông chữ

Kết luận

Thuộc tính font-family

Cách Chỉ Định font-family

Thuộc tính font-weight

Các Giá Trị Chính của font-weight

Từ khóa

**Giá Trị Số

Ví dụ về Cách Sử Dụng font-weight

Cách Sử Dụng Thực Tế

Tóm tắt

Thuộc tính font-style

Các giá trị chính của font-style

normal

italic

oblique

oblique <angle>

Cách sử dụng font-style

Tóm tắt

Thuộc tính color

Giải thích:

YouTube Video

Thuộc tính `font-size`

Thuộc tính `font-family`

Cách Chỉ Định `font-family`

Thuộc tính `font-weight`

Các Giá Trị Chính của `font-weight`

Ví dụ về Cách Sử Dụng `font-weight`

Thuộc tính `font-style`

Các giá trị chính của `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Cách sử dụng `font-style`

Thuộc tính `color`