HTML-Elemente mit CSS-Befehlen gestalten
Hierarchie:
CSS-Befehle als Inlinestyle überschreiben Befehle im Style-Bereich. CSS-Befehle im Style-Bereich sind stärker als Befehle in einer externen CSS-Datei. Definitionen für Elemente, die zuletzt geschrieben werden überschreiben Definition der gleichen Elemente, die zuvor schon definiert wurden.
Beispiel: Wird als letzter Befehl in einer CSS-Datei für h1 die Farbe rot definiert, werden alle zuvor definierten Definitionen für h1 auf rot gesetzt.
Einsatz von CSS-Befehlen
Eine CSS-Definition kann
- einem HTML-Element (h1, h2, body, html, ul, li, a, table, p, span, div, ...) oder
- einer Klasse (.autor, .box1, ...) oder
- einer ID (#header, #content, #navigation, ...)
zugewiesen werden
Grundaufbau der Difinition
- Der Befehl (z.B. font-size, color, margin, padding, ...)
- Ein Doppelpunkt (:) als Trennzeichen
- Wert(e) für diesen Befehl (z.B. color als Wert für die Schriftfarbe)
- Semikolon (;), das den Abschluss des Befehls bekannt gibt.
Durch Semikolon getrennt, können jedem Element, jeder Klasse oder ID mehrere Befehle zugeordnet werden.
Befehle können einem Element direkt als sogenannte Inlinestyles (style="befehl:wert;"), in einem separaten Bereich im HTML-Dokument (zwischen <style> und </style>) oder in einer externen CSS-Datei untergebracht werden. Diese enthält ausschließlich die CSS-Befehle (ohne <style></style>!) und muss im Dateinamen die Endung .css tragen.
Beispiel:
Inlinestyle: <h1 style="color:red;">Überschrift</h1>
Stylebereich: <style>h1 {color:red} </style>
CSS-Datei: Link in HTML-Dokument auf externe CSS-Datei: <link href="NameDerCssdatei.css" type="text/css" rel="stylesheet">
in der CSS-Datei steht ausschließlich der Befehl: h1 {color:red;}
Aufgabe 1: Überschrift h1 in roter Farbe mit CSS-Befehl im Element
Aufgabe 2: Unterüberschrift h2 grün in separatem Style-Bereich im Dokument
<!-- Aufgabe 2: h2 wird in einem separaten Style-Bereich definiert -->
<style type="text/css">
h2 {color: green;} /* h2 soll grün dargestellt werden */
</style>
<h2>Unterüberschrift</h2>
Unterunterüberschrift h3 blau erhält sein Aussehen über die externe CSS-Datei eva.css
<!-- zu Aufgabe 3: h3 wird in einer externen CSS-Datei Definiert -->
<!-- Link auf die externe CSS-Datei -->
<link href="eva.css" rel="stylesheet" type="text/css">
<!-- h3 mit Inhalt -->
<h3>Unterunterüberschrift</h3>
Externe CSS-Datei (eva.css)
/* CSS-Datei eva.css*/
/* Aufgabe: h3 soll blau dargestellt werden */
h3 {color:blue;}
Wichtige CSS-Befehle
border, margin und padding
<style>
h1 {
border: solid 20px blue;
margin: 30px;
padding: 30px;
background-color: yellow;
}
</style>
<div style="background-color: red">
<h1>Hallo Welt</h1>
<h1>Hallo Erde</h1>
bewirkt folgendes Aussehen
margin: 10px 5px 2px 10px; /* Außenabstand oben, rechts, unten, links */
margin-top: 10px;
margin-right: 5px;
margin-bottom: 2px;
margin-left: 10px;
padding: 10px 5px 2px 10px; /* Aufbau des Innenabstandes wie bei margin */
border: solid 10px blue; /* der erste Wert ist notwendig; fehlt die Dicke und die Farbe werden voreingestellte Werte verwendet */
Schrift (Größe, Familie, Farbe, Style)
font-size: 10px; /* Größe kann auch in %, em, pt verwendet werden */
font-family: arial, verdana, sans-serif; /* Browser zeigt die Schrift an, die installiert ist */
color: red; /* Schriftfarbe */
font-style: italic /* kursiv */
font-weight: bold /* fett */
Textausrichtung
text-align: center; /* Mittelachsensatz */
text-align: justify; /* Blocksatz */
Breite und Höhe
width: 300px; /* Die Breite kann auch z.B. in % angegeben werden, wenn eine Bezgsgröße existiert.*/
height: 500px; /* Die Höhe kann auch z.B. in % angegeben werden, wenn eine Bezugsgröße existiert.*/
Hintergrund
background-image:url(bilder/schatten.png) /* in (...) kann auch ein kompletter Internetpfad stehen */
background-color: blue; /* oder beliebiger Farbwert in der Form #ffff00 */
Anzeige
display: block; /* zeigt Elemente untereinander (z.B. span {display: block} */
display: none; /* zeigt Elemente und den belegte Raum nicht an */
visibility: hidden /* Element ist nicht sichtbar aber der benötigte Raum wird angezeigt */
Elemente umfließen lassen
float-left; /* element steht links und wird vom nachfolgenden Inhalt umflossen
Universalselektor *
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).