| ||||||
HTML I | Schnellkurs | Einführung | Grundgerüst | Text | Bilder | Links | Farben | Tabellen | |||||
HTML II | Trennlinien , Listen | Hintergrundbilder | Frames | Formulare | Meta - Tags | |||||
CSS | Einführung | Style Sheets definieren | einzelne Angaben | |||||
PLUS | Hilfreiches / Tabellen | Software / Tools | Upload der Homepage | Hyperlinks | |||||
FAQ / Goodies | Java | CGI / Perl | SSI |
CSS : Einführung || Was sind CSS ? • Wozu CSS ? |
Style Sheets sind Stilvorlagen. Sie erlauben es, Tags exakt zu formatieren sowie Unterklassen zu definieren, welche dann auf beliebige Tags angewendet werden können. Mit Hilfe von Style Sheets können projektweite Einstellungen zum Layout von einer Datei aus verändert werden. Das Layout wird so flexibler, der Quellcode schlanker.
[ Cascading ] Style Sheets sind eine Ergänzung zu HTML. Die erste Version von CSS (Cascading Style Sheets, Level 1) wurde im Dezember 1996 vom w3c - Konsortium veröffentlicht.
IE interpretiert CSS teilweise ab Version 3.0, recht gut ab 4.0, NN mehr schlecht als recht ab 4.0, gut ab Version 6.0. Übrigens surfen vielleicht 85% der Anwender mit Browsern der 4er- Generation oder höher, etwa gleich viel davon gebrauchen den Internet Explorer (Sommer 2000, Irrtümer vorbehalten :).
Eine der wichtigsten Funktionen von Style Sheets ist die Trennung von Inhalt & Layout. Meist werden die Angaben zum Layout in einer separaten Datei gespeichert (Textdatei mit Endung .css). Auf diese wird dann innerhalb der betreffenden HTML- Dokumente verwiesen. So können für ein bestimmtes Projekt alle Layout - Angaben in einer zentralen Datei gespeichert und verwaltet werden.
Projektweit ein neues Hintergrundbild? Bestimmte Tabellen oder Zellen in einer anderen Farbe? Eine andere Schrift? Mit Hilfe von CSS ist das alles (und noch einiges mehr) möglich. Bei reinem HTML wäre eine Änderung jedes einzelnen Dokumentes nötig, entweder manuell oder mit Hilfe eines Tools wie Multi - Replace, wobei die meisten HTML-Editoren (auch Ulli Meybohm's HTML-Editor :) ebenfalls eine solche Funktion integriert haben .
Nehmen wir als Beispiel diesen Kurs. Links seht ihr die Seite mit CSS, rechts ohne:
Und so sieht das zugehörige Style Sheet aus (Eine reine Text- Datei, also wie *.html , aber mit Endung *.css), welches das Layout für den gesamten Kurs regelt: (-das aktuelle Style Sheet befindet sich in diesem Verzeichnis unter der Bezeichnung a.css.)
Cascading Style Sheets werden heutzutage auf allen grösseren Webseiten eingesetzt.
Der Quellcode wird von überflüssigen Formatier- Tags befreit (Voraussetzung: gleichmässiges Design und Einsatz von Klassen).
Bei richtiger Anwendung von CSS sind Änderungen im Erscheinungsbild (Layout) projektweit sehr viel leichter vorzunehmen.
Einzelne Tags können exakt definiert werden.
Damit sind die Zeiten vorbei, in denen es dem jeweiligen Browser überlassen war, wie er ein bestimmtes Tag interpretiert.
Tags können so auch von manchen ihrer u.U. störenden Eigenschaften befreit werden. So ist es z.B. möglich, Links ohne Unterstrich darzustellen (text-decoration:none). Überschriften können normal statt fett dargestellt werden (font-weight:normal).
Es können nicht nur einzelne Tags exakt formatiert werden- Die Definition von einzelnen und beliebig anwendbaren Klassen ist ebenfalls möglich. Die Klasse wird dann im betreffenden Tag mit dem Attribut class="[name]" eingebunden.
Daneben eröffnen sich mit Hilfe von Style Sheets aber auch gänzlich neue Möglichkeiten. Recht beliebt ist z.B. der hover - Effekt:
Link - überfahr mich ... :)Elemente können mit einem wählbaren Mauszeiger belegt werden:
Ewig warten ...
Nach oben ...(Beide Angaben werden vom Netscape Navigator (4.x) noch nicht interpretiert, vom neuen Netscape (6.0) jedoch schon.)
| Weiter zum nächsten Kapitel : CSS definieren | | |
::: © 2000/01 Martin Fux ::: URL dieses Dokuments: http://www.flexdax.org/htmlkurs/css-start.html |