**Dies ist eine alte Version des Dokuments!**

CSS

Ziel: Website von vorherigem Auftrag mithilfe von CSS stylen.

web_01_websites_02_css.pdf

Auftrag III

  1. 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.

  2. 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.

Hilfe zu Abständen

Hilfe zu Überschriften

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:

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: 

<html>
  <head>
    <title>Titel</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  ...
</html>

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: 

strong {
  background-color: red;
}

Nach einem Reload zeigt unsere Webseite nun <strong> Elemente mit rotem Hintergrund an.

Beispiel 2

Ein etwas ausgereifteres CSS-File könnte wie folgt aussehen: 

body {
  background-color: lightgrey;
  font-family: sans-serif;
}
h3 {
  font-size: 5mm;
  color: darkgrey;
}
strong {
  background-color: red;
  padding: 1mm;
  border: 1px dashed black;
}

Wird diese in eine HTML-Datei eingebunden, sieht diese wie folgt aus:

Title

Section heading

My first paragraph, it's so strong!

Abstände & Ränder

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.

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.

Mehr Informationen selfhtml.

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: 

  border: 0.5em solid darkblue;

Mehr Informationen selfhtml.

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: 

<p class="green">Ein grüner Abschnitt.</p>
<p class="red">Ein roter Abschnitt.</p>
.green {
    background-color: green;
}
.red {
    background-color: red;
}

Ein grüner Abschnitt.

Ein roter Abschnitt.

Ein Element kann auch mehreren Klassen angehören; zudem können wir den Element-Selektor und den Klassenselektor kombinieren: 

<p class="green rounded">Ein grüner Abschnitt mit Padding.</p>
<div class="red rounded">Ein roter Abschnitt mit Padding links rechts.</div>
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;
}

Ein grüner Abschnitt mit rundem Rand.

Ein roter Abschnitt ohne Rand.
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: 

<p id="theoneandonly">Der eine, wichtige Abschnitt.</p>
<p>Ein ganz anderer Abschnitt.</p>
p#theoneandonly {
  padding: 0.5em;
  background-color: red;
  border: 2px dashed black;
}

Der eine, wichtige Abschnitt.

Ein ganz anderer Abschnitt.

Die Website SelfHTML bietet sowohl eine Einführung in CSS als auch ein Nachschlagewerk für die tausenden von Eigenschaften, Layouts, und Tricks.

  • gf_informatik/web/css.1698002946.txt.gz
  • Zuletzt geändert: 2023-10-22 19:29
  • von hof