Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
CSS

CSS leicht gemacht: Gestalte deine Website nach deinem Stil

Bild 'pixabay', Feuer von 947051 und Illustration CSS inspire-studio
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

In der Webentwicklung spielt CSS eine entscheidende Rolle. CSS (Cascading Style Sheets) ist die Sprache, die es ermöglicht, das Design und Layout einer Website zu gestalten. Es ermöglicht dir, Farben, Schriftarten, Abstände und vieles mehr zu kontrollieren, um eine ästhetisch ansprechende Benutzererfahrung zu schaffen. Als Anfänger mag das Konzept von CSS zunächst überwältigend erscheinen, aber – wir werden Schritt für Schritt durch die Grundlagen gehen.

1. CSS im Fokus: Grundlagen und Anwendung
2. Selektoren und Eigenschaften
3. Box-Modell verstehen
4. Responsives Design mit CSS

In folgenden Abschnitten werden fortgeschrittene CSS-Techniken vorgestellt, die das Layout und die Interaktivität einer Website verbessern können.

Tab 2: Flexbox und Grid-Layout
1. Flexbox
2. Grid-Layout
Tab 3: CSS-Animationen und Übergänge
1.CSS-Animationen
2.Übergänge (Transitions)
Tab 4: Transformationen
1. 3D Transformationen mit Flipboxen
Tab 5: Der Einsatz von !important in CSS
1. Was ist !important?
2. Warum Vorsicht geboten ist
3. Bessere Alternativen
3.1 Verbesserung der Spezifität
3.2 Verwendung von Inline-Styles vermeiden
3.3 CSS-Hierarchie nutzen

Tab 1

CSS-Gestaltung von Elementen

Warum ist CSS so wichtig? Stell dir vor, die Website ist wie ein leeres Blatt Papier, und CSS ist der Künstlerpinsel, mit dem die Farben und Formen hinzugefügt werden. Um diese Anpassungen vorzunehmen, gibt es zwei häufig genutzte Ansätze: die Verwendung des WordPress-Customizers und die Implementierung eines Child-Themes.

Der WordPress-Customizer ist eine benutzerfreundliche Oberfläche für Live-Änderungen an der Website. Diese befindet sich in der Headerzeile jeder Seite oder unter "Design" im WordPress-Dashboard. Hier sind individuelle CSS-Stile einzufügen und die Auswirkungen sofort zu sehen. Wenn dein Theme den Customizer nicht anzeigt, erfahre in unserem Beitrag Design: Nutze den Customizer + die blockbasierten Themes, wie du dennoch Anpassungen vornehmen kannst.

Eine fortgeschrittenere Methode ist die Verwendung eines Child-Themes. Ein Child-Theme ermöglicht es, benutzerdefiniertes CSS sicher zu implementieren, ohne die Integrität des Hauptthemes zu beeinträchtigen. Du kannst ein Child-Theme erstellen, indem du diesem Beitrag WordPress-Child-Theme Funktionen, JavaScript Stylesheet liest.

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

1. CSS im Fokus:
Grundlagen und Anwendung

CSS

CSS, oder 'Cascading Style Sheets,' ist eine Stilsprache, die in der Webentwicklung verwendet wird. Sie ermöglicht die Gestaltung und Formatierung von HTML-Elementen auf einer Website und somit das Werkzeug, wie eine Website visuell dargestellt wird.

Die Verwendung von CSS erfolgt durch Einbetten von Stilregeln in den HTML-Code. Diese Regeln bestehen aus Selektoren und Deklarationen. Selektoren wählen die HTML-Elemente aus, und die Deklarationen geben an, welche Stile auf diese Elemente angewendet werden sollen.Das ermöglicht es, das Design von HTML-Elementen zentral zu steuern, anstatt es direkt im HTML-Code zu definieren. Dadurch wird der Code sauberer und besser wartbar.

Schauen wir uns das anhand eines einfachen Beispiels an. Angenommen, es sollten alle Überschriften auf der Website in der Farbe Blau sein. Dies ist in CSS zu formulieren:

h1, h2, h3 {
    color: blue;
}

In diesem Beispiel sind h1, h2 und h3 die Selektoren der Überschriften, und color: blue; ist die Deklaration. Das bedeutet, dass alle Überschriften dieser Stufen die Farbe Blau haben.

Diese einfache Syntax veranschaulicht, wie CSS das Erscheinungsbild von HTML-Elementen steuert.

2. Selektoren und Eigenschaften

CSS-Selektoren sind der Mittelpunkt der Stilsprache. Sie ermöglichen es, gezielt HTML-Elemente auszuwählen und spezifische Stile zuzuweisen. Hier sind einige grundlegende Selektoren:

1. Element-Selektor:

p {
    color: ;
}

Dieser Selektor wählt alle Paragraphen auf der Seite aus und ändert deren Textfarbe auf Rot.

2. Classen-Selektor:

.highlight {
    background-color: yellow;
}

Hier wird die Class "highlight" ausgewählt, und der Hintergrund dieser Elemente wird gelb eingefärbt.

3. ID-Selektor:

#header {
    font-size: 24px;
}

Der ID-Selektor wählt ein bestimmtes Element mit der angegebenen ID aus, in diesem Fall "header", und ändert die Schriftgröße auf 24 Pixel.

Nun zu den grundlegenden Eigenschaften:

1. Farbe:

body {
    color: #333; /* Hexadezimale Farbcodes */
}

Ändert die Textfarbe des gesamten Dokuments.

2. Schriftgröße:

h1 {
    font-size: 36px;
}

Setzt die Schriftgröße der Überschrift auf 36 Pixel.

3. Abstand:

margin: 10px;
padding: 5px;

Hier werden der äußere (margin) und der innere (padding) Abstand eines Elements festgelegt.

Lass uns diese Konzepte an einem praktischen Beispiel zusammenführen:

/* Stile für Artikel CSS */
.article {
    background-color: #f5f5f5;
    padding: 25px;
    margin-bottom: 20px;
}

/* Stile für Links innerhalb von Artikeln */
.article a {
    color: green;
    text-decoration: none;
}

.article a:hover {
    color: blue;
    cursor: pointer;
}

In diesem Beispiel wird ein Artikel durch die Classe article gestylt, während die Links innerhalb dieses Artikels spezielle Stile erhalten. Das verdeutlicht, wie Selektoren und Eigenschaften kombiniert werden können, um verschiedene Elemente individuell zu gestalten.

<div class="article">
    <h3>Übeschrift</h3>
    Hier ist der Text des Abschnitts. Einige<a href="https://www.example.com" target="_blank">Links</a>können enthalten sein. </div> 

Überschrift

Hier ist der Text des Artikels. Einige Links können enthalten sein.

CSS/Tutorials/Selektoren SELFHTML

Im nächsten Abschnitt werden wir das Box-Modell und seine Bestandteile kennenlernen.

3. Box-Modell verstehen

Das Box-Modell ist ein grundlegendes Konzept in CSS, das die Struktur und den Raum um jedes HTML-Element definiert.

Das ist eine sogenannte Box:

/* Stile für Box-Modell */
.box {
    width: 200px;
    height: 100px;
    margin: 20px;
    padding: 10px;
    border: 2px solid #333;
}
<div class="box"></div>

In diesem Beispiel hat ein Element mit der Class box jeweils eine fixe Breite von 200px, eine Höhe von 100px, einen äußeren Abstand (Margin) von 20px, einen Innenabstand (Padding) von 10px und einen 2px dicken soliden Rand (Border) in der Farbe #333. Das Box-Modell ermöglicht es, den Raum um und innerhalb eines Elements zu definieren.

Wenn du in einem Theme oder einer Website bestimmte Bereiche oder Elemente mit dem Box-Modell gestalten möchtest, würdest du wahrscheinlich Classen oder IDs verwenden, die spezifisch für diese Elemente sind. Zum Beispiel könntest du Classen wie .header, .sidebar oder .footer verwenden, um das Box-Modell auf bestimmte Abschnitte deiner Website anzuwenden.

/* Stile für Header mit dem Box-Modell */
.header {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 2px solid #333;
}

In diesem Beispiel wird das Box-Modell auf den Header-Bereich angewendet, der durch die Classe .header repräsentiert wird. Diese kann entsprechender Classen oder IDs in deinem HTML-Code verwenden und dann im CSS diese Selektoren mit dem Box-Modell gestalten.

So viel zur Theorie des Box-Modells, infolge geht es hier zur praktikablen Anwendung von HTML/CSS Rahmen in Layouts, konformen Attributen und Werten.

CSS/Tutorials/Boxmodell/Rahmen SELFHTML

Das folgende Beispiel verwendet generischen Selektor wie div, was die gesamte Website beeinflussen würde. In der Praxis ist es ratsam, spezifischere Selektoren zu verwenden, um nur bestimmte Elemente auf einer Website zu beeinflussen. Für Theme-Entwickler bietet sich dies an, um globale Stile festzulegen.

Beispiel:

/* Globale Stile, beeinflusst alle div-Elemente auf der Website */
div {
    color: #333;
    font-size: 16px;
}

Für individuelle Anpassungen durch den Benutzer, zum Beispiel für ein spezielles Element mit der Class mein-cutom, könnte folgendes genutzt werden:

/* Individuelle Anpassungen für ein Element mit der Class "mein-custom" */
.mein-custom {
    color: #ff9900;
    font-size: 18px;
}

Durch die Verwendung spezifischerer Selektoren lässt sich genau steuern, welche Teile der Website von den definierten Stilen betroffen sind. Um die Classen und IDs einfach zu finden gehe zum Beitrag Entwickler-Werkzeug Browser!

Im nächsten Abschnitt werden wir uns dem responsiven Design mit CSS widmen und die Bedeutung von Media Queries erklären.

4. Responsives Design mit CSS

Responsives Design ermöglicht es einer Website, sich flexibel an unterschiedliche Bildschirmgrößen anzupassen, von Desktop-Computern über Tablets bis hin zu Smartphones. Hier spielen Media Queries eine zentrale Rolle, um das Layout und Design einer Website dynamisch anzupassen.

Media Queries und ihre Anwendung:

Media Queries sind Bedingungen in CSS, die es ermöglichen, Stile basierend auf den Eigenschaften des Geräts anzuwenden, auf dem die Website angezeigt wird. Sie werden häufig verwendet, um das Layout, die Schriftgröße und andere Aspekte des Designs zu ändern, je nach Bildschirmgröße.

Ein einfaches Beispiel einer Media Query:

/* Standard-Stile für größere Bildschirme (Standard-Layout) */
.container {
    width: 80%;
    margin: 0 auto; /* Zentriere den Container auf größeren Bildschirmen */
}

/* Media Query für kleinere Bildschirme (z.B., Smartphones mit einer Breite von 600 Pixeln oder weniger) */
@media only screen and (max-width: 600px) {
    /* Spezifische Anpassungen für kleinere Bildschirme */
    .container {
        width: 100%;
    }
}

Die Logik dahinter beruht auf dem Prinzip des "mobile-first design", das in der modernen Webentwicklung häufig verwendet wird.

Für größere Bildschirme (Desktops und Tablets) wird dann durch die Default-Stile oder spezielle Media Queries eine begrenzte Breite festgelegt, um das Layout zu optimieren. Im Beispiel mit width: 80%; für größere Bildschirme bedeutet dies, dass der Container 80% der Bildschirmbreite einnimmt, während er auf kleinen Bildschirmen die volle Breite einnimmt.

Für ausführliches Verständnis bitte den Beitrag '@media' Queries: Webdesign für ungleiche Bildschirmgrößen besuchen.

'@media' Queries: Webdesign für ungleiche Bildschirmgrößen

CSS/Media Queries SELFHTML

Tab 2: Fortgeschrittene CSS-Techniken

Tab 2

Flexbox und Grid-Layout

Flexbox und Grid-Layout sind fortschrittliche Layout-Modelle in CSS, die es ermöglichen, komplexe Strukturen mit flexiblen und responsiven Designs zu erstellen.

  1. Flexbox:
    • display: flex;: Dies stellt den Container als Flexbox-Container dar, wodurch die darin enthaltenen Elemente in einer Reihe (Standardverhalten) oder Spalte angeordnet werden. Flexbox ist ideal für ein eindimensionales Layout, entweder horizontal oder vertikal. Sie bietet keine direkte Möglichkeit, ein mehrdimensionales Raster wie bei Grid-Layout zu erstellen
    • flex: 1;: Dies wird normalerweise auf die flexiblen Elemente innerhalb des Flexbox-Containers angewendet. Hier gibt flex: 1; an, dass das Element flexibel ist und den verfügbaren Raum im Container ausfüllt.Es ist äquivalent zum Grid-Layout der  flex-grow: 1;, was bedeutet, dass es so viel Platz wie möglich einnehmen soll.
  2. Grid-Layout:
    • display: grid;: Dies stellt den Container als Grid-Container dar. Im Gegensatz zu Flexbox, das eindimensional ist, ermöglicht Grid-Layout das Erstellen eines zweidimensionalen Layouts mit sowohl Zeilen als auch Spalten.
    • grid-template-columns: repeat(3, 1fr);: Dies definiert die Spalten im Grid. In diesem Beispiel werden drei Spalten mit jeweils einem fraktionierten Anteil des verfügbaren Raums erstellt. Dies bedeutet, dass die Spalten gleichmäßig auf den verfügbaren Platz aufgeteilt werden.
    • grid-column: span 2;: Dies wird auf die Elemente innerhalb des Grids angewendet und gibt an, über wie viele Spalten das Element verlaufen soll. Hier nimmt das Element zwei Spalten im Grid ein.

Zusammenfassung:

  • Flexbox ist gut für einzeilige oder einspaltige Layouts geeignet und verwendet display: flex; auf dem Container und flex: 1; auf den flexiblen Elementen, um den verfügbaren Raum zu füllen.
  • Grid-Layout ist mächtiger und eignet sich gut für Layouts mit mehreren Zeilen und Spalten. Es verwendet display: grid; auf dem Container und grid-column: span x; auf den Elementen, um die Anzahl der Spalten zu steuern, die sie einnehmen.

Beide Ansätze haben ihre spezifischen Anwendungsfälle, abhängig von den Anforderungen des Layouts, das man erstellen möchte.

1. Flexbox

Beachte, dass die in den Beispielen verwendeten Selektoren wie .flex-container, .flex-item.grid-container und .grid-item für illustrative Zwecke dienen. In der Praxis können diese Selektoren auch anders benannt werden.

Flexbox Beispiel und Eläuterungen:

/* Flexbox Beispiel */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-item {
    flex: 1;
}

Flex-Layout für den Container:

  • Ein Container mit der Classe .flex-container wird erstellt, um ein flexibles Layout zu ermöglichen.
  • Die Eigenschaften justify-content und align-items steuern die Ausrichtung der Elemente im Container.

Flex-Elemente:

  • Flex-Elemente können mit der Classe .flex-item und der Eigenschaft flex: 1; flexibel gestaltet werden.

Diese Struktur ermöglicht ein flexibles Layout, bei dem die Ausrichtung der Elemente im Container leicht gesteuert werden kann. Flex-Elemente werden durch die Classe .flex-item und die Eigenschaft flex: 1; flexibel angepasst.

Die Eigenschaft flex: 1;

Die Eigenschaft flex: 1; für flexibles Wachstum der Elemente ist eine Abkürzung für drei separate Eigenschaften im Flexbox-Modell: flex-grow, flex-shrink und flex-basis. Hier ist die vollständige Erklärung:

.flex-item {
    flex: 1;
}

Dies ist eine verkürzte Schreibweise für:

.flex-item {
    flex-grow: 1; /* Verhältnis, wie viel zusätzlichen Platz das Element einnehmen kann */
    flex-shrink: 1; /* Verhältnis, wie viel Platz das Element reduziert, wenn notwendig */
    flex-basis: 0; /* Ursprüngliche Größe des Elements, bevor zusätzlicher Platz hinzugefügt wird */
}

Die Eigenschaften haben folgende Bedeutungen:

  • flex-grow: Legt fest, in welchem Verhältnis das Flex-Element zusätzlichen Platz innerhalb des Flex-Containers einnimmt. In diesem Fall wird es den verfügbaren Raum zu gleichen Teilen mit anderen Flex-Elementen aufteilen.
  • flex-shrink: Legt fest, in welchem Verhältnis das Flex-Element Platz reduziert, wenn der verfügbare Platz im Flex-Container begrenzt ist. Hier wird das Element um denselben Faktor wie andere schrumpfen.
  • flex-basis: Legt die ursprüngliche Größe des Flex-Elements fest, bevor zusätzlicher Platz hinzugefügt wird. Hier wird es auf 0 gesetzt, damit der verfügbare Platz gleichmäßig aufgeteilt wird.

Die verkürzte Schreibweise flex: 1; ist eine gängige Praxis, wenn das Ziel ist, dass das Flex-Element den verfügbaren Raum im Container optimal ausnutzt.

Flexbox CSS Beispiel:

/* Flexbox Beispiel */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 25px;
}

.flex-item {
    flex: 1;
    border: 1px solid #333;
    padding: 20px;
    margin: 5px;
}

Das HTML zu diesem Beispiel:

<div class="flex-container">
    <div class="flex-item">Element 1</div>
    <div class="flex-item">Element 2</div>
    <div class="flex-item">Element 3</div>
</div>
Element 1
Element 2
Element 3

CSS/Tutorials/Flexbox SELFHTML

2. Grid-Layout

Grid-Layout Beispiel und Erläuterungen:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.grid-item {
    grid-column: span 2;
}

Grid-Layout für den Container:

  • Ein Container mit der Classe .grid-container wird erstellt, der mit display: grid; ein Grid-Layout definiert.
  • Die Eigenschaft grid-template-columns gibt an, dass es im Grid drei Spalten gibt, die jeweils den gleichen Anteil des verfügbaren Raums einnehmen (dank 1fr).
  • Die Eigenschaft gap legt den Abstand zwischen den Gridelementen fest.

Die Abkürzung fr steht für "fractional unit" (Bruchteil-Einheit) in CSS Grid und CSS Flexbox. Mit 1fr gibt man an, dass ein Container oder ein Element einen Bruchteil des verfügbaren Raums einnehmen soll.

Zum Beispiel:

  • Wenn zwei Spalten jeweils 1fr haben, teilen sie den verfügbaren Platz zu gleichen Teilen.
  • Wenn eine Spalte 2fr und eine andere 1fr hat, nimmt die erste doppelt so viel Platz wie die zweite ein.

fr ist besonders nützlich, wenn man flexible und responsive Layouts erstellen möchte, da es sich automatisch an die verfügbare Breite anpasst

Grid-Eigenschaften für die Elemente:

  • Die Eigenschaft grid-column: span 2; wird auf die Classe .grid-item angewendet.
  • Dies bedeutet, dass jedes Element mit dieser Classe über zwei Spalten im Grid reichen soll.
  • Diese Eigenschaft bestimmt also, wie breit das Gridelement sein soll, wenn es auf der Grid-Ebene positioniert wird, und es nimmt dabei zwei der definierten Spalten des Grids ein.

Diese Struktur ermöglicht es, ein Grid-Layout mit definierten Spalten und Abständen zu erstellen und gleichzeitig die Breite der Gridelemente flexibel zu gestalten.

Ein Beispiel für ein Grid-Layout in einer ähnlichen Form wie das Flexbox-Layout:

/* Grid-Layout Beispiel */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 25px;
}

/* Grid-Layout-Stile für die Elemente */
.grid-item {
    grid-column: span 1;
    border: 1px solid #333;
    padding: 20px;
    margin: 5px;
}

Grid-Layout für den Container:

  • Dieses CSS definiert ein Grid-Layout für den Container mit drei gleich großen Spalten (grid-template-columns: repeat(3, 1fr);) und einem Abstand von 10 Pixeln zwischen den Elementen (gap: 10px;).
  • Der Container hat einen Hintergrund, Padding und andere Stile für visuelle Verbesserungen.

Grid-Eigenschaften für die Elemente:

  • Die Elemente innerhalb des Grids werden durch die Classe .grid-item dargestellt.
  • Hier ist grid-column: span 1; gesetzt, um jedes Element über eine Spalte im Grid zu erstrecken.
  • Du kannst diese Zahl anpassen, um die Breite der Elemente zu verändern.

Diese Struktur ermöglicht es, ein Grid-Layout mit definierten Spalten, Abständen und visuellen Stilen zu erstellen, während gleichzeitig die Breite der Gridelemente flexibel angepasst werden kann.

Dieses CSS auf die entsprechenden HTML-Elemente angewendet:

<div class="grid-container">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
</div>

Das ist ein Grid-Layout, welches sich der Flex-Box nicht unterscheidet:

Element 1
Element 2
Element 3

Das Grid-Element spielt folgend eine Rolle, indem es drei Spalten in zwei Zeilen zeigt:

/* Grid-Layout-Stile für den Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
    grid-template-rows: repeat(
        2,
        auto
    ); /* Zwei Zeilen mit automatischer Höhe */
    gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 25px;
}

/* Grid-Layout-Stile für die Elemente */
.grid-item {
    border: 1px solid #333;
    padding: 20px;
    margin: 5px;
}

Der .grid-container ist als Grid-Container konzipiert und verwendet die Grid-Anzeige (display: grid;). Dies ermöglicht die Erstellung eines mehrdimensionalen Rasters für die Anordnung von Elementen.

  • grid-template-columns: repeat(3, 1fr);: Definiert drei Spalten im Raster. Jede Spalte nimmt den gleichen verfügbaren Raum ein, da 1fr für einen fraktionierten Anteil steht.
  • grid-template-rows: repeat(2, auto);: Legt zwei Zeilen im Raster fest. Die Höhe der Zeilen wird automatisch an den Inhalt angepasst (auto), was bedeutet, dass die Zeilen unterschiedliche Höhen haben können, abhängig vom Inhalt der Zellen.
  • gap: 10px;: Bestimmt den Abstand (Zwischenraum) zwischen den Zellen im Raster.
  • background-color: #f0f0f0;: Setzt die Hintergrundfarbe des Containers auf einen hellen Grauton.
  • padding: 10px;: Fügt einen Innenabstand zum Container hinzu, um den Inhalt von den Rändern zu trennen.

Diese Stile ermöglichen es, ein klar strukturiertes und ansprechendes Grid-Layout zu erstellen.

<div class="grid-container">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
</div>

Das Grid-Element zeigt drei Spalten in zwei Zeilen:

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6

Folgend präsentieren wir unseren "Tabala Container" und hoffen hiermit, das Thema durch dieses visuelle Element weiter zu unterstreichen. Der Tabala Container nutzt ein responsives Grid-Layout, um die Anzeige der Tabala-Buttons auf verschiedenen Bildschirmgrößen zu optimieren. Dies ermöglicht eine flexible und ansprechende Darstellung, unabhängig davon, ob du die Seite auf einem Desktop, Tablet oder Smartphone betrachtest.

/* Tabala Container - Responsive Grid */
.tabala-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.tabala-button {
    border: 2px solid #231f20;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    background-color: #3498db;
    color: #fff;
    margin: 5px;
    border-radius: 5px;
}

Das grid-template-columns definiert die Anzahl und Größe der Spalten im Grid: – auto-fill: Füllt den verfügbaren Platz mit so vielen Spalten wie möglich – minmax(90px, 1fr): Jede Spalte hat eine minimale Breite von 90px und kann maximal 1fr (Fraktion) des verfügbaren Platzes einnehmen.

<div class="tabala-container" style="margin-bottom: 50px;">
    <div class="tabala-button" data-hoveraudio="">C<audio><source src="https://../C-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
    <div class="tabala-button" data-hoveraudio="">D<audio><source src="https://../D-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
    <div class="tabala-button" data-hoveraudio="">E<audio><source src="https://../E-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
    <div class="tabala-button" data-hoveraudio="">F<audio><source src="https:../F-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
    <div class="tabala-button" data-hoveraudio="">G<audio><source src="https:../G-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
    <div class="tabala-button" data-hoveraudio="">A<audio><source src="https:../A-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
    <div class="tabala-button" data-hoveraudio="">B<audio><source src="https://../B-salamisound-trommel-tabla-indisches.mp3" /></audio></div>
</div>

Die Bezeichnung data-hoveraudio ist ein individuellen Datenattribut. In HTML können Entwickler individuelle Datenattribute verwenden, um zusätzliche Informationen an Elemente zu binden, die nicht standardmäßig von HTML-Elementen unterstützt werden. Siehe im Beitrag Das Audio mit Hover starten!

C
D
E
F
G
A
B

Beispiel für ein einfaches Bild-Rasterlayout

Dem folgt der Vergleich zur alternativen Schreibweise mit dem CSS Grid Generator.

.gridus-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 2px; /* Allgemeiner Abstand zwischen den Elementen */
  grid-row-gap: 2px;
  margin-bottom: -35px;
}

.gridus-item {
  border: 0px solid #000;
  padding: 0px;
}

.gridus-item img {
  width: 100%;
  height: auto;
}

.gridus-top {
  grid-row: 1;
  
}

.gridus-bottom {
  grid-row: 2;
  margin-top: -14px;
}

.gridus-top:nth-child(odd) {
  grid-column: 1;
}

.gridus-top:nth-child(even) {
  grid-column: 2;
}

.gridus-bottom:nth-child(odd) {
  grid-column: 1;
}

.gridus-bottom:nth-child(even) {
  grid-column: 2;
}

Das CSS sollte ein Raster für vier Bilder erstellen, zwei oben und zwei unten. Die Werte können nach Bedarf angepasst werden.

Das HTML:

<div class="gridus-container">
    <div class="gridus-item gridus-top">
        <img src="pfad/zum/bild1.jpg" alt="Bild 1">
    </div>
    <div class="gridus-item gridus-top">
        <img src="pfad/zum/bild2.jpg" alt="Bild 2">
    </div>
    <div class="gridus-item gridus-bottom">
        <img src="pfad/zum/bild3.jpg" alt="Bild 3">
    </div>
    <div class="gridus-item gridus-bottom">
        <img src="pfad/zum/bild4.jpg" alt="Bild 4">
    </div>
</div>

CSS Grid Generator für alternative Schreibweise und Code-Vergleich

Im Internet gibt es mehrere "CSS Grid Generatoren". Dies hier sollte lediglich als Einführung dienen, um ein Gefühl für das Layout zu entwickeln.

Mit dem CSS Grid Generator erfolgt eine etwas andere Schreibweise. Beachte dabei, rechts nach der erwünschten Einstellung von Feldern und Abstände ist dann jeweils in die Felder zu klicken, um den ganzen Code zu erhalten.

Des Beispiels und Codes von oberhalb ein Vergleich: Der nachfolgende Code weist eine bessere Performance auf, da er weniger spezifische Selektoren und Regeln enthält. Der oben stehende Code verwendet hingegen spezifischere Selektoren und mehr Regeln, um die Positionierung der Bilder und den Abstand zu kontrollieren. In der Regel ist es empfehlenswert, die Lösung so einfach wie möglich zu gestalten, um die Leistungsfähigkeit und Wartbarkeit des Codes zu verbessern.

.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 2px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; margin-top: -14px; }
.div4 { grid-area: 2 / 2 / 3 / 3; margin-top: -14px; }

Eine kleine Anpassung des generierten Codes: Hier wird grid-gap anstelle von grid-column-gap und grid-row-gap für den Abstand zwischen den Grid-Zellen verwendet, was die Lesbarkeit des Codes verbessert. Das margin-top: -14px; ist hier per Hand hinzugefügt, um den Abstand zwischen den beiden Zeilen zu verringern.

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
</div>

Zum Schluss des Grid-Layouts zeigen wir ein weiteres Beispiel in CSS. Dieses Beispiel erstellt ein Raster mit variierenden Spalten- und Zeilenbreiten. In der ersten Zeile gibt es zwei Spalten, in der zweiten Zeile drei Spalten, und in den folgenden Zeilen je zwei Spalten. Die Spaltenbreiten sind unterschiedlich, wobei die mittlere Spalte doppelt so breit ist wie die anderen. Die Höhen der Zeilen sind ebenfalls unterschiedlich, mit einer festen Höhe von 200px in der zweiten Zeile:

/* Grid-Layout-Stile für den Container */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Drei Spalten, unterschiedliche Breiten */
    grid-template-rows: auto 200px auto; /* Drei Zeilen, unterschiedliche Höhen */
    gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 25px;
}

/* Grid-Layout-Stile für die Elemente */
.grid-item {
    border: 1px solid #333;
    padding: 20px;
    margin: 5px;
}

/* Zusätzliche Stile für spezifische Elemente */
.grid-item:nth-child(2) {
    grid-column: span 2; /* Nimmt zwei Spalten ein */
}

.grid-item:nth-child(4) {
    grid-row: span 2; /* Nimmt zwei Zeilen ein */
}

In diesem Beispiel:

  • Der grid-template-columns-Eigenschaft werden drei Spalten mit unterschiedlichen Breiten zugewiesen (1 fr, 2 fr, 1 fr).
  • Der grid-template-rows-Eigenschaft werden drei Zeilen mit unterschiedlichen Höhen zugewiesen (automatische Höhe, feste Höhe von 200px, automatische Höhe).
  • Die gap-Eigenschaft legt den Abstand zwischen den Zellen fest.

Zusätzlich werden für bestimmte Elemente spezifische Stile angewendet:

  • Das zweite Element (nth-child(2)) erstreckt sich über zwei Spalten.
  • Das vierte Element (nth-child(4)) erstreckt sich über zwei Zeilen.

Das dazugehörige HTML zu dem CSS-Beispiel:

<div class="grid-container">
    <div class="grid-item">Element 1</div>
    <div class="grid-item">Element 2 (Span 2 Spalten)</div>
    <div class="grid-item">Element 3</div>
    <div class="grid-item">Element 4 (Span 2 Zeilen)</div>
    <div class="grid-item">Element 5</div>
    <div class="grid-item">Element 6</div>
    <div class="grid-item">Element 7</div>
    <div class="grid-item">Element 8</div>
    <div class="grid-item">Element 9</div>
</div>
Element 1
Element 2 (Span 2 Spalten)
Element 3
Element 4 (Span 2 Zeilen)
Element 5
Element 6
Element 7
Element 8
Element 9

Dieses Beispiel zeigt, wie flexibel Grid-Layouts sind, insbesondere wenn es darum geht, unterschiedliche Breiten und Höhen für Zeilen und Spalten zu definieren.

CSS/Tutorials/Grid SELFHTML

Grid-Layout vs. Tabelle

Im Vergleich zu herkömmlichen Tabellen bietet das Grid-Layout in CSS eine flexiblere und leistungsfähigere Möglichkeit, Strukturen auf Webseiten zu gestalten. Während Tabellen in erster Linie für die Darstellung von tabellarischen Daten gedacht sind, ermöglicht das Grid-Layout die Erstellung komplexer Layouts für die gesamte Webseite.

Ein wesentlicher Vorteil des Grid-Layouts besteht darin, dass es eine zweidimensionale Struktur bietet, wodurch sowohl Zeilen als auch Spalten individuell gestaltet werden können. Im Gegensatz dazu ist eine Tabelle auf eine lineare Struktur beschränkt, was die Anpassung und Positionierung von Elementen erschweren kann.

Grid-Layout erlaubt außerdem eine präzise Kontrolle über den Abstand zwischen den Elementen (mit der gap-Eigenschaft) und ermöglicht das Erstellen von responsiven Designs durch die Definition von automatischen Größenanpassungen für verschiedene Bildschirmgrößen.

Insgesamt bietet das Grid-Layout eine moderne und flexible Alternative zu Tabellen, wenn es darum geht, komplexe Layouts auf Webseiten zu erstellen.

Tab 3: CSS-Animationen und Übergänge

Tab 3

CSS-Animationen und Übergänge

CSS bietet leistungsstarke Funktionen für Animationen und Übergänge, um Webseiten lebendiger und ansprechender zu gestalten. Mit CSS-Animationen können Elemente dynamisch verändert werden, während Übergänge eine flüssige Veränderung von einem Zustand zum anderen ermöglichen.

  1. CSS-Animationen:
    • CSS-Animationen ermöglichen es, Elemente über einen definierten Zeitraum hinweg zu animieren.
    • Durch die Verwendung von Schlüsselbildern (keyframes) können komplexe Bewegungen und Veränderungen gesteuert werden.
    • Animationen bieten eine Möglichkeit, Aufmerksamkeit zu erregen und Interaktionen auf der Webseite zu verbessern.
  2. Übergänge (Transitions):
    • Übergänge ermöglichen sanfte Veränderungen von Eigenschaften eines Elements, wenn sich sein Zustand ändert. Dies geschieht durch die Definition von Übergängen für bestimmte CSS-Eigenschaften.
    • Übergänge sind besonders nützlich für Hover-Effekte oder andere Benutzerinteraktionen, bei denen eine schrittweise Veränderung gewünscht ist.

In den folgenden Beispielen werden wir sowohl CSS-Animationen als auch Übergänge erkunden, um ein besseres Verständnis für ihre Anwendungsmöglichkeiten zu erhalten.

1. CSS-Animationen

Grundlagen: CSS-Animationen ermöglichen es, Elemente über einen definierten Zeitraum hinweg zu animieren. Die Animation wird durch das Festlegen von Schlüsselbildern (@keyframes) gesteuert, die den Zustand des Elements zu bestimmten Zeitpunkten während der Animation beschreiben. Hier ist ein einfaches Beispiel:

/* Definition der Animation */
@keyframes fadeInOut {
  0% { opacity: 0; } /* Startzustand: Unsichtbar (0% Opazität) */
  50% { opacity: 1; } /* Mittelpunkt: Sichtbar (100% Opazität) */
  100% { opacity: 0; } /* Endzustand: Wieder unsichtbar (0% Opazität) */
}

/* Anwendung der Animation auf ein Element */
.animated-element {
  animation: fadeInOut 3s ease infinite; /* Animation für 3 Sekunden, wiederholt (infinite) und mit einer Easing-Funktion */
}

Das HTML zum Beispiel:

<div class="animated-element">
  <img class="aligncenter wp-image-228275 size-medium" role="img" src="https://../Conmongt-boredom.svg" alt="" width="250" height="250" />
</div>

Zu diesem grundlegenden Beispiel können Keyframes komplexe Animationen erstellen. Es können mehrere Schlüsselbildpunkte hinzufügt werden, um detaillierte Animationen zu definieren. Im Beitrag Stylen mit @keyframes sind weitere Inspiration und Anleitungen für fortgeschrittene Animationstechniken.

CSS/Tutorials/Animation/Keyframes SELFHTML

2. Übergänge (Transitions)

Grundlagen: Übergänge ermöglichen sanfte Veränderungen von Eigenschaften eines Elements, wenn sich sein Zustand ändert. Sie sind nützlich, um flüssige und ansprechende Benutzerinteraktionen zu schaffen. Hier ist ein einfaches Beispiel:

/* Übergang für die Farbe mit einer Dauer von 0.3 Sekunden und einer linearen Easing-Funktion */
.transition-element {
  background-color: #3498db;
  transition: background-color 0.3s linear;
}

/* Ändere die Hintergrundfarbe bei Hover-Effekt */
.transition-element:hover {
  background-color: #e74c3c;
}

In diesem Beispiel wird die Hintergrundfarbe des Elements mit der Classe .transition-element durch einen Hover-Effekt geändert. Der Übergangseffekt sorgt für eine sanfte Farbänderung.

  • .transition-element: Selektor für das Element mit dem Übergangseffekt.
  • transition: background-color 0.3s linear;: Definition des Übergangseffekts für die Hintergrundfarbe mit einer Dauer von 0.3 Sekunden und einer linearen Easing-Funktion.
  • :hover: Pseudo-Classe für den Zustand, wenn das Element mit der Maus berührt wird.

Und unser Beispiel:

/* Transition-Element Beispiel*/
.center-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    margin-bottom: 25px;
}

.transition-element {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    transition: background-color 0.3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.transition-element:hover {
    background-color: #e74c3c;
}
<div class="center-container">
  <div class="transition-element">Hello, World!</div>
</div>
Hello, World!

Dies ist ein einfaches Beispiel für einen Übergangseffekt.

CSS/Tutorials/Animation/Transition SELFHTML

Tab 4: 3DTransformationen mit Flipboxen

Tab 4

3D Transformationen

Die Webentwicklung bietet eine Vielzahl von gestalterischen Möglichkeiten, um Benutzererlebnisse zu verbessern. Eine faszinierende Technik sind 3D-Transformationen. Diese erlauben es, Elemente auf der Webseite in einer räumlichen Dimension zu manipulieren, was zu beeindruckenden visuellen Effekten führt. Von Drehungen über Skalierungen bis hin zu Kippeffekten – 3D-Transformationen bieten eine breite Palette von Möglichkeiten.

3D-Transformationen werden in der Regel in CSS erstellt. CSS bietet eine spezielle Eigenschaft namens transform, die es ermöglicht, 2D- und 3D-Transformationen auf HTML-Elemente anzuwenden. Hierbei können verschiedene Transformationen wie Rotationen, Verschiebungen, Skalierungen und Kippeffekte in 3D-Raum definiert werden.

Beispiel für eine 2D-Transformation in CSS:

.element {
    transform: rotate(45deg);
}

Beispiel für eine 3D-Transformation in CSS:

.element {
    transform: rotateX(45deg) rotateY(45deg);
}

Diese Transformationen können in Kombination mit Animationen und Übergängen verwendet werden, um visuelle Effekte zu erzielen. Es ist zu beachten, dass die Browserunterstützung für 3D-Transformationen in CSS weit verbreitet ist, was sie zu einer leistungsstarken Möglichkeit macht, die Darstellung von Webseiten zu verbessern.

Im folgenden Abschnitt werden wir uns genauer mit "3D Transformationen mit Flipboxen" beschäftigen, einer speziellen Anwendung dieser Technik.

1. 3D Transformationen mit Flipboxen

Innerhalb dieser 3D-Transformationen ragt die Idee der "Flipboxen" hervor. Eine Flipbox ist ein HTML-Element, das durch CSS-Regeln und 3D-Transformationen so gestaltet ist, dass es wie eine Karte um ihre eigene Achse kippt, um den Inhalt auf der Vorder- und Rückseite zu enthüllen. Diese Technik erzeugt einen Effekt, der an das Blättern von Karten erinnert und eine eindrucksvolle visuelle Erfahrung bietet.

Das grundlegende Styling welches durch padding-bottom: 66.51%; auch Responisve ist. Das zur responsion wird unterhalb separt behandelt.

Folgend ist das Beipiel mitsamt der Option zur Bildbeschriftung:

/* Grundlegende Styles für die Flipbox */

.flipbox {
    position: relative;
    perspective: 1500px;
    max-width: 504px;
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

/* Optionale Bildbeschriftung */

.caption-text {
    text-align: center;
    font-size: 0.85rem !important;
    position: relative;
    z-index: 2; /* Z-index für die Beschriftung, größer als der der Flipbox */
}

/* Flip-Effekt beim Hover */

.flipbox:hover .flipper,
.flipbox.hover .flipper {
    transform: rotateY(180deg);
}

/* Größenanpassungen für die Front-, Back- und Flipbox-Elemente */

.flipbox,
.front,
.back {
    width: 100%;
    height: 0;
    padding-bottom: 66.56%; /* Dies entspricht dem Seitenverhältnis 640x426 (426/640 * 100) */
}

/* Hintergrundbilder und Styles für die Front- und Back-Elemente */

.front {
    background: url(https://example.com/front-image.jpg) 0 0 no-repeat;
    background-size: cover;
}

.back {
    background: url(https://example.com/back-image.jpg) 0 0 no-repeat;
    background-size: cover;
}

.front,
.back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Styling für den Flipper und Animationseffekt */

.flipper {
    position: relative;
    transition: 1s;
    transform-style: preserve-3d;
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

Bitte beachte, dass die Platzhalter-URLs (https://example.com/front-image.jpg und https://example.com/back-image.jpg) durch die tatsächlichen URLs für die Bilder zu ersetzen sind.

Responsiv

Beipiel mit max-width: 504px;, width: 100%; und padding-bottom: 66.56%;

Im Selektor .flipbox ist die erünschte Bildbreite mit max-width: 504px; festgelegt. In den Selektoren .flipbox,
.front und .back das width: 100%; und das padding-bottom: 66.56%; sind für die weitere Responsivität.

padding-bottom

Die Größe des Originalbilds ist relevant, wenn es um die Berechnung des Seitenverhältnisses für padding-bottom geht. Das padding-bottom wird genutzt, um den Container der Flipbox so zu dimensionieren, dass es das Seitenverhältnis des Bildes korrekt berücksichtigt. Bei der Berechnung des Prozentsatzes für padding-bottom zur Erzielung eines bestimmten Seitenverhältnisses sollte immer die Höhe durch die Breite geteilt werden, unabhängig davon, ob das Bild Hoch- oder Querformat hat.

Wenn du jedoch die Darstellung des Bildes auf der Webseite beeinflussen möchtest, spielt die tatsächliche Größe, die durch CSS-Anweisungen wie max-width: 504px; definiert wird, eine Rolle. Das max-width legt fest, wie breit das Bild maximal auf der Seite angezeigt wird, während das Seitenverhältnis mit padding-bottom die Höhe des Containers beeinflusst.

Um sicherzustellen, dass das Bild in der Flipbox korrekt angezeigt wird, ist es wichtig, das genaue Seitenverhältnis des Originalbilds für die Berechnung von padding-bottom zu verwenden. Die tatsächliche Größe, die durch CSS für die Darstellung festgelegt wird, beeinflusst lediglich, wie groß das Bild auf der Webseite erscheint, ohne das Seitenverhältnis zu beeinträchtigen. Die max-width Eigenschaft ermöglicht es, die Anzeigegröße zu steuern, während das ursprüngliche Seitenverhältnis erhalten bleibt.

  • Die genauen Prozentsätze in padding-bottom sollten berechnet werden, da sie das Seitenverhältnis des Bildes widerspiegeln. Diese Prozentsätze bestimmen die Höhe des Containers relativ zur Breite und sind entscheidend, um sicherzustellen, dass das Bild im Container richtig angezeigt wird, ohne verzerrt zu wirken.
  • Wenn das Seitenverhältnis im CSS nicht korrekt wiedergegeben wird, kann dies zu Verzerrungen führen, und das Bild könnte gestreckt oder gestaucht erscheinen.
  • Die Genauigkeit der Kommastellen in der padding-bottom Berechnung hängt von deinen gestalterischen Anforderungen und Präferenzen ab. In der Praxis werden auch drei Dezimalstellen verwendet, um eine ausreichende Genauigkeit zu gewährleisten.
  • Bei der Berechnung des Prozentsatzes für padding-bottom zur Erzielung eines bestimmten Seitenverhältnisses sollte immer die Höhe durch die Breite geteilt werden, unabhängig davon, ob das Bild Hoch- oder Querformat hat.

Beispiel, das Seitenverhältnis von 640 breit und 426 hoch:

426/640 = 0,666 x 100 ≈ 66,56%

Beispiel, das Seitenverhältnis von 426 hoch und 640 breit:

426/640 = 0,666 x 100 ≈ 66,56%

Bei der Umsetzung von Webdesigns kann es jedoch vorkommen, dass geringfügige Unterschiede aufgrund von Rundung und unterschiedlichen Bildschirmauflösungen auftreten. In den meisten Fällen sind diese Unterschiede jedoch vernachlässigbar und haben keinen wesentlichen Einfluss auf das Erscheinungsbild der Webseite.

Das HTML stellt die Flipbox bereit:

<div class="flipbox">
    <div class="flipper">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</div>
<p class="caption-text">Optionale Bildbeschriftung</p>

Ein Danke an Jonas von kulturbanause (CSS Flip Animation – Objekte umdrehen) und mithilfe ChatGPT zur Responisität.

Das Beipiel ist statt perspective: 1500px; mit perspective: 400px;

Illustation geralt; Smiley Conmongt

Etwas aufwändiger wird es, wenn wir unterschiedliche Flipboxen darstellen möchten. Somit haben wir das in "Gemeinsames Design" und "Spezilles Design" unterteilt. Also hier folgt erst mal unter "Gemeinsames Design" das Styling, welches den folgenden unter "Spezielles Desigs" gemeinsam sind. Dies ist das Beispiel und ist natürlich idividuell zu relativieren, und geht erst mal davon aus, dass die Flipbox zentriert dargestellt wird.

In Arbeit 🙂

 

Tab 5: Der Einsatz von !important in CSS

Tab 3: Das !important

Der Einsatz von !important in CSS

1. Was ist !important?

In CSS ermöglicht das !important-Attribut das Überschreiben der Spezifität von CSS-Regeln. Wenn eine Regel das !important-Attribut hat, hat sie eine höhere Priorität als andere Regeln, selbst wenn sie weniger spezifisch ist. In bestimmten Situationen kann dies nützlich sein, erfordert jedoch Vorsicht, um eine unangemessene Verwendung zu verhindern.

Beim Selektieren von Elementen kann das ein schneller Weg sein, um zum gewünschten Ergebnis zu gelangen. Danach ist es oft effektiver, Selektoren spezifischer zu gestalten, um das gewünschte Styling zu erreichen. Die Verwendung von Classen, IDs und Kombinatoren ermöglicht es in der Regel, auf !important zu verzichten und fördert zugleich einen sauberen und gut strukturierten Code.

2. Warum Vorsicht geboten ist

  1. Schwierigkeiten bei der Fehlerbehebung: Der übermäßige Gebrauch von !important kann die Fehlersuche erschweren, da es die normale Hierarchie der CSS-Regeln umgeht.
  2. Weniger vorhersagbares Verhalten: Vermeide den übermäßigen Einsatz von !important, da dies zu weniger vorhersagbarem Verhalten führen kann. Wenn alles als wichtig markiert wird, kann die Kontrolle über den Code verloren gehen.
  3. Verkomplizierung der Wartbarkeit: Zu viele !important-Regeln können die Wartbarkeit des Codes beeinträchtigen und es schwieriger machen, später Änderungen vorzunehmen.

!important sollte mit Bedacht und sparsam eingesetzt werden. Es ist oft besser, die Spezifität von Selektoren zu erhöhen und eine klare Hierarchie in deinen Stylesheets beizubehalten, um einen gut strukturierten und leicht wartbaren Code zu gewährleisten.

3. Bessere Alternativen

  1. Verbesserung der Spezifität: Anstatt !important zu verwenden, erhöhe die Spezifität deiner CSS-Regeln, indem du die Selektoren genauer definierst. Dies ist oft eine sauberere und besser wartbare Lösung.
  2. Verwendung von Inline-Styles vermeiden: Versuche, Inline-Styles zu vermeiden, da sie schwieriger zu überschreiben sind. Setze stattdessen Classen und IDs ein, um Elemente zu selektieren.
  3. CSS-Hierarchie nutzen: Nutze die natürliche Hierarchie der CSS-Regeln, um eine klare und leicht verständliche Struktur zu schaffen.

3.1 Verbesserung der Spezifität

Um die Spezifität von CSS-Regeln zu erhöhen, können selektive Ansätze verwendet werden. Hier sind einige Beispiele:

Beispiel 1:

Samt Customizer in Inline-CSS war das Hinzufügen von !important erforderlich. Jedoch kann durch eine gezielte Erhöhung der Spezifität in den normalen CSS-Regeln des Child Themes dasselbe Ziel erreicht werden.

/* Ohne Spezifität */
pre {
font-size: 85% !important;
} 

/* Mit Spezifität */
#content pre {
font-size: 85%;
}

Beispiel 2: Verwendung von Classen und IDs

/* Niedrige Spezifität */
p {
    color: red;
}

/* Höhere Spezifität durch Verwendung von Classen */
.special-text {
    color: blue;
}

/* Noch höhere Spezifität durch Verwendung von IDs */
#unique-paragraph {
    color: green;
}

Beispiel 3: Einbindung von Eltern-Selektoren

/* Niedrige Spezifität */
div p {
    font-size: 14px;
}

/* Höhere Spezifität durch Einbindung von IDs */
#specific-div p {
    font-size: 18px;
}

Beispiel 4: Verwendung von Kombinatoren

/* Niedrige Spezifität */
ul li {
    list-style-type: square;
}

/* Höhere Spezifität durch Verwendung von Nachbar-Selektor */
ul + p {
    font-weight: bold;
}

3.2 Verwendung von Inline-Styles vermeiden

Inline-Styles sind CSS-Stile, die direkt im HTML-Tag eines Elements definiert sind. Sie haben die höchste Priorität und überschreiben alle anderen CSS-Regeln. Ein Beispiel für Inline-Styles sieht so aus:

<p style="color: red; font-size: 16px;">Dies ist ein Text mit Inline-Styles.</p>

Es ist ratsam, Inline-Styles zu vermeiden, da sie die Wartbarkeit des Codes erschweren. Wenn möglich, setze stattdessen auf die Verwendung von Classen und IDs sowie auf externe Stylesheets, um eine klare Trennung von Struktur und Präsentation zu gewährleisten.

Verwendung von im Customizer gespeichertem CSS

Im WordPress Customizer können Benutzer benutzerdefinierte CSS-Regeln hinzufügen, um das Erscheinungsbild der Website anzupassen. Dies wird oft für kleinere Anpassungen und individuelle Stiländerungen verwendet. Ein Beispiel für die Verwendung von im Customizer gespeichertem CSS könnte so aussehen:

/* CSS-Code im Customizer gespeichert */
body {
    background-color: #f0f0f0;
    font-family: "Open Sans", sans-serif;
}

Es ist zu beachten, dass das im Customizer gespeicherte CSS ähnlich wie Inline-Styles wirkt, da es direkt auf die Seite angewendet wird. Auch wenn dies eine bequeme Methode für schnelle Anpassungen sein kann, sollte sie mit Vorsicht verwendet werden. Nach dem Anpassen:

  • Zusätzliche Stylesheet-Datei verwenden: Für umfangreichere Anpassungen ist es möglicherweise besser, ein zusätzliches Stylesheet zu erstellen und es über die wp_enqueue_style-Funktion einzubinden, um eine klare Trennung von Design und Inhalt zu gewährleisten. Siehe Child-Theme.
  • Spezifität im Auge behalten: Wenn du CSS im Customizer verwendest, beachte die Spezifität der Regeln, um unerwartete Überschreibungen zu vermeiden.

3.3 CSS-Hierarchie nutzen

Die CSS-Hierarchie ermöglicht es, Stilregeln zu erstellen, die auf spezifische Teile einer Seite angewendet werden. Hier sind einige Beispiele:

<nav> ist ein HTML-Element, das dazu dient, Navigationselemente auf einer Webseite zu definieren. Es wird verwendet, um einen Bereich auf der Seite zu markieren, der Links zu anderen Teilen der Seite oder zu anderen Seiten der Website enthält.

<nav>
    <ul>
        <li><a href="#start">Startseite</a></li>
        <li><a href="#produkte">Produkte</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
    </ul>
</nav>

Beispiel 1: Direkte Kinder (Child) selektieren

/* Selektiere direkt Kinder von <nav> */
nav > ul {
    list-style-type: none;
}

Hier wird die CSS-Regel angewendet, um die Standardlistenformatierung für <ul>-Elemente, die direkte Kinder von <nav> sind, zu entfernen. Es ist eine Möglichkeit, die Darstellung der Navigation zu gestalten und die hierarchische Struktur des HTML zu nutzen.

Beispiel 2: Pseudoclassen verwenden

/* Hervorhebe den ersten Absatz in einem Artikel */
article p:first-of-type {
    font-weight: bold;
}

Hier wird die Pseudoclasse :first-of-type verwendet, um den ersten <p>-Absatz innerhalb eines <article>-Elements zu betonen.

Beispiel 3: Classen und IDs kombinieren

/* Stile für Elemente mit der Classe 'highlight' innerhalb eines Containers mit der ID 'content' festlegen */
#content .highlight {
    background-color: yellow;
}

Diese Beispiele verdeutlichen, wie die Hierarchie der HTML-Struktur genutzt werden kann, um spezifische Elemente gezielt anzusprechen und anzupassen. Beachte, dass eine sinnvolle Nutzung der CSS-Hierarchie dazu beiträgt, einen gut strukturierten und leicht wartbaren Code zu erstellen.

Die Verwendung von IDs und Classen in CSS hängt von verschiedenen Faktoren ab, und es gibt unterschiedliche Ansätze, je nach den Anforderungen eines Projekts. Hier sind einige Überlegungen:

IDs:
  1. Einzigartigkeit: IDs sollten eindeutig auf einer Seite sein, was bedeutet, dass ein Element auf einer Seite nur eine ID haben kann. Dies ist nützlich, wenn du sicherstellen möchtest, dass ein bestimmtes Element eindeutig identifizierbar ist.
  2. Spezifität: IDs haben eine höhere Spezifität als Classen. Das bedeutet, dass CSS-Regeln mit IDs stärker sind als solche mit Classen. Wenn du also sicherstellen möchtest, dass eine Regel Vorrang hat, könntest du eine ID verwenden.
Classen:
  1. Wiederverwendbarkeit: Classen können auf mehreren Elementen angewendet werden, was sie wiederverwendbar macht. Dies ist besonders nützlich, wenn du denselben Stil auf verschiedenen Teilen der Website anwenden möchtest.
  2. Bessere Lesbarkeit: Classen sind oft besser geeignet, um den Code lesbarer zu machen, da sie semantischer sind. Wenn du einen Stil auf Elementen mit ähnlicher Funktion anwenden möchtest, könntest du eine Classe verwenden.
Empfehlungen:
  • Kombination verwenden: In der Praxis ist es üblich, eine Kombination von IDs und Classen zu verwenden. IDs für eindeutig identifizierbare Elemente und Classen für wiederverwendbare Stile.
  • Vermeide übermäßige Verwendung von IDs: Ein übermäßiger Einsatz von IDs kann zu einer komplexen und schwer wartbaren CSS-Struktur führen. In vielen Fällen können Classen die gewünschte Flexibilität bieten.
  • Spezifität im Auge behalten: Achte darauf, wie die Spezifität in CSS funktioniert, und wähle IDs oder Classen entsprechend aus, um die gewünschten Stilregeln effektiv anzuwenden.

Insgesamt hängt die Wahl zwischen IDs und Classen von den Anforderungen und der Struktur eines Projekts ab. Es gibt keinen festen Regelsatz, aber die genannten Überlegungen können bei der Entscheidung helfen.

Wenn es um Selektoren geht: Entwickler-Werkzeug Browser! – so direkt.

Wir hoffen, dass dieser Beitrag dich inspiriert hat und dass du nun mit Selbstvertrauen an die Gestaltung deiner Website herangehst. Wenn du Fragen hast oder weitere Unterstützung brauchst, zögere nicht, dich mit uns in Verbindung zu setzen.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024-Februar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert