Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:css [2025-10-24 08:35] – [Selektoren und Formatierungsregeln] hof
+++ gf_informatik:web:css [2025-11-03 07:10] (aktuell) – [Abstände & Ränder] hof
@@ Zeile 91: / 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 113: / Zeile 113: @@
 == Horizontale Zentrierung ==
-Ein Element (beispielsweise der ganze `body`) lässt sich einfach horizontal zentrieren, indem die Breite auf eine bestimmte Grösse gesetzt wird, und die `margin` links und rechts auf den Wert `auto` gesetzt wird:
+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:
@@ Zeile 198: / 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 205: / 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 230: / 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 288: / 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]]