Das fürs WWW zuständige Normierungs- und Standardgremium, das W3C, hat festgelegt, dass HTML lediglich für die Auszeichnung einer Dokumentstruktur zu verwenden ist. Für's Aussehen (und nicht nur dafür) dagegen sind die CSS zuständig.
Mit Einsatz von CSS befinden sich im HTML-Code nur noch struktur-relevante Informationen. Jegliche Formatierungsangaben werden (idealerweise in externe Dateien) ausgelagert. Dieses Prinzip bildet die Grundlage für die meisten der hier genannten Vorteile.
Viel mehr als im Folgenden
dargelegt findet sich hier:
CSS 4 YOU The finest in Stylesheets.
Für die Html-Kurs-Seiten gibt es auch eine Stylesheet-Datei:
projekt.css
Hier eine mit CSS formatierte Beispielseite!
Vor- und Nachteile von CSS
- Größere Layoutmöglichkeiten:
- kürzere Zeiten
zur Erstellung und Pflege von Homepages: Von einer einzigen Datei aus kann ein komplettes Homepage-Design erstellt und bei Bedarf geändert werden.
- Schnellere Übertragung:
CSS macht zahlreiche HTML-Wiederholungen überflüssig. Weniger Code bedeutet schnelleren Download.
- Homepage funktioniert auch noch bei alten Browsern:
Auch bei Browsern, die CSS nicht unterstützen, wird die Homepage noch angezeigt (allerdings dann ohne CSS-Design).
- Unterschiedliche Unterstützung durch Browser:
Größter Nachteil ist teilweise uneinheitliche Unterstützung durch Browser. Deshalb sollten nicht alle CSS-Definitionen eingesetzt werden.
Schneller, schöner formatieren mit CSS
Über CSS kann die Formatierung einfach und elegant vorgenommen werden. So können z. B. Schriftattribute wie Farbe, Schriftart und -schnitt und Abstände bequem eingestellt werden. CSS sind vergleichbar mit den Formatvorlagen in Word.
Das Besondere an CSS ist, dass diese "Formatierungen" durch Auslagerung dann einfach für alle Seiten einer Homepage gelten. Dementsprechend werden bei Änderungen nur noch an einer Stelle diese Änderungen durchgeführt und alle Seiten einer Homepage sind geändert.
CSS ist in der Version 1 so weit verbreitet, dass es problemlos eingesetzt werden kann. Vielfach verstehen die Browser auch die Version 2. Das Besondere an CSS ist, dass Browser, die kein CSS kennen, absolut kein Problem mit CSS haben. Alte Browser ignorieren CSS einfach und der Seitenaufbau funktioniert trotzdem. CSS greift nicht in die HTML-Befehle ein, sondern wird darüber gelegt.
Aufbau von CSS Befehlen
Grundlagen des CSS Konzept
CSS ist einfacher als im Allgemeinen angenommen. Es gibt nur ein paar grundlegende Regeln zum Erfolg mit CSS:
Aufbau:
Selektor Deklaration H1 {COLOR: green} H1 (oder irgend etwas anderes): Selektor - darauf bezieht sich der zweite Teil, die Deklaration.
{ ... } : Vereinbarung (Declaration), wie was aussehen soll.
Im Beispiel sollen alle Überschriften H1 nun die Farbe rot bekommen.
Eigenschaften und Werte
Die Vereinbarung (Deklaration) besteht aus zwei Teilen: dem Eigenschaftsteil, wie z. B. Farbe, Größe, und der dazugehörige Wert, wie rot(Farbe) oder 30 (Größe).
TAG {Eigenschaft: Wert}
Vererbung
Die Deklarationen können vererbt werden. Wird z. B. für das <BODY>-Tag die Farbe per CSS bestimmt, hat der <LI>-Tag automatisch die gleiche Farbe, wenn diese dort nicht definiert ist.
Cascading:
Es kann mehrere Style Sheets geben, die auch konkurrierend sein können. Wer dann jeweils "gewinnt", hängt von verschiedenen Regeln ab. So kann z. B. auch ein Design extra für den Ausdruck definiert werden.
CSS im <Head>-Tag
Nun zur praktischen Umsetzung. Als folgendes Beispiel
soll das CSS folgende Regeln haben:
- Zeichensatz soll Verdana sein, und falls dieser nicht installiert ist,
als Alternative Arial bzw. Helvetica und als
letzte Alternative sans serif (Irgeneine installierte serifenlose Schriftart).
- <BODY> Farbe ist grün
- Überschrift <H1> ist rot und 18 Punkt
groß
- Überschrift <H2> ist 14 Punkt groß
- <P>-Tag ist 10 Punkt groß
Dazu müssen folgende Zeilen in den <HEAD>- Bereich.
<STYLE TYPE = "text/css">
BODY {font-family:Verdana, Arial, Helvetica, sans-serif; COLOR: green;}
H1 {FONT-SIZE: 18pt; COLOR: red;}
H2 {FONT-SIZE: 14pt}
P {FONT-SIZE: 10pt}
</STYLE>
Wichtig:
- Die Klammern sind geschweift: {}
- Bitte die Farben beachten. Hier ist das Prinzip der
Vererbung am besten sichtbar. H1 ist grün und H2 erbt von diesem
die Farbe. Alle Tags innerhalb des Body-tags, wenn nicht anders
definiert, erben also die Attribute. In diesem Beispiel die Farbe.
- Zeichensatzauswahl: Immer mehrere Zeichensätze zur Auswahl geben,
da nicht davon ausgegangen werden kann, dass alle Zeichensätze installiert
sind. Ist also Verdana nicht installiert, wird Arial angezeigt.
- Zeichensatz: Schriften, deren Namen aus mehr als
einem Wort besteht, müssen in Anführungszeichen eingebettet
werden, z.B. "Comic Sans MS".
- Mehrere Deklarationen innerhalb eines Tags müssen durch Semikolon getrennt werden.
Befehl direkt im Quellcode
Direkt im Quellcode wirkt der Befehl nur an dieser bestimmten Stelle der Seite, so dass man abweichende Designs verwenden kann.
Beispiel:<h1 style="letter-spacing:30;" >Überschrift</h1>Alle Buchstaben bis zum Ende von </h1> werden jeweils mit einem Abstand von 30 zwischen den Buchstaben dargestellt.
Natürlich können die Befehle auch kombiniert werden.
Zusätzlich zur Buchstabenbreite kommt jetzt noch
eine andere Farbe hinzu:
<h1 style="letter-spacing:30;color:red" >Überschrift</h1>
Hier ist natürlich die Frage berechtigt, warum nicht gleich mit den gewohnten HTML Befehlen? Die Logik der Sache wird klar, wenn man diese Formatdefinitionen auslagert. Dadurch kann dann z. B. eine Einstellungen erstellt werden, die dann für alle <h1> gelten, ohne dass speziell noch in den HTML-Tag eingegriffen werden muss.
Auslagern von CSS-Befehlen
Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites ein Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll.
Verweis in der HTML-Datei:
Dieser Verweis sollte im head-Bereich eingegeben werden.
<link rel="stylesheet" href="design.css" type="text/css">
So, nun erstellen wir eine neue Datei mit dem Namen
"design.css".
Inhalt:
H1 { color : red; letter-spacing : 30;}
Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum Zuge!! So, Datei abspeichern und im HTML Editor zurück zur ursprünglichen Internetseite.
CSS-Befehl
Anbei die wichtigsten CSS Befehle zum Ausprobieren:
| Befehl | Bedeutung | weitere mögliche Angaben |
| Schrift | ||
| font-family : | Schriftart | Arial, Times New Roman, etc. |
| font-size : | Schriftgröße | numerischer Wert in pt(Punkt) mm oder cm |
| color : | Schriftfarbe | red, green, white usw. oder HTML Farbangabe |
| font-variant: | Schriftvariante | normal, small-caps |
| font-weight: | Schriftgewicht | normal, bold, bolder, lighter |
| font-style: | Schriftstil | normal, oblique, italic |
| Textgestaltung | ||
| text-align : | Textausrichtung | left, right, center, justify (Blocksatz) |
| line-height : | Zeilenabstand (Durchschuß) | numerischer Wert in pt(Punkt) mm oder cm |
| text-decoration : | Textgestaltung | underline, overline, line-through, blink |
| word-spacing: | Wortabstand | numerischer Wert in pt(Punkt) mm oder cm |
| letter-spacing: | Zeichenabstand | numerischer Wert in pt(Punkt) mm oder cm |
| text-indent: | Texteinrückung | numerischer Wert in pt(Punkt) mm oder cm |
| text-transform: | Textart | capitalize, upppercase, lowercase, none |
| Seitenränder | ||
| margin-left : | absoluter Abstand zum Seitenrand | numerischer Wert in pt(Punkt) mm oder cm |
| margin-right : | absoluter Abstand zum Seitenrand | numerischer Wert in pt(Punkt) mm oder cm |
| margin-bottom: | absoluter Abstand zum Seitenrand | numerischer Wert in pt(Punkt) mm oder cm |
| margin-top : | absoluter Abstand zum Seitenrand | numerischer Wert in pt(Punkt) mm oder cm |
| Links | ||
| A:link | Link | fast alle CSS-Befehle anwendbar |
| A:visited | Besuchter Link | fast alle CSS-Befehle anwendbar |
| A:active | Angeklickter Link | fast alle CSS-Befehle anwendbar |
| A:hover | Link beim überfahren mit Maus | fast alle CSS-Befehle anwendbar |
| Bilder | ||
| background : | Hintergrundfarbe | red, green, white usw. oder HTML Farbangabe |
| background-image | Hintergrundbild | none, URL |
| background-repeat | Kachel | repeat, repeat-x, repeat-y, no-repeat |
| Ränder | ||
| border-top-width: | Dicke der Rahmenlinie | thin, medium, thick oder num. Wert |
| border-bottom-width: | Dicke der Rahmenlinie | thin, medium, thick oder num. Wert |
| border-left-width: | Dicke der Rahmenlinie | thin, medium, thick oder num. Wert |
| border-right-width: | Dicke der Rahmenlinie | thin, medium, thick oder num. Wert |
| border-style | Rahmentyp | none, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-color | Rahmenfarbe | Farbname oder Hex. |
| padding-top | Tabellenabstand oben | Prozent oder num. Wert. |
| padding-bottom | Tabellenabstand unten | Prozent oder num. Wert. |
| padding-right | Tabellenabstand rechts | Prozent oder num. Wert. |
| padding-left | Tabellenabstand links | Prozent oder num. Wert. |
| width | Rahmenbreite | Auto, Prozent, num. Wert |
| height | Rahmenhöhe | Auto, Prozent, num. Wert |
Weiterführende Informationen gibt es hier:
Tipps und Tricks
Abstand nach Überschriften etc.
Teilweise ist der Abstand nach einem Blockelement wie z.B. die Überschrift nicht erwünscht. Dieser Abstand kann sehr einfach über CSS wie gewünscht eingestellt werden.
Abstände komplett aufheben - Abstände nach oben/unten definieren:
<h1 style="margin-bottom: 0px;">H1-Überschrift</h1>
<p style="margin-top: 0px;">Fließtexte usw. usw.</p>
Nach belieben kann der Abstand geändert werden - einfach die gewünschte Pixelzahl einstellen. Also anstatt 0px z.B. dann 3px
<h1 style="margin-bottom: 3px;">H1-Überschrift</h1>
Bilderrahmen mit Punkten bei Mauskontakt
Wenn ein Bild mit der Maus überfahren wird, erscheinen anstatt dem normalen Rahmen ein gepunkteter Rahmen
für die ausgelagerte css-Datei
:hover img { border: 1px dashed #0000FF }
für die HTML-Seite
<a href="seite.htm">
<img src="bild.jpg" alt="" border="1">
</a>
Anfangsbuchstaben hervorgehoben
Besonders als erster Buchstaben in einem Absatz. Lockert den Absatz auf und dient dem Aussehen. Nachtürlich sollte genug Text folgen, damit dieser den Buchstaben "umfließen" kann. Ist der Browser nicht CSS-tauglich, wird der Buchstaben ganz normal angezeigt.
für die ausgelagerte css-Datei
.letterspeziale
{ float: left;
font-size: large;
font-weight: bolder;
padding: 5px;
background: midnightblue;
color: white;
}
für die HTML-Seite
<p class=letterspeziale>B</p>esonders netter Effekt ...