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
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:
Beispiel: (Code)
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:
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:
- 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; } - 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;} - 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} - 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
- Nummerierte Liste mit klein alphabetischer Aufzählung und ohne Einrückung
- Zweiter Listeneintrag der nummerierten Liste mit klein alphabetischer Aufzählung und ohne Einrückung
- Dritter Listeneintrag
- Vierter Listeneintrag
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)
Eine komplette Referenz aller CSS-Eigenschaften finden Sie bei SELFHTML/CSS/Eigenschaften.