Um Tags für einen Stil zu selektieren, definieren wir die Stile in einem speziellen Bereich <style> [s,a,w] des HTML-Headers (<head>). Dazu benutzen wir eine eigene CSS-Syntax: Selektor: { CSSEigenschaft1: Wert; CSSEigenschaft2: Wert; … }.
Anmerkung: Nicht umsonst wird in diesem Buch verschiedene Farben für die verschiedenen Sprachen HTML, CSS und JavaScript benutzt. Ihre Syntaxen sind grundlegend verschieden und sie sollten sie deshalb nicht durcheinander bringen (s. Anhang: Syntaxübersicht).
… <head> <title>09 Meine Visitenkarte (css inline)</title> <style type="text/css"> /* … Formatdefinitionen … */ #Nachname { font-weight:bold; } </style> </head> …
Erklärungen zur Syntax der Stildefinitionen finden sie im Anhang: CSS-Syntax.
Im Beispiel finden sie die übliche Vorgehensweise einen Stil für das HTML- Universalattribut id="" zu spezifizieren. Das heißt der Selektor #Name selektiert beisielsweise das HTML-Tag <span id="Name">. Der „Name“ muss innerhalb der HTML-Datei eindeutig sein, darf also kein zweites Mal vorkommen. Wollen sie mehreren Tags den gleichen Stil zuweisen, benutzen sie das Attribut <span class="Beruf">, welches sie mit dem Selektor .Beruf selektieren.
| HTML Element | CSS Selektor | Beschreibung |
|---|---|---|
| <span id="ID"> | ID { E: W; } | Stil für „ID“ |
| <span class="Klasse"> | .Klasse { E: W; } | Stil für „Klasse“ |
Die HTML-Tags <span> [s,a,w] und <div> [s,a,w] sind speziell für CSS-Formatierungen geschaffen worden.
Weitere CSS Eigenschaften (Formatierungen) finden sie im Anhang: CSS-Eigenschaften oder im Selfhtml Wiki.
Übung:
Schreiben sie den Quellcode mit der Stildefinition im Header um.
Wächst ihre Webpräsenz über diese eine Seite hinaus, ist das Einbetten von Stildefinitionen innerhalb der HTML-Seite von Nachteil – entsprechende Stiländerungen müssten sie in alle Dateien permanent übertragen. Deshalb sollten sie die Stildefinitionen in eine eigene Datei auslagern:
/* Definitionen */
#Name { font-weight:bold; }
#Grad { font-size: small; }
.Beruf { font-style: italic; }
a { text-decoration:none; color:WindowText;}
a:before { content:"→"; color: blue; }
a:hover { color: blue; }
hr { width: 300px; margin-left: 0; }
.label { display: inline-block; width: 3em; }
Für dieses Beispiel müssen wir unsere Tabelle erweitern:
| HTML Element | CSS Selektor | Beschreibung |
|---|---|---|
| <span id="ID"> | #ID { E: W; } | Stilzuweisung an ID |
| <div class="Kl"> | .Kl { E: W; } | Stilzuweisung an Klasse |
| <hr> | hr { E: W; } | Stilzuweisung an alle <hr> |
| _<a> | a:before { E: W; } | Stilzuweisung für den Bereich vor <a> |
| <a> | a:hover { E: W; } | Stilzueisung für <a>, wenn es mit der Maus überfahren wird. |
Hinweis: Der Internet Explorer kennt die Pseudo-Eigenschaften :before und :after erst ab Version 8.
Anmerkung: An dieser Stelle kommt das erste Mal eine zweite Datei ins Spiel. Für diese CSS-Datei erstellen sie eine neue leere Datei im Texteditor und kopieren dort alles hinein was zwischen <style type="text/css"> und </style> steht. (Und ergänzen beispielsweise mit dem obigen Beispiel.) Diese Datei speichern sie dann unter einen Namen wie visitenkarte.css oder stylesheet.css.
In der HTML-Datei steht dann nur noch ein Verweis (<link> [s,a,w]) auf diese externe Datei. Also müssen sie den ganzen Text innerhalb von <style type="text/css"> … </style> inklusive dieser Tags wie folgt löschen:
… <head> <title>10 Meine Visitenkarte (css datei)</title> <link rel="stylesheet" type="text/css" href="10_visitenkarte.css" /> </head> …
Übung:
Schreiben sie den Quellcode entsprechend um und probieren sie andere Formatierungen aus der Referenz.
(Beispiel 10_visitenkarte_css.html
/ Beispiel 10_visitenkarte.css)
Hinweis: Sie können natürlich auch interne und externe Stylesheets mischen (wie im Beispiel 10 geschehen). Allerdings sollten sie dann darauf achten, dass auch nur seitenspezifische Formatierungen im (seiten-)internen Stylesheet stehen.
Wie versprochen kommen wir noch einmal auf Block- und Inline-Elemente zurück. Wenn sie sich das Styleesheet aus dem Beispiel genau anschauen, finden sie die CSS-Eigenschaften display: inline-block; und width: 3em;.
Wie schon geschrieben, bilden Blockelemente eine logischen „Block“, dem man entsprechend auch unter anderem eine Höhe (height) und Breite (width) zuweisen kann. Inline-Elemente stehen mitten im fließenden Text. Es macht also normalerweise keinen Sinn ihnen Höhe und Breite zu geben.
Um möglichst flexibel zu bleiben, kann CSS aber HTML-Tags umetiquettieren. CSS kann also Blockelement in Inline-Elemente und umgekehrt verwandeln. Dazu existiert die Eigenschaft display [w,c]. Allerdings kennt diese Eigenschaft auch den Wert „inline-block“, der das Tag als Inline-Element belässt, aber trotzdem eine Zuweisung einer Breite erlaubt. Damit ist es einfach Texte untereinander zu positionieren.
Im Anhang: CSS-Eigenschaften finden sie weitere Hinweise auf Block- oder Inline-Eigenschaften. Allerdings können sie fast alle Inline-Eigenschaften auch Blöcken zuweisen. Zu den Einheiten (hier em) lesen sie am besten Anhang: CSS-Einheiten und Farben.