Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:css [2023-10-22 19:29] – [Erweiterte Selektoren] hof
+++ gf_informatik:web:css [2024-12-03 15:45] (aktuell) – [Weiterführende Links] hof
@@ Zeile 4: / Zeile 4: @@
 {{ :gf_informatik:web_sca:web_01_websites_02_css.pdf |}}
-==== Auftrag III ====
-. Erstelle für deine **KSR-Website** vom letzten Auftrag eine **CSS-Datei** mit Namen `style.css` und füge binde sie im HTML-File ein. Wie geht das? -> Slides oder Theorie unten.\\ \\
-. **Style** nun die Website im CSS-File so, dass sie **wie unten angegeben** aussieht. Farben, Abstände usw. sollen einigermassen übereinstimmen. Die benötigte Theorie findet man unten und in den Slides. Hilfe erhältst du unterhalb des Bildes.
-   {{ :gf_informatik:web_sca:website_ksr_html_css.png?&200 |}}
-++++Hilfe zu Abständen|
-Vermeide manuelle Zeilenumbrüche mit `<br>`. Arbeite stattdessen mit **margins**.
-Beispiel: Betrachte folgenden Codeausschnitt:
-<code html>
-<h2>Titel</h2>
-<p>Ich bin ein Absatz.</p>
-</code>
-Falls der Abstand zwischen der h2-Überschrift und dem Absatz nicht gross genug ist, solltest du die Margin von h2-Überschriften (primär) und/oder der Absätze ändern. Dies hat auch den Vorteil, dass die Abstände zwischen h2 und p immer einheitlich sein werden, falls diese mehrfach vorkommen im Dokument.
-++++
-++++Hilfe zu Überschriften|
-Um die Überschriften hinzukriegen ("Balken" mit genügend Abstand), musst du mit padding, margin und border arbeiten. Siehe dazu auch das Beispiel in den Slides.
-++++
-==== Theorie CSS ====
 Mit **HTML** erstellen wir den //Inhalt// für unsere Webseite. Damit diese aber auch ansprechend dargestellt wird, **formatieren** wir sie mittels **Cascading Style Sheets** (CSS). Das Zusammenspiel zwischen HTML und CSS wird in den folgenden Grafiken visualisiert:
@@ Zeile 73: / Zeile 47: @@
 == Beispiel 2 ==
-Ein etwas ausgereifteres CSS-File könnte wie folgt aussehen:
+<WRAP group>
+<WRAP column half>
+Eine etwas ausgereiftere CSS-Datei könnte wie folgt aussehen:
 <code css>
 body {
@@ Zeile 89: / Zeile 67: @@
 }
 </code>
+</WRAP>
+<WRAP column half>
 Wird diese in eine HTML-Datei eingebunden, sieht diese wie folgt aus:
 <HTML>
 <div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
-  <div style="background-color: lightgrey; font-family: sans-serif; padding: 8px;">
+  <div style="background-color: lightgrey; font-family: sans-serif; padding: 1em;">
-    <h1 style="border: 0;">Title</h1>
+    <h3 style="font-size: 5mm; color: darkgrey; border: 0; margin: 0 !important;">Section heading</h3>
-    <h3 style="font-size: 5mm; color: darkgrey; border: 0;">Section heading</h3>
     <p>My first paragraph, it's so <strong style="background-color: red; padding: 1mm; border: 1px dashed black;">strong</strong>!</p>
   </div>
 </div>
 </HTML>
+</WRAP>
+</WRAP>
+=== Wichtigste CSS-Eigenschaften ===
+^ 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-size`        | Schriftgrösse     | `1cm`, `10px`                  | [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]] auf SelfHTML |
+| `font-weight`      | Schriftstil       | `bold`, `italic`               ||
+| `text-align`        | Ausrichtung       | `start`, `end`                ||
+| `background-color`  | Hintergrundfarbe  |                                ||
+| `background-image`  | Hintergrundbild   | `url("tigerente.jpg")`         ||
 === Abstände & Ränder ===
@@ Zeile 111: / Zeile 104: @@
     * Bei aneinanderstossenden Elementen überlappen sich die Margins, d.h. der Abstand entspricht dem jeweils grösseren.
-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.
+== 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. 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 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:
+<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 ==
 Für die `border` funktioniert die Einstellung etwas anders, da neben der Breite auch noch der Stil gesetzt werden kann. Am einfachsten werden alle Angaben zu Breite, Stil und Farbe kombiniert:
 <code css>
-  border: 0.5em solid darkblue;
+  border: 5mm solid darkblue;
 </code>
 Mehr Informationen [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/border|selfhtml]].
+== Grössenangaben ==
+Die Geräte, die unsere Webseite anzeigen sollen, sind sehr unterschiedlich gross: ein Mobiltelefon ist vielleicht 8 oder 10cm breit, auf dem Projektor stehen mehrere Meter zur Verfügung. Deshalb werden auch vermeintlich absolute Grössen wie `cm` oder `mm` vom Browser nicht so absolut interpretiert. Oft ist es ohnehin besser, stattdessen mit einem Mass zu arbeiten, dass sich auf die Schriftgrösse des Elements bezieht:
+  * `1em` ist ungefähr die Grösse des Buchstabens `M`, je nach Schriftgrösse des Elements.
+  * `1lh` entspricht der Zeilenhöhe.
+Für grössere Layouts können wir mit Grössenangaben relativ zur Grösse des Browserfensters arbeiten:
+  * `1vw` ist ein Prozent der Breite des Browserfensters.
+  * `1vh` ist ein Prozent der Höhe des Browserfensters.
+Mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]].
 === Erweiterte Selektoren ===
 Bisher haben wir CSS-Regeln für alle gleichen Elemente geschrieben. Die Selektoren können aber noch nach weiteren Kriterien entscheiden, ob eine Regel für ein Element gilt:
@@ Zeile 149: / Zeile 186: @@
 <WRAP column third>
 <HTML>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 <p style="background-color: green;">Ein grüner Abschnitt.</p>
 <p style="background-color: red;">Ein roter Abschnitt.</p>
+</div>
 </HTML>
 </WRAP>
@@ Zeile 186: / Zeile 225: @@
 <WRAP column third>
 <HTML>
-<p style="background-color: green; padding: 1em; border-radius: 0.5em;">Ein grüner Abschnitt mit rundem Rand.</p>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
-<div style="background-color: red; padding: 0 2em; border-radius: 0.5em;">Ein roter Abschnitt ohne Rand.</div>
+<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>
 </HTML>
 </WRAP>
@@ Zeile 215: / Zeile 256: @@
 <WRAP column third>
 <HTML>
+  <div style="border: 1px solid #ccc; border-radius: 4px; padding: 1em;">
 <p style="padding: 0.5em; background-color: red; border: 2px dashed black;">Der eine, wichtige Abschnitt.</p>
 <p>Ein ganz anderer Abschnitt.</p>
+</div>
 </HTML>
 </WRAP>
 </WRAP>
+== Weitere Selektoren ==
+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 227: / Zeile 286: @@
     * 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]]
+    * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst|HTML Grundgerüst]]
+    * alle [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|CSS Tutorials]]