Punkt Punkt Komma Strich ...

Schreibweise und Gültigkeit von CSS-Anweisungen

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.

Wichtig ist jedenfalls, auf die Reihenfolge der Anweisungen zu achten.
Vieles läuft nach der Methode "Try and Error"
Letzte Aktualisierung:
02.04.2010
Sie befinden sich hier:
MyWay2Web > Denkzettel > CSS-Notation
Impressum
Ruth Tauber
Leiter
ToTop Button