CSS - Syntax
Die Elementselektoreinrichtung
Die ID - Selektor
Die Klassenauswahl (für alle Elemente)
Die Klassenauswahl (für nur <p> Elemente)
Gruppieren von Selektoren
CSS Hintergründe
Stellen Sie die Hintergrundfarbe einer Seite
Stellen Sie die Hintergrundfarbe der verschiedenen Elemente
Legen Sie ein Bild als Hintergrund einer Seite
Wie ein Hintergrundbild zu wiederholen , nur horizontal
Wie ein Hintergrundbild zu positionieren
Eine feste Hintergrundbild (das Bild wird nicht mit dem Rest der Seite scrollen)
Alle Hintergrundeigenschaften in einer Erklärung
Erweiterte Hintergrundbeispiel
Hintergrundeigenschaften erklärt
CSS Borders
Legen Sie die Breite der vier Grenzen
Stellen Sie die Breite der oberen Grenze
Legen Sie die Breite der unteren Grenze
Legen Sie die Breite des linken Rand
Legen Sie die Breite des rechten Rand
Stellen Sie den Stil der vier Grenzen
Stellen Sie den Stil der oberen Grenze
Stellen Sie den Stil der unteren Grenze
Stellen Sie den Stil der linken Rand
Stellen Sie den Stil des rechten Rand
Legen Sie die Farbe der vier Grenzen
Legen Sie die Farbe der oberen Grenze
Legen Sie die Farbe der unteren Grenze
Legen Sie die Farbe des linken Rand
Legen Sie die Farbe des rechten Rand
Alle Rahmeneigenschaften in einer Erklärung
Stellen Sie unterschiedliche Grenzen auf jeder Seite
Alle Top - Rahmeneigenschaften in einer Erklärung
Alle unteren Rand Eigenschaften in einer Erklärung
Alle linken Rand Eigenschaften in einer Erklärung
Alle rechten Rand Eigenschaften in einer Erklärung
CSS Margins
Geben Sie unterschiedliche Ränder für jede Seite eines Elements
Lassen Sie den linken Rand des übergeordneten Element vererbt werden
Die Marge Kurzschrift - Eigenschaft
Set - Marge auf Auto , das Element in dessen Container zum Zentrum
CSS Padding
Stellen Sie die linke Polsterung eines Elements
Stellen Sie die richtige Polsterung eines Elements
Stellen Sie die Top-Polsterung eines Elements
Stellen Sie die untere Polsterung eines Elements
Alle Polstereigenschaften in einer Erklärung
CSS Text
Legen Sie die Textfarbe der verschiedenen Elemente
Richten Sie den Text
Entfernen Sie die Zeile unter Links
Dekorieren Sie den Text
Kontrollieren Sie die Buchstaben in einem Text
Text einrücken
Geben Sie den Abstand zwischen den Zeichen
Geben Sie den Abstand zwischen den Zeilen
Stellen Sie die Textrichtung eines Elements
Erhöhen Sie den Leerraum zwischen den Wörtern
Deaktivieren Sie Textumbruch innerhalb eines Elements
Die vertikale Ausrichtung eines Bildes innerhalb Text
CSS Fonts
Stellen Sie die Schriftart eines Textes
Legen Sie die Größe der Schriftart
Legen Sie die Größe der Schriftart in Pixel
Legen Sie die Größe der Schriftart in em
Legen Sie die Größe der Schriftart in Prozent und em
Stellen Sie die Art des Gusses
Stellen Sie die Variante der Schrift
Stellen Sie die Kühnheit der Schrift
Alle Schrifteigenschaften in einer Erklärung
CSS Verbindungen
In verschiedenen Farben besuchte / nicht besuchte Links
Die Verwendung von Text-Dekoration auf Links
Geben Sie eine Hintergrundfarbe für Links
In anderen Stilen zu Hyperlinks
Erweitert - Link - Boxen erstellen
Erweitert - Link erstellen Boxen mit Grenzen
CSS Listen
All die verschiedenen Listenelement Marker in Listen
Legen Sie ein Bild als list-item Marker
Positionieren Sie den list-item Markierung
Alle Listeneigenschaften in einer Erklärung
Style - Listen mit Farben
Mit voller Breite begrenzt Liste
CSS Tabellen
Geben Sie einen schwarzen Rand für die Tabelle, th und td - Elemente
Die Verwendung von border-collapse
Einzel Grenze um den Tisch
Geben Sie die Breite und Höhe einer Tabelle
Stellen Sie die horizontale Ausrichtung des Inhalts (text-align)
Stellen Sie die vertikale Ausrichtung von Inhalt (vertical-align)
Geben Sie die Polsterung für th und td - Elemente
Horizontal Teiler
Hoverable Tisch
Gestreiftes Tabellen
Geben Sie die Farbe der Tabellenrahmen
Stellen Sie die Position der Tabellenbeschriftung
Responsive Tabelle
Erstellen Sie eine ausgefallene Tisch
CSS - Box-Modell
Geben Sie ein Element mit einer Gesamtbreite von 250 Pixel
CSS Überblick
Zeichnen Sie eine Linie um ein Element (Entwurf)
Stellen Sie den Stil eines Umrisses
Legen Sie die Farbe eines Umrisses
Legen Sie die Breite eines Umrisses
Gliederungs Eigenschaften erklärt
CSS Dimension
Stellen Sie die Höhe und Breite eines Elements
Eingestellt max-Breite eines Elements
Stellen Sie die Höhe und Breite der verschiedenen Elemente
Stellen Sie die Höhe und Breite eines Bildes unter Verwendung Prozent
Eingestellt min-width und max-Breite eines Elements
Set min-height und max-height eines Elements
Dimension Eigenschaften erklärt
CSS - Anzeige
Wie ein Element zu verstecken (visibility:hidden)
Wie man nicht ein Element Anzeige (display:none)
Wie ein Block-Element als Inline - Element anzeigen
Wie ein Inline - Element als Block-Level - Element anzeigen
Wie zu verwenden CSS zusammen mit JavaScript versteckt zu zeigen ,
Eigenschaften der Anzeige erklärt
CSS - Positionierung
Positionieren Sie ein Element in Bezug auf das Browser - Fenster
Positionieren eines Elements relativ zu seiner normalen Position
Positionieren Sie ein Element mit einem Absolutwert
Overlapping Elemente
Eingestellt , die Form eines Elements
Wie eine Bildlaufleiste zu erstellen , wenn der Inhalt eines Elements zu groß ist , passen
Wie der Browser so einstellen , dass Überlauf behandeln
Stellen Sie den oberen Rand eines Bildes einen Pixelwert unter Verwendung von
Stellen Sie den unteren Rand eines Bildes einen Pixelwert unter Verwendung von
Stellen Sie den linken Rand eines Bildes einen Pixelwert unter Verwendung von
Stellen Sie den rechten Rand eines Bildes einen Pixelwert unter Verwendung von
Ändern Sie den Cursor Position Bildtext (oben links)
Position Bild - Text (oben rechts)
Position Bild - Text (unten links)
Position Bild - Text (rechts unten)
Position Bild - Text (zentriert)
Positionierung Eigenschaften erklärt
CSS Schwimm
Eine einfache Nutzung der Eigenschaft float
Ein Bild mit einem Rahmen und Margen , die in einem Absatz nach rechts schwimmt
Ein Bild mit einem Titel, der auf der rechten Seite schwimmt
Lassen Sie den ersten Buchstaben eines Absatzes Schwimmer nach links
Erstellen Sie eine Fotogalerie mit der Eigenschaft float
Ausschalten Schwimmer (mit der Eigenschaft clear)
Erstellen eines horizontalen Menü
Erstellen einer Homepage ohne Tabellen
CSS Ausrichtelemente
Zentrum Ausrichtung mit Rand
Links / Rechts - Ausrichtung mit Position
Links / Rechts mit Position ausrichten - Cross Lösung
Links / Rechts - Ausrichtung mit Schwimmer
Links / Rechts Ausrichtung mit Schwimmer - Cross Lösung
Richten Sie Eigenschaften erklärt
CSS Kombinatoren
Nachkomme Selektor
Kindselektor
Angrenzende Geschwister - Selektor
Allgemein Geschwister - Selektor
CSS Generated Content
Legen Sie die URL in Klammern nach jeder Verbindung mit dem Inhalt Eigenschaft
Nummerierung Abschnitte und Unterabschnitte mit "Section 1", "1.1", "1.2" usw.
Geben Sie die Anführungszeichen mit den Anführungszeichen Eigenschaft
CSS Pseudo-Klassen
In verschiedenen Farben zu einem Hyperlink
In anderen Stilen zu Hyperlinks
Verwendung von: Fokus
:first-child - entsprechen dem ersten p - Element
:first-child - entsprechen dem ersten i - Element in allen p Elemente
:first-child - Spiel alle i Elemente in allen ersten p Elemente Kind
Verwendung von :lang
CSS Pseudo-Elemente
Machen Sie den ersten Buchstaben Sonder in einem Text
Machen Sie die erste Zeile Sonder in einem Text
Machen Sie den ersten Buchstaben und erste Zeile Sonder
Verwendung: vor einige Inhalte vor einem Element einfügen
Anwendung: Nach einigen Inhalt nach einem Element einzufügen
CSS Navigationsleisten
Voll gestylt vertikalen Navigationsleiste
Voll gestylt horizontale Navigationsleiste
CSS Auswahlmenüs
Dropdown Text
Dropdown-Menü
Rechtsbündig Dropdown - Menü
Dropdown Bild
Dropdown - Navigationsleiste
CSS Tooltips
Rechts Tooltip
Linke Tooltip
Top Tooltip
Bottom Tooltip
Tooltip mit Pfeil
Animierte Tooltip
CSS Bildergalerie
Bildergalerie
Responsive Bildergalerie
CSS Bild Opazität
Erstellen transparente Bilder - Mouseover - Effekt
Erstellen einer transparenten Box mit Text auf einem Hintergrundbild
CSS Image Sprites
Ein Bild Sprite
Ein Bild Sprite - eine Navigationsliste
Ein Bild Sprite mit Hover - Effekt
CSS Attributselektoren
Wählt alle <a> Elemente mit einem Zielattribut
Wählt alle <a> Elemente mit einem target = "_ blank" Attribut
Wählt alle Elemente mit einem Titel - Attribut, das eine durch Leerzeichen getrennte Liste von Wörtern enthält, von denen eine "Blume"
Wählt alle Elemente mit einem Klassenattributwert, der mit beginnt "top" (sein ganzes Wort muss)
Wählt alle Elemente mit einem Klassenattributwert, der mit beginnt "top" (nicht sein ganzes Wort muss)
Wählt alle Elemente mit einem Klassenattributwert mit der Endung "test"
Wählt alle Elemente mit einem Attribut - Wert - Klasse , die enthält "te"
CSS Forms
Mit voller Breite Eingabefeld
Gepolsterte Eingabefeld
Grenzt Eingabefeld
Unten umrandeten Eingabefeld
Farbige Eingabefelder
Focused Eingabefelder
Focused Eingabefelder 2
Eingang mit Symbol / Bild
Animierte Sucheingabe
Styling Textareas
Styling Auswahlmenüs
Styling Eingabetasten
CSS Zähler
Erstellen Sie einen Zähler
Verschachtelte Zähler 1
Verschachtelte Zähler 2
Die Zähler erklärt
CSS3 abgerundete Ecken
Hinzufügen abgerundeten Ecken auf Elemente
Rund jeder Ecke separat
Erstellen elliptischen Kurven
CSS3 abgerundete Ecken erklärt
Bilder CSS3 Border
Erstellen Sie ein Bild Rahmen um ein Element, das runde Schlüsselwort
Erstellen Sie ein Bild Rahmen um ein Element, das Stretch - Schlüsselwort
Bildrand - Verschiedene Scheibe Werte
CSS3 Hintergrund
Fügen Sie mehrere Hintergrundbilder für ein Element
Geben Sie die Größe eines Hintergrundbildes
Skalieren Sie ein Hintergrundbild mit "enthalten" und "Deckel"
Definieren Größen von mehreren Hintergrundbildern
Full-Size - Hintergrundbild (den Inhalt Bereich ausfüllen)
Verwenden Sie Hintergrund-Herkunft angeben , wo das Hintergrundbild positioniert ist ,
Verwenden Sie Hintergrund-Clip , um die Malerei Bereich der Hintergrund festlegen
CSS3 Gradients
Linear Gradient - von oben nach unten
Linear Gradient - von links nach rechts
Linear Gradient - diagonal
Linear Gradient - mit einem bestimmten Winkel
Linear Gradient - mit mehreren Farbstopps
Linear Gradient - Farbe eines Regenbogens + Text
Linear Gradient - mit Transparenz
Linear Gradient - ein sich wiederholendes linearen Gradienten
Radial Gradient - gleichmäßig verteilte Farbe Anschläge
Radial Gradient - unterschiedlich gestufte Farbstopps
Radial Gradient - set Form
Radial Gradient - unterschiedliche Größe keywords
Radial Gradient - ein sich wiederholendes radialen Verlauf
CSS3 Schatteneffekte
Einfache Schatteneffekt
Fügen Sie eine Farbe in den Schatten
Fügen Sie einen Unschärfe - Effekt auf den Schatten
Weißer Text mit schwarzer Schatten
Ein rotes Neonglühen Schatten
Eine rote und blaue Neon - Leuchten Schatten
Weißer Text mit schwarz, blau und dunkelblau Schatten
Fügen Sie eine einfache Box-Schatten auf ein Element
Bringen Sie Farbe in box-shadow
In Farbe und Unschärfe - Effekt zu-Schatten - Kasten
Erstellen papierähnlichen Karten (Text)
Erstellen papierartige Karten (polaroid Bilder)
CSS3 Text
Gibt an, wie versteckt, überschwemmt Inhalt sollte dem Benutzer signalisiert werden
Wie die übergelaufenen Inhalt , wenn schweben über dem Element anzeigen
Lassen Sie lange Wörter der Lage sein , um gebrochen zu werden und wickeln Sie in der nächsten Zeile
Geben Sie Linie Regeln zu brechen
CSS3 Fonts
Verwenden Sie Ihre "eigene" Schriftarten in @font-face - Regel
Verwenden Sie Ihre "eigene" Schriftarten in @font-face - Regel (fett)
CSS3 2D - Transformationen
translate() - ein Element von seiner aktuellen Position bewegen
rotate() - drehen Sie ein Element im Uhrzeigersinn
rotate() - drehen Sie ein Element gegen den Uhrzeigersinn
scale() - ein Element erhöhen
scale() - verringern ein Element
skewX() - skews ein Element entlang der X-Achse
skewY() - skews ein Element entlang der Y-Achse
skew() - skews eines Elements entlang der X- und Y-Achse
matrix() - Rotation, Skalierung, bewegen und Neigung ein Element
CSS3 2D - Transformationen erklärt
CSS3 3D - Transformationen
rotateX() - zu einem bestimmten Grad ein Element um seine X-Achse drehen
rotateY() - zu einem bestimmten Grad ein Element um seine Y-Achse drehen ,
rotateZ() - zu einem bestimmten Grad ein Element um seine Z-Achse drehen
CSS3 3D - Transformationen erklärt
CSS3 Transitions
Transition - Änderungsbreite eines Elements
Transition - Änderung der Breite und Höhe eines Elements
Geben Sie verschiedene Geschwindigkeitskurven für einen Übergang
Geben Sie eine Verzögerung für einen Übergangseffekt
Fügen Sie eine Transformation in ein Übergangseffekt
Geben Sie alle Übergangseigenschaften in einer Kurzschrift - Eigenschaft
CSS3 Animationen
Binden Sie eine Animation auf ein Element
Animation - Änderung Hintergrund-Farbe eines Elements
Animation - ändern Sie Hintergrundfarbe und Position eines Elements
Verzögerung eine Animation
Führen Sie Animation 3 - mal , bevor es aufhört
Führen Sie Animation für immer
Führen Sie Animation in umgekehrter Richtung
Führen Sie Animation in abwechselnden Zyklen
Geschwindigkeitskurven für Animationen
Animation , Kurzschrift - Eigenschaft
CSS3 Bilder
Abgerundete Bild
eingekreist Bild
Vorschaubild
Miniaturansicht als Link
Responsive Bild
Bildtext (oben links)
Bildtext (rechts oben)
Bildtext (links unten)
Bildtext (rechts unten)
Bildtext (zentriert)
Polaroid - Bilder
Graustufen Bildfilter
Advanced - Bild Modal mit CSS & JavaScript
CSS3 Buttons
Grundlegende CSS Tasten
Button Farben
Button - Größen
Abgerundete Tasten
Farbige Taste Grenzen
Hoverable Tasten
Schatten - Tasten
Behinderte Tasten
Button - Breite
Button - Gruppen
Umrandete Schaltfläche Gruppe
Animierte Button (Hover - Effekt)
Animierte Button (Ripple Effect)
Animierte Button (Pressed - Effekt)
CSS3 Paginierung
Einfache Paginierung
Aktive und hoverable Paginierung
Abgerundete aktiv und hoverable Paginierung
Hoverable Übergangseffekt
Grenzt Paginierung
Abgerundete umrandeten Paginierung
Paginierung mit Raum zwischen Links
Paginierung Größe
Paginierung mit Raum zwischen Links
zentriert Paginierung
Semmelbrösel
CSS3 mehrere Spalten
Erstellen Sie mehrere Spalten
Geben Sie die Lücke zwischen den Spalten
Geben Sie den Stil der Regel zwischen den Spalten
Geben Sie die Breite der Regel zwischen den Spalten
Geben Sie die Farbe der Regel zwischen den Spalten
Geben Sie die Breite, Stil und Farbe der Regel zwischen den Spalten
Legen Sie fest , wie viele Spalten sollte ein Element erstrecken sich über
Geben Sie einen vorgeschlagen, optimale Breite für die Spalten
CSS3 User Interface
Lassen ein Benutzer die Breite eines Elements skalieren
Lassen ein Benutzer die Höhe eines Elements die Größe
Lassen Sie ein Benutzer die Größe sowohl die Breite und Höhe eines Elements
In Raum zwischen einer Kontur und der Grenze eines Elements
CSS3 Benutzeroberfläche erklärt
CSS3 Box Sizing
Breite der Elemente ohne Box-Sizing
Breite der Elemente mit dem Box-Sizing
Formularelemente + Box-Sizing
CSS3 Flexbox
Flexbox mit drei Flex Artikel
Flexbox mit drei Flexposten - rtl Richtung
flex-Richtung - Reihe-Rückwärts
flex-Richtung - Säule
flex-Richtung - Spalte-Rückwärts
rechtfertigen-Inhalt - flex-End
rechtfertigen-Inhalt - Zentrum
rechtfertigen-Inhalt - Raum zwischen
rechtfertigen-Inhalt - Raum-around
Ausrichten-Elemente - Strecke
Ausrichten-Elemente - flex-Start
Ausrichten-Elemente - flex-End
Ausrichten-Elemente - Zentrum
Ausrichten-Elemente - Basis
flex-Wrap - nowrap
flex-Wrap - Wrap
flex-Wrap - Wrap-Reverse
align-Inhalt - Mitte
Bestellen Sie die Flex - Artikel
Margin-right: auto;
Margin: auto; = Perfekte Zentrierung
Ausrichten-Selbst auf flex Artikel
Geben Sie die Länge des flexiblen Element, bezogen auf den Rest der flexiblen Elemente
Erstellen Sie eine ansprechende Website mit Flexbox
CSS3 Media Queries
Ändern Sie den Hintergrund-Farbe hellgrün , wenn das Ansichtsfenster 480px breit oder breiter
Zeigen Sie ein Menü , das auf der linken Seite der Seite schwimmen , wenn das Ansichtsfenster 480px breit oder breiter
CSS3 Media Queries - Weitere Beispiele
Die HTML - Seite
Breite von 520 bis 699px - Tragen Sie eine E - Mail - Symbol auf jedem Link
Breite von 700 bis 1000px - Vorwort die Links mit einem Text
Breite oben 1001PX - Bewerben Sie E - Mail - Adresse Links
Breite oben 1151px - Symbol hinzufügen , wie wir verwendet vor
Verwenden Sie die Liste von E - Mail - Links auf einer Seitenleiste in einer Web - Seite
CSS3 Media Queries Beispiele erklärt