CSS [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
==== CSS ====

Mit [[gf_informatik:web:html_2022]] 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:

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

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:

<code css>
strong {
}
</code>

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.

<code css>
strong {
  background-color: red;
}
</code>

Wollen wir noch etwas mehr formatieren, könnte eine CSS-Datei etwa so aussehen:
<code css 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;
}
</code>

Speichere das CSS in die Datei `style.css`.

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

<HTML>
<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
  <div style="background-color: lightgrey; font-family: sans-serif; padding: 8px;">
    <h1 style="border: 0;">Title</h1>
    <h3 style="font-size: 5mm; color: darkgrey; border: 0;">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>

=== 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
  * [[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]]

==== 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 [[https://support.microsoft.com/de-de/windows/zippen-und-entzippen-von-dateien-8d28fa72-f2f9-712f-67df-f80cf89fd4e5|Windows]] [[https://support.apple.com/de-at/guide/mac-help/mchlp2528/mac|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**
  * {{ :gf_informatik:web:cv.zip |cv.zip}}

** Hinweise & Tipps **
      * Elemente wie Bilder links oder rechts [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/float_und_clear|positionieren]]
      * Verhindern, dass der Inhalt zu breit wird: Geben Sie dem <body> eine [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grundstruktur#Maximale_Breite_festlegen|max-width]] von vielleicht 20cm.
      * Breite von Elementen steuern über [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/width|width]]
      * [[gf_informatik:web:gridlayout]]

==== 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+C (Windows) oder Alt+Cmd+C (Mac). 

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