CSS-Eigenschaften und Beispiele

Wichtige CSS-Anwendungen nach Einsatzgebiet sortiert:

Schriftformatierung:

Schrift allgemein:
Mit "font" kann man einzelne Eigenschaften nacheinander mit Leerschlag dazwischen angeben.
Man kann mehrere Schriftarten bestimmen. Dazu trennt man die Schriftartennamen mit einem Komma voneinander. Die Reihenfolge der Angabe ist entscheidend: Ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.
Die Schriftgrösse kann numerisch zusammen mit einer Masseinheit (z.B. 12px), oder auch relativ durch ein Wort (wie "small") angegeben werden.
Wichtig ist ansonsten noch das Schriftgewicht ("bold" für fett oder "lighter" für dünner), der Schriftstil ("italic" für kursiv) oder eine Schriftvariante mit "small-caps" für kleine Grossbuchstaben.
font:Schriftgewicht Schriftgrösse Schriftstil Schriftvariante Schriftart1,Schriftart2;

Textfarbe: Hexadezimale Zahl (wie "#FFCC99"), den Englischen Farbnamen (wie "red") oder den RGB-Farbwert (wie "rgb(96,255,0)") angeben.  
color:Wert;
Textdekoration: z.B."underline" für unterstrichen oder "none" bei einem Link um den Unterstrich zu entfernen  
text-decoration:Wert;
Wortabstand: Mit Nummer und Masseinheit angeben (z.B. 2px)  
word-spacing:Wert;
Zeichenabstand: Mit Nummer und Masseinheit angeben (z.B. 2px)  
letter-spacing:Wert;

Beispiele: (Code)

Gross, kursiv, Kapitälchen, unterstrichen, auseinandergezogen, Abstand zwischen den Worten, Rot und durchgestrichen, ...



Hintergrundeigenschaften:

Hintergrundfarbe: Farbangabe wie bei Textfarbe.  
background-color:Wert;
Hintergrundbild: Mit Pfadangabe des Bildes, Wiederholungseffekt ("no-repeat" für nicht wiederholen), Wasserzeicheneffekt ("fixed" für fixiert) und die Position ("top", "center", "middle", bottom", "left" oder "right")  
background:url(Pfad zum Bild) Wiederholungseffekt Wasserzeicheneffekt Position;

Beispiele: (Code)
    Tabellenzelle mit
grünem
Hintergrund
 
 		        
Tabellenzelle mit
Hintergrundbild
 
 
 
Hintergrundbild für ein Block-Element von links nach rechts wiederholt und fixiert und diese Wörter gelb hinterlegt

Layouteinstellungen:

Vertikale Ausrichtung: Mit "top", "middle", "bottom", "baseline",....  
vertical-align:Wert;
Horizontale Ausrichtung: Mit "left", "center", "right" oder "justify"(als Blocksatz)  
text-align:Wert;
Aussenabstand: Numerischen Wert für den Abstand vom Rand nach aussen angeben.  
margin:Wert;
Innenabstand: Numerischen Wert für den Abstand vom Rand nach innen angeben.  
padding:Wert;
Rahmen: Angaben über Rahmendicke, Rahmenfarbe und Rahmentyp. Als Rahmentyp sind verschiedene Angaben möglich: "none" (unsichtbarer Rahmen), "dotted" (gepunktet), "dashed" (gestrichelt), "solid" (durchgezogen), "double" (doppelt durchgezogen) und andere 3D-Effekte ("groove", "ridge", "inset" oder "outset")  
border:Rahmendicke Rahmenfarbe Rahmentyp;

Beispiele: (Code)
Dies ist eine Tabellenzelle mit Blocksatz, nach oben ausgerichtet und mit 5 Pixel Innenabstand. Tabellenzelle nach rechts und unten ausgerichtet und ohne Innenabstand.

Absatz zentriert, mit braunem 3D-Rahmen und 10 Pixel Innenabstand.

Text mit rotem Punktrahmen und 20 Pixel Einrückung.

Positionierung:

Positionsart: Uebliche Werte sind "absolute" (gemessen am Rand des Elternelements) und "relative" (gemessen an der Normalposition oder Anfangsposition des Elements selbst)  
position:Wert;
Startposition von oben: Mit numerischer Angabe.  
top:Wert;
Startposition von links: Mit numerischer Angabe.  
left:Wert;
Breite: Mit numerischer Angabe.  
width:Wert;
Höhe: Mit numerischer Angabe.  
height:Wert;

Beispiel: (Code)
Box, relativ platziert, 100px nach links versetzt, 250px breit, und Höhe wird automatisch angepasst.

Positionierungen für responsive Seitengestaltung:

Die vorher aufgeführten Positionierungsmöglichkeiten eignen sich nur beschränkt für die Gestaltung für unterschiedliche Bildschirmgrössen. Fix positionierte Blöcke sind meistens unbrauchbar. Man kann mit CSS die Blöcke auch so formatieren, dass sie sich anwenderfreundlich an die Bildschirmgrösse anpassen, mit unterschiedlichen Angaben über die Media Queries (@media). Da es ein relativ komplexes Problem ist mit unterschiedlichen Lösungen, möchte ich hier nur auf gängige Grundsätze eingehen:
 
  1. Zuerst für Handy-Bildschirme optimieren. Der Bildschirm sollte möglichst ausgefüllt werden ohne links-rechts scrollen zu müssen. Die Blöcke sollten relativ mit Breite 100% definiert werden, und es Menüpunkte und Texte sollten nicht mehrspaltig sein, sondern alles untereinander (display:block). z.B.:
    Inhaltsbereich auf 100% Breite begrenzen und zentrieren:
    body { margin: 0 auto; //Damit wird die Seite zentriert
    max-width: 100%; }

    Navigation und Textblock zentriert alles untereinander:
    .navblock, .textblock { width: 100%; max-width: 100%; display: block; text-align: center; }
  2. Für Tablett-Bildschirme optimieren. Hier können Links nebeneinander stehen (display:inline-block) und allenfalls auch Textblöcke auf 2 Spalten verteilt werden. z.B.:
    .navblock, .textblock { width: 50%; // für 2 Spalten
    display: inline-block;}
  3. Für grosse Bildschirme optimieren. Hier sollte der Inhaltsbereich auf etwa max. 1200 Pixel beschränkt und allenfalls weitere Textspalten definiert werden. z.B.
    body {max-width: 1200px;}
    .textblock {width: 25%; // für 4 Spalten}

    4. Listenformatierung:

    Listendarstellung: Als Darstellungstyp sind viele möglich. Für ul-Listen gibt es "disc", "circle" oder "square" und für ol-Listen "decimal", "lower-roman", "lower-alpha" und sogar griechische, hebräische oder japanische Zeichen sind möglich. Alternativ kann man eine eigene Grafik mit "list-style-image:.." als Listenpunkt angeben. Als Listeneinrückung geht "inside" (eingerückt) oder "outside" (ausgerückt).  
    list-style:Darstellungstyp Listeneinrückung list-style-image:url(Pfad zur Bullet-Grafik);

    Beispiele: (Code)
     
    • Aufzählungsliste mit eigener Bullet-Grafik und Listeneinrückung
    • Zweiter Listeneintrag der Aufzählungsliste mit eigener Bullet-Grafik und Listeneinrückung
    • Dritter Listeneintrag
    • Vierter Listeneintrag

    1. Nummerierte Liste mit klein alphabetischer Aufzählung und ohne Einrückung
    2. Zweiter Listeneintrag der nummerierten Liste mit klein alphabetischer Aufzählung und ohne Einrückung
    3. Dritter Listeneintrag
    4. Vierter Listeneintrag


    Eine komplette Referenz aller CSS-Eigenschaften finden Sie bei SELFHTML/CSS/Eigenschaften.