5 < 6 Webdesign | start | Webdesign 6 > 7

CSS-Befehle | Veriante 2: Gestaltung der Struktur im Style-Bereich

Elemente, die in einem Dokument häufig vorkommen, können an einem Ort im Dokument gestaltet werden. Im Stylebereich <style>...</style>

Ein HTML-Bereich <style>...</style>erlaubt die Gestaltung von Elemente mit CSS Befehlen

Aufgabe: Erstellen Sie in ihrem HTML-Dokument einen Bereich <style></style>

Aufbau eines CSS-Bereichs

Das Element style wird durch <style> zum Steuerbefehl. Er endet mit </style>Beides gehört zum HTML-Code. Dazwischen eröffnet sich die CSS-Welt

Aufbau eines CSS-Befehls im style-Bereich

<style>
    * {margin: 0;}

    h1 {
        color:blue;
        font-size:14px;
        border: 1px solid blue;
        padding: 4px;
        background-color: lime;
        font-weight: normal;
    }

    p, h1 {font-family:arial;} 
    p {
        font-style: italic;
        color: green;
    }

    p {
        font-style: italic;
        color: red;
    }

    div p {

        border: 1px solid blue;
        background-color: yellow;
    }
</style>

 

CSS-Befehlssatz

Ein CSS-Befehlssatz besteht aus Selektoren, geschweiften Klammern, darin die Befehle mit Angabe der Werte, die mit dem Befehl ausgeführt werden.

Selektoren: HTML-Elemente, die vor den geschweiften Klammern stehen nennt man Selektoren. Für diese gelten die Befehle, die in den geschweiften Klammern stehen. Soll der Befehl für mehrere Elemente gelten, werden diese jeweils durch ein Komma hintereinander angegeben.

Ein Element das nur dann gestaltet werden soll, wenn es innerhalb eines anderen Elementes steht, steht mit einem Leerzeichen hinter dem Element in dem es angeordnet ist. Soll ein Absatz (p) nur dann eine bestimmte Eigenschaft erhalten, wenn es innerhalb einer Box (div) steht, dann lautet der Selektor "div p".

Vererbung: Eigenschaften werden nach unten vererbt. Eigenschaften für übergeordnete Elemente werden an untergeordnete weitergegeben.

HIerarchie: Wird ein Element weiter unten im Befehlssatz erneut definiert, überschreibt diese Einstellung die obere. Inline-Styles, also eine Gestaltung dort, wo das Element auf der HMTL-Seite eingefügt wird, überschreiben Einstellungen, die im Style-Bereich festgelegt werden.

Aufgabe: Gestalten Sie das Gedicht "Gruselett" mit Hilfe der angegebenen Steuerbefehle. Setzen Sie das Gedicht in eine Box mit HIlfe des Elementes <div>...</div>. Geben Sie der Box einen Rand und eine Hintergrundfarbe.

Ausführung

<style>
h1 {...}
p {...}
div {...}
<style> <h1 style="color:blue;">Gruselett</h1>
<div>
    <h1>Gruselett</h1>
    <p>...</p>
</div>

Weitere CSS-Befehle

Außenabstand: margin: 20px (oder vier Abstandwerte im Uhrzeigersinn für oben, rechts, unten, links)
Innenabstand:
padding: 10px (oder vier Abstandwerte im Uhrzeigersinn für oben, rechts, unten, links)
Rundung der Ränder:
border-radius: 8px
Hintergrundfarbe: background-color: yellow
Rahmen: border: dashed 1px red (Einem Befehl können mehrere Werte mit Leerzeichen folgen. Hier Randart, Randstärke, Randfarbe)

Merksatz: Ergänzen Sie folgende Satzanfänge:

Gestaltung im Style-Bereich eignen sich...

Gestaltaung im Style-Bereich eignen sich nicht...

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).