- Inhalt
- Aufbau von CSS Anweisungen
- Maßeinheiten / Farbangaben in CSS
- Schriftformatierung
- Textausrichtung
- Rahmen
- Außenränder
- Innenabstand
- Listenformatierung
- Tabellenformatierung
- Hintergrundfarbe / Bilder
- Positionierung von Elementen
- Anpassen des Cursors
- Anpassen der Scrollbalken
1. grundsätzlicher Aufbau
2. Elemente Gruppieren
3. verschachtelte Elemente
4. Attributbedingte Formate
5. Klassenformate
6. Individualformate
7. Pseudoklassen zur Linkformatierung
8. weitere Pseudoklassen
Element { Eigenschaft: Wert; }
| Element | ein HTML Element, auf das sich die CSS Anweisung bezieht |
| Eigenschaft | eine CSS Eigenschaft. |
| Wert | ein zugehöriger Wert, zu dem jeweiligen Element |
2. Elemente Gruppieren
Element, Element, Element { Eigenschaft: Wert; }
3. verschachtelte Elemente
Element1 Element2 { Eigenschaft: Wert; }
Element1 > Element2 { Eigenschaft: Wert; }
Element1 + Element2 { Eigenschaft: Wert; }
Element1 * Element2 { Eigenschaft: Wert; }
Element1 > Element2 { Eigenschaft: Wert; }
Element1 + Element2 { Eigenschaft: Wert; }
Element1 * Element2 { Eigenschaft: Wert; }
| Element1 Element2 | gilt nur für alle Elemente2, innerhalb von Element1 |
| Element1 > Element2 | gilt nur für Element2, wenn Element2 eine Ebene unterhalb von Element1 liegt |
| Element1 + Element2 | gilt nur für Element2, wenn Element2 auf gleicher Ebene liegt wie Element1 und in der Elementstruktur unmittelbar nach Element1 folgt |
| Element1 * Element2 | gilt nur für Element2, wenn Element2 mindestens zwei Ebenen unterhalb von Element1 liegt |
4. Attributbedingte Formate
Element[Attribut] { Eigenschaft: Wert; }
Element[Attribut = Wert] { Eigenschaft: Wert; }
Element[Attribut ~= Wert] { Eigenschaft: Wert; }
Element[Attribut |= Wert] { Eigenschaft: Wert; }
Element[Attribut = Wert] { Eigenschaft: Wert; }
Element[Attribut ~= Wert] { Eigenschaft: Wert; }
Element[Attribut |= Wert] { Eigenschaft: Wert; }
| Element[Attribut] | gilt nur für Elemente, die das angegebene Attribut enthalten |
| Element[Attribut = Wert] | gilt nur für Elemente, deren angegebenes Attribut den angegebenen Wert hat |
| Element[Attribut ~= Wert] | gilt nur für Elemente, die u.a. Wert in einem ihrer Attribte enthalten |
5. Klassenformate
Element.Klassenname { Eigenschaft: Wert; }
.Klassenname { Eigenschaft: Wert; }
.KlassennameA.KlassennameB { Eigenschaft: Wert; }
.Klassenname { Eigenschaft: Wert; }
.KlassennameA.KlassennameB { Eigenschaft: Wert; }
| Element.Klassenname | trifft auf alle Elemente eines Typs zu, die der angegebenen Klasse angehören |
| .Klassenname | trifft af alle Elemente der angegebenen Klasse zu |
| .Klassenname1.Klassenname2 | trifft zu für Elemente mit class="Klassenname1 Klassenname2" (siehe: Anwenden von Klassen) |
6. Individualformate
#Name { Eigenschaft: Wert; }
Element#Name { Eigenschaft: Wert; }
Element#Name { Eigenschaft: Wert; }
| #Name | trifft auf alle Elemente der Id Name zu |
| Element#Name | trifft auf Elemente des Typs Element zu, die die Id Name besitzen (siehe: Anwenden von ID's) |
7. Pseudoklassen zur Linkformatierung
a:link { Eigenschaft: Wert; }
a:visited { Eigenschaft: Wert; }
a:hover { Eigenschaft: Wert; }
a:active { Eigenschaft: Wert; }
a:focus { Eigenschaft: Wert; }
a:visited { Eigenschaft: Wert; }
a:hover { Eigenschaft: Wert; }
a:active { Eigenschaft: Wert; }
a:focus { Eigenschaft: Wert; }
| a:link | noch nicht besuchter Link |
| a:visited | bereits besuchter Link |
| a:hover | Link, während der Mauszeiger darüberfährt |
| a:active | angeklickte Links |
| a:focus | Links, die den Fokus erhalten |
8. weitere Pseudoklassen
Element:first-line { Eigenschaft: Wert; }
Element:first-letter { Eigenschaft: Wert; }
Element:lang(xy) { Eigenschaft: Wert; }
Element:before { content: Wert; }
Element:after { content: Wert; }
Element:first-letter { Eigenschaft: Wert; }
Element:lang(xy) { Eigenschaft: Wert; }
Element:before { content: Wert; }
Element:after { content: Wert; }
| Element:first-line | erste Zeile |
| Element:first-letter | erster Buchstabe |
| Element:lang(xy) | Elemente mit Sprachauszeichnung |
| Element:before | vor Element einfügen |
| Element:after | nach Element einfügen |
1. absolute Angabe
2. relative Angabe
3. Farbangaben
| pt | Punkt. 1 Punkt entspricht 1/72 Inches. |
| pc | Pica. 1 Pica entspricht 12 Punkt |
| in | Inch. 1 Inch entspricht 2.54 Zentimetern |
| mm | Millimeter |
| cm | Zentimeter |
2. relative Angabe
| em | relativ zur Schriftgröße des Elternelements |
| ex | relativ zur Höhe des Buchstabens x im Elternelement |
| px | Pixel |
| % | Prozent |
3. Farbangaben
| #RRGGBB | Hexadezimale RGB-Angabe |
| #RGB | Hexadezimale RGB-Angabe (Kurzform) |
| 'name' | benannte Farben (wie in HTML) |
| rgb(R,G,B) | RGB Anteile dezimal (0-255) |
| rgb(%,%,%) | RGB Anteile Prozentual |
1. Schriftart
2. Schriftgröße
3. Schriftstil
4. Schriftwichte
5. Schriftvariante
6. Schriftweite
7. Schrift
8. Zeichenabstand
9. Wortabstand
10. Textdekoration
11. Text Transformation
12. Textfarbe
font-family: Schriftart, Alternative Schrift 1, Alternative Schrift 2, ...;
| Festlegen der Schriftart. (z.b. Verdana) |
2. Schriftgröße
font-size: Wert;
| Wert | siehe Maßeinheiten |
3. Schriftstil
font-style: Wert;
| Wert | italic = kursiv oblique = kursiv normal = normal |
4. Schriftwichte
font-weight: Wert;
| Wert | lighter sehr dünn normal = normal bold = dick bolder = extra dick 100..900 = 100 → sehr dünn, 900 → sehr dick |
5. Schriftvariante
font-variant: Wert;
| Wert | small-caps Kapitälchen normal = normal |
6. Schriftweite
font-stretch: Wert;
| Wert | wider breiter als normal narrower = enger als normal condensed = gestaucht semi-condensed = halb gestaucht extra-condensed = stark gestaucht ultra-condensed = sehr stark gestaucht expanded = geweitet semi-expanded = halb geweitet extra-expanded = stark geweitet ultra-expanded = sehr stark geweitet normal = normal |
7. Schrift
font: Wert, Wert, Wert, ...;
| Wert | kann alle Werte der vorherigen Eigenschaften in beliebiger Reihenfolge enthalten |
8. Zeichenabstand
letter-spacing: Wert;
| Wert | siehe: Maßeinheiten in CSS |
9. Wortabstand
word-spacing: Wert;
| Wert | siehe: Maßeinheiten in CSS |
10. Textdekoration
text-decoration: Wert;
| Wert | none = keine Text-Dekoration underline = unterstrichen overline = überstrichen line-through = durchgestrichen blink = blinkend |
11. Text Transformation
text-transform: Wert;
| Wert | capitalize = erste Buchstaben groß uppercase = nur Großbuchstaben overline = überstrichen lowercase = nur Kleinbuchstaben none = keine Text-Dekoration |
12. Textfarbe
color: Wert;
| Wert | Farbe in Hexadezimaler Darstellung (#xxxxxx) |
1. Texteinrückung
2. Vertikale Ausrichtung
3. Horizontale Ausrichtung
4. Zeilenhöhe
5. Wortumbruch
text-indent: Wert;
| Wert | siehe: Maßeinheiten in CSS |
2. Vertikale Ausrichtung
vertical-align: Wert;
| Wert | top = oben bündig ausrichten middle = mittig ausrichten bottom = unten bündig ausrichten baseline = an der Basislinie, oder unten bündig ausrichten sub = tieferstellen (bei gleicher Schriftgröße) super= hochstellen (bei gleicher Schriftgröße) text-top = am oberen Rand ausrichten text-bottom = am unteren Rand ausrichten |
3. Horizontale Ausrichtung
text-align: Wert;
| Wert | left = linksbündig center = zentriert right = rechtsbündig ausrichten justify = Blocksatz |
4. Zeilenhöhe
line-height: Wert;
| Wert | siehe: Maßeinheiten in CSS |
5. Wortumbruch
white-space: Wert;
| Wert | normal = automatischer Zeilenumbruch pre = Zeilenumbruch wie eingegeben nowrap = kein automatischer Zeilenumbruch |
1. Rahmendicke
2. Rahmentyp
3. Rahmenfarbe
4. Rahmen
border-width:Wert;
border-top-width:Wert;
border-bottom-width:Wert;
border-left-width:Wert;
border-right-width:Wert;
border-top-width:Wert;
border-bottom-width:Wert;
border-left-width:Wert;
border-right-width:Wert;
| Wert | thin = dünn medium = mittelstark thick = dick oder ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
2. Rahmentyp
border-style: Wert;
border-top-style: Wert;
border-bottom-style: Wert;
border-left-style: Wert;
border-right-style: Wert;
border-top-style: Wert;
border-bottom-style: Wert;
border-left-style: Wert;
border-right-style: Wert;
| Wert | none = kein Rahmen dotted = gepunktet dashed = gestrichelt solid = durchgezogen double = doppelt durchgezogen groove = 3D-Effekt ridge = 3D-Effekt inset = 3D-Effekt outset= 3D-Effekt |
3. Rahmenfarbe
border-color: Wert;
border-top-color: Wert;
border-bottom-color: Wert;
border-left-color: Wert;
border-right-color: Wert;
border-top-color: Wert;
border-bottom-color: Wert;
border-left-color: Wert;
border-right-color: Wert;
| Wert | Farbe in Hexadezimaler Darstellung |
4. Rahmen
border-color: Wert, Wert, Wert;
border-top-color: Wert, Wert, Wert;
border-bottom-color: Wert, Wert, Wert;
border-left-color: Wert, Wert, Wert;
border-right-color: Wert, Wert, Wert;
border-top-color: Wert, Wert, Wert;
border-bottom-color: Wert, Wert, Wert;
border-left-color: Wert, Wert, Wert;
border-right-color: Wert, Wert, Wert;
| Wert | jeweils 3 passende Werte für border-style, border-width und border-color, mit Leerzeichen dazwischen notieren |
Außenrand
margin-top: Wert;
margin-bottom: Wert;
margin-left: Wert;
margin-right: Wert;
margin: Wert;
margin-bottom: Wert;
margin-left: Wert;
margin-right: Wert;
margin: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
| margin: Wert | Passende Werte in der Reihenfolge margin-top, margin-bottom, margin-left und margin-right, durch Komma getrennt |
Innenabstand
padding-top: Wert;
padding-bottom: Wert;
padding-left: Wert;
padding-right: Wert;
padding: Wert;
padding-bottom: Wert;
padding-left: Wert;
padding-right: Wert;
padding: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
| padding: Wert | gleicher Abstand für alle Seiten. Ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
1. Darstellungstyp
2. Einrückung
3. Eigene Grafik
4. Allgemeine Darstellung
list-style-type: Wert;
| Wert | decimal = Nummerierung 1., 2., 3., ... (ol-Listen) lower-roman =Nummerierung i. ,ii. ,iii., ... (ol-Listen) upper-roman =Nummerierung I., II., III., ... (ol-Listen) lower-alpha =Nummerierung a., b., c., ... (ol-Listen) upper-alpha =Nummerierung A., B., C., ... (ol-Listen) lower-greek =Nummerierung griechisch: α., β., γ., ... (ol-Listen) hebrew =Nummerierung hebräisch (ol-Listen) decimal-leading-zero =Nummerierung 01., 02., 03., ... (ol-Listen) cjk-ideographic = Nummerierung mit ideographischen Zeichen (ol-Listen) hiragana =Nummerierung in Japanisch (a, i, u, e, ...) (ol-Listen) katakana =Nummerierung in Japanisch (A, I, U, E, ...) (ol-Listen) hiragana-iroha = Nummerierung in Japanisch (i, ro, ha, ni, ...) (ol-Listen) katakana-iroha =Nummerierung in Japanisch (I, RO, HA, NI, ...) (ol-Listen) disc =Dateisymbol (ul-Listen) circle = rundes Zeichen (ul-Listen) square = rechteckiges Zeichen (ul-Listen) none = keine Nummerierung |
2. Einrückung
list-style-position: Wert;
| Wert | inside = eingerückt outside = ausgerückt |
3. Eigene Grafik
list-style-image:url(URI);
| URI | Adresse zur gewünschten Bilddatei |
4. Allgemeine Darstellung
list-style: Wert;
| Wert | Eine Kombination aus den oben genannten Werten, durch Leerzeichen getrennt. Reihenfolge beliebig. |
1. Überschrift ausrichten
2. Eigenschaften zur Breite
3. Rahmentyp
4. Rahmenabstand
5. leere Zellen
6. Sprachausgabe
caption-side: Wert;
| Wert | top = oberhalb der Tabelle bottom = unterhalb der Tabelle left = links neben der Tabelle right = rechts neben der Tabelle |
2. Eigenschaften zur Breite
table-layout: Wert;
| Wert | fixed = Breitenangaben haben Vorrang (Zelleninhalt wird notfalls abgeschnitten) auto = Zelleninhalt hat Vorrang vor Breitenangabe |
3. Rahmentyp
border-collapse: Wert;
| Wert | separate = Zellenrahmen fallen nicht zusammen collapse = Zellenrahmen fallen zusammen |
4. Rahmenabstand
border-spacing: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
5. leere Zellen
empty-cells: Wert;
| Wert | show = Rahmen leerer Zellen wird angezeigt hide = Rahmen leerer Zellen wird verborgen |
6. Sprachausgabe
speak-header-cell: Wert;
| Wert | always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen once = Kopfzelleninhalt nur einmal wiedergeben |
1. Hintergrundfarbe
2. Hintergrundbild
3. Widerholung
4. Wasserzeichen
5. Hintergrundposition
6. Allgemeine Darstellung
background-color: Wert;
| Wert | Für Wert eine Farbe in Hexadezimaler Darstellung angeben. |
2. Hintergrundbild
background-image: url(URI);
| URI | Adresse zum gewünschten Hintergrundbild. |
3. Widerholung
background-image: url(URI);
background-repeat:Wert: Wert;
background-repeat:Wert: Wert;
| Wert | repeat = wiederholen br />
repeat-x = nur eine Zeile lang wiederholen repeat-y= nur eine Spalte lang wiederholen no-repeat= nicht wiederholen |
4. Wasserzeichen
background-image: url(URI);
background-attachment: Wert;
background-attachment: Wert;
| Wert | scroll = Hintergrund scrollt mit fixed = Hintergrund bleibt beim scrollen stehen |
5. Hintergrundposition
background-image: url(URI);
background-position: Wert;
background-position: Wert;
| Wert | top = oben bündig (vertikal) center = zentriert (horizontal) center = mittig (vertikal) bottom = unten bündig (vertikal) left = linksbündig (horizontal ) right = rechtsbündig (horizontal) |
6. Allgemeine Darstellung
background: Wert;
| Wert | Eine Kombination aus den oben genannten Werten, durch Leerzeichen getrennt. (Beispiel: background: url(Bild.gif) repeat-x scroll;) |
1. Positionsart
2. Startposition
3. Höhe / Breite
4. minimale Höhe / Breite
5. maximale Höhe / Breite
6. übergroßer Inhalt
7. Schriftrichtung
8. Textumfluss
9. Fortsetzung nach Textumflss
10. Positionierung von Elementen (3te Dimension)
11. Anzeigeart (ohne Platz zu reservieren)
12. Anzeigeart (Platz wird reserviert)
13. Anzeigebereich
position: Wert;
| Wert | absolute = absolute Positionierung, gemessen am Rand des Elternelements, scrollbar. fixed = absolute Positionierung, gemessen am Rand des Elternelements, bleibt beim Scrollen stehen relative = relative Positionierung, gemessen an der elementeigenen Normalposition static = keine spezielle Positionierung |
2. Startposition
top: Wert;
left: Wert;
bottom: Wert;
right: Wert;
left: Wert;
bottom: Wert;
right: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) Nutzen Sie diese Eigenschaft in Verbindung mit absoluter / relativer Positionsart |
3. Höhe / Breite
width: Wert;
height: Wert;
height: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
4. minimale Höhe / Breite
min-width: Wert;
min-height: Wert;
min-height: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
5. maximale Höhe / Breite
max-width: Wert;
max-height: Wert;
max-height: Wert;
| Wert | ein nummerischer Wert (siehe: Maßeinheiten in CSS) |
6. übergroßer Inhalt
overflow: Wert;
| Wert | visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist. hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet. scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet, jedoch Scrollbalken auto = Der Webbrowser entscheidet, wie das Element im Konfliktfall angezeigt wird |
7. Schriftrichtung
direction: Wert;
| Wert | ltr = von links nach rechts rtl = von rechts nach links |
8. Textumfluss
float: Wert;
| Wert | left = Element steht links und wird rechts umflossen right = Element steht rechts und wird links umflossen none = kein Umfluss |
9. Fortsetzung nach Textumflss
clear: Wert;
| Wert | left = Erzwingt Fortsetzung unterhalb bei float: left; right = Erzwingt Fortsetzung unterhalb bei float: right; both = Erzwingt Fortsetzung unterhalb none = Erzwingt keine Fortsetzung unterhalb |
10. Positionierung von Elementen (3te Dimension)
z-index: Wert;
| Wert | Je größer der Wert, desto weiter vorne ist das Element. Sinnvoll bei absoluter Positionierung, und sich Überlappenden Elementen |
11. Anzeigeart (ohne Platz zu reservieren)
display: Wert;
| Wert | block = Erzwingt einen Block (erzeugt neue Zeile) inline = Erzwingt die Anzeige im Text list-item = wie block, jedoch mit Aufzählungszeichen marker = deklariert automatisch generierten Text für das Element run-in, compact = das Element wird kontext-abhängig als Block-Element oder als Inline-Element dargestellt none = Element wird nicht angezeigt und es wird auch kein Platz freigehalten Tabellen aus Nicht-Tabellen-Elementen table = Das Element beinhaltet tabellarisch angeordnete Unterelemente und erzeugt eine neue Zeile inline-table = Das Element beinhaltet tabellarisch angeordnete Unterelemente und wird im laufenden Textfluss angezeigt table-row = Das Element beinhaltet nebeneinander angeordnete Unterelemente table-row-group = Das Element beinhaltet eine Gruppe von Elementen mit nebeneinander angeordnete Unterelemente (tbody) table-header-group = Das Element beinhaltet eine Gruppe von Elementen mit nebeneinander angeordnete Unterelemente (thead) table-footer-group = Das Element beinhaltet eine Gruppe von Elementen mit nebeneinander angeordnete Unterelemente (tfoot) table-column = Das Element steht für eine Gruppe von Elementen, die eine Spalte der Tabelle bilden table-column-group = Das Element steht für eine Gruppe von Elementen in jeweils einer Tabellenzelle table-cell = Das Element steht für eine Tabellenzelle table-caption = Das Element steht für eine Tabellenüberschrift |
12. Anzeigeart (Platz wird reserviert)
visibility: Wert;
| Wert | hidden = Der Inhalt des Element wird versteckt visible = Der Inhalt des Element wird angezeigt |
13. Anzeigebereich
clip: rect(Wert Wert Wert Wert);
| Wert | jeweils ein passender nummerischer Wert für oben, rechts, unten, links. (siehe: Maßeinheiten in CSS) |
Aussehen des Cursors
cursor: Wert;
| Wert | auto = automatisch default = Standard-Cursor (plattformunabhängig) crosshair = einfaches Fadenkreuz pointer = Zeige move = Kreuz n-resize = Pfeil (nach oben) ne-resize = Pfeil (nach rechts oben) e-resize = Pfeil (nach rechts) se-resize = Pfeil (nach rechts unten) s-resize = Pfeil (nach unten) sw-resize = Pfeil (nach links unten) w-resize = Pfeil (nach links) nw-resize = Pfeil (nach links oben) text = Cursorform, die normalen Text symbolisiert wait = Cursorform, die einen Wartezustand signalisiert help = Cursorform, die Hilfe zu dem Element signalisiert |
Aussehen des Scrollbalken
Die Eigenschaften können auf das body und das textarea Element angewendet werden
scrollbar-base-color: #xxxxxx;
scrollbar-3dlight-color: #xxxxxx;
scrollbar-arrow-color: #xxxxxx;
scrollbar-darkshadow-color: #xxxxxx;
scrollbar-face-color: #xxxxxx;
scrollbar-highlight-color: #xxxxxx;
scrollbar-shadow-color: #xxxxxx;
scrollbar-track-color: #xxxxxx;
scrollbar-3dlight-color: #xxxxxx;
scrollbar-arrow-color: #xxxxxx;
scrollbar-darkshadow-color: #xxxxxx;
scrollbar-face-color: #xxxxxx;
scrollbar-highlight-color: #xxxxxx;
scrollbar-shadow-color: #xxxxxx;
scrollbar-track-color: #xxxxxx;
Die Eigenschaften können auf das body und das textarea Element angewendet werden
| scrollbar-base-color | Basisfarbe der Scroll-Leiste |
| scrollbar-3dlight-color | Farbe für 3D-Effekte |
| scrollbar-arrow-color | Farbe für Verschiebepfeile |
| scrollbar-darkshadow-color | Farbe für Schatten |
| scrollbar-face-color | Farbe für Oberfläche |
| scrollbar-highlight-color | Farbe für oberen und linken Rand |
| scrollbar-shadow-color | Farbe für unteren und rechten Rand |
| scrollbar-track-color | Farbe für freibleibenden Verschiebeweg |
