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

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

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

Der einfachste Selektor besteht einfach aus dem HTML-Element (also dem Tag-Namen). Es gibt noch andere Selektoren, auf die wir hier nicht eingehen.

Wollen wir alle Elemente mit <strong>...</strong> markierten Textstellen auswählen, schreiben wir also: 

strong {
}

Nach dem Selektor folgen geschweifte Klammern, die die Formatierungseigenschaften enthalten. Jede Eigenschaft wird gefolgt von einem Doppelpunkt, dem gewünschten Wert, und einem Semikolon.

Die folgende CSS-Regel bestimmt, dass alle mit <strong>...</strong> markierten Textbestandteile mit rotem Hintergrund angezeigt werden sollen. 

strong {
  background-color: red;
}

Wollen wir noch etwas mehr formatieren, könnte eine CSS-Datei etwa so aussehen:

style.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;
}

Speichere das CSS in die Datei style.css.

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

Title

Section heading

My first paragraph, it's so strong!

Aufgaben CSS

Erste Schritte mit CSS

Formatiere deine Webseite mit CSS:

  • Erstelle im Website-Ordner eine Datei style.css.
  • Verknüpfe die CSS-Datei mit deiner HTML-Datei.
  • Lade die HTML-Datei im Browser neu.
  • Formatiere die Webseite mit Farben, Schriftarten, Hintergrundfarben etc..

Weiterführende Links

Lebenslauf Projekt

Auftrag: Erstelle einen Lebenslauf in HTML & CSS.

  • Inhalt
    • Die Resultate werden innerhalb der KSR aufgeschaltet und können von anderen besichtigt werden (begründete Ausnahmen möglich).
  • Bewertung
    • Der Lebenslauf zählt als halbe Note.
    • Verspätete Abgabe kostet einen Notenpunkt Abzug.
    • Minimal-Ziel (ca. die Note 4):
      • echter Lebenslauf für dich (echte Inhalte)
        • Name, biographische Angaben
        • Foto
        • Besuchte Schulen, Sprachkenntnisse
        • Hobbies, Extras, was macht dich interessant?
      • Trennung von Inhalt (HTML) und Darstellung (CSS)
      • HTML: Verwendung von Überschriften, Bild, Liste, Hyperlink
      • CSS: Ansprechende Formatierung (Farben, Text-Stil)
      • Korrekte Syntax (Struktur HTML, Einbindung CSS, Dateiformate…)
      • Abgabe als Zip-Archiv mit allen nötigen Dateien per Email (Anleitung Windows MacOs)
    • Wer mehr möchte als das Minimum, bietet:
      • Aufwendigere Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation…)
      • Ansprechendes Layout mit CSS
        • z.B. mit Grid-Layout
        • Layout passt sich an Fenstergrösse an
        • Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus)
        • attraktive Texte
      • ev. JavaScript
    • Achtung: ich rate davon ab, Web-Frameworks oder ein Website-Building-Tools zu verwenden. Falls du das machen willst, erwarte ich, dass du dessen Details verstehst und erklären kannst.

Beispiel

Hinweise & Tipps

  • Elemente wie Bilder links oder rechts positionieren
  • Verhindern, dass der Inhalt zu breit wird: Geben Sie dem <body> eine max-width von vielleicht 20cm.
  • Breite von Elementen steuern über width
  • Grid Layout

Entwicklungsmodus

Beim Programmieren einer Webseite stösst jeder früher oder später auf Probleme - weshalb macht der Browser jetzt nicht, was ich ihm sage? Die schnellste Art, herauszufinden, was der Browser macht, sind die Entwicklungstools. Am einfachsten öffnest du die, indem du den interessierenden Bereich der Webseite anwählst und im Kontextmenü Untersuchen (en. Inspect) auswählst.

Direkt öffnen die Tools auch via Ctrl+Shift+I (Windows) oder Alt+Cmd+I (Mac).

Neben der Anzeige von HTML und CSS kann auch die Anzeige auf einem Mobiltelefon simuliert werden.

  • gf_informatik/web/css_2022.1697990346.txt.gz
  • Zuletzt geändert: 2023-10-22 15:59
  • von hof