CSSCascading Stylesheets (CSS)
- CSS level 1 bereits seit 1996
- CSS level 2 seit 1998
- erst heute wird level 2 von den Browsern einigermaßen umgesetzt
- unterschiedliche Implementierungen sind noch immer problematische, hoher Aufwand für Varianten
- Ziele und Vorteile von CSS:
- Trennung von Struktur und Layout
- zentrale Verwaltung des Layout für eine komplette Site
- unterschiedliche Layout für versch. Geräte bei gleichem Inhalt (Bildschirm, Drucker)
- Barrierefreiheit (keine Zweckentfremdung von Tabellen)
Einbindung von CSS in HTML
- direkt im HTML-Element mit style Attribut (inline style) -> nur im Sonderfall anwenden
- im head mit style tag zentral für eine Datei (internal style)
- externe Stildateien, anlegen (external style z.B. meinStil.css)
- mit HTML-Element link einbinden
HTML <head> <link rel=„Stylesheet“ type=„text/css“ ...
- mit CSS-Anweisung @import einbinden
HTML ... <style type=„...“> @import url(meinStil.css); </style>...
- Varianten a und b funktionieren gleichermaßen, aber @import ist eine CSS Anweisung und kann daher auch in externen CSS Dateien eingesetzt werden (Kascaden)
CSS in XHTML
Der Inhalt von style und script Elementen muss als sog. Character Datat (CDATA) Abschnitt ausgewiesen werden. Hiermit wird einem evtl. eingesetzten XML-Parser mitgeteilt, dass dieser Bereich kein Markup enthält und Sonderzeichen nicht speziell zu behandeln sind. Die CDATA Markierung ist XML und muss daher für CSS auskommentiert werden (C-Syntax) /**/
Syntax von CSS-Deklarationen
h1 selektor ...
Selektor
- Elementbezeichner
- (tag) -> der hieruf folgende Deklarationsblock gilt für alle aufgelisteten Elemente
- Verschachtelter Elementbezeichner
-
- -> gilt für alle i-tags, die in einem hq-tag entahlten sind usw.
- Klassenbezeichner
- -> h1.betont selektiert alle h1-tags mit dem attribut class =„betont“
- -> .rot oder *.rot selektiert alle tags mit dem Attribut class=„rot“
- wildcard
- -> * selektiert alle tags (z.B. um zunächst alle Grundeinstellungen für Schrift, Farbe etc. für alle tags zu definieren)
- Attributselector []
- -> span[id] selktiert alle span-tags, die ein id-Attribut haben
- -> ...
- ID-selector (Bezeichner, der nur einmalig im Dokument verwendet werden darf);
- Sinnvoll für einmalige Bereich, z.B. logobereich, buttonleiste, inhalt
- id-styles haben Vorrang vo Class-styles (-> siehe Kakadierung)
HTML ->#fussnote , selektiert das Element mit id=„fussnote“
- Pseudobezeichner
- -> a:visited selektor für besuchten link
- -> p:first-letter selector für 1. Zeichn in p
- -> p.rot:first-line selektor für 1.Zeile in p mit klasse rot
- -> input:focus selektor für alle input-Elemente(button,text,...) die den focus haben
- ...
- Strukturselektoren
- basieren auf der Baumstruktur eines Dokuments
- -> div > p Selektor für alle p, die in der Dok.-struktur direktes Kindo von div sind
- -> div + p Selektor für das p, das dem div direkt auf gleicher Ebene folg (direct sibling, direkt folgendes Schwesterelement)
- -> div * p Selektor für alle p, diemindestens Enkel des Div sind d.h. 2 oder mehr Ebenen tiefer
- -> ...
CSS Attribute
sind sehr zahlreich für
- Schrift- und Absatzformatierung
- Hintergrundgestaltung
- Formulare
- Listen
- Tabellen
- Verweise
- Positionierungen
- ...
|
Zahlen & Daten
- 2773 Seitenaufrufe
- 232 Tage alt
- 1 Versionen
- Letzte Änderung: 30.09.2011 um 09:18 Uhr
Publish
|
