HTML5 und CSS – Grundlagen

Kurs | Albert America

1
2
3
4
5
6

Boxmodel und Display-Angaben

  • Lernziele
  • Ich kenne das Box-Modell.
  • Ich kann das Prinzip Box-Modell anwenden um Abstände zu definieren.
  • Ich kenne die Unterschiede zwischen Block- und Inline-Elementen.
  • Ich kann mit CSS das Display verändern.
  • Ich kenne das Box-Sixing
  • Ich kann Layouts in die Mitte setzen.

Repetition

Fragen Tag 4 - CSS - Cascading Style Sheets, Responsive Design.

Block- und Inline-Elemente

Alle Elemente in einem HTML-Dokument sind entweder Block- oder Inline-Elemente.
Ein Block-Elemente startet im Gegensatz zum Inline-Element immer auf einer neuen Zeile und streckt sich über die volle Breite seiner Verfügung (Eltern-Element). Weitere Hinweise dazu gibts auf den Seiten von der Intensivstation und w3schools.com.

Display Angaben

Mit der CSS-Anweisungen:
display:block, display:inline, und display:inline-block
lässt sich Das Display eines HTML-Elemente sehr einfach umwanden.

Siehe dazu: CSS Inline-Elemente

Mit display:none; verschwinden Elemente. Sie werden nicht mehr angezeigt, der HTML-Code jedoch bleibt bestehen und wird von Lesemaschinen (zB.Google) gelesen.

Abstände bei inline-block und Hintergrundfarben (Schaltflächen) können je nach Gestaltungsabsicht unerwünscht sein.
CSS inline-block Abstände

Übung – Navigation für Desktop

  1. Öffne deine style.css deines Projektes.
  2. Setzte in der Navigation das Display der Listenelemente für die Ausgabe eines Desktop nebeneinadner (@media screen 980px). 
    nav li {
display: inline-block;
}

Lösung | Lösung ZIP

Box-Model

Das Box-Modell regelt die Innen- und Aussenabstände der Block-Elemente. Es wird verwendet, um Breiten und Höhen von diesen zu berechnen.
Beispiel: Das Box-Model und die Margin-Regel | 3D Box-Model
Weiterer Infos dazu auch auf SELFHTML Wichtig: Die Angaben width und height beziehen sich immer auf die Inhaltsbreite. Border, Padding und Margin werden dazu gerechnet. Siehe auch codepen.io

CSS3 Box sizing

Mit der CSS-Eigenschaft box-sizing kann man die Berechnung des Standard-Boxmodell ändern.
CSS3 bietet mit den box sizing-Angaben neue Möglichkeiten Breiten und Höhen zu berechnen.
Nach W3C CSS2-Vorgaben gibt die Eigenschaft width einer Box dessen Innenbreite an. Innenabstand padding, Rand border werden nun in der Breite eingerechnet. Das Gleiche gilt für die Höhe height.
Box - Möglichkeiten bei w3schools testen.

Übung: Template Style mit Abständen ergänzen

Alle folgenden CSS - Angaben gelten für alle Geräte und aktuellen Browser.

  1. Öffne deine style.css des Projektes.
  2. Setzte den Universalselktor * mit den Boxsizing Angaben als erste Abgabe in deinem style.css. Mit dieser Angabe rechnen alle Blockelemente die Padding und die Border in die Breite ein.
    * {box-sizing: border-box;}
  3. Ergänze als nächstes die Aussen - und Innenabstände für das body-Element auf Null
    margin:0;
padding:0;
    Öffne die index.html und teste sie im Browser. Alle Child-Elemente, also alle Elemente im bodybeginnen nun am linken Rand (Vererbung).
  4. Ergänze die Selectoren header, footer und main mit 
    padding:20px; margin:0;
    .
  5. Setzte nun den Link-Tag der Navigation auf 
    display:block;
  6. Mache einen Browsertest. Geht der Link über die gesamte Layoutbreite?
  7. Die Abstände in der Navigation sind jetzt noch zu klein. Ergänze den Link-Tag der Navigation also mit 10px Padding für oben und unten, 20px Padding für links und rechts. 
    padding: 10px 20px;
  8. Damit sich die Links über die gesamte Layoutbreite aufspannen, musst du den Abstand in der Liste (ul) auf 0 setzen. Diese Angaben stehen am Schluss der style.css-Datei. 
    nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}

Lösung | Lösung ZIP

PAUSE

Boxen zentrieren

Einen Text innerhalb eines Elementes kannst Du mit text-align:center; zentriert.
Block-Elemente selber werden mit margin-Angaben zentriert.
Wichtig und logisch: Boxen können nur zentriert werden, wenn sie auch eine Breitenangabe haben.
Beispiel: zentrierte Boxen.

Übung: Anpassungen für Pad uns Desktop Geräte

Die Breite des Inhaltes ist zum Lesen zu breit. Du passt also die Breite an und zentrieren das gesamte Layout.

  1. Öffne das index.html deines Projektes.
  2. Erstellen einen div Tag, der das gesamte Layout einschliesst. Gebe diesem div die Klasse .container.
  3. Öffne deine style.css.
  4. Ergänze die Mediaqueries ab 980px. Definiere dort einen Border für den .container damit diese sichtbar wird. 
    .container{
border: 1px solid #000;
 }
  5. Demselben .container gibst du nun eine minimale und eine maximale Breite. Das Layout soll nie breiter als 1200px werden. 
    .container{
border: 1px solid #000;
min-width: 980px;
max-width: 1200px;
}
  6. Zum Schluss zentriert du das gesammte Layout, indem du dem .container mit 
     margin: 0 auto;
    gibst.
  7. Ergänze alle anderen HTML-Seiten auch mit dem Element div class="container" damit dein Layout konsistent wird.

Lösung | Lösung ZIP

Lösung | Lösung ZIP

Das Layout ist bis auf ergänzende Inputs am letzten Tag soweit FERTIG! Der Rest ist beautification.

Jetzt kommts noch etwas auf die Liebe zum Detail an.
Boderfarben, Farben, Abstände und weitere Bilder können das Layout noch wesentlich verschönern. Bilder sollten eine Breite von 100% haben. So sind sie sicher responsive. Viel Spass.

Aufgaben

Videos & Tools to checkout
Video (CSS Variables: var(--subtitle);) von Lea Verou ansehen.
Video CSS3 Transitions und Keyframe Animation 1/2

Links & Tip's

CSS Custom Properties