CSS Grundlagen
- Schriftart definieren
- Schriftgröße definieren
- Schriftfarbe definieren
- Textausrichtung
- Text-Dekoration
- Hintergrundfarbe definieren
- Schriftfarbe definieren
- Rahmen – Border
- HTML Farbnamen
- CSS Box-Modell
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- Art der Positionierung: Position
- Art der Darstellung: Display
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- CSS Selektoren
- CSS Maßeinheiten
Inhaltsübersicht CSS Grundlagen
Eigenschaften für Text
Farben und Hintergründe definieren
Grundlagen Box-Modell?
Box-Positionierung
Zur Erinnerung: HTML dient dazu, die Struktur einer Webseite zu beschreiben. Dies erfolgt mit diversen HTML-Tags. Die visuelle Erscheinung der Webseite wird mit CSS definiert. Diese Aufteilung von Struktur und Design hat viele Vorteile. Grundsätzlich ist es vorteilhaft, wenn das Design vollständig von der Struktur getrennt wird. Dies erreicht man mit einer externen Styles-Datei, die in die HTML-Seite eingebunden wird.
externe Style-Sheets in eine HTML-Seite einbinden
Eine Website besteht normalerweise aus vielen, häufig sogar aus hunderten Webseiten, die gleich formatiert sein sollen. Hier hat sich durchgesetzt, dass das Stylesheet in einer separaten Styles-Datei gespeichert wird. Durch ein link-Tag im head-Bereich der HTML-Datei wird das Stylesheet mit der HTML-Datei verknüpft.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Titel der Webseite</title>
⋮
<!-- weitere Kopfinformationen -->
<!-- Kommentare werden im Browser nicht angezeigt -->
⋮⋮
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
⋮⋮
</body>
</html>Das link-Element ist ein Kind-Element vom head-Element.
Das rel-Attribut des link-Elements hat den Wert "stylesheet" und teilt dem Browser dadurch mit, dass das href-Attribut eine Referenz (URL) auf eine Stylesheet-Datei ist. Diese beiden Attribute sind notwendig und ausreichend.
Das Attribut type bezeichnet den Medientyp. Für CSS ist das der Wert "text/css". Da dies der Standard ist, kann diese Angabe weggelassen werden.
Das Attribut type bezeichnet das das Ausgabemedium. Erlaubt sind zum Beispiel die Werte "screen" für Bildschirm und "print" für Drucker. Wenn das Attribut nicht definiert ist, wird Standardwert "all" verwendet.
Wie sind CSS-Regeln aufgebaut?
Eine Regel besteht grundsätzlich aus drei Teilen:
einem Selektor (Englisch: Selector)
einer Eigenschaft (Englisch: Property)
und einem Wert (Englisch: Value)
Selektor {
Eigenschaft: Wert;
}Die wichtigsten CSS Regeln
Wenn man beginnt, mit Stylesheets zu arbeiten, lernt man zuerst die folgenden Eigeschaften kennen.
Schriftart
Definiert die Schriftart (Schriftfamilie) für einzelne HTML-Elemente oder für ganze Bereiche der Webseite. Es kann entweder eine einzelne Schriftart oder eine ganze Liste von alternativen Schriftarten angegeben werden.
Schriftgröße
Bestimmt die Schriftgröße für einzelne HTML-Elemente oder für ganze Bereiche der Seite. Die Schriftgröße kann in einer absoluten Einheit (z.B. px) oder in einer relativen Einheit (z.B. em) angegeben werden. Tipp: Benutze eine relative Einheit.
Text ausrichten
Gibt die Textausrichtung an. D.h. linksbündig, rechtsbündig, zentriert oder im Blocksatz.
Text-Dekoration
Bestimmt die Textauszeichnung. Damit wird angegeben, ob Text unterstrichen oder durchgestrichen dargestellt werden soll. Tipp: Vermeide es, Text zu unterstreichen. Denn unterstrichener Text könnte mit einem Link verwechselt werden.
Background
Definiert die Hintergrundfarbe für einzelne HTML-Elemente oder ganze Bereiche der Webseite.
Color
Definiert die Schriftfarbe (oder allgemeiner Vordergrundfarbe). Achte stets darauf, dass der Kontrast zwischen Hintergrund und Vordergrund ausreichend groß ist.
Margin
Mit dieser Eigenschaft wird der Außenabstand eines HTML-Elements zu seinem Eltern-Element und zu seinen Nachbar-Elementen festgelegt. Die Abstände für alle vier Seiten (oben, unten, rechts und links) können individuell konfiguriert werden. Der durch margin definierte Außenabstand wird als Weißraum oder Leerraum bezeichnet. Durch Weißräume kann das Layout einer Seite wirkungsvoller gestaltet werden.
Padding
Diese Eigenschaft bezeichnet den Innenabstand eines HTML-Elements. Der Innenabstand bezeichnet den Abstand eines Elements zu seinem eventuell nicht sichtbaren (transparenten) Rahmen. Der Abstand zum Rahmen kann für alle vier Seiten (oben, unten, rechts und links) individuell konfiguriert werden.
Border
Diese Eigenschaft definiert den Rahmen für ein HTML-Element. Der Rahmen kann für alle vier Seiten des Elements individuell bestimmt werden.
Box-Modell
Alle Elemente werden grundsätzlich als rechteckige Box (Kasten) dargestellt. Das Box-Modell ist für das Verständnis von Stylesheets von grundlegender Bedeutung. Je besser Du dieses Modell verstehst, desto leichter wird dir das Gestalten von Webseiten gelingen.