| Name | Bedeutung |
|---|---|
| div | Ein Block ohne weitere Besonderheit. Gut um Elemente zu gruppieren. |
| span | Ein Inline-Element ohne weitere Besonderheit. Gut zum gruppieren ohne einen Zeilenumbruch oder Abstand. |
| Eigenschaft | Bedeutung | Werte |
|---|---|---|
| Allgemein | ||
| width | Breite eines Elements | Wert mit einheit in Pixeln (px), Punkten (pt), cm, mm, ... oder in % |
| height | Höhe eines Elements | Wert mit einheit in Pixeln (px), Punkten (pt), cm, mm, ... |
| overflow | Verhalten, wenn der Inhalt zu groß ist (wg. width/height) | auto, visible, hidden, scroll |
| display | Legt fest ob das Element als Block oder als Zeilenelement behandelt wird | inline: ohne Zeilenumbruch (wie span, i, b, a, ...) block: mit Zeilenumbruch (wie div, p, ol, ...) |
| Text | ||
| text-align | Ausrichtung | left, right, center, justify |
| text-height | Zeilenabstand | Wert in pt, px, mm, cm |
| word-spacing | Wortabstand | Wert in pt, px, mm, cm |
| letter-spacing | Zeichenabstand | Wert in pt, px, mm, cm |
| text-transform | Groß-/Kleinschreibung | uppercase, lowercase, capitalize |
| text-shadow | Schatten (um x/y verschobene Textkopie im Hintergrund) | Werte für x y und eine Farbe |
| Ein 3.Parameter gibt erzeugt einen verwaschenen Schatten: text-shadow: 2px 2px 5px red | ||
| Bilder (img) | ||
| opacity | Deckkraft (Transparenz) | Kommazahl von 0.0 bis 1.0 |
| Abstände außen | ||
| padding-top | oben | Wert in pt, px, mm, cm |
| padding-bottom | unten | Wert in pt, px, mm, cm |
| padding-left | links | Wert in pt, px, mm, cm |
| padding-right | rechts | Wert in pt, px, mm, cm |
| padding |
Kurzform (entweder 2 Werte:
oben/unten rechts/links oder 4 Werte: oben rechts unten links) | 2/4 Werte in pt, px, mm, cm |
| Abstände innen | ||
| padding-top | oben | Wert in pt, px, mm, cm |
| padding-bottom | unten | Wert in pt, px, mm, cm |
| padding-left | links | Wert in pt, px, mm, cm |
| padding-right | rechts | Wert in pt, px, mm, cm |
| padding |
Kurzform (entweder 2 Werte:
oben/unten rechts/links oder 4 Werte: oben rechts unten links) | 2/4 Werte in pt, px, mm, cm |
| Rahmen | ||
| border-style | Rahmenart | dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| gibt es auch als border-top-style, border-left-style, border-bottom-style und border-right-style | ||
| border-width | Rahmendicke | Wert mit Einheit (pt, px, ...) |
| auch als border-top-width, border-left-width, ... | ||
| border-color | Rahmenfarbe | eine Farbe |
| auch als border-top-color, border-left-color, ... | ||
| border | Kurzform | 3 Werte: Breite Style und Farbe border: 3px solid red; |
| auch als border-top etc. | ||
| border-radius | Rundung der Ecken | Wert mit Einheit (pt, px, ...) |
| auch als border-top-left-radius, border-bottom-right etc. | ||
| outline |
wie Border, nur dass er außerhalb des Margins ist und daher mit anderen Elementen überlappen kann. Es gibt also auch outline-style, outline-color, ... | |
| Link Pseudoklassen | ||
| a:link | CSS-Klasse für (noch) nicht besuchte Links | |
| a:visited | CSS-Klasse für besuchte Links | |
| a:hover | CSS-Klasse für Links über denen die Maus ist | |
| a:active | CSS-Klasse für Links auf die gerade geklickt wird | |
