Erfahren Sie, wie Sie mit CSS Farben und Abstände für DIV- und andere Container definieren können.
use-css-to-style-divs_1408x792

Mit CSS können Sie für HTML-Elemente Farben hinzufügen, die Positionierung anpassen und andere Merkmale festlegen. Verwenden Sie CSS-Stile, um das Erscheinungsbild einzelner Elemente präziser zu steuern, das Layout besser zu strukturieren und das Design Ihrer Web-Seite insgesamt zu optimieren.

Durch CSS optimiertes Layout
Durch CSS optimiertes Layout

Kennen Sie sich mit Rändern und Auffüllungen aus? Das CSS-Modell auf der rechten Seite bietet einen guten Überblick. Dieses häufig verwendete Modell veranschaulicht die Beziehung verschiedener CSS-Eigenschaften zu den HTML-Elementen, auf die sie verweisen.

CSS Box Model
CSS Box Model

Vorbereitung

Laden Sie die Projektdateien herunter, und extrahieren Sie sie. Öffnen Sie in Dreamweaver die Datei style_containers_practice.html.

Klicken Sie links oben im Arbeitsbereich auf style_containers_practice.css, und rufen Sie die Ansicht „Teilen“ auf. 

Herunterladen und Speichern der Projektdateien
Herunterladen und Speichern der Projektdateien

Seitenbereiche einfärben

Suchen Sie den Selektor header. Sie können die Farbe dieses Elements ändern, indem Sie die Eigenschaft background-color hinzufügen. Sobald Sie einen Doppelpunkt nach der Eigenschaft „background-color“ eingeben, wird ein Kontextmenü angezeigt. Wählen Sie in diesem Menü die Option Farbe. Verwenden Sie den Farbwähler, oder geben Sie den HEX-Wert der gewünschten Farbe manuell ein.

Geben Sie als Hintergrundfarbe für header, #main und #sidebar den Wert #FFFFFF ein. Legen Sie als Hintergrundfarbe für „footer“ den Wert #2F4666 fest.

Einfärben von Seitenbereichen
Einfärben von Seitenbereichen

CSS

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

Wahl der Hintergrundfarben
Wahl der Hintergrundfarben

Abschnittshöhen anpassen

Um einem Abschnitt eine bestimmte Höhe zuzuweisen, fügen Sie die Eigenschaft height hinzu. Setzen Sie für die Selektoren #main und #sidebar die Höhe auf 250 px.

CSS

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

Einrichtung der Höhe eines Abschnitts
Einrichtung der Höhe eines Abschnitts

Auffüllung hinzufügen

Durch Hinzufügen der Eigenschaft padding wird ein Abstand zwischen dem Inhalt und dem Rand eines Elements definiert. Richten Sie 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;
    ...

Hinzufügen einer Auffüllung
Hinzufügen einer Auffüllung für mehr Abstand

Auffüllung hinzufügen (Fortsetzung)

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

Geben Sie für den footer-Bereich die Auffüllungswerte 15px 0px 15px 0px ein.

CSS

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

Änderung der oberen, rechten, unteren und linken Auffüllung
Separate Änderung der oberen, rechten, unteren und linken Auffüllung

Ränder hinzufügen

Durch Hinzufügen der Eigenschaft margin wird ein transparenter Bereich um den Rahmen eines Elements eingefügt. Geben Sie für die Eigenschaft „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.

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

CSS

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

Einrichtung von Rändern
Einrichtung von Rändern

Ränder hinzufügen (Fortsetzung)

Fügen Sie auch den restlichen Elementen im Layout die Eigenschaft „margin“ hinzu.

Geben Sie für header die Werte 10px 50px 20px 50px  ein. Setzen Sie für footer die Eigenschaft „margin“ auf 0px 50px 0px 50px.

CSS

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

Hinzufügen von Rändern zum Header und Footer
Hinzufügen von Rändern zum Header und Footer

Klicken Sie auf Vorschau in Browser, und überprüfen Sie das formatierte Layout in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

Vorschau des formatierten Layouts im Webbrowser
Vorschau des formatierten Layouts im Webbrowser
04/13/2018
War diese Seite hilfreich?