CSS-Zentrale
Bisherige Vorgehensweise
Per Link-Element wird das externe CSS referenziert. Auch ist es möglich, mehrere CSS-Dateien einzubinden und dabei vielleicht eine Trennung der Ausgabemedien vorzunehmen.
Beispiel:
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="css/sonstiges.css" type="text/css" media="all">
Dies macht eine gute Planung erforderlich, möchte man nicht später in allen Dokumenten nachträglich eine Datei ergänzen. Zum Glück geht es auch einfacher.
Eleganter geht es so...
Wir löschen dazu alle CSS-Referenzen bis auf eine und weisen dieser auch kein Medium mehr zu:
<link rel="stylesheet" href="css/format.css" type="text/css"
In dieses Zentral-CSS notieren wir nun Verweise auf alle beteiligten CSS-Dateien. Dies ist wesentlich pflegeleichter, da dies nur einmal geschehen muss, statt wie bisher in jedem HTML-Dokument.
In der format.css steht also z.B. folgendes:
@import url("fundament.css");
@import url("screen.css");
@import url("navi.css");
@import url("print.css");
Es werden hier also vier CSS-Dateien referenziert. Sollte es später eine mehr werden, wird eine Zeile ergänzt. Fertig.
Wäre da nicht wie immer der Internet Explorer, der mit folgender Formulierung nicht klarkommt, könnte man auch gleich das Ausgabemedium mit angeben:
@import url("fundament.css") all;
@import url("screen.css") screen;
@import url("navi.css") screen;
@import url("print.css") print;
Da wie gesagt der IE dies nicht unterstützt, ergänzen wir stattdessen die jeweiligen CSS-Dateien:
/* Dies ist das CSS für die Bildschirmausgabe */
@media screen {
/* Hier stehen nun alle CSS-Deklarationen */
} /* Ende screen */
Vergessen Sie nicht die schliessende Klammer am Ende!
CSS-Fundament
Jeder Browser hat ein Standard-Stylesheet, auf das zugegriffen wird, wenn keine anderen Anweisungen vorliegen. Dabei machen einem erfahrungsgemäß die unterschiedlichen Vorgaben besonders für PADDING und MARGIN häufig Probleme.
Jetzt gibt es zwei Möglichkeiten. Entweder man ändert alles bei Bedarf und lebt ansonsten mit den unterschiedlichen Vorgaben, oder man geht den Weg, erst mal alle PADDINGS und MARGINS auf Null zu setzen und dann neu zu definieren.
Diesen zweiten Ansatz verfolgt der Einsatz eines Basis-Stylesheets namens fundament.css. Hier werden für alle (!) HTML-Elemente erst mal Innen- und Außenabstand (padding und margin) auf Null gesetzt und anschliessend für die wichtigsten Elemente wieder auf sinnvolle Anfangswerte gesetzt.
* { padding: 0; margin: 0; }
/* Nach dem Reset die Restaurierung nicht vegessen! Siehe Link oben! */
Diese restaurierten Anfangswerte sind dann in allen Browsern gleich und können bei Bedarf auch redefiniert werden, indem man sie mit höherer Spezifität wiederum neu überschreibt.
Es bietet sich also an, eine fundament.css und weitere für das tatsächliche Layout zu haben, die dieses Fundament teilweise überschreiben.
Hier zeigt sich dann die Kaskade (CSS = Cascading Style Sheets).
Tipp: Verwenden sie ein Fundament (@media all), ein Bildschirm-CSS (ebenfalls @media all), ein Navigations-CSS (@media screen, wird beim Druck gleich nämlich sowieso ausgeblendet) und ein Druck-CSS (@media print), welches rigoros Header, Navi und Footer ausschaltet (display: none) und ansonsten einige Werte neu definiert (z.B. eine Serifenschrift für Absätze in der Druckausgabe).
