Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Anwenden von Typografie-Utilities | Kernkonzepte und Grundlegende Gestaltung
Tailwind CSS für Webentwicklung
course content

Kursinhalt

Tailwind CSS für Webentwicklung

Tailwind CSS für Webentwicklung

1. Einführung und Einrichtung
Was Ist Tailwind CSS?Für Wen Ist der Kurs Geeignet?InstallationsmethodenQuiz
2. Kernkonzepte und Grundlegende Gestaltung
Verständnis von Utility-KlassenAnwenden von Utility-KlassenGrundlegendes Styling - FarbenGrundlegendes Styling - RahmenGrundlegendes Styling - SchattenHerausforderung: Grundlegendes StylingTypografie-DienstprogrammeHerausforderung: Anwenden von Typografie-Utilities
3. Grundlegende Komponenten Erstellen
SchaltflächenHerausforderung: SchaltflächenKartenHerausforderung: KartenFormulareHerausforderung: Formulare
4. Layout-Grundlagen
AbstandswerkzeugeHerausforderung: Abstands-DienstprogrammeFlexbox-DienstprogrammeHerausforderung: Flexbox UtilitiesRaster-DienstprogrammeHerausforderung: Rasterdienstprogramme
5. Reaktionsfähigkeit und Anpassung
Responsives DesignHerausforderung: Responsives DesignÄndern des StandardthemasFazit und Nächste Schritte

book
Herausforderung: Anwenden von Typografie-Utilities

Aufgabe

Verwenden Sie die Tailwind CSS-Dienstprogramme für Typografie, um eine Textkomponente mit den folgenden Spezifikationen zu erstellen:

  1. Eine Überschrift (h1) mit:
    • Schriftgröße von 4xl;
    • Fettgedruckter Schriftart;
    • Normaler Zeilenhöhe.
  2. Eine Unterüberschrift (h2) mit:
    • Schriftgröße von 2xl;
    • Halbfettgedruckter Schriftart;
    • Enger Zeilenhöhe.
  3. Ein Absatz (p) mit:
    • Schriftgröße von base;
    • Normaler Schriftart;
    • Entspannter Zeilenhöhe.
index.html

index.html

copy
  1. Schriftgröße: Verwenden Sie text-4xl, text-2xl, text-base für Schriftgrößen;
  2. Schriftgewicht: Verwenden Sie font-bold, font-semibold, font-normal für Schriftgewichte;
  3. Zeilenhöhe: Verwenden Sie leading-normal, leading-tight, leading-relaxed für Zeilenhöhen.
index.html

index.html

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 8

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

Kursinhalt

Tailwind CSS für Webentwicklung

Tailwind CSS für Webentwicklung

1. Einführung und Einrichtung
Was Ist Tailwind CSS?Für Wen Ist der Kurs Geeignet?InstallationsmethodenQuiz
2. Kernkonzepte und Grundlegende Gestaltung
Verständnis von Utility-KlassenAnwenden von Utility-KlassenGrundlegendes Styling - FarbenGrundlegendes Styling - RahmenGrundlegendes Styling - SchattenHerausforderung: Grundlegendes StylingTypografie-DienstprogrammeHerausforderung: Anwenden von Typografie-Utilities
3. Grundlegende Komponenten Erstellen
SchaltflächenHerausforderung: SchaltflächenKartenHerausforderung: KartenFormulareHerausforderung: Formulare
4. Layout-Grundlagen
AbstandswerkzeugeHerausforderung: Abstands-DienstprogrammeFlexbox-DienstprogrammeHerausforderung: Flexbox UtilitiesRaster-DienstprogrammeHerausforderung: Rasterdienstprogramme
5. Reaktionsfähigkeit und Anpassung
Responsives DesignHerausforderung: Responsives DesignÄndern des StandardthemasFazit und Nächste Schritte

book
Herausforderung: Anwenden von Typografie-Utilities

Aufgabe

Verwenden Sie die Tailwind CSS-Dienstprogramme für Typografie, um eine Textkomponente mit den folgenden Spezifikationen zu erstellen:

  1. Eine Überschrift (h1) mit:
    • Schriftgröße von 4xl;
    • Fettgedruckter Schriftart;
    • Normaler Zeilenhöhe.
  2. Eine Unterüberschrift (h2) mit:
    • Schriftgröße von 2xl;
    • Halbfettgedruckter Schriftart;
    • Enger Zeilenhöhe.
  3. Ein Absatz (p) mit:
    • Schriftgröße von base;
    • Normaler Schriftart;
    • Entspannter Zeilenhöhe.
index.html

index.html

copy
  1. Schriftgröße: Verwenden Sie text-4xl, text-2xl, text-base für Schriftgrößen;
  2. Schriftgewicht: Verwenden Sie font-bold, font-semibold, font-normal für Schriftgewichte;
  3. Zeilenhöhe: Verwenden Sie leading-normal, leading-tight, leading-relaxed für Zeilenhöhen.
index.html

index.html

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 8
some-alt