Weitere Informationen zu CSS
Lassen Sie uns weitere Möglichkeiten untersuchen, wie CSS die Verwaltung Ihrer Inhalte vereinfachen und Ihre Inhalte für Ihre Leser*innen interessanter gestalten kann.
Kommentare
Wie bei jeder Computersprache unterstützt CSS Kommentare. Um in einem CSS-Abschnitt zu kommentieren, würden Sie /* comment */ verwenden. Der /*-Code identifiziert den Anfang des Kommentars und */ markiert das Ende. Ein CSS-Kommentar kann mehrere Textzeilen umfassen. Kommentare sind eine großartige Möglichkeit, Notizen für sich selbst oder andere Entwickler*innen zu hinterlassen oder sich beim Erlernen der Sprache Notizen zu machen.
Wichtig
CSS-Kommentare sind öffentlich und sowohl für den Browser als auch für die Benutzer*innen Ihrer Website zugänglich. Speichern Sie keine vertrauliche Informationen in den Kommentaren.
CSS-Kommentare werden anders formatiert als HTML-Kommentare. Kommentare in HTML verwenden die <!--comment-->-Syntax.
Festlegen von Schriftarten
Sie können CSS verwenden, um dem Browser mitzuteilen, welche Schriftart Sie für bestimmten Text verwenden möchten. Manchmal möchten Sie Arial aufgrund der Lesbarkeit oder eine fantasievollere Schriftart für den Stil verwenden. Die folgende Abbildung zeigt Text in Arial und anderen Text in einer Schriftart namens „Impact“.
Die häufigste Option zum Festlegen der Schriftart, die auf einer Seite verwendet werden soll, ist font-family.
font-family wird in der Regel auf eine Liste von Schriftarten festgelegt, sodass der Browser die erste aufgeführte Schriftart verwenden kann, die er unterstützen kann. Zum Beispiel eine Einstellung von Tahoma, Verdana, sans-serif Versuchen, Tahoma zu verwenden, gefolgt von Verdana und schließlich eine generische serifenlose Schriftart.
Sie können auch andere Optionen verwenden, z. B. Stil, Gewichtung und Dekoration.
font-style wird verwendet, um Text kursiv zu machen, indem der Wert auf italic festgelegt wird.
font-weight unterstützt verschiedene fett formatierte Einstellungen, wobei bold die gängigste ist. Schließlich wird text-decoration für underline-, overline-oder line-through-Text verwendet.
| CSS | Ergebnis |
|---|---|
font-weight: bold; |
Demo |
font-style: italic; |
Demo |
text-decoration: line-through; |
|
text-decoration kann sich von den anderen Optionen unterscheiden, die zum Ändern der Anzeige einer Schriftart verwendet werden. Der Hauptunterschied besteht darin, dass text-decoration die Formatvorlage um oder auf den Text anwendet, aber die tatsächliche Schriftart selbst nicht geändert wird. Die Einstellungen „fett“ und „kursiv“ ändern die Schriftart.
Hinweis
Die Verwendung von Unterstreichungen auf einer Webseite sollte in der Regel vermieden werden, da der Text wie ein Hyperlink aussehen kann.
Größenanpassung von Schriftarten
Mit font-size können Sie den Schriftgrad angeben, den Sie verwenden möchten. CSS bietet die Möglichkeit, die absolute oder relative Größenanpassung zu verwenden. Die absolute Größenanpassung wird in der Regel in Pixel festgelegt und verwendet immer die angegebene Größe. Die relative Größenanpassung kann auf der Standardgröße für den Browser basieren und wird in Prozent oder auf der Größe des Verweiselements gemessen.
Hinweis
Der Standardschriftgrad für viele Browser beträgt 16 Pixel.
Die absolute Größenanpassung kann in Pixeln gemessen werden und wird in CSS mithilfe von pxangegeben. Um eine Schriftart auf 14 Pixel festzulegen, können Sie die font-size: 14px;-Anweisung verwenden.
Die relative Größenanpassung für Schriftarten wird in der Regel mit em oder rem gemessen.
em ist die Abkürzung für „element“ und relativ zum übergeordneten (em) oder Stammelement (rem). Das html-Element ist das Stammelement.
1em oder 1rem entsprechen jeweils der Größe des übergeordneten oder Stammelements, während 2em oder 2em doppelt so groß ist. Da die Bildschirmgrößen variieren können, empfiehlt es sich in der Regel, nach Möglichkeit relative Größenanpassungen zu verwenden.
Betrachten Sie den folgenden HTML- und CSS-Code als Beispiel:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Wenn das div Element 14 Pixel groß ist, weil das übergeordnete Element 1em auf divfestgelegt ist14px, wäre es 18 1rem Pixel, da die html Wurzel auf 18pxfestgelegt ist.
1.5em für das div-Element beträgt 21 Pixel (14 * 1,5 = 21), und 1.5rem beträgt 27 Pixel (18 * 1,5 = 27). Sie können em und rem verwenden, um sicherzustellen, dass die restliche Seite skaliert wird, wenn Sie die übergeordneten Größen oder Stammgrößen aktualisieren.
Farben
Die Schriftfarbe kann mithilfe der color-Eigenschaft festgelegt werden.
color kann auf RGB-Werte (rot, grün, blau) oder auf eine von vielen benannten Farben wie black oder lightgrayfestgelegt werden.
RGB-Werte in CSS können Hexadezimalwerte sein, denen ein #-Präfix oder Werte von 0 bis 255 innerhalb der rgb-Funktion vorangestellt sind. Um die Farbe auf den Standardton Braun festzulegen, verwenden Sie color: brown;. Für einen benutzerdefinierten Lilaton können Sie color: #7462e0 verwenden.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Wichtig
Die Farbauswahl sollte immer die Benutzer*innen berücksichtigen, die ein Farbsinnstörung haben. Sie können Tools wie Color Safe verwenden, um die Auswahl kontrastreicher Farben zu unterstützen, um sicherzustellen, dass Ihre Website für alle Benutzer*innen zugänglich ist.
Wie Sie vielleicht vermuten, sind Dutzende von benannten Farben verfügbar, und RGB-Werte bieten eine unendliche Reihe von Optionen. Editoren wie vscode.dev oder Visual Studio Code können Sie dabei unterstützen, die verfügbaren Farbwerte zu identifizieren. Beide Editoren zeigen eine Vorschau des Farbfelds in Ihrem CSS an. Wenn Sie mit der Maus über das Farbfeld fahren, wird eine Farbauswahl angezeigt, mit der Sie die gewünschte Farbe einstellen können.
