Lektion 4:
CSS Intro
Cascading Style Sheets
-
CSS (Cascading Style Sheets) bilden eine Erweiterung zu HTML.
-
Sprache zur Definition von Formateigenschaften der HTML-Elemente
Ziele:
-
Trennung von Inhalt und Gestaltung:
➡ HTML für Inhalte, CSS für Gestaltung
-
Formatverwaltung: zentral und einheitlich
Einbindung von CSS-Styles
Im <head> wird ein Link zu einer separaten, externen css-Datei gesetzt:
<link rel="stylesheet" type="text/css" href="berge.css" />
Beispiel:
❗ Die css-Datei enthält die CSS-Regeln
JSFiddle - Online Testumgebung
JSFiddle
- Online-Umgebung zur simplen Webcode-Bearbeitung und –Vorschau
- Fenster viergeteilt (HTML/CSS/JS/Vorschau)
- Freigabe/Sharing per URL (in Adressliste)
Klicke diesen Link, um eine Testseite in JSFiddle zur Bearbeitung zu öffnen:
➡ https://jsfiddle.net
Aufbau von CSS
Das CSS-Dokument umfasst verschiedene CSS-Regeln
Beispiel:
h1 { color: red; }
p { color: green; font-family: Arial; }
hier im Beispiel:
- zwei Regeln mit den Selektoren h1 und p
- Deklarationsblöcke innerhalb der geschweiften Klammern
CSS Text-Formatierungen
Farbnamen
Box-Modell
Arten von Selektoren
Jedes Tag in HTML hat zwei Standard-Attribute: id und class!
Typselektor
Der Element- bzw. Typselektor besteht aus dem Namen des Elements,
das angesprochen werden soll.
Mit diesem Selektor werden alle Elemente eines Typs angesprochen.
Typ-Selektor
p { color: darkblue; }
Klassen-Selektor
Mehrere (unterschiedliche) HTML-Elemente können mithilfe von Klassen gruppiert und gestylt werden.
Dazu wird das Attribut class gesetzt.
Die CSS-Regel wird auf alle Elemente mit entsprechender Klasse angewendet.
HTML
<h2 class="hinweis"> Bemerkung </h2>
<p class="hinweis"> Klare Definition der Begriffe nicht möglich. </p>
CSS
.hinweis { color: red; font-weight: bold; }
ID-Selektor
ID-Selektor: Definieren eines Styles für ein HTML-Element,
das mittels des Attributs id eine eindeutige Bezeichnung hat.
HTML
<p id="copyright"> © Dr. Datenschutz </p>
CSS
#copyright { color: orange; }
Bootstrap CSS Bibliothek
Verwendung von Bootstrap
- Online CSS Bibliothek mit vorgefertigten Styles!
- Einbindung durch Verlinkung des online CSS- und JS-Dokuments
- Riesiges Online-Nachschlagewerk: GetBootstrap.com
- Auch w3schools hat ein Nachschlagewerk: w3schools.com
- Verwendung von Klassen (
class) und Id's (id) zum stylen!
Im Folgenden werden wir unter Anderem Bootstrap verwenden und uns konkrete Beispiele anschauen!
Meine Webseite - Das Vorgehen
Schritt 1: Das Layout
Div-Container & Strukturelemente
Wir benötigen Bereiche auf der Webseite (Kopfzeile, Navigation, Fusszeile...). Bisherige Tags (h1, p, ...) fügen nach dem Schliessen
einen Zeilenumbruch und einen Abstand ein (unbrauchbar für Bereiche). Div-Container machen das nicht!
HTML5-Stukturelemente sind spezielle Div-Container mit entsprechenden Layout-Namen:
<header> |
Kopfbereich |
<nav> |
Navigationsmenü |
<main> |
Hauptteil |
<article> |
Artikel im Hauptteil |
<section> |
Unterkapitel im Hauptteil |
<footer> |
Fusszeile |
<aside> |
Inhalt "am Rande" |
-
Die Elemente haben per se keine Formatierung und sind Container
(Block-Elemente).
-
Man definiert damit aber den Zweck ("Semantik") des jeweiligen Inhalts.
➡ Semantische Tags
-
❗
<header> ist ein HTML5-Strukturelement im
<body>, während <head>
für den Benutzer nicht sichtbare Informationen enthält.
-
HTML5-Strukturelemente.pdf (Anleitung/Erklärung)
Die Ausrichtung der Bereiche: Das Flexbox-Konzept
Mit Hilfe des Flexbox-Konzepts lassen sich die einzelnen Strukturelemente & Div-Container auf der Seite ausrichten. Nähere Informationen
zu diesem Konzept findest du hier: Flexbox.html
Grössenangaben: Im CSS Dokument können Grössen (hier von Bereichen) ganz verschieden angegeben werden:
-
In Pixel (px): Dies ist eine fixe Grössenangabe, egal wieviel Platz zur Verfügung steht (z.B. 200px)
-
In Prozent: Gemessen am zur Verfügung stehenden Platz (z.B. 80%)
-
In Viewport Height (vh) & Width (vw): Prozente der verfügbaren Höhe bzw. Breite (z.B. 70vh)
Das Ergebnis: 6 mögliche Layouts
Schritt 2: Gliederung & Navigation
- Überlege dir gut, welche Unterseiten deine Webseite haben wird (Startseite, Über uns, Spielbeschreibung...)
- Du erstellst eine Navigation (sowie den Header und den Footer) der Seite!
Für die Navigation kannst du entweder die Idee der letzten Übung verwenden oder einen Bootstrap Navigations-Baustein.
Beispiele und weitere Infos zur Gliederung findest du in der Demo: Navigation.html
❗ Wenn du dich für die Endlos-Seite entscheidest, braucht es im Layout 2-3 Änderungen:
- Da die Seite nach unten über den Bildrand hinausgeht, sollte die Navigation fix am oberen Rand sein
- Der
main-Teil darf keine fixe Höhe haben
- Demo: LayoutEndlos.html
- Download: LayoutEndlos.zip
❗ Wenn du dich für eine Gliederung auf mehreren HTML-Seiten entscheidest, ein Tipp:
- Schön wäre, wenn die Webseite immer genau auf einer Seite dargestellt wird!
- Sollte der Inhalt einer Seite mal zu umfangreich sein, kannst du die Funktionalität Mehr Lesen einsetzen:
- Demo: MehrLesen_Funktionalität.html
- Download: MehrLesen.zip
Schritt 3: Inhalte
Ist die Gliederung einmal gemacht, müssen lediglich noch die Inhalte der einzelnen Seiten erstellt werden. Wie in den früheren Übungen kannst du
mit HTML-Bausteinen (Überschriften, Absätzen, Tabellen, Aufzählungen, Bilder...) den Inhalt erstellen. Folgend findest du nützliche Infos und Beispiele
zum Stylen und Einfügen von Inhalten.
Bootstrap Standard-Inhalte
Zu allen Standard-Bausteinen bietet Bootstrap vorgefertigte Klassen und auch ganze Beispiele, die ihr verwenden könnt!
Spezielle Icons
Viele Online-Seiten bieten ganze Sets von Icons, die auf der eigenen Webseite verwendet werden können.
Demo & Download: Web Icons
Spezielle Schriftarten
Neben sehr vielen verschiedenen Schriftarten, die du auf deiner Webseite verwenden kannst, bieten verschiedene Online-Anbieter auch
Schriftarten an, die du in deiner Webseite einbinden kannst (sogar mit coolen Effekten)! Einer davon ist Google:
Demo & Download: Google Fonts
Spezielle Inhalt-Vorlagen
In der folgenden Liste findest du eine nette Auswahl an ganzen Bausteinen für deine Webseite. Hier werden meist auch eigene CSS-Dateien verwendet, die du ebenfalls
übernehmen musst für die Verwendung.
Uebung 4:
Meine Webseite mit Bootstrap
Der Auftrag ist ganz einfach: Folge den Anweisungen oben, um dir einen ersten Entwurf deiner Webseite zusammenzustellen:
- Layout wählen: Entscheide dich für ein Layout und lade den Code herunter. Entpacke ihn in dein Laufwerk P.
- Navigation einbinden: Nimm dir aus der Demo oder von Bootstrap den Code für eine Navigation und binde sie in dein Layout ein. Der HTML-Code kommt in den nav-Bereich, allfälliger CSS-Code fügst du deiner CSS-Datei hinzu.
- Farbwahl: Wähle für die verschiedenen Bereiche ein passendes Farbschema. Du kannst auch Inhalte für den Header & Footer definieren.
- Eine Unterseite: Kopiere die aktuelle HTML-Seite und kreiere daraus eine erste Unterseite. Verlinke die beiden Seiten im Navigations-Menu.
- Inhalte: Fülle nun die beiden Seiten mit Inhalten. Dafür kannst du alle möglichen Bausteine von oben (Icons, Schriftarten, Timeline, UeberUns...) verwenden.
