Articles
Panimula sa CSS
Mga Katangian ng CSS na Nauukol sa Font

Mga Katangian ng CSS na Nauukol sa Font

Ipinaliwanag ng artikulong ito ang mga property ng CSS na may kaugnayan sa font.

Matututuhan mo ang mga gamit at kung paano isulat ang mga property tulad ng font-style at font-family.

YouTube Video

Paglikha ng HTML para sa preview

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>

Tipograpiya (Kaugnay sa Font)

Katangian ng 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}

Ang font-size ay isang property ng CSS na ginagamit upang tukuyin ang laki ng teksto sa loob ng isang elemento. Ginagamit ito upang ayusin ang visual na kahalagahan ng teksto at mapabuti ang pagbabasa. Ang font-size ay maaaring tukuyin gamit ang iba't ibang unit at pamamaraan.

Pangunahing mga paraan upang tukuyin ang mga halaga

Mga absolutong halaga(px, pt)

Kung nais mong gumamit ng isang nakapirming laki na hindi nakadepende sa browser o aparato, tukuyin ang mga laki ng font gamit ang mga absolutong unit tulad ng pixels o points.

1p {
2    font-size: 16px;
3}
  • px: Ang Pixels ang pinakakaraniwang unit. Tukuyin ang laki sa pamamagitan ng dagdag na 1 pixel.
1p {
2    font-size: 12pt;
3}
  • pt: Ang Points ay mga unit na karaniwang ginagamit sa pag-iimprenta. Ang 1 point ay 1/72 ng isang pulgada.
Relatibong mga halaga(em, rem, %)

Maaari mo ring tukuyin ang mga relative na laki ng font batay sa laki ng font ng parent o root element. Angkop ito para sa responsive na disenyo.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}
  • em: Ang em ay isang relative na unit na nakabatay sa laki ng font ng parent element. Kung ang font-size ng parent ay 16px, ang 1em ay katumbas ng 16px.
1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}
  • rem: Ang rem ay isang relative na unit na nakabatay sa laki ng font ng root element (karaniwang ang <html> element).
1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}
  • %: Ang % ay tinutukoy bilang porsyentong kaugnay sa laki ng font ng parent element.
Mga keyword

Maaari mo ring gamitin ang mga keyword upang madaling tukuyin ang mga laki na madaling gamitin.

 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: Ang mga keyword na ito ay tumutukoy sa mga batayang laki ng font na nag-iiba depende sa browser ngunit madaling gamitin.
Relatibong mga keyword

Maaari mong tukuyin ang mga relative na laki ng font gamit ang mga keyword kaugnay sa parent element o sa laki ng nakapaligid na teksto.

1p {
2    font-size: larger;
3}
  • larger: Ang larger ay ginagawa ang laki ng font na mas malaki kaysa sa laki ng parent element.
1p {
2    font-size: smaller;
3}
  • smaller: Ang smaller ay ginagawa ang laki ng font na mas maliit kaysa sa laki ng parent element.

Karaniwang mga halimbawa ng paggamit

  • Sa responsive na disenyo, ang em at rem ay madalas gamitin upang tukuyin ang mga flexible na laki ng font batay sa laki ng parent o root elements.
  • Sa fixed na disenyo o tumpak na disenyo, karaniwan ang paggamit ng px upang pumirmi ang laki.

Mga halimbawa ng pag-aayos ng laki ng font 

 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}

Konklusyon

Ang font-size ay isang mahalagang property para ayusin ang visual na kahalagahan at pagbabasa ng teksto. Mahalaga ang paggamit ng mga unit at keyword nang tama ayon sa layunin ng disenyo o para sa flexible na responsive na disenyo.

Ang Katangian ng 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}

Ang katangiang font-family ay maaaring pangunahing tukuyin ang sumusunod na dalawang uri ng mga halaga:.

  1. Mga partikular na pangalan ng font: Tukuyin ang pangalan ng isang partikular na font. Tukuyin ang mga font na naka-install sa sistema o magagamit bilang mga web font.

    • Halimbawa:
      • Arial
      • Verdana
      • Times New Roman
      • Courier New
      • Georgia

  2. Pangkalahatang pamilya ng font: Tukuyin ang isang grupo ng mga fallback font na gagamitin kapag ang isang partikular na font ay hindi magagamit.

    • Halimbawa:
      • serif: Serif (hal., Times New Roman, Georgia)
      • sans-serif: Sans-serif (hal., Arial, Verdana)
      • monospace: Monospace (hal., Courier New, Lucida Console)
      • cursive: Cursive (hal., Comic Sans MS)
      • fantasy: Fantasy (hal., Papyrus, Impact)

Paano Tukuyin ang font-family

Kapag tumutukoy ng maramihang mga font, inirerekomenda na paghiwalayin ang mga pangalan ng font gamit ang mga kuwit at ilista ang pangkalahatang font bilang fallback sa dulo.

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

Sa kasong ito, kung walang Times New Roman, gagamitin ang Georgia, at kung wala sa dalawa ang magagamit, isang serif font ang gagamitin.

Ang Katangian ng 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}

Ang font-weight ay isang katangian ng CSS na ginagamit upang tukuyin ang kapal ng teksto. Ito ay may mahalagang papel sa biswal na diin at estilo ng teksto at ginagamit upang baguhin ang estilo ng font. Ang font-weight ay maaaring tukuyin gamit ang mga numero o mga keyword upang ipakita ang saklaw ng kapal mula manipis hanggang makapal.

Pangunahing Halaga ng font-weight

Mga keyword 
1p {
2    font-weight: normal; /* Default thickness */
3}
  • normal ay kumakatawan sa karaniwang bigat ng font. Kadalasan itong tumutukoy sa 400.
1p {
2    font-weight: bold; /* Bold */
3}
  • bold ay kumakatawan sa makapal na teksto. Kadalasan itong tumutukoy sa 700.
1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}
  • bolder ay kumakatawan sa teksto na mas makapal kaysa sa parent na elemento.
1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}
  • lighter ay kumakatawan sa teksto na mas magaan kaysa sa parent na elemento.
Numerical na Halaga 
1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

Ang font-weight ay maaari ring tukuyin bilang isang numero, mula 100 hanggang 900. Mas maliit na numero ay nagreresulta sa mas manipis na teksto, at mas malaki na numero ay nagreresulta sa mas makapal na teksto. Karaniwan, ang mga pamilya ng font ay sumusuporta sa isang saklaw ng mga partikular na kapal, ngunit hindi lahat ng mga numero ay magagamit para sa lahat ng mga font.

  • 100: Manipis
  • 200: Napaka-Gaan
  • 300: Magaan
  • 400: Karaniwan
  • 500: Katamtaman
  • 600: Medyo Makapal
  • 700: Makapal
  • 800: Sobrang Makapal
  • 900: Itim

Mga Halimbawa ng Paggamit 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}

Praktikal na Paggamit

  • Karaniwang gumagamit ang karaniwang teksto ng 400 (normal).
  • Para sa mga heading o pinalakas na bahagi, karaniwang ginagamit ang 700 (bold).
  • Depende sa disenyo, maaaring gamitin ang mga intermedyang kapal tulad ng 500 o 600 upang maiwasan ang sobrang pagbibigay-diin.

Buod

  • Ang font-weight ay isang katangian na tumutukoy sa kapal ng teksto, gamit ang mga keyword tulad ng normal o bold, o mga numero mula 100 hanggang 900.
  • Ang lighter at bolder ay inaayos ayon sa kapal ng parent element.
  • Mahalagang pumili ng tamang font-weight batay sa disenyo at readability.

Ang Katangian ng 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}

Ang font-style ay isang katangian ng CSS na ginagamit upang tukuyin ang estilo ng mga karakter, partikular para mag-apply ng italic o normal na mga estilo. Ang katangiang ito ay madalas gamitin para sa pagbibigay-diin at disenyo ng teksto, lalo na sa mga titulo at sipi.

Pangunahing Halaga ng font-style

normal 
1p {
2    font-style: normal;
3}
  • Ang normal ay ang karaniwang estilo ng karakter (karaniwang patayo ang mga karakter).
italic 
1p {
2    font-style: italic;
3}
  • Ang italic ay ginagawa ang teksto na italic (pahilig). Ang estilong ito ay maaaring i-apply kung sinusuportahan ng pamilya ng font ang italics.
oblique 
1p {
2    font-style: oblique;
3}
  • Ang oblique ay ginagawa ang teksto na pahilig. Hindi tulad ng italic, kung ang font ay walang italic na bersyon, maaaring artipisyal na pahiligin nito ang teksto.
oblique <angle> 
1p {
2    font-style: oblique 20deg;
3}
  • Tukuyin ang anggulo gamit ang oblique upang pahiligin ang teksto ayon sa tinukoy na anggulo. Ang ispesipikasyong ito ay para sa karagdagang pagpapasadya ng oblique. Sa kasalukuyan, karamihan sa mga browser ay hindi sumusuporta sa pagtutukoy ng anggulo, ngunit may ilan na sumusuporta.

Paggamit ng font-style

  • Kadalasang ginagamit ang italic para sa pagbibigay-diin, mga sipi, at mga pamagat ng libro.
  • Ang oblique ay madalas ginagamit kapag ang isang font ay walang italic na estilo, bilang paraan upang pailingin ang teksto nang artipisyal.
  • Ang normal ay ginagamit kapag ibinabalik sa normal na estilo ng teksto.

Buod

  • Ang font-style ay ginagamit upang kontrolin ang pagkakaili ng teksto, na may tatlong pangunahing halaga: normal, italic, at oblique.
  • Sa disenyo, ang italics ay kadalasang ginagamit para sa pagbibigay-diin sa teksto, at kung ang font ay hindi sumusuporta rito, ang oblique ay maaaring gamitin upang pailingin ang teksto.

pag-aari ng 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}

Ang color na katangian ay isang pangunahing katangian sa CSS para tukuyin ang kulay ng teksto. Ginagamit ito para baguhin ang kulay ng teksto ng mga elemento ng HTML at maaaring tukuyin ang mga kulay sa iba't ibang format.

Paliwanag:

  • Ang klase ng color-red ay nagtutukoy ng kulay ng teksto bilang pula gamit ang keyword.

    • Maaari mong tukuyin ang mga pangalan ng kulay tulad ng red, blue, green na nakatukoy sa CSS.

  • Ang klase ng color-hex ay nagtutukoy ng mga kulay gamit ang hexadecimal na mga code ng kulay.

    • Maaari mong tukuyin gamit ang 3 digit tulad ng #F00. Sa kasong ito, ang #F00 ay kapareho ng kulay ng #FF0000.

  • Ang klase ng color-rgb ay nagtutukoy ng mga kulay gamit ang format na RGB.

    • RGB: Tinutukoy ang mga bahagi ng pula, berde, at asul sa saklaw mula 0 hanggang 255.

  • Ang klase ng color-rgba ay gumagamit ng format na RGBA upang magdagdag ng transparency.

  • Ang klase ng color-hsl ay nagtutukoy ng mga kulay gamit ang format na HSL.

    • Ang mga kulay ay maaaring tukuyin gamit ang hue, saturation, at lightness. Ang hue ay tinutukoy mula 0 hanggang 360 degrees, at ang saturation at lightness ay tinutukoy mula 0% hanggang 100%.

  • Ang klase ng color-hsla ay gumagamit ng format na HSLA upang magdagdag ng transparency.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Patakaran ng CSS `@`Mga katangian ng CSS na may kaugnayan sa teksto