Informatik M26f

Anzeige

CSS

Internet und Kommunikation

Cascading Style Sheets ​

Die Webseite soll ja nicht nur einen tollen Inhalt haben, sondern auch grafisch etwas hermachen. Dazu formuliert man «Formatvorlagen», sogenannte CSS-Regeln.

Eine Regel besteht immer aus zwei Teilen:

  1. Für welche Elemente soll sie gelten?
  2. Wie sollen diese Element gestaltet werden?

Selektor ​

Mit Hilfe des sogenannte Selektors werden die Elemente ausgewählt, für welche die Regeln gelten sollen. Wir verwenden nur den Element-Selektor (es gibt noch andere).

css
element-name {
}

Die obenstehende Regel gilt für alle Elemente vom Typ element-name. Zwischen die geschweiften Klammern kommen nun die Formatierungsbefehle.

Wollen wir also alle Überschriften anpassen, dann schreiben wir den folgenden Selektor:

css
h1 {
}

Formatierungsbefehle ​

Formatierungsbefehle bestehen aus dem Namen der Eigenschaft die man formatieren möchte und einem Wert. Je nachdem was formatiert wird, stehen als Werte Farben, Grössen und vordefinierte Werte zur Auswahl:

css
element-name {
  eigenschaft1: wert;
  eigenschaft2: wert;
  ...;
}

Beispiel ​

Die folgenden Regeln legen eine andere Schriftart[1] fest, machen den Hintergrund der Seite schwarz[2], den Text farbig[3] und dekorieren die Überschrift mit einem Rahmen[4]:

css
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
}

h1 {
  color: yellow;
  border: 1px dotted pink;
}

p {
  color: green;
}

mit HTML-Dokument verknüpfen ​

In den HTML-Dokumenten können wir nun einen Verweis auf die CSS-Datei hinzufügen. So können auch mehrere HTML-Dokumente dieselbe CSS-Datei verwenden:

html
<html>
  <head>
    <title>Meine erste Webseite</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  ...
</html>

Aufgabe

  • Erstelle eine Textdatei mit dem obenstehenden CSS-Regeln und speichere sie im Ordner webseite als style.css ab
  • Füge im head-Element deiner HTML-Dokumente einen Link zur CSS-Datei ein (Zeile 4, unterhalb von title)
  • Lade dein HTML-Dokument im Browser neu (+R)
  • Passe Schriftart, Farben und weitere Dinge an, so wie es dir gefällt

Hier findest du weitere Eigenschaften:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften

  1. Die Eigenschaft font-family wird gesetzt. Da je nach System eine Schriftart nicht verfügbar sein könnte, wird eine Liste mit abnehmender Priorität angeben: Arial, Helvetica, sans-serif; ↩︎

  2. Mit der Eigenschaft background-color kann die Hintergrundfarbe eines Elementes gesetzt werden. Es können Namen für Farben eingesetzt oder Farbcodes verwendet werden. ↩︎

  3. Die Eigenschaft color wird verwendet, um die Überschrift gelb und den Text grün zu färben. ↩︎

  4. Mit border kann ein Element mit einem Rahmen versehen werden. Dazu müssen drei Eigenschaften aufs Mal angegeben werden: border-width, border-style und border-color ↩︎

Gymnasium Kirchenfeld, fts

CC BY-SA 4.0