Erfahre, wie du mit CSS Farben und Abstände für DIV- und andere Container definieren kannst.
Abstrakte Grafik mit verschiedenen Schriften und Farben

Mit CSS kannst du für HTML-Elemente Farben hinzufügen, die Positionierung anpassen und andere Merkmale festlegen. Verwende CSS-Stile, um das Erscheinungsbild einzelner Elemente präziser zu steuern, das Layout besser zu strukturieren und das Design deiner Web-Seite insgesamt zu optimieren.

Durch CSS optimiertes Layout
Durch CSS optimiertes Layout

Kennst du dich mit Rändern und Auffüllungen aus? Das CSS-Modell unten bietet einen guten Überblick. Dieses häufig verwendete Modell veranschaulicht die Beziehung verschiedener CSS-Properties zu den HTML-Elementen, auf die sie verweisen.

Illustration des CSS-Modells
CSS-Modell

Vorbereitung.

Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne in Dreamweaver die Datei style_containers_practice.html.

Klicke links oben im Arbeitsbereich auf style_containers_practice.css. Rufe die Ansicht „Teilen“ auf. 

In der Ansicht „Teilen“ in Dreamweaver geöffnete CSS-Datei
Herunterladen und Speichern der Projektdateien

Seitenbereiche einfärben.

Suche den Selektor header. Du kannst die Farbe dieses Elements ändern, indem du die Property background-color hinzufügst. Sobald du einen Doppelpunkt nach „background-color“ eingibst, wird ein Kontextmenü angezeigt. Wähle in diesem Menü die Option Farbe. Verwende den Farbwähler. Oder gib den Hex-Code der gewünschten Farbe manuell ein.

Gib als Hintergrundfarbe für header, #main und #sidebar den Wert #FFFFFF ein. Lege als Hintergrundfarbe für footer den Wert #2F4666 fest.

Um Farben zu Seitenbereichen hinzuzufügen, können User den Farbwähler verwenden oder Hex-Codes eingeben.
Einfärben von Seitenbereichen

CSS.

header {
    background-color:#FFFFFF;
    ...
}
#main {
    background-color:#FFFFFF;
    ...
}
#sidebar {
    background-color:#FFFFFF;
    ...
}
footer {
    background-color:#2F4666;
    ...

Um Hintergrundfarben festzulegen, können User den Farbwähler verwenden oder Hex-Codes eingeben.
Wahl der Hintergrundfarben

Abschnittshöhen anpassen.

Um einem Abschnitt eine bestimmte Höhe zuzuweisen, füge die Property height hinzu. Setze für die Selektoren #main und #sidebar die Höhe auf 250 px.

CSS.

#main {
    ...
    height:250px;
    ...
}
#sidebar {
    ...
    height:250px;
    ...

Die Höhe eines Abschnitts wird mit der Property „height“ festgelegt.
Einrichtung der Höhe eines Abschnitts

Auffüllungen hinzufügen.

Mit der Property padding wird ein Abstand zwischen Inhalt und Rand eines Elements definiert. Richte für #main und #sidebar eine Auffüllung mit dem Wert 25 px ein. Damit wird ein Abstand von 25 Pixeln auf allen vier Seiten des Inhalts hinzugefügt.

CSS.

#main {
    ...
    padding:25px;
    ...
}
#sidebar {
    ...
    padding:25px;
    ...

Mit der Property „padding“ wird der Abstand zwischen Inhalt und Rand eines Elements definiert.
Hinzufügen einer Auffüllung für mehr Abstand

Auffüllungen hinzufügen (Fortsetzung).

Die Auffüllungswerte lassen sich über die Attribute „top“, „right“, „bottom“ und „left“ für alle Seiten individuell einstellen. Lege für den Bereich header folgende Auffüllungswerte fest: 1px 0px 1px 0px. Damit definierst du eine Auffüllung von 1 Pixel zwischen Inhalt und oberem Rand, 0 Pixel nach rechts, 1 Pixel nach unten und 0 Pixel nach links.

Gib für den Bereich footer die Auffüllungswerte 15px 0px 15px 0px ein.

CSS.

header {
    ...
    padding:1px 0px 1px 0px;
    ...
}
footer {
    ...
    padding:15px 0px 15px 0px;
    ...
}

Die obere, rechte, untere und linke Auffüllung werden separat geändert.
Separate Änderung der oberen, rechten, unteren und linken Auffüllung

Ränder hinzufügen.

Mit der Property margin wird ein transparenter Bereich um den Rahmen eines Elements eingefügt. Gib für die Property „margin“ des Bereichs #main die Werte 10px 50px 20px 0px ein. Dadurch werden folgende Ränder definiert: 10 Pixel über dem oberen Rand des Elements, 50 Pixel nach rechts, 20 Pixel nach unten und 0 Pixel nach links.

Gib für #sidebar folgende Randwerte ein: 10px 0px 20px 50px.

CSS.

#main {
    ...
    margin:10px 50px 20px 0px;
    ...
}
#sidebar {
    ...
    margin:10px 0px 20px 50px;
    ...
}

Ränder werden definiert, um einen transparenten Bereich um den Rahmen eines Elements zu erstellen.
Einrichtung von Rändern

Ränder hinzufügen (Fortsetzung).

Füge auch den restlichen Elementen im Layout die Property „margin“ hinzu.

Gib für header die Werte 10px 50px 20px 50px  ein. Setze für footer die Property „margin“ auf 0px 50px 0px 50px.

CSS.

header {
    ...
    margin:10px 50px 20px 50px;
    ...
}
footer {
    ...
    margin:0px 50px 0px 50px;
    ...
}

Ränder werden zum Header und zum Footer hinzugefügt, um das Layout fertigzustellen.
Hinzufügen von Rändern zum Header und Footer

Klicke auf Vorschau in Browser. Überprüfe das formatierte Layout in deinem bevorzugten Webbrowser.

Speichere die Datei, damit deine Änderungen angezeigt werden.

Über „Vorschau in Browser“ lässt sich das formatierte Layout im bevorzugten Webbrowser überprüfen.
Vorschau des formatierten Layouts im Webbrowser
10/18/2021
War diese Seite hilfreich?