Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.


Vorherige Überarbeitung
—gf_informatik:web:css [2024-12-03 15:45] (aktuell) – [Weiterführende Links] hof
Zeile 1: Zeile 1:
 +===== CSS =====
 +
 +**Ziel:** Website von vorherigem Auftrag mithilfe von CSS stylen.
 +
 +{{ :gf_informatik:web_sca:web_01_websites_02_css.pdf |}}
 +
 +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:
 +
 +{{ :gf_informatik:web:html_css.png?400 |}}
 +
 +{{ :gf_informatik:web_sca:html_css_3.jpg?400 |}}
 +
 +=== Einbindung von CSS in HTML ===
 +
 +Das CSS wird in einer separaten Datei (zum Beispiel `style.css`) gespeichert. Um unsere Webseite zu formatieren, verweisen wir im `head` der HTML-Datei wie folgt darauf:
 +
 +<code html>
 +<html>
 +  <head>
 +    <title>Titel</title>
 +    <link rel="stylesheet" href="style.css" />
 +  </head>
 +  ...
 +</html>
 +</code>
 +
 +Die Trennung von Formatierung und Inhalten ermöglicht es, dasselbe Format und den gleichen Stil auf viele verschiedene Seiten anzuwenden. Beispielsweise muss eine Zeitungs-Website ihr Format nur einmal definieren (und der Browser es nur einmal herunterladen), und es wird dann auf jeden Artikel angewendet.
 +
 +=== Selektoren und Formatierungsregeln ===
 +
 +Jede **CSS-Regel** besteht aus zwei Teilen:
 +  * dem **Selektor** - er bestimmt, für //welche// Elemente die Regel gilt, und
 +  * den **Formatierungsregeln** - diese definieren, wie die gewählten Elemente //aussehen// sollen und ist von Form: `<Attribut>:<Wert>`
 +
 +Der einfachste Selektor besteht einfach aus dem HTML-Element (also dem Tag-Namen). Es gibt noch andere Selektoren, auf die wir hier nicht eingehen. Nach dem Selektor folgen geschweifte Klammern, die die Formatierungseigenschaften enthalten. Jede Eigenschaft wird gefolgt von einem Doppelpunkt, dem gewünschten Wert, und einem Semikolon.
 +
 +== Beispiel 1 ==
 +
 +Mit `<strong>...</strong>` können wir Text hervorheben, indem wir diesen fett erscheinen lassen. Nun wollen wir, dass dieser Text zusätzlich einen roten Hintergrund hat. Dazu fügen wir folgende CSS-Regel hinzu:
 +<code css>
 +strong {
 +  background-color: red;
 +}
 +</code>
 +Nach einem Reload zeigt unsere Webseite nun `<strong>` Elemente mit rotem Hintergrund an.
 +
 +== Beispiel 2 ==
 +
 +<WRAP group>
 +<WRAP column half>
 +
 +Eine etwas ausgereiftere CSS-Datei könnte wie folgt aussehen:
 +
 +<code css>
 +body {
 +  background-color: lightgrey;
 +  font-family: sans-serif;
 +}
 +h3 {
 +  font-size: 5mm;
 +  color: darkgrey;
 +}
 +strong {
 +  background-color: red;
 +  padding: 1mm;
 +  border: 1px dashed black;
 +}
 +</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: 1em;">
 +    <h3 style="font-size: 5mm; color: darkgrey; border: 0; margin: 0 !important;">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 ===
 +{{ :gf_informatik:web:css:pasted:20231022-184559.png?nolink&400}}
 +
 +Jedes Element ist von drei Umrandungen umgeben:
 +  * `padding`: der Innenabstand zwischen Inhalt und `border`, mit Hintergrundfarbe eingefärbt.
 +  * `border`: der Rahmen zwischen `padding` und `margin`, mit eigener Farbe und Stil.
 +  * `margin`: der Aussenabstand zu den benachbarten Elementen, transparent.
 +    * Bei aneinanderstossenden Elementen überlappen sich die Margins, d.h. der Abstand entspricht dem jeweils grösseren.
 +
 +== 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: 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:
 +
 +== Das class Attribut ==
 +Ein HTML-Element kann deklarieren, dass es zu einer Klasse gehört, mit dem `class`-Attribut. Ein Selektor aus dem Punkt und dem Klassenamen wählt alle Elemente dieser Klasse aus:
 +
 +<WRAP group>
 +
 +<WRAP column third>
 +<code html>
 +<p class="green">Ein grüner Abschnitt.</p>
 +<p class="red">Ein roter Abschnitt.</p>
 +</code>
 +</WRAP>
 +<WRAP column third>
 +<code css>
 +.green {
 +    background-color: green;
 +}
 +.red {
 +    background-color: red;
 +}
 +</code>
 +</WRAP>
 +<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>
 +
 +</WRAP>
 +
 +Ein Element kann auch mehreren Klassen angehören; zudem können wir den Element-Selektor und den Klassenselektor kombinieren:
 +
 +<WRAP group>
 +
 +<WRAP column third>
 +<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>
 +</code>
 +</WRAP>
 +<WRAP column third>
 +<code css>
 +p.rounded {
 +    padding: 1em;
 +    border-radius: 0.5em;
 +}
 +div.rounded {
 +    padding: 0 2em;
 +    border-radius: 0.5em;
 +}
 +.green {
 +    background-color: green;
 +}
 +.red {
 +    background-color: red;
 +}
 +</code>
 +</WRAP>
 +<WRAP column third>
 +<HTML>
 +  <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>
 +</HTML>
 +</WRAP>
 +
 +</WRAP>
 +
 +== Das id Attribut ==
 +Ein HTML-Element kann eine Identität deklarieren mit dem `id`-Attribut. Ein Selektor aus dem Hashtag (`#`) und der Identität wählt dieses Element aus:
 +
 +<WRAP group>
 +
 +<WRAP column third>
 +<code html>
 +<p id="theoneandonly">Der eine, wichtige Abschnitt.</p>
 +<p>Ein ganz anderer Abschnitt.</p>
 +</code>
 +</WRAP>
 +<WRAP column third>
 +<code css>
 +p#theoneandonly {
 +  padding: 0.5em;
 +  background-color: red;
 +  border: 2px dashed black;
 +}
 +</code>
 +</WRAP>
 +<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 ===
 +
 +Die Website [[https://wiki.selfhtml.org/wiki/CSS|SelfHTML]] bietet sowohl eine **Einführung in CSS** als auch ein **Nachschlagewerk** für die tausenden von Eigenschaften, Layouts, und Tricks.
 +    * 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]]
 +    * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst|HTML Grundgerüst]]
 +    * alle [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|CSS Tutorials]]
 +