Forum | Neueste Web-Entwicklung Tutorials
 

W3.CSS Referenzhandbuch


Die Container-Klassen

Klasse Definiert
w3-Behälter Container für HTML-Inhalt (fügt 16px padding links und rechts) Versuch es
Wird mit Farbklassen Versuch es
Verwendet als Kopf Versuch es
Verwendet als Fußzeile Versuch es
Verwendet mit w3-leftbar Versuch es
Verwendet mit w3-bottombar Versuch es
w3 Schnitt Container für HTML-Inhalt (fügt 16px Rand oben und unten) Versuch es
w3-Abzeichen Rund Abzeichen 8 Versuch es
w3-tag Rechteckige Tag später mehr! Versuch es
w3-ul Ungeordnete Liste Versuch es
w3-display-Behälter Container für w3-Display- Klassen (Position ein Element in der oben links, oben rechts, unten links oder unten rechts oder in der Mitte des Behälters) Versuch es
w3-Bild Veraltete. Verwenden Sie w3-display-Container statt. Versuch es
w3-blockquote Entfernt in 2.0 (Verwendung w3-leftbar statt) Versuch es
w3-Code Code Container Versuch es
w3-progress-Container Fortschrittsbalken Behälter Versuch es

Tabellenklassen

Klasse Definiert
w3-Tisch Container für eine HTML-Tabelle Versuch es
w3-gestreift Gestreifte Tabelle Versuch es
w3-Grenze Grenzt Tisch Versuch es
w3 umrandete Grenzt Linien Versuch es
w3-zentriert zentriert Tisch Versuch es
w3-hoverable Hoverable Tisch Versuch es
w3-table-all Alle Eigenschaften festlegen Versuch es
Mit w3-gestreift, w3-Grenze, und w3 umrandete Versuch es
Mit farbigen Kopf Versuch es
Mit w3-Verantwortlichen Versuch es
Mit w3-tiny Versuch es
Mit w3-small Versuch es
Mit w3-large Versuch es
Mit w3-xlarge Versuch es
Mit w3-xxlarge Versuch es
Mit w3-XXXLarge Versuch es
Mit Farbe Versuch es
Mit w3-Jumbo Versuch es

Karten-Klassen

Klasse Definiert
w3-Karte Container für alle HTML-Inhalte (mit Rahmen) Versuch es
w3-card-2 Container für alle HTML-Inhalte (2px umrandeten Schatten) Versuch es
w3-Card-4 Container für alle HTML-Inhalte (4px umrandeten Schatten) Versuch es
w3-Card-8 Container für alle HTML-Inhalte (8px umrandeten Schatten) Versuch es
w3-Card-12 Container für alle HTML-Inhalte (12px grenzte Schatten) Versuch es
w3-Card-16 Container für alle HTML-Inhalte (16px grenzte Schatten) Versuch es
w3-Card-24 Container für alle HTML-Inhalte (24px grenzte Schatten) Versuch es

Responsive Klassen

Klasse Definiert
w3-Reihe Container für eine Reihe von Flüssigkeits ansprechenden Inhalt Versuch es
w3-Reihe-Polsterung Row, in der alle Spalten einen Standard Polsterung haben Versuch es
w3-Gehalt Behälter für feste Größe zentriert Inhalt Versuch es
w3-Hälfte Die Hälfte (1/2) Bildschirm Spalte Behälter Versuch es
w3 Drittel Dritte (1/3) Bildschirm Spalte Behälter Versuch es
w3-twothird Zwei Drittel (2/3) Bildschirm Spalte Behälter Versuch es
w3-Viertel Viertel (1/4) Bildschirm Spalte Behälter Versuch es
w3-Dreiviertel Drei Viertel (3/4) Bildschirm Spalte Container Versuch es
w3-col Spalte Container für jeden HTML-Inhalt Versuch es
l1 - l12 Responsive Größen für große Bildschirme Versuch es
m1 - m12 Responsive Größen für mittlere Bildschirme Versuch es
s1 - s12 Responsive Größen für kleine Bildschirme Versuch es
w3-hide-small Verstecken Inhalt auf kleinen Bildschirmen (weniger als 601px) Versuch es
w3-hide-Medium Ausblenden Inhalt auf dem Medium-Bildschirme Versuch es
w3-hide-large Verstecken Inhalt auf großen Bildschirmen (größer als 992px) Versuch es

Navigation Klassen

Klasse Definiert
w3-navbar Navigationsleiste Versuch es
Klapp-Navigationsleiste Versuch es
w3-topnav Top Navigationsleiste Versuch es
w3-sidenav Seitennavigationsleiste Versuch es
Seitennavigationsleiste Hauptinhalt überlagert Versuch es
Seitennavigationsleiste alle Hauptinhalt überlagert Versuch es
Seitennavigationsleiste Hauptinhalt nach rechts verschoben Versuch es
Seitennavigationsleiste mit einem Overlay-Hintergrund Versuch es
w3-Zusammenbruch Vollautomatische ansprechende Seite Navigation Versuch es
w3-dropnav Dropdown-Navigation Versuch es
w3-Drop-Down-Klick Anklickbare Dropdown-Element Versuch es
w3-Drop-Down-Hover Hoverable Drop-down-Element Versuch es
Hoverable Drop-down-Element (verwendet in w3-navbar) Versuch es
Hoverable Drop-down-Element (verwendet in w3-sidenav) Versuch es
Hoverable Drop-down-Element (verwendet in w3-topnav) Versuch es
w3-Akkordeon Verstecken und zusammenklappbar Inhalt Versuch es
Klickbare Akkordeon und Drop-Down verwendet in w3-sidenav Versuch es
w3-Paginierung Paginierung Links Versuch es

Button-Klassen

Klasse Definiert
w3-btn Rechteckige HTML-Schaltfläche Versuch es
Rechteckige HTML-Schaltfläche mit Welleneffekt Versuch es
w3-btn-Schwimm Rund Floating-Taste Versuch es
Rund Floating-Taste mit Welleneffekt Versuch es
w3-btn-Gruppe gruppierte Tasten Versuch es
w3-btn-Block Voller Breite Tasten (100%) Versuch es

Eingangsklassen

Klasse Definiert
w3-Form Das gleiche wie w3-Polsterung Versuch es
Eingabeformular als Karte Versuch es
w3-Eingang Eingabeelemente Versuch es
Eingabeelemente (Top-Labels) Versuch es
Eingabeelemente (Boden-Etiketten) Versuch es
w3-Gruppe Gruppe von HTML-Elementen Versuch es
w3-label Eingangsbezeichnung Versuch es
w3-validate Dieser Test prüft Eingang (Ändert die Farbe, wenn eine ungültige Eingabe) Versuch es
w3-Check Checkbox Eingabetyp Versuch es
w3-Radio Radio-Eingabetyp Versuch es
w3-select Eingangswahl Element Versuch es
w3-belebtes-Eingang Belebt die Breite eines Eingangs auf 100% Versuch es

Modal Klassen

Klasse Definiert
w3-modal Modal Behälter Versuch es
w3-modal-Gehalt Modal Pop-up-Element Versuch es
w3-Tooltip Tooltip Element Versuch es
w3-Text Tooltip Text Versuch es
Tooltip inline Versuch es

Animationsklassen

Klasse Definiert
w3-belebtes-top Animiert ein Element von oben -300px auf 0px Versuch es
w3-belebtes-links Animiert ein Element von links -300px zu 0px Versuch es
w3-belebtes-bottom Animiert ein Element aus dem Boden -300px zu 0px Versuch es
w3-belebtes-Recht Animiert ein Element von rechts -300px zu 0px Versuch es
w3-belebtes-Opazität Animiert eine Undurchlässigkeit des Elements von 0 bis 1 Versuch es
w3-belebtes-Zoom Animiert ein Element aus 0 bis 100% in der Größe Versuch es
w3-belebtes-Fading Animiert eine Undurchlässigkeit des Elements von 0 bis 1 und 1 bis 0 (Überblendungen in und out) Versuch es
w3-Spin Spin ein Symbol, um 360 Grad Versuch es
Spin jedes Element, um 360 Grad Versuch es
w3-belebtes-Eingang Belebt die Breite eines Eingabefeldes auf 100% Versuch es

Utility-Klassen

Klasse Definiert
w3-tiny Gibt eine Schriftgröße von 10 Pixeln Versuch es
w3-small Gibt eine Schriftgröße von 12 Pixel Versuch es
w3-large Gibt eine Schriftgröße von 20 Pixeln Versuch es
w3-xlarge Gibt eine Schriftgröße von 24 Pixeln Versuch es
w3-xxlarge Gibt eine Schriftgröße von 32 Pixel Versuch es
w3-XXXLarge Gibt eine Schriftgröße von 48 Pixel Versuch es
w3-Jumbo Gibt eine Schriftgröße von 64 Pixeln Versuch es
w3-slim Gibt einen schlankeren Text Versuch es
w3 weit Gibt einen größeren Text Versuch es
w3-vertical Gibt vertikalen Text Versuch es
w3-top Fixed Content auf der Seite Versuch es
w3-Zentrum zentriert Inhalt Versuch es
w3-Kreis eingekreist Inhalt Versuch es
w3-hide Versteckte Inhalte (display: none) Versuch es
w3-Show Inhalt anzeigen (display: block) Versuch es
w3-show-Block Alias ​​von w3-show (display: block) Versuch es
w3-show-inline-block Inhalt anzeigen als inline-block (display: inline-block) Versuch es
w3-hide-small Verstecken Inhalt auf kleinen Bildschirmen (weniger als 601px) Versuch es
w3-hide-Medium Ausblenden Inhalt auf dem Medium-Bildschirme Versuch es
w3-hide-large Verstecken Inhalt auf großen Bildschirmen (größer als 992px) Versuch es
w3-links Linke eingestellten Inhalt Versuch es
w3-Recht Rechts eingestellten Inhalt Versuch es
w3-left-align Links ausgerichteter Text Versuch es
w3-right-align Rechts bündiger Text Versuch es
w3-rechtfertigen Rechts und links ausgerichteten Text Versuch es
w3-display-Behälter Container für w3-Display- Klassen (position: relative) Versuch es
w3-display-topleft Position Inhalt in der linken oberen Ecke Versuch es
w3-display-topright Position Inhalt in der rechten oberen Ecke Versuch es
w3-display-bottom Position Inhalt in der unteren linken Ecke Versuch es
w3-display-bottom Position Gehalt in der unteren rechten Ecke Versuch es
w3-Display-Mitte Position Inhalt in der Mitte (horizontal und vertikal) Versuch es
w3-display-topmiddle Position Inhalt in der Mitte an der Oberseite des Elements Versuch es
w3-display-bottommiddle Position Inhalt in der Mitte an der Unterseite des Elements Versuch es
w3-serif Ändert die Schriftart Serif Versuch es
w3-Opazität Fügt Undurchsichtigkeit Text Versuch es
Fügt Opazität auf ein beliebiges Element Versuch es
w3-Overlay Erstellt eine Überlagerungseffekt Versuch es
w3-text-shadow Fügt Schatten zum Text Versuch es

Farbklassen

Klasse Definiert
w3-rot Hintergrundfarbe rot Versuch es
w3-pink Hintergrundfarbe rosa Versuch es
w3-lila Hintergrundfarbe lila Versuch es
w3-tief-lila Hintergrundfarbe dunkellila Versuch es
w3-Indigo Hintergrundfarbe Indigo Versuch es
w3-blau Hintergrundfarbe blau Versuch es
w3-hellblau Hintergrundfarbe hellblau Versuch es
w3-cyan Hintergrundfarbe Cyan Versuch es
w3-aqua Hintergrundfarbe aqua Versuch es
w3-teal Hintergrundfarbe blaugrün Versuch es
w3-grün Hintergrundfarbe grün Versuch es
w3-hellgrün Hintergrundfarbe hellgrün Versuch es
w3-Kalk Hintergrundfarbe Kalk Versuch es
w3-Sand Hintergrundfarbe Sand Versuch es
w3-khaki Hintergrundfarbe khaki Versuch es
w3-gelb Hintergrundfarbe gelb Versuch es
w3-Bernstein Hintergrundfarbe amber Versuch es
w3-Orange Hintergrundfarbe Orange Versuch es
w3-deep-Orange Hintergrundfarbe dunkelorange Versuch es
w3-blau-grau Hintergrundfarbe blau grau Versuch es
w3-braun Hintergrundfarbe braun Versuch es
w3-hellgrau Hintergrundfarbe hellgrau Versuch es
w3-grau Hintergrundfarbe grau Versuch es
w3-dunkelgrau Hintergrundfarbe dunkelgrau Versuch es
w3-schwarz Hintergrundfarbe schwarz Versuch es
w3-blass-rot Hintergrundfarbe blass rot Versuch es
w3-blass-gelb Hintergrundfarbe hellgelben Versuch es
w3-blass-grün Hintergrundfarbe hellgrün Versuch es
w3-blass-blau Hintergrundfarbe hellblauen Versuch es
w3-transparent Transparent Hintergrund-Farbe

Hover-Klassen

Alle oben genannten Farben können auch als Hover-Klassen verwendet werden:

Klasse Definiert
w3-Hover-weiß Hover Farbe weiß Versuch es
w3-Hover-schwarz Hover Farbe schwarz Versuch es
w3-Hover-rot Hover Farbe Rot Versuch es
w3-Hover-blau Hover Farbe blau Versuch es
w3-Hover-grün Hover Farbe grün Versuch es
w3-Hover-aqua Hover Farbe aqua Versuch es
w3-Hover-Orange Hover Farbe Orange Versuch es
w3-Hover-grau Hover Farbe grau Versuch es
w3-Hover-blass-grün Hover Farbe hellgrün Versuch es
w3-Hover-Text-rot Bewegen Sie den Mauszeiger Textfarbe rot Versuch es
w3-Hover-Text-rot Bewegen Sie den Mauszeiger Textfarbe blau Versuch es
w3-Hover-Text-grün Bewegen Sie den Mauszeiger Textfarbe grün Versuch es
w3-Hover-Text-lila Hover-Text-Farbe lila Versuch es
w3-Hover-Borderline Farbe Hover Rahmenfarbe Versuch es
w3-Hover-Opazität Fügt Transparenz zu einem Element auf schweben (60% Opazität) Versuch es
w3-Hover-Schatten Fügt Schatten auf ein Element auf schweben Versuch es
w3-Hover-none Entfernt Hover-Effekte aus einem Element Versuch es

Round Klassen

Klasse Definiert
w3-Runde Element abgerundet (border-radius) 4px Versuch es
w3-Runde-small Element abgerundet (border-radius) 2px Versuch es
w3-round-Medium Element abgerundet (border-radius) 4px Versuch es
w3-round-large Element abgerundet (border-radius) 8px Versuch es
w3-round-xlarge Element abgerundet (border-radius) 16px Versuch es
w3-round-xxlarge Element abgerundet (border-radius) 32px Versuch es
w3-round-Jumbo Element abgerundet (border-radius) 64px Versuch es

Padding-Klassen

Klasse Definiert
w3-padding-0 Entfernt alle Polsterung aus einem Element Versuch es
w3-Polsterung Padding 8px oben und unten, und 16px links und rechts. Versuch es
w3-padding-tiny Padding 2px oben und unten, und 4px links und rechts. Versuch es
w3-padding-small Padding 4px oben und unten, und 8px links und rechts. Versuch es
w3-padding-Medium Padding 8px oben und unten, und 16px links und rechts. Versuch es
w3-padding-Groß Padding 12px oben und unten, und 24px links und rechts. Versuch es
w3-padding-xlarge Padding 16px oben und unten, und 32px links und rechts. Versuch es
w3-padding-xxlarge Padding 24px oben und unten, und 48px links und rechts. Versuch es
w3-padding-Jumbo Padding 32px oben und unten, und 64px links und rechts. Versuch es
w3-padding-top Padding oben 8px Versuch es
w3-padding-right Padding rechts 16px Versuch es
w3-padding-bottom Padding unten 8px Versuch es
w3-padding-left Padding links 16px Versuch es
w3-padding-hor-4 Padding 4px oben und unten Versuch es
w3-padding-hor-8 Padding 8px oben und unten Versuch es
w3-padding-hor-12 Padding 12px oben und unten Versuch es
w3-padding-hor-16 Padding 16px oben und unten Versuch es
w3-padding-hor-24 Padding 24px oben und unten Versuch es
w3-padding-hor-32 Padding 32px oben und unten Versuch es
w3-padding-hor-48 Padding 48px oben und unten Versuch es
w3-padding-hor-64 Padding 64px oben und unten Versuch es
w3-padding-hor-128 Padding 128px oben und unten Versuch es
w3-padding-ver-4 Padding 4px links und rechts. Versuch es
w3-padding-ver-8 Padding 8px links und rechts. Versuch es
w3-padding-ver-16 Padding 16px links und rechts. Versuch es
w3-padding-ver-24 Padding 24px links und rechts. Versuch es
w3-padding-ver-32 Padding 32px links und rechts. Versuch es
w3-padding-ver-48 Padding 48px links und rechts. Versuch es
w3-padding-ver-64 Padding 64px links und rechts. Versuch es

Margin-Klassen

Klasse Definiert
w3-margin-0 Entfernt alle Ränder von einem Element Versuch es
w3-Marge Margin 16px Versuch es
w3-margin-top Margin oben 16px Versuch es
w3-margin-right Margin rechts 16px Versuch es
w3-margin-bottom Margin Boden 16px Versuch es
w3-margin-left Margin links 16px Versuch es

Border-Klassen

Klasse Definiert
w3-Grenze Grenzen (oben, rechts, unten, links) Versuch es
w3-border-top Border oben Versuch es
w3-border-right Border Recht Versuch es
w3-border-bottom Border bottom Versuch es
w3-border-left Border links Versuch es
w3-border-0 Entfernt alle Grenzen Versuch es
w3-Borderline Farbe Zeigt alle definierten Grenzen in einer bestimmten Farbe (wie rot, usw.) Versuch es
w3-bottombar Fügt eine starke untere Grenze (bar) zu einem Element Versuch es
w3-leftbar Fügt einen dicken linken Rand (bar) zu einem Element Versuch es
w3-rightbar Fügt einen dicken rechten Rand (bar) zu einem Element Versuch es
w3-topbar Fügt einen dicken oberen Rand (bar) zu einem Element Versuch es
w3-Hover-Borderline Farbe Hoverable Rahmenfarbe Versuch es

Hi Traveller Fashion Tomorrow Startups Daily News Fit Science Amazing Baby Yup This is Japan Take Film Art In Life