Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- web:css:start [2014/09/11 10:11] – 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]] |
@@ Zeile 36: / Zeile 73: @@
 | ''border-top-style'' | Rahmenart oben | ''none'', [[border-style|Rahmenart]] |
 | ''border-top-width'' | Rahmendicke oben | [[size|Grösse]] |
-| ''bottom'' | Positionierung | [[size|Grösse]] |
-| ''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'' |
-| ''left'' | Positionierung | [[size|Grösse]] |
 | ''margin'' | Aussenabstand | [[size|Grösse]] |
 | ''margin-bottom'' | Aussenabstand unten | [[size|Grösse]] |
@@ Zeile 54: / Zeile 83: @@
 | ''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'' |