CSS beherrschen im Definitive CSS Guide for Everyone

Mastering CSS in The Definitive CSS Guide for Everyone | Part-2

Inhaltsverzeichnis

No.	Section	Link
1	Responsive Design Principles	Link
2	CSS Variables and Custom Properties	Link
3	Animations and Transitions	Link
4	Best Practices and Organization	Link

Responsive Design-Prinzipien

In der heutigen Welt mit mehreren Geräten ist responsives Design nicht optional – es ist unerlässlich. Ihre Website sollte großartig aussehen, egal ob sie auf einem Smartphone oder einem großen Desktop-Monitor angezeigt wird.

Medienanfragen

Medienabfragen sind Ihre Responsive-Design-Superkraft:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Nach dem Login kopieren

Reaktionsfähige Einheiten

Durch die Verwendung relativer Einheiten reagiert Ihr Design auf natürliche Weise:

rem: Relativ zur Schriftgröße des Stammelements
em: Relativ zur Schriftgröße des übergeordneten Elements
vw/vh: Relativ zu den Abmessungen des Ansichtsfensters
%: Relativ zur Größe des übergeordneten Elements

Praktische Übung: Abschnitt „Responsiver Service“.

Erstellen Sie einen reaktionsfähigen Servicebereich, der sich mithilfe von Medienabfragen und flexiblen Einheiten nahtlos an unterschiedliche Bildschirmgrößen anpasst.

HTML:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Nach dem Login kopieren

CSS: Lassen Sie uns spezifischere Haltepunkte für unseren Servicebereich erkunden.

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

Nach dem Login kopieren

Referenzen:

MDN-Webdokumente – Responsive Design-Grundlagen – Eine hervorragende Einführung in Responsive Design-Konzepte, die Ansichtsfenster, Haltepunkte und flexible Layouts abdecken.
FreeCodeCamp – Responsive Web Design-Zertifizierung – Ein vollständiger Kurs, der Responsive Design-Prinzipien, Raster, Medienabfragen und Barrierefreiheit abdeckt.
Kann ich verwenden – Überprüfen Sie die Browserkompatibilität für responsive Designfunktionen wie Medienabfragen und Flexbox.
Cheatsheet für Responsive Design – Behandelt die wichtigsten Eigenschaften und Techniken des Responsive Design in einem leicht verständlichen Format.

CSS-Variablen und benutzerdefinierte Eigenschaften

CSS-Variablen (benutzerdefinierte Eigenschaften) verleihen Ihren Stylesheets eine programmierähnliche Flexibilität. Sie erleichtern die Pflege und ermöglichen ein dynamisches Styling.

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

Nach dem Login kopieren

Praktische Übung: CSS-Variablen für Theming und Wiederverwendbarkeit

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }

Nach dem Login kopieren

Referenzen:

MDN-Webdokumente – Verwenden von benutzerdefinierten CSS-Eigenschaften (Variablen) – Eine ausführliche, anfängerfreundliche Erklärung mit Beispielen zum Definieren, Verwenden und Aktualisieren von CSS-Variablen.
W3Schools – CSS-Variablen – Behandelt die Grundlagen von CSS-Variablen mit Live-Codebeispielen zum schnellen Üben.
CSS-Tricks – Eine vollständige Anleitung zu benutzerdefinierten Eigenschaften – Eine umfassende Anleitung mit realen Anwendungsfällen und Tipps für die erweiterte Verwendung von Variablen.
Freecodecamp – Vollständiges Handbuch zu CSS-Variablen – Erkundet leistungsstarke Techniken wie Kaskadeneffekte, auf Medienabfragen basierende Variablen und Bereichsverwaltung.

Animationen und Übergänge

Wenn Sie Ihrer Website Bewegung verleihen, entsteht ein ansprechendes Benutzererlebnis. CSS bietet zwei Hauptmethoden zum Erstellen von Animationen:

Übergänge

Perfekt für einfache Zustandsänderungen:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Nach dem Login kopieren

Keyframe-Animationen

Für komplexere, mehrstufige Animationen:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Nach dem Login kopieren

Fortgeschrittene Animationstechniken

Benutzerdefinierte CSS-Eigenschaften in Animationen:

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

Nach dem Login kopieren

Erweiterte Keyframe-Animation:

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

Nach dem Login kopieren

Praktische Übung: Interaktive Karte

Erstellen Sie eine interaktive Karte mit Hover-Effekten:

HTML:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Nach dem Login kopieren

Referenzen:

MDN-Webdokumente – CSS-Übergänge – Eine klare Einführung in CSS-Übergänge, die erklärt, wie man beim Ändern von Stilen sanfte Effekte erzeugt.
MDN-Webdokumente – CSS-Animationen – Eine Schritt-für-Schritt-Anleitung zu Keyframes, Animationseigenschaften und der Erstellung komplexer Animationen.
W3Schools – CSS-Übergänge – Einsteigerfreundlich mit Live-Code-Editoren zum interaktiven Üben von Übergängen und Animationen.
W3Schools – CSS-Animationen – Eine leicht verständliche Anleitung zur Verwendung von Keyframes und Übergängen zum Hinzufügen von Animationen zu einer Website.
CSS-Tricks – Animationen – Besprochen reaktionsfähige Animationen, reduzierte Bewegung für Barrierefreiheit und Integration von Medienabfragen.
Animate.css – Eine beliebte CSS-Bibliothek mit vorgefertigten Animationen, die Sie ganz einfach zu Ihren Projekten hinzufügen können.

Best Practices und Organisation

CSS-Architektur

Verwenden Sie eine einheitliche Namenskonvention
CSS-Dateien nach Komponente/Funktion organisieren
Halten Sie die Spezifität nach Möglichkeit niedrig
Kommentieren Sie Ihren Code effektiv

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Nach dem Login kopieren

Praktische Übung: Best Practices für CSS-Architektur

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Architekturübung</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- Setzt die Standardbrowser-Stile zurück -->
    <link rel="stylesheet" href="styles/layout.css"> <!-- Layoutbezogene Stile -->
    <link rel="stylesheet" href="styles/components/header.css"> <!-- Header-Komponentenstile -->
    <link rel="stylesheet" href="styles/components/card.css"> <!-- Kartenkomponentenstile -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- Utility-Klassen für schnelle Lösungen -->
</head>
<Körper>
    <Kopfzeile>



<h3>
  
  
  Referenzen:
</h3>

Nach dem Login kopieren

BEM – Block Element Modifier – Eine beliebte Methode zum Benennen von CSS-Klassen und zum Strukturieren Ihrer Stile, um die Wiederverwendbarkeit und Wartbarkeit zu verbessern.
SMACSS – Skalierbare und modulare Architektur für CSS – Ein detailliertes Framework zum Organisieren von CSS in logische und wartbare Kategorien.
CSS-Richtlinien von Harry Roberts – Ein hochwertiger Leitfaden zum Schreiben von skalierbarem, wartbarem CSS mit logischer Dateistruktur und Namenskonventionen.

Zeit zum Bauen! ?

Jetzt sind Sie an der Reihe, Ihr Gelerntes in die Praxis umzusetzen! Hier ist Ihre Herausforderung:

Neuen CodePen erstellen (kostenlos bei codepen.io)
Erstellen Sie die Beispiele und Übungen, die wir behandelt haben
Teilen Sie Ihre Kreation! Hinterlassen Sie Ihren CodePen-Link unten in den Kommentaren

Bonuspunkte: Verleihen Sie den Designs Ihre eigene kreative Note! Ich werde jeden in den Kommentaren geteilten CodePen persönlich überprüfen und darauf antworten.

? Profi-Tipp: Denken Sie daran, Kommentare in Ihr CSS einzufügen, um Ihre Überlegungen zu erläutern. Es hilft anderen, aus Ihrem Code zu lernen!

Was kommt als nächstes? ?

Dies ist Teil 2 unserer CSS Zero to Hero-Reihe. In den kommenden Beiträgen werden wir tiefer in weitere spannende CSS-Konzepte eintauchen. Damit Sie nichts verpassen:

? Lesezeichen für diesen Beitrag für eine schnelle Referenz beim Codieren
❤️ Gefällt mir dieser Artikelwenn Sie ihn hilfreich fanden (er hilft auch anderen, ihn zu finden!)
? Folgen Sie mir für die nächsten Teile der Serie

Lasst uns verbinden! ?

Hast du die Übungen ausprobiert? Haben Sie Fragen? Teilen Sie Ihre Erfahrungen in den Kommentaren! Ich antworte auf jeden Kommentar und freue mich, Ihre Fortschritte zu sehen.

Wir sehen uns in Teil 3! Viel Spaß beim Codieren! ?‍??‍?

Das obige ist der detaillierte Inhalt vonCSS beherrschen im Definitive CSS Guide for Everyone | Teil 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!