Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:css [2023-10-31 09:25] – [Abstände & Ränder] gra
+++ gf_informatik:web:css [2025-11-03 07:10] (aktuell) – [Abstände & Ränder] hof
@@ Zeile 50: / Zeile 50: @@
 <WRAP column half>
-Ein etwas ausgereifteres CSS-File könnte wie folgt aussehen:
+Eine etwas ausgereiftere CSS-Datei könnte wie folgt aussehen:
 <code css>
@@ Zeile 83: / Zeile 83: @@
 </WRAP>
+Beachte:
+  * [[https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited|Einige CSS-Eigenschaften]] gelten für das ausgewählte Element **und** all seine Kinder (z.B. wird die Schriftart für den `body` geändert, aber auch für alle enthaltenen Elemente).
 === Wichtigste CSS-Eigenschaften ===
@@ Zeile 88: / Zeile 91: @@
 ^ Attribut            ^ Bedeutung         ^ Werte                          ^ Weiterführende Infos ^
 | `color`             | Textfarbe         | `red`, `rgb(30%, 50%, 100%)`  | [[https://wiki.selfhtml.org/wiki/Grafik/Farbe|Farben]] auf SelfHTML |
-| `font-family`       | Schriftart        | `sans-serif`, `monospace`     | [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie|Schriftformatierung]] auf SelfHTML |
+| `font-family`       | Schriftart        | `sans-serif`, `monospace`     | [[https://wiki.selfhtml.org/wiki/Typografie|Schriftformatierung]] auf SelfHTML |
 | `font-size`        | Schriftgrösse     | `1cm`, `10px`                  | [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]] auf SelfHTML |
 | `font-weight`      | Schriftstil       | `bold`, `italic`               ||
@@ Zeile 105: / Zeile 108: @@
 == Margin & Padding ==
-Beide Abstandsbreiten können einzeln mit `margin-left`, `margin-right`, `margin-top` und `margin-bottom` (bzw. `padding-left`...) gesetzt werden. Alternativ dazu kann ein einziger Wert für alle Seiten mit `margin: 1cm` gesetzt werden.
+Beide Abstandsbreiten können einzeln mit `margin-left`, `margin-right`, `margin-top` und `margin-bottom` (bzw. `padding-left`...) gesetzt werden. Alternativ dazu kann ein einziger Wert für alle Seiten mit `margin: 1cm` gesetzt werden. Werden nur zwei Werte angegeben, so ist der erste Wert für die vertikale Richtung (also oben und unten), der zweite für die horizontale.
 Mehr Informationen [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Au%C3%9Fen-_und_Innenabstand|selfhtml]].
+== Horizontale Zentrierung ==
+Ein Blockelement (beispielsweise der ganze `body`) lässt sich horizontal zentrieren, indem die Breite auf eine bestimmte Grösse gesetzt wird, und die `margin` links und rechts auf den Wert `auto` gesetzt wird:
+<WRAP group>
+<WRAP column half>
+<code css>
+body {
+  max-width: 10cm;    /* Body soll nicht breiter als 10cm sein. */
+  margin: 5mm auto;   /* Oben und unten 5mm Rand, die Seiten immer gleich breit. */
+}
+</code>
+</WRAP>
+<WRAP column half>
+<HTML>
+<div style="border: 1px solid #ccc; border-radius: 4px;">
+  <div style="background-color: lightgrey; font-family: sans-serif; padding: 1em; margin: 5mm auto; max-width: 10cm;">
+    <h3 style="font-size: 5mm; color: black; border: 0; margin: 0 !important;">Body</h3>
+    <p>Verändere die Breite des Fensters und schau, was passiert!</p>
+  </div>
+</div>
+</HTML>
+</WRAP>
+</WRAP>
 == Border ==
@@ Zeile 165: / Zeile 198: @@
 </WRAP>
-Ein Element kann auch mehreren Klassen angehören; zudem können wir den Element-Selektor und den Klassenselektor kombinieren:
+Ein Element kann auch mehreren Klassen angehören:
 <WRAP group>
@@ Zeile 172: / Zeile 205: @@
 <code html>
 <p class="green rounded">Ein grüner Abschnitt mit Padding.</p>
-<div class="red rounded">Ein roter Abschnitt mit Padding links rechts.</div>
+<div class="red rounded">Ein roter Abschnitt mit Padding.</div>
 </code>
 </WRAP>
 <WRAP column third>
 <code css>
-p.rounded {
+.rounded {
     padding: 1em;
-    border-radius: 0.5em;
-}
-div.rounded {
-    padding: 0 2em;
     border-radius: 0.5em;
 }
@@ Zeile 197: / Zeile 226: @@
   <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 <p style="background-color: green; padding: 1em; border-radius: 0.5em;">Ein grüner Abschnitt mit Padding.</p>
-<div style="background-color: red; padding: 0 2em; border-radius: 0.5em;">Ein roter Abschnitt mit Padding links rechts.</div>
+<div style="background-color: red; padding: 1em; border-radius: 0.5em;">Ein roter Abschnitt mit Padding.</div>
 </div>
 </HTML>
@@ Zeile 238: / Zeile 267: @@
 Weitere Selektoren können Element auswählen, die innerhalb eines anderen bestimmten Elements sind (z.B. alle `<img>`-Elemente innerhalb einer `<ol>`-Liste), und vieles mehr. [[https://wiki.selfhtml.org/wiki/CSS/Selektoren|Selfhtml]] hat die ganze Auswahl.
+=== Mobilgeräte und Viewport ===
+Mobilgeräte sind viel kleiner als ein Computerbildschirm. Um trotzdem die ganze Webseite zu zeigen, verkleinern die meisten Mobilgeräte die Seite, aber um den Text lesen zu können, muss sie anschliessend gezoomt werden.
+Um dies zu verhindern, kann eine [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Viewportangabe|Viewportangabe]] in den `head` eingefügt werden:
+<code html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+</code>
 === Weiterführende Links ===
@@ Zeile 243: / Zeile 284: @@
     * mehr zu [[https://wiki.selfhtml.org/wiki/Grafik/Farbe|Farben]]
     * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]]
-    * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie|Schriftformatierung]]
+    * mehr zu [[https://wiki.selfhtml.org/wiki/Typografie|Schriftformatierung]]
+    * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst|HTML Grundgerüst]]
+    * alle [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|CSS Tutorials]]