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 |