lehrkraefte:snr:informatik:glf23:css [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTOC~~

===== 4.2 Einführung in CSS =====

<WRAP center round info>
Wenn ein Browser eine HTML-Datei anzeigt, verwendet er gewisse Standardeinstellungen, die beispielsweise angeben, wie gross und in welcher Schrift Überschriften bzw. Paragraphen bzw. Listen angezeigt werden sollen.

Diese Einstellungen kann man mit Hilfe einer CSS-Datei verändern; beispielsweise könnte man alle Überschriften in roter Schreibschrift auf blauem Hintergrund anzeigen lassen und zusätzlich einen gelb gepunkteten Rahmen darum herum zeichnen.

Einen ersten Eindruck von CSS kann man mit dem folgenden Link bekommen: Du kannst dir dort **dieselbe** HTML-Datei in vier verschiedenen Gestaltungen (gegeben durch CSS-Dateien) und auch "ohne Gestaltung" (= Standardeinstellungen deines Browsers) anschauen:

https://www.w3schools.com/whatis/demo_css.htm

<hidden Bonus: Wie man auf einer beliebigen Webseite CSS ausschaltet.>
In Firefox geht das sehr einfach: 
  * Wenn das Menü nicht sichtbar ist, ''Alt''-Taste drücken.
  * Menüpunkt "View"/"Ansicht" wählen und dort auf "Page style"/"Seitenstil" per "No style" CSS ausschalten.

In Edge oder Firefox:
  * "F12" drücken (und im Edge-Browser "Web developer tools" erlauben) 
  * oder rechte Maustaste drücken und dann in Firefox "Inspect" wählen, in Edge sollte es etwas ähnliches geben.
Nun ist man im sogenannten Inspektionsmodus, wo man die aktuelle Webseite analysieren kann.

Um nun CSS auszuschalten, dem folgenden "Firefox-Screenshot folgen" (sollte unter Edge ähnlich gehen): (1) auf "Console" klicken, dann (2) per Tastatur rechts von "<nowiki>>></nowiki>" den angegebenen String eingeben und (3) ''Enter'' drücken.

{{:lehrkraefte:snr:informatik:glf22:html-css:remove-css-via-console-mit-markierungen.png?nolink&500|}}

Wenn letzteres nicht funktioniert (was bei mir auf einigen wenigen Webseiten der Fall war), versuche es auf einer anderen Webseite. 

<!--
<code text>
$('style, link[rel="stylesheet"]').remove()
</code>
 Quelle: [[https://stackoverflow.com/questions/44953893/how-to-disable-stylesheets-in-ms-edge-without-plugins]])
Nicht funktioniert hat es bei mir auf DokuWiki.
-->
</hidden> 
</WRAP>

==== Aufgabe 1: CSS Box Model ====

<WRAP center round todo 100%>
  * Lege in deinem Verzeichnis ''html'' einen **neuen** Unterordner namens ''erste-schritte-mit-css'' an.
  * Erstelle darin zwei neue Dateien:
    * eine HTML-Datei mit Namen ''index.html'' und 
    * eine CSS-Datei mit Namen ''gestaltung.css''.
  * Kopiere den Code aus der folgenden Ausklappbox in die Datei ''index.html'':

<hidden Inhalt von ''index.html''>
<code html>
<!DOCTYPE html>
<html lang="de-ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS kennenlernen</title>
</head>
<body>
    <h1>Überschrift eins</h1>
    <p>
        Lorem ipsum dolor sit amet, <strong>consectetur adipisici elit</strong>, 
        sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquid ex ea commodi consequat. 
    </p>
    <p>
        Quis aute 
        iure reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>        
    <h1>Überschrift zwei</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisici elit, 
        sed eiusmod tempor incidunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquid ex ea commodi consequat. 
    </p>
    <p>
        Quis aute 
        iure reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
</html>
</code>
</hidden>

  * Schau dir diese HTML-Datei im Browser an.
  * Dein VS Code-Fenster sollte nun etwa wie der folgende Screenshot aussehen. Damit der Browser später weiss, dass er den Inhalt der HTML-Datei ''index.html'' mit Hilfe der CSS-Datei ''gestaltung.css'' gestalten soll, ergänze die rot markierte Zeile.

{{:lehrkraefte:snr:informatik:glf22:html-css:css-file-verlinken-mit-markierung.png?nolink&800|}}

=== Selektion über den Namen eines HTML-Elements ===

  * Wechsle nun in die Datei ''gestaltung.css'' und trage dort das folgende ein! Beachte die geschweiften Klammern ''{'', ''}'', Doppelpunkte '':'' und Semikola (= Strichpunkte) '';''! **Fehlende Strichpunkte am Zeilenende nach "Eigenschaft-Wert-Paaren (bei vernünftiger Formatierung) sind eine beliebte Fehlerquelle!**

{{:lehrkraefte:snr:informatik:glf22:html-css:css-hintergrund-und-box-mit-markierungen.png?nolink&800|}}

  * Schaue dir das Resultat im Browser an und lies die folgende Info-Box.
<WRAP center round info>
Im Screenshot rot eingerahmt sind die sogenannten Selektoren (= sie wählen/selektieren, was gestaltet werden soll). Hinter dem Selektor folgt in **geschweiften** Klammern eine Liste von Eigenschaften und Werten; Eigenschaft und Wert sind durch einen Doppelpunkt '':'' getrennt, hinter dem Wert muss ein Semikolon '';'' stehen. 

Nach dem Selektor ''body'' in Zeile 1 besagt Zeile 2 unserer Datei, dass die Hintergrundfarbe des "body"-Elements (und aller untergeordneten HTML-Elemente) Aquamarinblau sein soll.

Nach dem Selektor ''h1'' in Zeile 5 werden in den Zeilen 6 bis 8 "h1"-Überschriften gestaltet: Diese Überschriften sollen mit einem Abstand (= ''padding'') von ''1rem'' (die Längeneinheit ''rem'' ist die halbe Höhe eines Buchstabens) von einem Rahmen (= ''border'') umgeben sein, der ''0.1rem'' dick ist, durchgezogen (= ''solid'') ist und die Farbe gelb (= ''yellow'') hat.
Dieser Rahmen hat wiederum eine Umgebung (oder einen Rand = ''margin'') von ''2rem'' zu den Nachbar-Elementen.    

Hinter diesen Eigenschaften (''padding'', ''border'', ''margin'') verbirgt sich das sogenannte CSS Box Model: Jedes HTML-Element wird als Box dargestellt, die man mit CSS gestalten kann, vgl. https://www.w3schools.com/css/css_boxmodel.asp.
</WRAP>

  * Ändere in der CSS-Datei die Hintergrundfarbe, die Rahmenfarbe der h1-Überschriften und spiele mit Rahmendicke etc. herum. Speichere das CSS-File jeweils, bevor du das Resultat im Browser anschaust!
  * Du kannst das CSS Box Model auch auf den Seiten von W3schools ausprobieren, vgl. der folgende Screenshot: Ändere die Werte (rot mit (1) markiert) und (2) drücke dann auf den Button ''Run'' auf der Seite https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel.

{{:lehrkraefte:snr:informatik:glf22:html-css:box-model-w3-schools-mit-anmerkungen.png?nolink&800|}}

<WRAP center round info>
Die dort verwendete Einheit ''px'' steht für Pixel.

Die Eigenschaft ''width'' bezieht sich auf die Breite der zum HTML-Element ''div'' gehörenden Box. Das HTML-Element ''div'' (für "diverses") dient der Markierung gewisser Bereiche einer HTML-Datei, die man mit CSS gestalten möchte.

Im Screenshot sind die blau markierten Zeilen der Inhalt des HTML-Elements ''style''. Dieser Inhalt wird so behandelt, als ob er in einer CSS-Datei stünde. Es gilt als besserer Stil, alle CSS-Angaben in einer separaten CSS-Datei abzuspeichern (so wie das oben erklärt wurde).
</WRAP>

  * Verwende die Eigenschaft ''background-image'', um deine Webseite (oder einen Teil davon) mit einem Hintergrundbild deiner Wahl zu versehen. Hinweis: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_background4. Bitte den Inhalt des ''script''-Elements in das CSS-File schreiben!
</WRAP>

 
==== Aufgabe 2: Schriften, Farben und weitere Selektoren in CSS ====

<WRAP center round todo 100%>
  * Ergänze dein CSS-File ''gestaltung.css'' um die im folgenden Screenshot rot markierten Zeilen! Speichere die Datei ab und schaue dir das Resultat im Browser an und versuche zu verstehen, was passiert.

{{:lehrkraefte:snr:informatik:glf22:html-css:css-fonts-und-color-mit-anmerkungen.png?nolink&800|}}

<WRAP center round info>
  * Zeile 6 beispielsweise wählt als Schrift "Courier New" (und falls diese nicht zur Verfügung steht alternativ irgendeine "monospace"-Schrift). Die Schriftgrösse ist doppelt so gross (''2rem'') wie die normale Schriftgrösse.
  * Im Prinzip gibt es sehr viele Schriftarten, die man aber teilweise extra laden muss. Meist standardmässig vorhanden sind die sogenannten "CSS Web safe fonts", https://www.w3schools.com/cssref/css_websafe_fonts.php.
  * Weitere Informationen zur CSS-Eigenschaft ''font'' gibt es beispielsweise hier: https://www.w3schools.com/css/css_font_shorthand.asp
</WRAP>

=== Selektion über "ID" (Attribut "id") ===

  * Stell dir vor, du willst den letzten Absatz (= das letzte ''p''-Element) deiner Webseite besonders hervorheben. Wie im Screenshot mit der (1) rot markiert angedeutet, kannst du diesem Absatz die ''id'' (= identity) ''wichtig'' geben (formal ergänzt du das HTML-Element ''p'' um das Attribut ''id'' mit Wert ''wichtig''). Dann wechselst du in das CSS-File ''gestaltung.css'' und ergänzt die im Screenshot mit (2) markierten Zeilen. 

{{:lehrkraefte:snr:informatik:glf22:html-css:css-id-mit-anmerkung.png?nolink&1200|}}

  * Schau das Resultat im Browser an!

<WRAP center round info>
Wenn man ein HTML-Element mit einer ''id'' (einer ID="Identität", einem Namen) belegt (etwa der id ''wichtig'' im Screenshot), sollte kein anderes HTML-Element dieselbe ''id'' haben.

Der Selektor, um ein so benanntes HTML-Element per CSS zu gestalten, ist die gewählte id mit einem **vorangestellten** ''#'', in unserem Fall also ''#wichtig'' (im Screenshot braun markiert).
</WRAP>

=== Selektion über Klassenname (Attribut "class") ===

  * Stell dir nun vor, du willst mehrere HTML-Elemente, etwa die beiden letzten Absätze, genau gleich gestalten. Führe dazu die im folgenden Screenshot mit (1), (2), (3) und (4) angedeuteten Ergänzungen durch. 

{{:lehrkraefte:snr:informatik:glf22:html-css:css-class-mit-anmerkung.png?nolink&1200|}}

  * Schau das Resultat im Browser an und versuche zu verstehen, was passiert. Bewege die Maus auch über die beiden neu gestalteten Absätze.

<WRAP center round info>
Wenn du mehrere HTML-Elemente gleich gestalten willst, kannst du sie mit Hilfe des Attributs ''class'' in dieselbe Klasse stecken (als Klassenname wurde hier ''mause-sensitiv'' gewählt). Alle HTML-Elemente dieser Klasse kannst du dann im CSS-File mit dem Namen dieser Klasse und einem vorangestellten Punkt (im Beispiel ''.mause-sensitiv'') selektieren.

Das Selektor-Anhängsel '':hover'' (im Screenshot bei der Nummer (4)) sorgt dafür, dass die angegebene Gestaltung verwendet wird, wenn die Maus über dem entsprechenden HTML-Element schwebt (= englisch "hover").((Wer genau aufpasst, wird bemerken, dass sich die Hintergrundfarbe des letzten Absatzes nicht ändert, wenn die Maus darüber schwebt. Dies liegt daran, dass die ''id'' "wichtig" bei der Hintergrundfarbe gegen die 'class' "maus-sensitiv" gewinnt. Warum das so ist, wird etwa hier erklärt: https://www.w3schools.com/css/css_specificity.asp))
</WRAP>
</WRAP>

<WRAP center round info>
Kommentare in CSS-Dateien werden mit ''/* '' eingeleitet und enden mit '' */'':

{{:lehrkraefte:snr:informatik:glf22:html-css:css-kommentar.png?nolink&300|}}
</WRAP>


==== Vorteil einer separaten CSS-Datei: "Wiederverwertbarkeit" von CSS-Dateien ====

<WRAP center round info>
Ein Webauftritt (etwa der der KSBG oder der SBB) hat oft eine einheitliche Gestaltung über alle Seiten hinweg.

Dies kann man erreichen, indem man **dieselbe** CSS-Datei in mehreren HTML-Dateien einbindet. Wenn du neben der oben erstellten Seite ''index.html'' noch andere zugehörige HTML-Dateien hast, kannst du in jeder dieser Dateien die folgende, rot markierte Zeile 

{{:lehrkraefte:snr:informatik:glf22:html-css:css-einbinden.png?nolink&800|}}

in den ''head'' schreiben. Dann werden beispielsweise alle ''h1''-Überschriften und alle ''p''-Elemente in all diesen HTML-Dateien gleich gestaltet. Ebenso kannst du die Klasse ''maus-sensitiv'' in allen HTML-Dateien verwenden.
</WRAP>

==== Wer mag: Quiz zu HTML und CSS, Game zu CSS ====

  * HTML Quiz: https://www.w3schools.com/html/html_quiz.asp
  * HTML Exercises: https://www.w3schools.com/html/html_exercises.asp
  * CSS Quiz: https://www.w3schools.com/css/css_quiz.asp
  * CSS Exercises: https://www.w3schools.com/css/css_exercises.asp
  * CSS Diner: https://flukeout.github.io/
==== Link zur Kursseite ====

[[lehrkraefte:snr:informatik:glf23|Zur Kursseite]]