Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung
Vorherige Überarbeitung
gf_informatik:web:css [2025-10-26 14:51] – [Wichtigste CSS-Eigenschaften] hofgf_informatik:web:css [2025-11-03 07:10] (aktuell) – [Abstände & Ränder] hof
Zeile 113: Zeile 113:
  
 == Horizontale Zentrierung == == 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> </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> <WRAP group>
Zeile 205: Zeile 205:
 <code html> <code html>
 <p class="green rounded">Ein grüner Abschnitt mit Padding.</p> <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> </code>
 </WRAP> </WRAP>
 <WRAP column third> <WRAP column third>
 <code css> <code css>
-p.rounded {+.rounded {
     padding: 1em;     padding: 1em;
-    border-radius: 0.5em; 
-} 
-div.rounded { 
-    padding: 0 2em; 
     border-radius: 0.5em;     border-radius: 0.5em;
 } }
Zeile 230: Zeile 226:
   <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">   <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> <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> </div>
 </HTML> </HTML>
Zeile 288: Zeile 284:
     * mehr zu [[https://wiki.selfhtml.org/wiki/Grafik/Farbe|Farben]]     * 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/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]]     * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst|HTML Grundgerüst]]
     * alle [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|CSS Tutorials]]     * alle [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|CSS Tutorials]]
  
  
  • gf_informatik/web/css.1761490303.txt.gz
  • Zuletzt geändert: 2025-10-26 14:51
  • von hof