====== CSS-Referenz ======
===== Einbindung in HTML =====
==== Direkt in der HTML-Datei ====
Ein einfachstes ''Style''-Tag steht im ''''-Bereich einer html-Seite und könnte etwa so aussehen:
==== In einer eigenen CSS-Datei ====
Besser ist es, CSS-Definitionen in einer separaten CSS-Datei zu speichern. Dazu muss die CSS-Datei in der HTML-Datei mit einem ''[[web:html:link|]]''-Element eingebunden werden:
Titel der Webseite
body {
background-color: yellow;
color: green;
}
p {
color: red;
}
===== Hintergrund =====
^ Eigenschaft ^ Bedeutung ^ Mögliche Werte ^
| ''background-color'' | Hintergrundfarbe | [[color|Farbe]] |
| ''background-image'' | Hintergrundbild | [[url|URL]] |
| ''background-position'' | Ausrichtung des Hintergrundbildes | ''left'', ''center'', ''right'', ''top'', ''bottom'' |
| ''background-repeat'' | Kachelung des Hintergrundbildes | ''repeat'', ''repeat-x'', ''repeat-y'', ''no-repeat'' |
| ''background-size'' | Grösse des Hintergrundbildes | [[size|Grösse]], ''cover'' |
| ''background-attachment'' | Scrolling der Hintergrundbildes | ''scroll'', ''fixed'' |
===== Rahmen =====
^ Eigenschaft ^ Bedeutung ^ Mögliche Werte ^
| ''border-color'' | Rahmenfarbe | [[color|Farbe]] |
| ''border-style'' | Rahmenart | ''none'', [[border-style|Rahmenart]] |
| ''border-width'' | Rahmendicke | [[size|Grösse]] |
| ''border-bottom-color'' | Rahmenfarbe unten | [[color|Farbe]] |
| ''border-bottom-style'' | Rahmenart unten | ''none'', [[border-style|Rahmenart]] |
| ''border-bottom-width'' | Rahmendicke unten | [[size|Grösse]] |
| ''border-left-color'' | Rahmenfarbe links | [[color|Farbe]] |
| ''border-left-style'' | Rahmenart links | ''none'', [[border-style|Rahmenart]] |
| ''border-left-width'' | Rahmendicke links | [[size|Grösse]] |
| ''border-right-color'' | Rahmenfarbe rechts | [[color|Farbe]] |
| ''border-right-style'' | Rahmenart rechts | ''none'', [[border-style|Rahmenart]] |
| ''border-right-width'' | Rahmendicke rechts | [[size|Grösse]] |
| ''border-top-color'' | Rahmenfarbe oben | [[color|Farbe]] |
| ''border-top-style'' | Rahmenart oben | ''none'', [[border-style|Rahmenart]] |
| ''border-top-width'' | Rahmendicke oben | [[size|Grösse]] |
| ''margin'' | Aussenabstand | [[size|Grösse]] |
| ''margin-bottom'' | Aussenabstand unten | [[size|Grösse]] |
| ''margin-left'' | Aussenabstand links | [[size|Grösse]] |
| ''margin-right'' | Aussenabstand rechts | [[size|Grösse]] |
| ''margin-top'' | Aussenabstand oben | [[size|Grösse]] |
| ''padding'' | Innenabstand | [[size|Grösse]] |
| ''padding-bottom'' | Innenabstand unten | [[size|Grösse]] |
| ''padding-left'' | Innenabstand links | [[size|Grösse]] |
| ''padding-right'' | Innenabstand rechts | [[size|Grösse]] |
| ''padding-top'' | Innenabstand oben | [[size|Grösse]] |
===== Positionierung =====
| ''bottom'' | Positionierung | [[size|Grösse]] |
| ''left'' | Positionierung | [[size|Grösse]] |
| ''right'' | Positionierung | [[size|Grösse]] |
| ''top'' | Positionierung | [[size|Grösse]] |
| ''position'' | Positionierung | ''static'', ''fixed'', ''relative'', ''absolute'' |
===== Schrift =====
| ''color'' | Schriftfarbe | [[color|Farbe]] |
| ''font-family'' | Schriftart | [[font-family|Schriftarten]] |
| ''font-variant'' | Kapitälchen | ''normal'', ''small-caps'' |
| ''font-style'' | Kursivschrift | ''normal'', ''italic'' |
| ''font-size'' | Grösse der Schrift | [[font-size|Schriftgrösse]] |
| ''font-weight'' | Dicke und Stärke der Schrift | ''normal'', ''bold'', ''bolder'', ''lighter'' |
| ''text-align'' | Textausrichtung | ''left'', ''right'', ''center'', ''justify'' |
| ''text-decoration'' | Text über-, durch- oder unterstrichen | ''overstrike'', ''strike-through'', ''underline'', ''none'' |