Solution: Box-Modell – Tutorial zu CSS

Inhalt

• Einleitung Einleitung

  • Webseiten gestalten mit CSS: Teil 2 der Schulungsreihe zu den wichtigsten Webtechnologien

    1 Min. 11 Sek.
  • Was Sie erwartet und was Sie mitbringen sollten

    3 Min. 23 Sek.
• 1. CSS kennenlernen: Syntax, Box-Modell, Farben und Einheiten 1. CSS kennenlernen: Syntax, Box-Modell, Farben und Einheiten

  • CSS steht für »Cascading Style Sheets«

    3 Min. 26 Sek.
  • Jeder Browser hat ein eingebautes Stylesheet

    4 Min. 40 Sek.
  • (Gesperrt)
    Wichtige Vokabeln: der Aufbau einer CSS-Regel

    3 Min. 46 Sek.
  • (Gesperrt)
    HTML und CSS miteinander verbinden

    4 Min. 37 Sek.
  • (Gesperrt)
    Box-Modell kennenlernen: padding, border und margin

    5 Min. 1 Sek.
  • (Gesperrt)
    Farbnamen und hexadezimale Farbangaben

    5 Min. 4 Sek.
  • (Gesperrt)
    Wichtige Einheiten: px, em, Prozent, rem & Co.

    5 Min. 4 Sek.
  • (Gesperrt)
    Wissen, wo es steht: CSS-Referenzen zum Nachschlagen

    4 Min. 29 Sek.
  • (Gesperrt)
    Challenge: Was ist ein CSS-Reset und benötigt man so etwas heute noch?

    59 Sek.
  • (Gesperrt)
    Solution: CSS-Reset

    4 Min. 39 Sek.
• 2. Die wichtigsten Selektoren und Spezifität 2. Die wichtigsten Selektoren und Spezifität

  • Elementselektoren, Selektoren gruppieren und das Sternchen * als Universalselektor

    3 Min. 1 Sek.
  • (Gesperrt)
    Klassen sind klasse: das Attribut class und der Selektor mit dem Punkt

    3 Min. 29 Sek.
  • (Gesperrt)
    IDs sind einmalig: das Attribut id und der Selektor mit der Raute

    3 Min. 8 Sek.
  • (Gesperrt)
    Nachfahrenelemente auswählen: der Selektor mit der Leerstelle

    3 Min. 20 Sek.
  • (Gesperrt)
    Selektoren zum Auswählen von Kindelementen

    4 Min. 33 Sek.
  • (Gesperrt)
    Überblick: Attributselektoren haben eckige Klammern

    5 Min. 26 Sek.
  • Quellen zum Nachschlagen von weiteren Selektoren

    1 Min. 46 Sek.
  • (Gesperrt)
    Spezifität: Einige Selektoren sind wichtiger als andere

    4 Min. 59 Sek.
  • (Gesperrt)
    Challenge: Tabelle mit Zebrastreifen

    1 Min. 23 Sek.
  • (Gesperrt)
    Solution: Zebrastreifen

    2 Min. 40 Sek.
• 3. Die Kaskade – das »C« in »CSS« 3. Die Kaskade – das »C« in »CSS«

  • Die Kaskade: !important, Spezifität und Reihenfolge im CSS

    3 Min. 29 Sek.
  • (Gesperrt)
    Intuitiv: Die Reihenfolge im CSS entscheidet

    2 Min. 46 Sek.
  • (Gesperrt)
    Ungewohnt: Spezifität ist wichtiger als die Reihenfolge

    3 Min. 18 Sek.
  • (Gesperrt)
    Wichtig: !important gewinnt fast immer

    3 Min. 39 Sek.
  • (Gesperrt)
    Nichts gefunden? Vererbung (inheritance) oder Standardwert (initial value)

    4 Min. 55 Sek.
  • (Gesperrt)
    Entwickler-Tool: Kaskade und Vererbung im Browser analysieren

    2 Min. 57 Sek.
• 4. Inhalte gestalten: Schrift und Text 4. Inhalte gestalten: Schrift und Text

  • Klassiker: Schriftarten mit und ohne Serifen

    3 Min. 48 Sek.
  • (Gesperrt)
    Die Schriftart definieren mit font-family

    4 Min. 12 Sek.
  • (Gesperrt)
    Schnell und gut: die Systemschrift auf dem Gerät der Besucher

    2 Min. 51 Sek.
  • (Gesperrt)
    Webfonts: die Schriftart gleich mitliefern

    4 Min. 30 Sek.
  • (Gesperrt)
    Gut lesbarer Fließtext mit font-size und line-height

    5 Min. 4 Sek.
  • (Gesperrt)
    Weitere Eigenschaften zur Schrift- und Textgestaltung im Überblick

    4 Min. 11 Sek.
  • (Gesperrt)
    Schatten im Text mit text-shadow

    4 Min. 27 Sek.
  • (Gesperrt)
    Challenge: Blocksatz im Web

    1 Min. 24 Sek.
  • (Gesperrt)
    Solution: Blocksatz

    4 Min. 53 Sek.
• 5. Inhalte gestalten: Listen, Links und Bilder 5. Inhalte gestalten: Listen, Links und Bilder

  • (Gesperrt)
    Listen: Aufzählungszeichen gestalten mit list-style und dem Pseudoelement ::marker

    4 Min. 17 Sek.
  • (Gesperrt)
    Hyperlinks: die verschiedenen Zustände mit Pseudoklassen gestalten

    4 Min. 52 Sek.
  • (Gesperrt)
    Externe Hyperlinks kennzeichnen mit dem Pseudoelement ::after

    4 Min. 53 Sek.
  • (Gesperrt)
    Pixelbildern eine flexible Breite geben mit max-width

    2 Min. 32 Sek.
  • (Gesperrt)
    SVG-Icons als <img> einbinden

    4 Min. 25 Sek.
  • (Gesperrt)
    SVG-Icons als Code einbinden und per CSS gestalten

    3 Min. 11 Sek.
  • (Gesperrt)
    Challenge: Akkordeon – ausklappbare Inhalte mit HTML und CSS

    1 Min. 47 Sek.
  • (Gesperrt)
    Solution: Akkordeon

    4 Min. 22 Sek.
• 6. Das Box-Modell im Detail 6. Das Box-Modell im Detail

  • (Gesperrt)
    Die Breite begrenzen: width, min-width und max-width

    4 Min. 14 Sek.
  • (Gesperrt)
    Abstand zwischen Text und Rand: padding

    3 Min. 49 Sek.
  • (Gesperrt)
    Rahmenlinien gestalten mit border: Breite, Stil und Farbe

    4 Min. 40 Sek.
  • (Gesperrt)
    Abstände zwischen den Elementen mit margin

    3 Min. 16 Sek.
  • (Gesperrt)
    Collapsing margins und wie man sie vermeidet

    4 Min. 57 Sek.
  • (Gesperrt)
    Das intuitivere Box-Modell: box-sizing: border-box

    4 Min. 59 Sek.
  • (Gesperrt)
    Challenge: das Box-Modell für Inline-Boxen

    1 Min. 22 Sek.
  • (Gesperrt)
    Solution: Box-Modell

    3 Min. 27 Sek.
• 7. Boxen gestalten per CSS 7. Boxen gestalten per CSS

  • (Gesperrt)
    Grafiken im Hintergrund: background

    4 Min. 41 Sek.
  • (Gesperrt)
    Farbverläufe mit linear-gradient()

    3 Min. 45 Sek.
  • (Gesperrt)
    Schattenboxen mit box-shadow

    2 Min. 46 Sek.
  • (Gesperrt)
    Abgerundete Ecken mit border-radius

    2 Min. 40 Sek.
  • (Gesperrt)
    Call To Action: Hyperlinks als Button gestalten

    4 Min. 2 Sek.
  • (Gesperrt)
    Boxen am Bildschirm ausblenden: die Klasse visually-hidden

    4 Min. 22 Sek.
  • (Gesperrt)
    Challenge: Kontaktseite gestalten

    1 Min. 13 Sek.
  • (Gesperrt)
    Solution: Kontaktseite

    2 Min. 29 Sek.
• 8. Ordnung halten: Stylesheets organisieren 8. Ordnung halten: Stylesheets organisieren

  • (Gesperrt)
    Stylesheets strukturieren: Reihenfolge der Regeln und Kommentare

    4 Min. 7 Sek.
  • (Gesperrt)
    Verschiedene Schreibweisen für Regeln und die Reihenfolge der Deklarationen

    3 Min. 40 Sek.
  • (Gesperrt)
    CSS überprüfen mit dem Validator vom W3C

    3 Min.
  • (Gesperrt)
    Ein zentrales Stylesheet erleichtert die Entwicklung

    3 Min. 1 Sek.
  • (Gesperrt)
    Challenge: Modularisierung – mehrere Stylesheets erstellen und die CSS-Regeln verteilen

    1 Min. 29 Sek.
  • (Gesperrt)
    Solution: Modulbauweise

    3 Min. 25 Sek.
• Wie geht es weiter? Blick in Teil 3 der Kursreihe Wie geht es weiter? Blick in Teil 3 der Kursreihe

  • (Gesperrt)
    Ausblick auf Webtechniken lernen 3: CSS-Layout

    3 Min. 29 Sek.