Stand: 30.10.2018

6.1 HTML [optional]

6.1.1 Meta-Informationen

Neben den Informationen, die eine Webseite direkt darstellt, gibt es auch eine Reihe von Informationen über die Webseite, die man separat einstellen möchten, damit z.B. Suchmaschinen die Seite besser finden und besser in der Suchübersicht darstellen.

Einige solcher Informationen sind:

Für solche Informationen gibt es das HTML-Element meta, das Sie bereits aus dem Bereich "Zeichenkodierung" kennen, wo Sie z.B. UTF-8 als Kodierung spezifizieren. Alle Meta-Informationen werden im head eingestellt.

<meta charset="UTF-8"/>

Wie Sie sehen, wird über ein Attribut die Art der Metainformation genannt. Hier ein Beispiel für weitere Meta-Informationen:

<meta name="description" content="Firma ICH AG mit Dienstleistungen zum Thema Egoismus und Co.">
<meta name="author" content="Reiner Wahnsinn">
<meta name="creator" content="Erna Error">
<meta name="publisher" content="ICH AG">
<meta name="keywords" content="Ich, Ego, Egoismus, Dienstleistungen">

Es gibt auch Infos, die gezielt an Suchmaschinen gerichtet ist. Suchmaschinen lassen Tag und Nacht sogenannte Robots laufen, um das Internet zu durchforsten und einen sogenannten Index anzulegen, wo man relativ schnell von Suchbegriffen auf eine zugehörigen URL kommt.

Die folgende Angabe sagt, dass Robots auch in Unterseiten "hinabsteigen" und diese in seinen Index aufnehmen soll (laut SELFHTML ist diese Angabe überflüssig, weil das das Standardverhalten von Robots ist):

<meta name="robots" content="index, follow">

Natürlich können Sie auch das Gegenteil verlangen, d.h. der Robot soll nicht die Seite indizieren und keinen Links folgen:

<meta name="robots" content="noindex,nofollow">

Für Responsive Design ist folgende Angabe wesentlich, wie wir später noch sehen werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Oft werden automatische Weiterleitungen über eine meta-Angabe gehandhabt. Das Szenario ist, dass sie eine alte Webseite an URL www.alteAdresse.de haben und eine neue unter www.neueAdresse.de. Dann stellen Sie folgende Zeile in das index.html auf der alten Adresse:

<meta http-equiv="refresh" content="2; URL=https://www.neueAdresse.de/">

Die "2" gibt dabei eine Wartezeit von 2 Sekunden an, wenn z.B. die alte Seite noch eine Meldung zeigen soll (kann auch auf "0" gesetzt werden).

6.1.2 Formulare

Ein Formular wird mit dem Tag form gekenntzeichnet:

<form>
  ...
</form>

Im öffnenden Tag sind werden zwei wichtigen Angaben per Attribut gemacht: (1) wohin die Formulardaten geschickt werden sollen und (2) mit welcher HTTP-Methode (z.B. POST oder GET).

<form method="get" action="fertig.html">
  ...
</form>

Innerhalb von Form können Sie jetzt verschiedene Eingabefelder (z.B. ein Texteingabefeld) mit Beschriftung hinzufügen. Wir zeigen hier ein Eingabefeld input mit Beschriftung label. Der Typ zeigt hier an, dass es sich um Texteingabe handelt, das Attribut name ist wichtig für die empfangende Webseite. Diese Seite kann den Text des Eingabefelds über den Schlüssel "username" abrufen.

<form method="get" action="fertig.html">
  <label>Name:</label>
  <input type="text" name="username"/>
</form>

Wir brauchen außerdem einen Button, mit dem man die Formulardaten an die in action genannte Webseite schickt (mit der angegebenen HTTP-Methode). Es handelt sich wieder um ein input-Element, allerdings vom Typ "submit".

<form method="get" action="fertig.html">
  <label>Name:</label>
  <input type="text" name="username"/>
  <br/>
  <input type="submit" value="Abschicken"/>
</form>

Weitere Details finden Sie im Web:

6.2 Fonts und Icons [optional]

Jeder Browser hat eingebaute Schriftarten. In CSS können Sie angeben, welche Fallback-Optionen gewählt werden sollen, falls eine von Ihnen gewünschte Schriftart nicht vom Browser bereitgestellt wird (zum Beispiel: "wähle irgendeine serifenlose Schriftart!").

Darüber hinaus können Sie Schriftarten bereitstellen, um zu garantieren, dass wirklich die Schriftart genommen wird, die Sie haben möchten. Eine Schriftart liegt in Form einer oder mehrerer Dateien vor. Diese Dateien benötigt der Browser, um eine Schriftart darzustellen.

Es gibt prinzipiell zwei Arten, Schriftarten bereitzustellen:

  1. Sie haben eigene Dateien auf Ihrem Server liegen
  2. Sie verlinken Dateien eines externen Dienstleisters (man nennt den Diesntleister auch Content Delivery Network oder kurz CDN)

Beide Möglichkeiten haben Vor- und Nachteile:

  1. Eigene Dateien:
    • Vorteile: Sie nicht auf einen Dienstleister angewiesen, Sie müssen zum Testen nicht online sein
    • Nachteile: Bei neuen Versionen müssen Sie die entsprechenden Dateien und evtl. auch den Code updaten
  2. CDN:
    • Vorteile: Sie müssen sich nicht um Updates kümmern
    • Nachteile: Sie müssen beim Testen online sein, Sie sind darauf angewiesen, dass das CDN online und schnell ist

Google stellt den Service Google Fonts bereit, wo Sie Schriftarten auswählen, herunterladen oder einfach verlinken können. Google Fonts ist also auch ein CDN.

Wir verwenden Google Fonts als Beispiel, um die Einbindung von Schrift über ein CDN sowie die Einbindung von Schrift in Form von Dateien zu erklären.

6.2.1 Einbindung per CDN

Nehmen wir an, Sie wählen die Schrift Roboto (Standardschrift für Android-Geräte). Wenn Sie die Schrift über CDN einbinden wollen, verlinken Sie die Dateien im head Ihrer HTML-Datei über:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

In Ihrem CSS können Sie jetzt die Schrift verwenden, z.B. um Sie im gesamten Dokument zur Standardschrift zu erklären:

body {
  font-family: 'Roboto', sans-serif;
}

6.2.2 Einbindung von Schrift-Dateien

Wie binde ich eine Schrift ein, die ich in Form von Dateien vorliegen habe?

Wir zeigen das anhand einer Schrift von Google-Font. In diesem Fall nehmen wir an, Sie haben eine Schrift heruntergeladen. Die bekommen eine ZIP-Datei, die Sie entpacken und dann finden Sie eine Reihe von Dateien mit Endung .ttf (true type font). Es gibt noch weitere Dateitypen, hier eine kleine Übersicht (mehr Infos bei w3schools):

Jede Datei repräsentiert eine Variante der Schriftart, z.B. fett, kursiv oder schmal. Am besten legen Sie alle Dateien zunächst in einen Unterordner font. Hier nur ein Ausschnitt:

font/Roboto-Regular.ttf
font/Roboto-Thin.ttf
font/Roboto-Medium.ttf

In meinem CSS kann ich eine bestimmte Datei laden und dieser Schrift einen (frei wählbaren) Namen geben.

@font-face {
    font-family: myRoboto;
    src: url(font/Roboto-Regular.ttf);
}

Dann kann ich die Schrift dort einsetzen, wo ich sie benötige. Zum Beispiel als globale Schrift für meine Seite. Zur Sicherheit definiere ich auch eine Fallback-Option:

body {
    font-family: myRoboto, sans-serif;
}

6.2.3 Icons mit FontAwesome

Gerade auf mobilen Webseiten wird sehr viel mit Icons gearbeitet. Wir stellen hier ein derzeit populäres Paket mit Icons vor: FontAwesome.

Auch hier gibt es wieder zwei Möglichkeiten, das Paket einzubinden:

  1. Sie stellen Dateien bereit (die Sie vorher herunterladen)
  2. Sie verwenden das angebotene CDN (d.h. die Dateien bleiben bei FontAwesome)

Dateien bereitstellen

Wenn Sie Option 1 wählen, müssen Sie erst das Paket herunterladen, entpacken und das komplette font-awesome Verzeichnis in Ihr Projekt schieben. Anschließend verlinken Sie von Ihrer HTML-Datei aus eine CSS-Datei des FontAwesome-Pakets:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

CDN

Wenn Sie Option 2 wählen, müssen Sie lediglich einen Link setzen. Seit neuestem müssen Sie zuvor Ihre E-Mail-Adresse angeben. Sie bekommen dann den Code zugeschickt, der prinzipiell so aussieht (bei "CODE" steht ein alphanumerischer Code):

<script src="https://use.fontawesome.com/CODE.js"></script>

Icons einbinden

Anschließend können Sie die FontAwesome-Icons (siehe die Übersicht) mit folgendem HTML-Element einbinden:

<i class="fa fa-star"></i>

Dabei ist fa-star der Bezeichner des jeweiligen Icons. Zusätzlich kann man über Klassen die Größe bestimmen, z.B. über fa-lg (33% größer) und fa-2x bis fa-5x. Also für ein 4x größeres Icon:

<i class="fa fa-star fa-4x"></i>

6.3 Responsive Design

Responsive bedeutet, dass das Layout sich der jeweiligen Ausgabesituation anpasst.

6.3.1 Media Queries

In CSS können wir Bereiche definieren, die nur dann ausgeführt werden, wenn bestimmte Bedingungen erfüllt sind. Diese Abfrage von Bedingungen nennt man in CSS auch Media Queries. Wir haben das im Kapitel über CSS schon einmal beim Thema "Print" gesehen.

Zum Beispiel können wir die minimale oder maximale Bildschirmbreite in Pixeln angeben:

@media (min-width:800px) {
  /* CSS-Code */
}

Zum Testen kann man z.B. einfach die Hintergrundfarbe des body ändern:

@media (min-width:800px) {
  body {
    background-color: yellow;
  }
}

Man kann mit and mehrere Bedingungen zusammenfügen:

@media (min-width:800px) and (max-width:1000px) {
  body {
    background-color: yellow;
  }
}

Probieren Sie den obigen Code in einer HTML-Seite aus und verändern Sie die Fenstergröße. Sie werden sehen, wie sich der Hintergrund je nach Breite direkt verändert.

Statt wie oben alles in einem CSS-File abzuhandeln, kann man auch verschiedene CSS-Dateien für verschiedene Ausgabesituationen definieren. Realisiert wird das über mehrere link-Elemente, ähnlich wie bei der Erstellung einer CSS-Datei für den Druck:

<link rel="stylesheet" href="css/smartphone.css" media="(max-width:768px)"/>

Aus Gründen der Übersichtlichkeit packt man eher alles in eine CSS-Datei. Das prinzipielle Vorgehen ist, dass man im CSS einen "Standardfall" behandelt und dann per media query Änderungen vornimmt.

6.3.2 Breakpoints

Beim Responsive Design definiert man jetzt sogenannte Breakpoints, anhand derer man Geräteklassen oder Ausgabesituationen unterscheidet. Zum Beispiel könnte man mit zwei Breakpoints (768px und 992px) drei Geräteklassen unterscheiden:

Jetzt haben wir ein Problem, dass einige Geräte eine ungewöhnlich hohe Pixeldichte haben. Als Apple sein "Retina-Display" für Smartphones und Tablets einführte, hatte ein Smartphone plötzlich eine ähnliche Auflösung wie ein Desktop-Monitor. Aber natürlich wollen wir dennoch auf dem Smartphone nicht unser Desktop-Layout zeigen.

Die Lösung besteht darin, die Pixeldichte wieder "rauszurechnen". Das macht der Browser von allein mit der Angabe:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Konkret heißt das: wenn ein Smartphone eine Pixeldichte von 2 hat (d.h. doppelt so viele Pixel wie ein "normales" Smartphone), wird die absolute Bildschirmbreite (in Pixeln) durch zwei geteilt, bevor der Media-Query von oben greift.

Die obigen drei Geräteklassen kann man jetzt verschieden realisieren.

6.3.3 Mobile First

Man könnte davon ausgehen, dass das "normale" CSS sich auf die Smartphone-Version bezieht. Dann würde man für die anderen Geräteklassen/Breakpoints weitere Regeln einführen, die die anderen teilweise überschreiben:

/* normales CSS gilt für Smartphone */

body {
  background-color: yellow;
}

/* CSS für Tablet */

@media (min-width:768px) {
  body {
    background-color: pink;
  }
}

/* CSS für Desktop */

@media (min-width:992px) {
  body {
    background-color: cyan;
  }
}

In unserem Beispiel setzen wir für jede Geräteklassen eine andere Hintergrundfarbe, um das Testen zu erleichtern.

6.3.4 Desktop First

Umgekehrt könnte man davon ausgehen, zunächst die "große" Version in CSS zu definieren und dann schrittweise "abzuspecken". Dann sieht unser CSS so aus:

/* normales CSS gilt für Desktop */

body {
  background-color: cyan;
}

/* CSS für Tablet */

@media (max-width:992px) {

  body {
    background-color: pink;
  }
}

/* CSS für Smartphone */

@media (max-width:768px) {
  body {
    background-color: yellow;
  }
}

6.3.5 Breakpoints in Bootstrap 4

Bootstrap ist eine der derzeit beliebtesten Frameworks zur Erstellung responsiver Webseiten und verwendet in Version 4 die folgenden Breakpoints:

Bei der Wahl der Breakpoints muss man abwägen, wie viele man einrichten möchte. Jeder zusätzliche Breakpoint muss nicht nur erstellt, sondern auch getestet und bei jeder Weiterentwicklung mit berücksichtigt werden.

6.3.6 Übungen

Breakpoints-Test

Erstellen Sie eine HTML-Datei plus CSS. Im HTML steht:

<h1>Responsive</h1>
<div id="desktop">
  <h2>Desktop</h2>
</div>
<div id="tablet">
  <h2>Tablet</h2>
</div>
<div id="phone">
  <h2>Phone</h2>
</div>

Im CSS richten Sie sich verschiedene Breakpoints ein und stellen jeweils die Hintergrundfarbe von body um. Anschließend versuchen Sie, dass immer das richtige Wort da steht (z.B. "Tablet"). Nutzen Sie dazu die Eigenschaft display.

Responsives Layout

Versuchen Sie, folgende Layoutvarianten zu realisieren:

Übung Responsive

Sie finden weiteres Material in Moodle.

6.4 CSS: Aktuelles und Spezifisches

6.4.1 Transformationen und Transitions

Mit der Einführung von CSS3 (CSS Level 3) gibt es die in Programmiersprachen üblichen geometrischen Transformationen Translation, Rotation, Skalierung auch in CSS.

Noch wichtiger: Sie können einfache Animationen, sogenannte Transitions, über das CSS definieren und anstoßen.

CSS3 ist noch mit etwas Vorsicht zu genießen. Obwohl es bereits seit 2000 in Entwicklung ist, gibt es bis heute keinen offiziellen Standard, aber die wichtigsten Features von CSS3 werden von allen Browsern unterstützt.

Transformationen kann man sich ähnlich wie position:relative vorstellen: das Element nimmt den originalen Platz im Layout ein und wird relativ zu diesem Standort verschoben, gedreht oder skaliert.

Wir schauen uns wieder ein einfaches Beispiel an:

<p>
  Lorem ipsum ...
</p>

<img id="pic1" src="hsa.png" alt="Logo der Hochschule Augsburg"/>

<p>
  Lorem ipsum ...
</p>

So sieht das ganze ohne Transformationen aus:

Bild ohne Transformationen

Translation

Bei der Translation werden einfach zwei Werte für die Verschiebung in x- und y-Richtung angegeben, z.B.

#pic1 {
  transform: translate(100px, -50px);
}

Das sieht dann so aus:

Bild mit Translation

Rotation

Bei der Rotation wird ein Winkel angegeben. Die Drehung erfolgt im Uhrzeigersinn:

#pic1 {
  transform: rotate(10deg);
}

Das sieht dann so aus:

Bild mit Rotation

Skalierung

Bei der Skalierung werden zwei Werte für die Skalierung in x- und y-Richtung angegeben, z.B.

#pic1 {
  transform: scale(1.5, 2);
}

Das sieht dann so aus:

Bild mit Skalierung

Einfache Animationen mit Transitions

Über Pseudoelemente (insbes. "hover") können Sie jetzt Transitions (engl. Übergänge) definieren. Dazu definieren Sie im ursprünglichen Element den Ausgangszustand und welche Eigenschaft bei einer Transition in welcher Zeit (Animationsdauer) verändert werden kann:

#box {
  width: 100px;
  transition: width 2s;
}

In dem auslösenden Pseudoelement spezifizieren Sie dann den Zielzustand:

#box:hover {
   width: 300px;
}

Transition mit Breite

Sie können die Transition auch zusammen mit den mächtigen Transformationen verwenden. Sie beziehen sich dann auf die "Eigenschaft" transform. Auch hier geben Sie erst die zu animierende Eigenschaft an:

#box {
  transition: transform .5s;
}

Und im Zielelement den Zielzustand:

#box:hover {
  transform: rotate(10deg);
}

Transition mit Transformation

Sie können auch mehrere Eigenschaften gleichzeitig animieren, geben Sie einfach jeweils Eigenschaft und Animationsdauer mit Komma getrennt an:

#box {
    width: 100px;
    transition: width 1s, transform .5s;
}

Entsprechend brauchen Sie mehrere Zielangaben:

#box:hover {
    width:150px;
    transform: rotate(10deg);
}

Transition mit Breite und Transformation

6.4.2 Flexbox

Siehe auch: A Complete Guide to Flexbox oder w3schools

Eine der größten Probleme in CSS ist die Positionierung und Skalierung von Objekten je nach aktueller Fenstergröße. Das wird herkömmlicherweise mit position oder float gemacht.

In CSS3 kam mit Flexboxen ein weiteres Konzept hinzu. Man unterscheidet dabei zwischen einem Container und den darin enthaltenen Items.

Flexbox-Konzepte

Das Flexbox-Konzept erlaubt jetzt, die Items zu layouten. Wichtig ist hier u.a. die Richtung.

Flexbox-Container

Auf Ebene des Containers müssen Sie zunächst mal angeben, dass Sie das Flexbox-Layout verwenden wollen.

In HTML definieren wir eine generische Box mit der neuen Klasse "container":

<div class=".container">
</div>

Am besten befüllen wir den Container gleich mit Items:

<div class="container">
  <div class="item">
    item one
  </div>
  <div class="item">
    item two
  </div>
  <div class="item">
    item three
  </div>
</div>

In CSS müssen wir lediglich beim Container spezifizieren, dass wir hier eine Flexbox haben möchten. Die enthaltenen Elemente sind damit automatisch Flex-Items:

.container {
  display: flex;
}

Wir fügen noch ein bisschen Styling hinzu:

.container {
  display: flex;
  background-color: blue;
  padding: 10px;
}
.item {
  background-color: orange;
  font-size: 40px;
  padding: 10px;
  border: solid 3px white;
}

Wir sehen:

Flexbox-Setup

Richtung

Mit flex-direction können Sie die Richtung der Items bestimmen.

Zum Beispiel:

.container {
  ...
  flex-direction: column;
}

Das sieht unser Beispiel so aus:

Flexbox: flex-direction:column

Ausprobieren bei w3schools: flex-direction

Umbruch

Mit flex-wrapkönnen Sie bestimmen, ob ein Umbruch gemacht werden soll.

Das sieht dann so aus:

.container {
  ...
  flex-wrap: wrap;
}

In unserem Beispiel (ändert sich natürlich je nach Fensterbreite):

Flexbox: flex-wrap:wrap

Ausprobieren bei w3schools: flex-wrap

Verteilung

Mit justify-content können die Verteilung der Items bestimmen:

Zum Beispiel (wir sind jetzt wieder im Zeilenmodus):

.container {
  ...
  justify-content: center;
}

Flexbox: justify-content: center

Ausprobieren bei w3schools: justify-content

Alignierung

Mit "justify" bestimmen Sie die Alignierung entlang der Flex-Richtung. Mit align-items können Sie die Alignierung in Bezug auf die dazu rechtwinklige Achse bestimmen. Wenn Sie also "normal" layouten (entlang einer Zeile), bestimmen Sie mit align-items die Alignierung nach oben und unten.

Wir geben erstmal unserem Container mehr Höhe:

.container {
  ...
  height: 200px;
}

Wir sehen:

Flexbox: mehr Platz in der Höhe

Jetzt wollen wir die Items entlang der Höhe zentrieren:

.container {
  ...
  align-items: center;
}

Flexbox: align-items:center

Wir können sie auch ans untere Ende schieben mit

.container {
  ...
  align-items: flex-end;
}

Flexbox: align-items:flex-end

Ausprobieren bei w3schools: align-items

Flexbox-Element

Bei den beinhalteten Elementen können Sie die folgenden Aspekte bestimmen.

Reihenfolge

Die Reihenfolge können Sie durch Nummerierung vorgeben, d.h. jedes Element bekommt die Eigenschaft order. Nehmen wir an, jedes Item hätte eine ID:

<div class="container">
  <div id="b1" class="item">
    item one
  </div>
  <div id="b2" class="item">
    item two
  </div>
  <div id="b3" class="item">
    item three
  </div>
</div>

Sie wollen die ursprüngliche Reihenfolge der Boxen b1, b2, b3 ändern, dann setzen Sie zum Beispiel:

#b1 {
  order: 2;
}

#b2 {
  order: 3;
}

#b3 {
  order: 1;
}

Der Defaultwert für order ist 0.

Wir sehen (wir haben hier flex-direction:column gewählt):

Flexbox: Reihenfolge

Ausprobieren bei w3schools: order

Basisgröße

Mit flex-basis definiert man die Ausgangsgröße der Elemente, entweder absolute (in Pixeln) oder relativ (in %).

Zum Beispiel hier für alle Items:

.item {
  flex-basis:200px;
}

Flexbox: Basisgröße

Ausprobieren bei w3schools: flex-basis

Ausdehnung

Mit dem Wert flex-grow definieren Sie, mit welcher Priorität das Element sich ausdehnen soll, wenn zusätzlicher Platz zur Verfügung steht. Der Defaultwert ist 1. Setzt man ein bestimmtes Element auf flex-grow:2, nimmt es sich doppelt so viel Platz wie die anderen Elemente. Zumindest versucht der Browser, dies zu erreichen.

#b1 {
  flex-grow:2;
}

Flexbox: Ausdehnung

Ähnlich funktioniert flex-shrink.

Ausprobieren bei w3schools: flex-grow | flex-shrink

Alignierung für Einzelelement

Wir haben gesehen, dass man die Alignierung rechtwinklig zur Flex-Richtung für alle Items ändern kann, zum Beispiel alle oben:

.container {
  ...
  height: 200px;
  align-items: flex-start;
}

Mit align-self setzen Sie die Alignierung für ein einziges Element und ignorieren für dieses Element die Gesamtalignierung von align-items. Hier schieben wir das zweite Item nach unten:

#b2 {
  align-self: flex-end;
}

Flexbox: Alignierung von Einzelelement

Ausprobieren bei w3schools: align-self

6.4.3 Spezifizität: Wie werden Regeln ausgewählt?

Spezifizität meint die Frage, in welcher Reihenfolge die CSS-Regeln ausgeführt werden, da dieselbe Eigenschaft (z.B. font-size) ja von mehreren Regeln gesetzt werden kann. Welche Regel gewinnt?

Die erste Regel ist: Weiter unten gewinnt. Haben zwei Regeln exakt den gleichen Selektor, dann gilt die Regel, die weiter unten in der CSS-Datei steht.

p {
  color: blue;
  font-size: 20px;
}

p {
  font-size: 16px;
}

Hier gilt die font-size aus der zweiten Regel, weil sie später ausgeführt wird, und die Farbe aus der ersten Regel, weil sie von der zweiten Regel nicht überschrieben wird.

Ansonsten gilt: Die spezifischere Regel gilt. Aber was heißt das genau?

Erstmal grob:

Konkret würde bei einem solchen Element

<p class="foo" id="fancy"> ... </p>

zuerst die Regel mit dem Elementselektor ("p"), dann die mit dem Klassenselektor (".foo") und zuletzt die mit dem ID-Selektor ("#fancy") ausgeführt werden.

Man kann sich also vorstellen, dass die Regeln in Kaskaden ausgeführt werden: zuerst alle Regeln der geringsten Spezifizität und dann weiter. Daher auch der Name CSS: Cascading Style Sheets.

Da Sie natürlich weit komplexere Selektoren haben können, wie "p .foo" oder "div #fancy > p", müssen Sie wissen, wie Spezifizität genau funktioniert.

Wir verweisen hier lediglich auf Quellen wie hier: CSS Kaskade

Siehe auch: Specifics on CSS Specificity, Fishy Specificity und Specificity Calculator

6.4.4 Übungen

Menü animieren

Erstellen Sie ein einfaches Button-Menü.

Übung

In HTML:

<div class="menu">
  <div class="button">
    one
  </div>
  <div class="button">
    two
  </div>
  <div class="button">
    three
  </div>
</div>

In CSS:

.menu {
  font-size: 30px;
}

.button {
  float: left;
  height: 100px;
  width: 100px;
  border: solid 1px black;
  background-color: orange;
  margin: 10px;
  padding: 10px;
}

Verwenden Sie Transitions, um diejenige Box, auf der sich die Maus befindet, zu animieren (Drehung, Vergrößerung, Kombinationen)...

Flexbox-Layout

Versuchen Sie, mit Hilfe von Flexboxen folgende Layoutvarianten zu realisieren:

Übung Flexbox

Weiteres Material finden Sie in Moodle.