Webdesign - Webseiten planen, gestalten - Free-Hack Library

CSS
4.4 CSS
Nachdem Struktur und Inhalte der Website stehen und die semantischen
Aspekte beachtet wurden, geht es nun daran, die Elemente
der Website zu gestalten.
Cascading Stylesheets (CSS) ermöglichen es, den HTML-Quellcode
von Formatierungsbefehlen und Layoutanweisungen zu befreien.
Diese werden in einem Stylesheet getrennt notiert. Dabei lassen
sich Stylesheets mit Formatvorlagen, wie man sie aus Textverarbeitungen
kennt, vergleichen. Durch Änderung des Stylesheets
lassen sich ein und demselben HTML-Dokument unterschiedliche
Aussehen geben, ebenso können für unterschiedliche Ausgabegeräte
unterschiedliche Stylesheets zur Verfügung gestellt werden.
TIPP: Derzeit ist CSS Level 2.1 aktuell, aber auch die Entwicklung
von CSS Level 3 ist schon ziemlich weit fortgeschritten. Es spricht
nichts dagegen, CSS3 in Ihren Projekten zu verwenden. Wenn
wir hier CSS3-Anweisungen verwenden, weisen wir Sie explizit
darauf hin.
Die Attribute rel und type geben dabei an, dass es sich um ein
Stylesheet vom MIME-Typ text/css handelt. Das Attribut href
enthält den Pfad zur CSS-Datei. Das optionale Attribut media
ermöglicht die Angabe eines Ausgabemediums. Mögliche Werte
sind hier: all, aural, braille, embossed (für Braille-Drucker),
handheld, print, projection (für Beamer), screen, tty (für
nicht grafische Ausgabemedien mit fixer Breite) und tv. In der
CSS-Version 3 wurde „aural“ durch „speech“ ersetzt. Mit Hilfe des
TECHNISCHE
GRUNDLAGEN
4
Linktipps:
Der css Zen Garden ist ein fabelhaftes Beispiel
dafür, was allein durch den Einsatz von
Style sheets erreicht werden kann. Wichtiger
Hinweis: Alle Designs basieren auf ein und
demselben HTML-Quelltext.
css Zen garden: http://www.csszengarden.com/
Am 05. April ist der jährliche CSS Naked Day.
Vielleicht möchten Sie ja die Gelegenheit
nutzen, sich die „nackten“, CSS-freien Websites
der Teilnehmer anzusehen. Es gibt dort sicher
einiges zu lernen.
CSS Naked Day: http://naked.dustindiaz.com/
4.4.1 CSS in die Website einbinden
Es gibt drei Möglichkeiten, den HTML-Quelltext mit Style-Angaben
zu versehen: Mit einem externen Stylesheet, mit internen Style-
Angaben im -Bereich jeder Webseite und durch das direkte
Verwenden von Style-Angaben innerhalb des Start-Tags eines Abb. 4.4.1a: Teilnahme am CSS Naked Day
HTML-Elements.
Die Nachteile der letztgenannten Variante liegen klar auf der
Hand, denn sie ruiniert die Trennung von Inhalt und Design. Die
interne Möglichkeit bläht den HTML-Quelltext nur unnötig auf und
vermindert die Wartbarkeit des Codes dadurch, dass Änderungen
im Stylesheet u.U. in mehreren Dateien vorgenommen werden
müssen. Aus diesem Grund beschränken wir uns in diesem Kapitel
auf die externen Stylesheets.
Um externe Stylesheets in ein Dokument einzubinden, stehen zwei
Möglichkeiten zur Verfügung, die sowohl einzeln als auch kombiniert
zum Einsatz kommen können. Die verbreitetste Methode, um
Stylesheets in den HTML-Code einzubinden, ist die Verwendung des Abb. 4.4.1b: So sieht die Seite normalerweise
-Elements innerhalb des -Bereichs. Die Anweisung aus.
könnte z. B. so aussehen:
Link: Eine umfangreiche HTML- und CSS-Referenz
finden Sie bei SELFHTML
SELFHTML: http://de.selfhtml.org/.
65