Cascading Style Sheets (Abk.: CSS ) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. [...]
(
http://de.wikipedia.org/wiki/Cascading_Style_Sheets)
CSS, das klingt im ersten Moment furchtbar kompliziert und man befürchtet seitenweise kryptischen Code, der nur mit den höheren Weihen des Webdesigns zugänglich ist. Weit gefehlt!
Im Prinzip ist CSS die beste Möglichkeit, eine Seite mit schlankem HTML/XHTML zu schreiben und diese Seite bequem zu formatieren.
In dem Thread
http://forum.tintenzirkel.de/index.php/topic,863.0.html] Was ist HTML? habe ich ja bereits erläutert, daß für die Formatierung einer Webseite bestimmte
tags notwendig sind, die z.B. die Schriftart,-farbe, -größe, Hintergrundbilder etc. festlegen.
Das Problem dabei ist, daß man für jede Abweichung, z.B. wenn die Links anders sein sollen oder ein bestimmter Bereich der Seite sich abheben soll, der Quellcode entsprechend erweitert werden muß.
Außerdem benötigt man entweder Frames oder blinde Tabellen (also unsichtbaren Tabellen), um eine Seite entsprechend in Form zu bringen.
(
Nachteil von Tabellen: erst wenn die komplette Tabelle reingeladen ist, wird die Seite sichtbar. Bei viel Inhalt kann das sehr nervtötend sein.
Nachteil von Frames: wurde kein Framebuster eingebaut, werden externe Links im eigenen Frame angezeigt, man hängt also im Frame fest!)
Dies erfordert extrem aufwendigen Code, der zudem durch die ganzen zusätzlichen Formatierungen sehr umfangreich und geradezu aufgebläht wird. Will man Änderungen an der Seite vornehmen, die Farben oder Schriftarten betreffen, muß man dies in mühevoller Kleinarbeit an
jeder einzelnen Seite vornehmen.
Mit einem ausgelagerten Stylesheet, auf den alle Seiten zugreifen, wird dies zu
einer einzigen Änderung!
Um das Ganze etwas anschaulicher zu machen, ein kleines Beispiel:
Eine Seite soll links eine Navigationsleiste haben und rechts ein Inhaltsfeld. Die Navigationsleiste soll einen anderen Hintergrund haben, als das Inhaltsfeld. Ebenso sollen Überschriften jeweils unterschiedlich aussehen. Der Text im Inhaltsfeld soll im Blocksatz ausgerichtet sein, die Navi linksbündig.
(Prinzipiell ist das eine Standardseite, wie man sie zu tausenden im Netz findet!)
Habe ich mich für CSS entschieden, kann ich alles, das mit dem Layout und dem Design zu tun hat in ein Stylesheet auslagern:
Um genau festlegen zu können, wie die beiden Bereiche der Seite (Navi und Inhalt) zueinander positioniert sind, definiere ich als erstes einen
div (einen Bereich) für den Inhalt und über eine
id zugeordent wird.
<div id="content"> </div>Ich füge einen Dummytext ein, damit klar wird, wie die Seite aufgebaut ist. (Quelle:
http://www.lipsum.com/) Der Dummytext ist von einem <p></p> Tag umschlossen. Im Stylesheet wird klar warum.
Dies geschieht aus dem Grund, daß ein Lesegerät, welches die Seite vorliest, den Quellcode von oben nach untern durchgeht. So erhält der User als erstes alle Inhaltsinformationen und danach die Navigationsangaben. Diese Vorgehensweise wird im Bezug auf die Barrierefreiheit empfohlen.
Danach wird eine zweite div id festgelegt, nämlich die Navigation über:
<div id="nav"> </div>Zu beachten ist: eine "id" darf es in jedem Dokument nur einmal geben. Wiederholen sich Formatierungen mehrmals, verwendet man dafür die "class". Dies wird im Beispiel verdeutlicht!
Nun kann ich die einzelnen Punkte der Navigation über eine Liste festlegen. Klingt logisch, oder?
So, jetzt kommt der spannende Teil, nämlich das CSS.
Dazu lege ich eine Datei mit dem Namen site.css an. Wichtig ist, daß keine .htm oder .html Endung autaucht, sonder daß es .css lautet!
Nun lege ich als erstes die Angaben für den <body></body> Tag fest, der den gesamten Inhalt umschließt.
Ich entscheide mich dafür, daß es einen 3em breiten Abstand vom Gesamtinhalt (Inhalt und Navi) um die gesamte Seite geben soll, damit alles nicht so am Rand klebt. Aber ich möchte keinen Innenabstand.
Ich definiere also: margin: 3em; und padding: 0;
In dem ich im body die Schriftgröße nicht absolut (über pt, px, em oder ähnliches) definiere, sondern mit
small, lasse ich dem Benutzer die Möglichkeit, die Schrift zu skalieren (über den Browser größer oder kleiner zu stellen), ohne daß es mir das Layout zerschießt!! Da alle weiteren Definitionen sich auf den body-Bereich beziehen werden (Vererbung!), kann ich dort mit Prozentangaben arbeiten. Erläuterung im Beispiel!
Als nächstes lege ich fest, wie der Inhaltsbereich aussehen soll.
Ich möchte, daß der Inhalt links einen Abstand von 20em hat (dort kommt die Navi hin!), nach rechts einen von 5em, nach unten keinen und nach oben einen von 3em.
Dies wird über margin-top: 3em, margin-left: 20em, margin-bottom: 0; margin-right: 5em festgelegt.
Nun kann ich die Navigation positionieren:
Über position: absolute; lege ich fest, daß die Navigation nicht verschoben wird, falls sich die Fenstergröße ändert.
Dann definiere ich mit: top: 9em; left 1em; und width: 18em; die Abständer Navigation zum oberen und linken Rand, sowie die Breite des Navigationsbereiches.
Außerdem möchte ich einen anderen Hintergrund und wähle die Farbe: #AFAFAF; ein dunkles Grau.
So sieht unser site.css bisher aus:
Und so unsere Seite bisher:
Nun geht es an die Verschönderungsarbeiten:
Wir wollen die Aufzählungspunkte bei der Navigation verschwinden lassen, die Linkfarben ändern und den häßlichen Unterstrich der Links durch etwas netteres ersetzen.
Das geht so:
und wirkt sich folgendermaßen aus:
Jetzt möchte ich noch etwas an der Darstellung des Inhaltsbereiches tun.
Der Text soll ja im Block sein und ich möchte für Überschriften sorgen.
Das passiert im Folgeschritt:
Dadurch ergeben sich Änderungen im Quellcode:
Was zu folgendem Ergebnis führt:
Man kann jetzt noch alles mögliche ändern, z.B. dem "content" ein padding geben, eine Hintergrundgrafik einfügen etc.
Der Vorteil ist nun, daß alle Unterseiten auf das Stylesheet zurückgreifen können und somit wirklich nur aus dem Inhalt und der Navi bestehen müssen.
Natürlich gilt auch hier: je aufwändiger die Seite, desto länger wird das Stylesheet. Wer mag, kann sich ja mal zum Vergleich die Stylesheets meiner Seiten und die dazugehörigen Quellcodes anschauen.
Letztendlich spare ich aber eine Menge Zeit, auch wenn ich mir etwas mehr Gedanken über das Stylesheet machen muß, denn ich ändere nachher für Farben, Größen etc nur diese eine Datei und nicht alle Unterseiten.
Die
CSS-Datei,
die Hintergrundgrafik und das
HTML-Dokument liegen zum Anschauen bereit!
Bei Fragen zu einzelnen Schritten meldet euch bitte hier im Thread. Bei größeren Anfragen per Mail. (Die Mailaddy gibt es per PN!)
Ich hoffe, daß ich verdeutlichen konnte, was man mit CSS genau machen kann und wünsche viel Vergnügen beim Ausprobieren!
Eure Moni (die jetzt erst mal keine längeren Anleitungen mehr schreiben möchte...
)
Um Feedback wird gebeten! Ist alles verständlich? Lesbar? Funktioniert das System der Beschreibungen und Screenshots? Wünscht ihr euch das anders? (Dann selber machen... 
) - Nein, quark... 
Thema: [Erklärung]: Was ist CSS? (Gelesen 22182 mal)