Punkt Punkt Komma Strich ...
Mit CSS-Anweisungen (Style-Sheets) werden den im HTML-Code definierten Bereichen Gestaltungsmerkmale zugewiesen. Zur Benennung des Bereiches, für den die Eigenschaften gelten sollen, gibt es verschiedene Möglichkeiten:
/* ===== Übersicht: Zuweisung von CSS-StyleSheets ====================================== * .................... gilt für alle Elemente h1 ................... gilt für <h1> h1, h2 ............... gilt für <h1> und <h2> h1 a ................. gilt für alle Links in <h1> h1 strong, a ......... gilt für <strong> in <h1> und alle Links div p ................ gilt für <p> in einem <div> div * p .............. gilt für <p> in einem beliebigen Element eines <div> div > p .............. gilt für <p> nur direkt in <div> div + p .............. gilt für ein <p> das nach einem <div>-Element steht == Die Definitionen mit ">" und "+" funktionieren erst ab IE7! == p[align] ............. gilt für alle <p align= ...> p[align="center"] .... gilt für alle <p align="center"> p[abbr~="Text"] ...... gilt für alle <p abbr="... Text ..."> (Text in Wortliste) p[lang|="en"] ........ gilt für alle <p lang="en ..." (Wortanfang) p:first-letter ....... gilt für den ersten Buchstaben eines Absatzes p:first-line ......... gilt für die erste Zeile eines Absatzes p:first-child ........ gilt für das erste Element innerhalb des Absatzes == first-letter und first-line erst ab IE6, first-child erst ab IE7! == *.hell ............... gilt für alle Elemente mit class="hell" .hell ................ " " " " " " " .hell.rot ............ gilt für alle Elemente mit class="hell rot" == Letzteres funktioniert erst ab IE7! == #Name ................ gilt für alle Elemente mit id="Name" h1#Name .............. gilt für alle <h1 id="Name"> #Name h1 ............. gilt für alle <h1> ... die sich in einem Element mit der id="Name" befinden #Inhalt #Fusszeile ... gilt für alle Elemente mit id="Fusszeile" ... die sich in einem Element mit id="Inhalt" befinden ===== Pseudoklassen zur Gestaltung von Links: ======================================= a:link ............... gilt für unbenutzte Links a:visited ............ gilt für bereits besuchte Links (in Verlauf!) a:focus .............. gilt für ausgewählte Links (Tastatur / Vorgabe) a:hover .............. gilt für "Mouse over" a:active ............. gilt für aktiven Link == Reihenfolge beachten! == ===== Die Liste erhebt keinen Anspruch auf Richtigkeit und Vollständigkeit! ========= */
Schreibweise ...
Die Gestaltungsmerkmale, die dem benannten Bereich zugewiesen werden sollen, stehen in geschweiften Klammern. Jedes Gestaltungsmerkmal besteht aus einem Schlüsselwort, gefolgt von einem :, danach folgen die zugehörigen Werte. Mit einem ; wird das Gestaltungsmerkmal abgeschlossen.
Einige Beispiele:
h1,h2 { /* weist den Überschrift-Tags <h1> und <h2> */ font-family: Arial, sans-serif; /* - die Schriftart "Arial" */ bzw. eine "ohne Serifen" */ color: limegreen; /* - und die Schriftfarbe "hellgrün" zu. */ } /* Ende der Anweisungen */ p {margin: 0;} /* Keine Leerzeilen vor und nach dem Absatz */ p + p {margin: 0; text-indent:2em;} /* Bei zwei aufeinanderfolgenden Absätzen */ /* keine Leerzeile dazwischen. */ /* Nachfolgende Absatz eingerückt. */ p:first-letter {font-size: large;} /* ersten Buchstaben "groß" darstellen */ p {text-align: justify;} /* "Blocksatz" */
Prinzipiell ...
... prinzipiell ... werden die Eigenschaften des äußeren Bereichs
auf die darin befindlichen Bereiche "vererbt"
- aber das funktioniert nicht immer
- und nicht in allen Browsern gleich.
Auch haben manche Bereiche vordefinierte Standard-Eigenschaften
(z.B. "fett" bei <strong>
),
die sie nicht automatisch verlieren, wenn dem umhüllenden Bereich
ein anderer Wert zugewiesen wird.
Letzte Aktualisierung: 02.04.2010 |
Sie befinden sich hier: MyWay2Web > Denkzettel > CSS-Notation |
Impressum |