| ||||||
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 .
Der Internet Explorer 5.5 für den Mac soll der erste Browser sein , der CSS zu 100% interpretiert . IE interpretiert CSS teilweise ab Version 3.0 , recht gut ab 4.0 , NN mehr schlecht als recht ab 4.0 . Übrigens surfen vielleicht 85% der Anwender mit Browsern der 4er - Klasse 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 .
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 :
***Cascading Style Sheets werden heutzutage auf allen grösseren Webseiten eingesetzt .
Der Quellcode wird von überflüssigen Formatier - Tags befreit , vorausgesetzt , ihr habt ein einigermassen konsistentes Design ( Gleiche Überschriften , Navigation , Schrift , etc. ) .
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 ... :) 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 . )
| Weiter zum nächsten Kapitel : CSS definieren | | |
::: © 2000/01 Martin Fux ::: URL dieses Dokuments: http://www.flexdax.org/htmlkurs/css-start.html |