Schriftbezogene CSS-Eigenschaften

Articles

Dieser Artikel erklärt Schrift-bezogene CSS-Eigenschaften.

Sie können die Anwendungsfälle und die Schreibweise von Eigenschaften wie font-style und font-family lernen.

YouTube Video

Erstellen von HTML für die Vorschau

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>

Typografie (Schriftbezogen)

`font-size` Eigenschaft

 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 ist eine CSS-Eigenschaft, die verwendet wird, um die Größe von Text innerhalb eines Elements festzulegen. Sie wird verwendet, um die visuelle Bedeutung des Textes anzupassen und die Lesbarkeit zu verbessern. font-size kann mit verschiedenen Einheiten und Methoden angegeben werden.

Hauptmethoden zum Festlegen von Werten

Absolute Werte(px, pt)

Wenn Sie eine feste Größe verwenden möchten, die unabhängig vom Browser oder Gerät ist, geben Sie Schriftgrößen in absoluten Einheiten wie Pixeln oder Punkten an.

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

px: Pixel sind die am häufigsten verwendete Einheit. Geben Sie die Größe in Schritten von 1 Pixel an.

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

pt: Punkte sind Einheiten, die häufig im Druckwesen verwendet werden. 1 Punkt entspricht 1/72 Zoll.

Relative Werte(em, rem, %)

Sie können auch relative Schriftgrößen basierend auf der Schriftgröße eines übergeordneten oder Stamm-Elements angeben. Dies ist für responsives Design geeignet.

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

em: em ist eine relative Einheit, die auf der Schriftgröße des übergeordneten Elements basiert. Wenn die font-size des übergeordneten Elements 16px beträgt, entspricht 1em 16px.

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

rem: rem ist eine relative Einheit, die auf der Schriftgröße des Stamm-Elements basiert (normalerweise des <html>-Elements).

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

%: % wird als Prozentsatz relativ zur Schriftgröße des übergeordneten Elements angegeben.

Schlüsselwörter

Sie können auch Schlüsselwörter verwenden, um benutzerfreundliche Größen einfach anzugeben.

 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: Diese Schlüsselwörter definieren grundlegende Schriftgrößen, die je nach Browser variieren, aber einfach zu verwenden sind.

Relative Schlüsselwörter

Sie können relative Schriftgrößen mithilfe von Schlüsselwörtern im Verhältnis zum übergeordneten Element oder zur umgebenden Textgröße angeben.

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

larger: larger vergrößert die Schriftgröße im Vergleich zum übergeordneten Element.

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

smaller: smaller verkleinert die Schriftgröße im Vergleich zum übergeordneten Element.

Häufige Anwendungsbeispiele

Im responsiven Design werden em und rem häufig verwendet, um flexible Schriftgrößen basierend auf der Größe des übergeordneten oder Stamm-Elements anzugeben.
Im Fixdesign oder präzisen Design ist es üblich, px zu verwenden, um die Größe festzulegen.

Beispiele für Schriftgrößenanpassungen

 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}

Fazit

font-size ist eine wichtige Eigenschaft, um die visuelle Bedeutung und Lesbarkeit von Text anzupassen. Es ist wichtig, Einheiten und Schlüsselwörter entsprechend dem Designzweck oder für ein flexibles responsives Design angemessen zu verwenden.

Die Eigenschaft `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}

Die font-family-Eigenschaft kann hauptsächlich die folgenden zwei Arten von Werten angeben:.

Spezifische Schriftartnamen: Geben Sie den Namen einer bestimmten Schriftart an. Geben Sie Schriftarten an, die auf dem System installiert oder als Webfonts verfügbar sind.
- Beispiel:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Allgemeine Schriftgruppen: Geben Sie eine Gruppe von Ersatzschriftarten an, die verwendet werden sollen, wenn eine bestimmte Schriftart nicht verfügbar ist.
- Beispiel:
  - serif: Serif (z. B. Times New Roman, Georgia)
  - sans-serif: Sans-Serif (z. B. Arial, Verdana)
  - monospace: Monospace (z. B. Courier New, Lucida Console)
  - cursive: Kursive (z. B. Comic Sans MS)
  - fantasy: Fantasie (z. B. Papyrus, Impact)

Wie man `font-family` angibt

Beim Angeben mehrerer Schriftarten wird empfohlen, die Schriftartnamen mit Kommas zu trennen und am Ende eine allgemeine Schriftart als Ersatz hinzuzufügen.

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

In diesem Fall wird, falls Times New Roman nicht verfügbar ist, Georgia verwendet, und wenn keine von beiden verfügbar ist, wird eine serif-Schrift verwendet.

Die Eigenschaft `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 ist eine CSS-Eigenschaft, die verwendet wird, um die Dicke von Text festzulegen. Es spielt eine wichtige Rolle bei der visuellen Betonung und dem Stil von Text und wird verwendet, um den Schriftstil zu ändern. font-weight kann mit Zahlen oder Schlüsselwörtern angegeben werden, um eine Bandbreite von Stärken von dünn bis fett darzustellen.

Hauptwerte von `font-weight`

Schlüsselwörter

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

normal repräsentiert das standardmäßige Schriftgewicht. Es entspricht typischerweise 400.

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

bold repräsentiert fettgedruckten Text. Es entspricht typischerweise 700.

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

bolder repräsentiert Text, der fetter ist als das Elternelement.

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

lighter repräsentiert Text, der leichter ist als das Elternelement.

Numerische Werte

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

font-weight kann auch als Zahl zwischen 100 und 900 angegeben werden. Kleinere Zahlen ergeben dünneren Text, größere Zahlen führen zu fetterem Text. In der Regel unterstützen Schriftfamilien eine Reihe spezifischer Stärken, aber nicht alle Zahlen sind für alle Schriftarten verfügbar.

100: Dünn
200: Extra Leicht
300: Leicht
400: Normal
500: Mittel
600: Halbfett
700: Fett
800: Extra Fett
900: Schwarz

Beispiele zur Verwendung von `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}

Praktische Anwendung

Standardtext verwendet normalerweise 400 (normal).
Für Überschriften oder betonte Teile ist es üblich, 700 (bold) zu verwenden.
Je nach Design können auch Zwischenstärken wie 500 oder 600 verwendet werden, um Überbetonung zu vermeiden.

Zusammenfassung

font-weight ist eine Eigenschaft, die die Dicke des Textes angibt, mit Schlüsselwörtern wie normal oder bold oder Zahlen von 100 bis 900.
lighter und bolder passen sich relativ an die Dicke des Elternelements an.
Die Wahl eines geeigneten font-weight basierend auf Design und Lesbarkeit ist wichtig.

Die Eigenschaft `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 ist eine CSS-Eigenschaft, die verwendet wird, um den Stil von Zeichen festzulegen, insbesondere für die Anwendung von kursiven oder normalen Stilen. Diese Eigenschaft wird häufig für Textbetonung und Design verwendet, insbesondere bei Titeln und Zitaten.

Hauptwerte von `font-style`

`normal`

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

normal ist der Standardstil für Zeichen (normalerweise aufrecht stehende Zeichen).

`italic`

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

italic macht den Text kursiv (schräg). Dieser Stil kann angewendet werden, wenn die Schriftfamilie Kursivschrift unterstützt.

`oblique`

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

oblique macht den Text geneigt. Im Gegensatz zu italic kann der Text künstlich geneigt werden, wenn die Schriftart keine Kursivschrift-Version hat.

`oblique <angle>`

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

Geben Sie einen Winkel mit oblique an, um den Text um den angegebenen Winkel zu neigen. Diese Spezifikation dient der weiteren Anpassung von oblique. Derzeit unterstützen die meisten Browser keine Winkelangaben, aber einige schon.

`font-style` Verwendung

italic wird häufig für Hervorhebungen, Zitate und Buchtitel verwendet.
oblique wird oft verwendet, wenn eine Schriftart keinen kursiven Stil enthält, um den Text künstlich zu neigen.
normal wird verwendet, um zum normalen Textstil zurückzukehren.

Zusammenfassung

font-style wird verwendet, um die Neigung des Textes zu steuern, mit drei Hauptwerten: normal, italic und oblique.
Im Design werden Kursivschriften häufig verwendet, um Text hervorzuheben. Wenn die Schriftart dies nicht unterstützt, kann oblique verwendet werden, um den Text zu neigen.

`color` Eigenschaft

 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}

Die color-Eigenschaft ist eine grundlegende Eigenschaft in CSS, um die Farbe von Text festzulegen. Sie wird verwendet, um die Textfarbe von HTML-Elementen zu ändern und kann Farben in verschiedenen Formaten angeben.

Erklärung:

Die Klasse color-red gibt die Textfarbe mit dem Schlüsselwort „red“ an.
- Sie können Farbnamen wie red, blue, green angeben, die in CSS definiert sind.
Die Klasse color-hex gibt Farben mit hexadezimalen Farbwerten an.
- Sie können mit 3 Stellen wie #F00 angeben. In diesem Fall entspricht #F00 der gleichen Farbe wie #FF0000.
Die Klasse color-rgb gibt Farben mit dem RGB-Format an.
- RGB: Gibt die Komponenten Rot, Grün und Blau in einem Bereich von 0 bis 255 an.
Die Klasse color-rgba verwendet das RGBA-Format, um Transparenz hinzuzufügen.
Die Klasse color-hsl gibt Farben mit dem HSL-Format an.
- Farben können mit Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) angegeben werden. Der Farbton (Hue) wird von 0 bis 360 Grad angegeben, und Sättigung (Saturation) und Helligkeit (Lightness) werden von 0 % bis 100 % angegeben.
Die Klasse color-hsla verwendet das HSLA-Format, um Transparenz hinzuzufügen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-`@`-Regeln Textbezogene CSS-Eigenschaften

Schriftbezogene CSS-Eigenschaften

YouTube Video

Erstellen von HTML für die Vorschau

Typografie (Schriftbezogen)

font-size Eigenschaft

Hauptmethoden zum Festlegen von Werten

Absolute Werte(px, pt)

Relative Werte(em, rem, %)

Schlüsselwörter

Relative Schlüsselwörter

Häufige Anwendungsbeispiele

Beispiele für Schriftgrößenanpassungen

Fazit

Die Eigenschaft font-family

Wie man font-family angibt

Die Eigenschaft font-weight

Hauptwerte von font-weight

Schlüsselwörter

Numerische Werte

Beispiele zur Verwendung von font-weight

Praktische Anwendung

Zusammenfassung

Die Eigenschaft font-style

Hauptwerte von font-style

normal

italic

oblique

oblique <angle>

font-style Verwendung

Zusammenfassung

color Eigenschaft

Erklärung:

YouTube Video

`font-size` Eigenschaft

Die Eigenschaft `font-family`

Wie man `font-family` angibt

Die Eigenschaft `font-weight`

Hauptwerte von `font-weight`

Beispiele zur Verwendung von `font-weight`

Die Eigenschaft `font-style`

Hauptwerte von `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` Verwendung

`color` Eigenschaft