תכונות CSS הקשורות לגופנים

Articles

מאמר זה מסביר את תכונות ה-CSS הקשורות לגופנים.

ניתן ללמוד על מקרי שימוש וכיצד לכתוב תכונות כגון font-style ו-font-family.

YouTube Video

יצירת HTML לתצוגה מקדימה

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>

טיפוגרפיה (קשורה לגופנים)

תכונת `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 היא תכונת CSS המשמשת לציון גודל הטקסט בתוך אלמנט. היא משמשת להתאמת החשיבות הוויזואלית של הטקסט ולשיפור הקריאות. ניתן לציין font-size באמצעות יחידות ושיטות שונות.

דרכים עיקריות לציון ערכים

ערכים מוחלטים(px, pt)

אם ברצונך להשתמש בגודל קבוע שאינו תלוי בדפדפן או במכשיר, ציין גדלי גופן ביחידות מוחלטות כמו פיקסלים או נקודות.

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

px: פיקסלים הם היחידה הנפוצה ביותר. ציין את הגודל במרווחים של פיקסל אחד.

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

pt: נקודות הן יחידות המשמשות בדרך כלל בהדפסה. נקודה אחת היא 1/72 של אינץ'.

ערכים יחסיים(em, rem, %)

ניתן גם לציין גודלי גופן יחסיים בהתבסס על גודל הגופן של אלמנט ההורה או השורש. זה מתאים לעיצוב רספונסיבי.

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

em: em היא יחידה יחסית המבוססת על גודל הגופן של אלמנט ההורה. אם גודל הגופן של ההורה הוא 16px, אז 1em שווה ל-16px.

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

rem: rem הוא יחידה יחסית המבוססת על גודל הגופן של האלמנט הבסיסי (בדרך כלל האלמנט <html>).

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

%: % מוגדר באחוזים יחסית לגודל הגופן של אלמנט האב.

מילות מפתח

ניתן להשתמש במילות מפתח כדי להגדיר בקלות גדלים ידידותיים למשתמש.

 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: מילות מפתח אלה מגדירות גדלי גופן בסיסיים שעשויים להשתנות בין דפדפנים אך קלות לשימוש.

מילות מפתח יחסיות

ניתן להגדיר גדלי גופן יחסיים באמצעות מילות מפתח ביחס לאלמנט האב או לגודל הטקסט מסביב.

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

larger: larger מגדיל את גודל הגופן מעבר לגודל של אלמנט האב.

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

smaller: smaller מקטין את גודל הגופן ביחס לגודל של אלמנט האב.

דוגמאות שימוש נפוצות

בעיצוב רספונסיבי, נעשה לעיתים קרובות שימוש ב-em ו-rem כדי להגדיר גדלי גופן גמישים בהתבסס על גודל אלמנט האב או האלמנט הבסיסי.
בעיצוב קבוע או עיצוב מדויק, נהוג להשתמש ב-px כדי לקבע את הגודל.

דוגמאות לכיוונון גודל גופן

 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}

סיום

font-size הוא תכונה חשובה להתאמת החשיבות החזותית וקריאות הטקסט. חשוב להשתמש ביחידות ובמילות מפתח באופן מתאים בהתאם למטרת העיצוב או לעיצוב רספונסיבי וגמיש.

תכונת `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}

תכונת font-family יכולה להגדיר בעיקר שני סוגים של ערכים:.

שמות גופנים ספציפיים: הגדירו את שמו של גופן מסוים. הגדירו גופנים המותקנים במערכת או זמינים כגופני רשת.
- דוגמה:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
משפחת גופנים כללית: הגדירו קבוצת גופנים חלופיים לשימוש כאשר גופן מסוים אינו זמין.
- דוגמה:
  - serif: סריף (לדוגמה, Times New Roman, Georgia)
  - sans-serif: ללא סריף (לדוגמה, Arial, Verdana)
  - monospace: מונוספייס (לדוגמה, Courier New, Lucida Console)
  - cursive: כתב מחובר (לדוגמה, Comic Sans MS)
  - fantasy: פנטזיה (לדוגמה, Papyrus, Impact)

כיצד לציין `font-family`

כאשר מציינים מספר גופנים, מומלץ להפריד את שמות הגופנים באמצעות פסיק ולציין גופן כללי כגיבוי בסוף הרשימה.

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

במקרה זה, אם Times New Roman אינו זמין, נעשה שימוש ב-Georgia, ואם שניהם אינם זמינים, נעשה שימוש בגופן serif.

תכונת `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 היא תכונת CSS המשמשת לציון עובי הטקסט. תכונה זו משחקת תפקיד משמעותי בהדגשה ובסגנון הוויזואלי של הטקסט ומשמשת לשינוי סגנון הגופן. ניתן לציין את font-weight באמצעות מספרים או מילות מפתח כדי לציין טווחי עובי שונים, מדק ועד עבה.

ערכים עיקריים של `font-weight`

מילות מפתח

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

normal מייצג את משקל הגופן הסטנדרטי. זה בדרך כלל תואם ל-400.

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

bold מייצג טקסט מודגש. זה בדרך כלל תואם ל-700.

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

bolder מייצג טקסט שהוא מודגש יותר מהאלמנט האב שלו.

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

lighter מייצג טקסט שהוא קל יותר מהאלמנט האב שלו.

ערכים מספריים

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

ניתן גם לציין את font-weight כערך מספרי בין 100 ל-900. ערכים נמוכים יותר מייצרים טקסט דק יותר, וערכים גבוהים יותר מייצרים טקסט עבה יותר. בדרך כלל, משפחות גופנים תומכות בטווחי עובי מוגדרים, אך לא כל הערכים זמינים בכל הגופנים.

100: דק
200: דק מאוד
300: קל
400: רגיל
500: בינוני
600: חצי עבה
700: עבה
800: אקסטרה מודגש
900: שחור

דוגמאות לשימוש ב-`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}

שימוש מעשי

טקסט סטנדרטי משתמש בדרך כלל ב-400 (normal).
עבור כותרות או חלקים מודגשים, נהוג להשתמש ב-700 (bold).
בהתאם ל-עיצוב, ניתן גם להשתמש בעוביים בינוניים כמו 500 או 600 כדי למנוע הדגשה מופרזת.

סיכום

font-weight היא תכונה שמגדירה את עובי הטקסט, באמצעות מילות מפתח כמו normal או bold, או מספרים בין 100 ל-900.
lighter ו-bolder מתאימים את העובי באופן יחסי לעובי של האלמנט האב.
בחירת font-weight מתאים על בסיס עיצוב וקריאות היא חשובה.

תכונת `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 היא תכונת CSS שמאפשרת להגדיר את סגנון התווים, במיוחד לצורך יישום סגנון נטוי או רגיל. תכונה זו משמשת לעיתים קרובות להדגשת טקסט ולעיצוב, במיוחד בכותרות ובציטוטים.

ערכים עיקריים של `font-style`

`normal`

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

normal הוא הסגנון הרגיל של התווים (בדרך כלל תווים ישרים).

`italic`

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

italic הופך את הטקסט לנטוי (משופע). ניתן להחיל סגנון זה אם משפחת הגופנים תומכת בנטוי.

`oblique`

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

oblique הופך את הטקסט למשופע. בניגוד ל-italic, אם לגופן אין גרסה נטויה, ייתכן שסגנון זה יטה את הטקסט באופן מלאכותי.

`oblique <angle>`

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

ניתן לציין זווית עם oblique כדי להטות את הטקסט לפי הזווית הרצויה. מפרט זה נועד להתאמה נוספת של oblique. כיום, רוב הדפדפנים אינם תומכים בציון זווית, אך יש כאלה שכן.

שימוש ב-`font-style`

italic משמש לעיתים קרובות להדגשה, ציטוטים וכותרות ספרים.
אלכסוני משמש לרוב כאשר הגופן אינו כולל סגנון נטוי, כאמצעי להטות טקסט באופן מלאכותי.
רגיל משמש כאשר מחזירים את הטקסט לסגנון רגיל.

סיכום

סגנון גופן משמש לשליטה בהטיית הטקסט, עם שלושה ערכים עיקריים: רגיל, נטוי, ו-אלכסוני.
בעיצוב, נטוי משמש לעיתים קרובות להדגשת טקסט, ואם הגופן אינו תומך בכך, ניתן להשתמש ב-אלכסוני להטיית הטקסט.

תכונת `צבע`

 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}

תכונת צבע היא תכונה בסיסית ב-CSS להגדרת צבע הטקסט. משתמשים בה לשינוי צבע הטקסט של אלמנטים ב-HTML, וניתן לציין צבעים בפורמטים שונים.

הסבר:

מחלקת צבע-אדום מגדירה את צבע הטקסט כאדום באמצעות מילה מפתח.
- ניתן לציין שמות צבעים כמו אדום, כחול, ירוק, שמוגדרים ב-CSS.
מחלקת צבע-הקס מגדירה צבעים באמצעות קודי צבע הקסדצימליים.
- ניתן לציין עם 3 ספרות כמו #F00. במקרה זה, #F00 הוא אותו צבע כמו #FF0000.
מחלקת צבע-rgb מגדירה צבעים באמצעות פורמט RGB.
- RGB: מפרט את הרכיבים אדום, ירוק וכחול בטווח של 0 עד 255.
מחלקת צבע-rgba משתמשת בפורמט RGBA להוספת שקיפות.
מחלקת צבע-hsl מגדירה צבעים באמצעות פורמט HSL.
- ניתן להגדיר צבעים באמצעות גוון, רוויה ובהירות. גוון מוגדר בין 0 ל-360 מעלות, ורוויה ובהירות מוגדרות בין 0% ל-100%.
מחלקת צבע-hsla משתמשת בפורמט HSLA להוספת שקיפות.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

כללי CSS `@`מאפייני CSS הקשורים לטקסט

תכונות CSS הקשורות לגופנים

YouTube Video

יצירת HTML לתצוגה מקדימה

טיפוגרפיה (קשורה לגופנים)

תכונת font-size

דרכים עיקריות לציון ערכים

ערכים מוחלטים(px, pt)

ערכים יחסיים(em, rem, %)

מילות מפתח

מילות מפתח יחסיות

דוגמאות שימוש נפוצות

דוגמאות לכיוונון גודל גופן

סיום

תכונת font-family

כיצד לציין font-family

תכונת font-weight

ערכים עיקריים של font-weight

מילות מפתח

ערכים מספריים

דוגמאות לשימוש ב-font-weight

שימוש מעשי

סיכום

תכונת font-style

ערכים עיקריים של font-style

normal

italic

oblique

oblique <angle>

שימוש ב-font-style

סיכום

תכונת צבע

הסבר:

YouTube Video

תכונת `font-size`

תכונת `font-family`

כיצד לציין `font-family`

תכונת `font-weight`

ערכים עיקריים של `font-weight`

דוגמאות לשימוש ב-`font-weight`

תכונת `font-style`

ערכים עיקריים של `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

שימוש ב-`font-style`

תכונת `צבע`