1.1 Farbe
CSS (Cascading Style Sheets) bietet viele Eigenschaften für die Textgestaltung. Die wichtigsten darunter sind
color, font-size und font-weight. Diese Eigenschaften ermöglichen es, die Farbe
des Textes, seine Größe und die Schriftstärke zu kontrollieren. Schauen wir uns jede dieser Eigenschaften genauer an.
Die Eigenschaft color legt die Textfarbe fest. Sie kann mit verschiedenen Farbformaten wie Farbnamen, Hexadezimalwerten, RGB, RGBA, HSL und HSLA festgelegt werden.
Beispiele für die Verwendung
1. Farbnamen:
p {
color: red;
}
2. Hexadezimalwerte:
p {
color: #ff0000;
}
3. RGB und RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Transparente rote Farbe */
}
4. HSL und HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Transparente rote Farbe */
}
Beispiel für die Verwendung in HTML:
p {
color: #3498db; /* Blaue Farbe */
}
<body>
<p>Dieser Text wird blau sein.</p>
</body>
1.2 Eigenschaft font-size
Die Eigenschaft font-size legt die Textgröße fest. Der Wert kann in verschiedenen Einheiten angegeben werden, wie Pixel (px), in relativen Einheiten (em, rem, %), in auf Pixel basierenden Einheiten (mm, cm, pt, pc), vw und vh (viewport width und viewport height) und in anderen.
Beispiele für die Verwendung
1. Pixel:
p {
font-size: 16px;
}
2. Relative Einheiten:
%, em, rem
p {
font-size: 150%; /* 150% der Basis-Schriftgröße */
font-size: 1.5em; /* 1,5-mal größer als die Basis-Schriftgröße */
font-size: 1.5rem; /* Größe basierend auf der Schriftgröße des <html>-Elements */
}
3. "Viewport"-Einheiten:
p {
font-size: 2vw; /* 2% der Breite des Viewports */
font-size: 2vh; /* 2% der Höhe des Viewports */
}
Beispiel für die Verwendung in HTML:
p {
font-size: 18px; /* Textgröße 18 Pixel */
}
<body>
<p>Dieser Text wird 18 Pixel groß sein.</p>
</body>
1.3 Eigenschaft font-weight
Die Eigenschaft font-weight legt die Textstärke fest. Die Werte können als Schlüsselwörter
(normal, bold, bolder, lighter) oder als Zahlenwerte von
100 bis 900 angegeben werden, wobei 400 normal entspricht und
700 bold entspricht.
Beispiele für die Verwendung
1. Schlüsselwörter:
p {
font-weight: bold;
}
2. Zahlenwerte:
p {
font-weight: 300; /* Leichter Text */
font-weight: 700; /* Entspricht bold */
}
Beispiel für die Verwendung in HTML:
p {
font-weight: 700; /* Fettgedruckter Text */
}
<body>
<p>Dieser Text wird fett gedruckt sein.</p>
</body>
GO TO FULL VERSION