Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- web:css:start [2014/09/11 09:41] – rothe
+++ web:css:start [2020/10/13 14:25] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
 ====== CSS-Referenz ======
+===== Einbindung in HTML =====
+==== Direkt in der HTML-Datei ====
 Ein einfachstes ''Style''-Tag steht im ''<head>''-Bereich einer html-Seite und könnte etwa so aussehen:
@@ Zeile 14: / Zeile 18: @@
 </code>
-===== Schrift =====
+==== 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|<link>]]''-Element eingebunden werden:
+<code html webseite.html>
+<!doctype html>
+<html>
+  <head>
+    <link rel="stylesheet" href="mystyle.css">
+    <meta charset="UTF-8">
+    <title>Titel der Webseite</title>
+  </head>
+  <body>
+  </body>
+</html>
+</code>
+<code css mystyle.css>
+body {
+  background-color: yellow;
+  color: green;
+}
+p {
+  color: red;
+}
+</code>
+===== 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]] |
@@ Zeile 23: / Zeile 100: @@
 | ''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'' |