*** CSS - StyleSheets: Grundlagen ***     Inhaltsverzeichnis

Externe StyleSheets

Interne StyleSheets

Aufbau (Syntax) von Style-Sheets

Beispiele:

* {margin: 0; padding: 0; border: none; } _


table {border: 2} ____________________ 		/* In allen Elementen sollen die angegebenen Parameter entsprechend gesetzt werden. */
/* Mit dieser "allgemeinen" Anweisung können unschöne Unterschiede der Browser in den
    Vorgabewerten für die einzelnen <Tags> eliminiert werden. */
/* In nachfolgenden StyleSheets können die Werte dann explizit anders gesetzt werden.*/
 
body {
  • margin-left: 20px; ______________
    background-color: #E8FF88 ______
    font-family: arial; _______________
    font-size: small; ________________
    color:green; ___________________
    }
 /* weist dem <body>-Tag folgende Werte für die Seite zu: */
/* linker Rand 20 Pixel */
/* Hintergrundfarbe lind-grün */
/* Schriftart Arial */
/* kleine Schriftgröße */
/* Schriftfarbe grün */
/* Ende der Anweisungen */
 
/* Die Parameter für die Textgestaltung wirken auch auf alle "untergeordneten" <Tags>
    soweit sich diese auf die Vorgabe-Werte im Body-Tag beziehen.
    z.B. einheitliche Schriftart der Web-Seite. */
 
h1,h2 {
  • font-family: Arial, sans-serif; _____
    color: limegreen; _______________
    }
 /* weist den Überschrift-Tags <h1> und <h2> ... */
/* ... die Schriftart "Arial" bzw. irgendeine "ohne Serifen" */
/* ... und die Schriftfarbe "hellgrün" zu. */
/* Ende der Anweisungen */
 
p {margin: 0;} _______________________ /* Absatz-Tag <P>: Leerzeilen vor und nach dem Absatz entfallen. */
 
p + p {margin: 0; text-indent:2em;} _____ /* Absatz-Tags <P>: Bei zwei aufeinanderfolgenden Absätzen keine Leerzeile dazwischen.*/
/* Zugleich wird der nachfolgende Absatz eingerückt. */
 
p:first-letter {font-size: large;} _________ /* Absatz-Tag <P>: erster Buchstabe soll "groß" dargestellt werden. */
 
p {text-align: justify;} _________________ /* weist dem Absatz-Tag <P> die Funktion "Blocksatz" zu. */
 

Inline-StyleSheets




---------------------------------------------------------------------------
weiter: StyleSheets - Textformatierung
zurück: Tabellen-Struktur