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/).