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

Mehr Informationen selfhtml.

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: 

  border: 5mm solid darkblue;

Mehr Informationen selfhtml.

Grössenangaben

Die Geräte, die unsere Webseite anzeigen soll, sind sehr unterschiedlich gross: ein Mobiltelefon ist vielleicht 8 oder 10cm breit, auf dem Projektor stehen mehrere Meter zur Verfügung. Deshalb werden auch vermeint absolute Grössen wie 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. Alternativ ist 1lh die 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 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: 

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

Ein roter Abschnitt mit Padding links rechts.
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.

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. Selfhtml hat die ganze Auswahl.

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.1698039311.txt.gz
  • Zuletzt geändert: 2023-10-23 05:35
  • von hof