Das Essential CSS3 Properties Cheat Sheet
Werbung Cascading Style Sheets oder CSS definieren das Erscheinungsbild des Webs, wie wir es kennen. Während sich HTML und JavaScript auf die funktionale Seite des Webs konzentrieren, befasst sich CSS mit den visuellen Aspekten des Webs. Benötigen Sie Hilfe bei der Navigation durch die Welt von CSS3?
Werbung
Cascading Style Sheets oder CSS definieren das Erscheinungsbild des Webs, wie wir es kennen. Während sich HTML und JavaScript auf die funktionale Seite des Webs konzentrieren, befasst sich CSS mit den visuellen Aspekten des Webs.
Benötigen Sie Hilfe bei der Navigation durch die Welt von CSS3? Laden Sie noch heute unser "Essential CSS3 Properties Cheat Sheet" herunter!Nachdem Sie gelernt haben, wie man statische Webseiten mit HTML erstellt, ist es an der Zeit, zu lernen, wie man sie formatiert und mit CSS präsentierbar macht. Und unser CSS3-Eigenschaften-Spickzettel unten kann Ihnen dabei helfen! Es behandelt die grundlegende Syntax, die Sie in CSS3, der neuesten Version von CSS, kennen müssen.
Gute CSS-Kenntnisse helfen Ihnen dabei, Farben, Schriftarten, Rahmen, Hintergründe, Layouts und vieles mehr auf Webseiten auf optimierte Weise anzupassen. Darüber hinaus ist es praktisch, wenn Sie Webanwendungen und mobile Anwendungen entwerfen.
KOSTENLOSER DOWNLOAD: Dieser Spickzettel kann von unserem Vertriebspartner TradePub als PDF heruntergeladen werden. Sie müssen nur ein kurzes Formular ausfüllen, um zum ersten Mal darauf zuzugreifen. Laden Sie das Essential CSS3 Properties Cheat Sheet herunter.
Das Essential CSS3 Properties Cheat Sheet
| Abkürzung | Aktion |
|---|---|
| Hintergrundeigenschaften | |
| Hintergrund | Definiert eine Vielzahl von Hintergrundeigenschaften innerhalb einer Deklaration. |
| Hintergrund-Anhang | Gibt an, ob das Hintergrundbild fixiert ist oder mit der Webseite gescrollt wird. |
| Hintergrundfarbe | Definiert die Hintergrundfarbe eines Elements auf der Webseite. |
| Hintergrundbild | Definiert das Hintergrundbild eines Elements. |
| Hintergrund-Clip | Legt fest, wie weit sich die Hintergrundbilder oder Farben für ein Element erstrecken. |
| Hintergrund-Herkunft | Legt den Positionierungsbereich der Hintergrundbilder fest. |
| Hintergrund-Position | Definiert den Ursprung eines Hintergrundbildes. |
| Hintergrund Wiederholung | Legt fest, wie das Hintergrundbild gekachelt wird. |
| Hintergrundgröße | Legt die Größe der Hintergrundbilder fest. |
| Rahmeneigenschaften | |
| Rand | Legt die Rahmenbreite, den Stil und die Farbe für alle vier Seiten eines Elements fest. |
| Rand unten | Legt die Breite, den Stil und die Farbe für den unteren Rand eines Elements fest. |
| Border-Bottom-Farbe | Legt die Farbe des unteren Randes eines Elements fest. |
| Rand-unten-links-Radius | Definiert die Form der linken unteren Ecke eines Elements. |
| Rand-unten-rechts-Radius | Definiert die Form der unteren rechten Ecke eines Elements. |
| Border-Bottom-Style | Legt den Stil des unteren Randes eines Elements fest. |
| Border-Bottom-Width | Legt die Breite des unteren Randes eines Elements fest. |
| Randfarbe | Legt die Farbe des Rahmens auf allen vier Seiten eines Elements fest. |
| Randbild | Gibt an, wie ein Bild anstelle der Rahmenstile verwendet werden soll. |
| Rand-Bild-Anfang | Gibt den Betrag an, um den sich der Randbildbereich über den Randrahmen hinaus erstreckt. |
| Rand-Bild-Wiederholung | Legt fest, wie das Rahmenbild gekachelt wird. |
| Border-Image-Slice | Legt den Versatz des Bildrandes nach innen fest. |
| Rand-Bildquelle | Gibt die Position des Bildes an, das als Rahmen verwendet werden soll. |
| Rand-Bild-Breite | Legt die Breite des Bildrandes fest. |
| Grenze links | Legt die Breite, den Stil und die Farbe des linken Randes eines Elements fest. |
| border-left-color | Legt die Farbe des linken Randes eines Elements fest. |
| border-left-style | Legt den Stil des linken Randes eines Elements fest. |
| border-left-width | Legt die Breite des linken Randes eines Elements fest. |
| Grenzradius | Definiert die Form der Rahmenecken eines Elements. |
| Grenze rechts | Legt die Breite, den Stil und die Farbe des rechten Randes eines Elements fest. |
| Rahmen rechts Farbe | Legt die Farbe des rechten Randes eines Elements fest. |
| Rahmen rechts | Legt den Stil des rechten Randes eines Elements fest. |
| Rahmen rechts breit | Legt die Breite des rechten Randes eines Elements fest. |
| Rahmenstil | Legt den Stil des Rahmens auf allen vier Seiten eines Elements fest. |
| Border-Top | Legt die Breite, den Stil und die Farbe des oberen Randes eines Elements fest. |
| Border-Top-Farbe | Legt die Farbe des oberen Randes eines Elements fest. |
| Rand-oben-links-Radius | Definiert die Form der linken oberen Ecke eines Elements. |
| Rand-oben-rechts-Radius | Definiert die Form der oberen rechten Ecke eines Elements. |
| Border-Top-Style | Legt den Stil des oberen Randes eines Elements fest. |
| Border-Top-Breite | Legt die Breite des oberen Randes eines Elements fest. |
| Rahmenbreite | Legt die Breite des Rahmens auf allen vier Seiten eines Elements fest. |
| Farbeigenschaften | |
| Farbe | Definiert und legt die Farbe für Text fest. |
| Opazität | Definiert die Transparenz eines Elements. |
| Bemaßungseigenschaften | |
| Höhe | Definiert die Höhe eines Elements. |
| maximale Höhe | Definiert die maximale Höhe eines Elements. |
| maximale Breite | Definiert die maximale Breite eines Elements. |
| min-Höhe | Definiert die minimale Höhe eines Elements. |
| min-width | Definiert die minimale Breite eines Elements. |
| Breite | Geben Sie die Breite eines Elements an. |
| Generierte Inhaltseigenschaften | |
| Inhalt | Fügt generierten Inhalt ein. |
| Zitate | Legt Anführungszeichen für eingebettete Anführungszeichen fest. |
| Zähler zurücksetzen | Erstellt oder setzt einen oder mehrere Zähler zurück. |
| Gegeninkrement | Erhöht einen oder mehrere Zählerwerte. |
| Flexibles Schachtellayout | |
| Align-Content | Gibt die Ausrichtung der Elemente des flexiblen Containers an. |
| Elemente ausrichten | Gibt die Standardausrichtung für Elemente an. |
| selbst ausrichten | Gibt die Ausrichtung für ausgewählte Elemente an. |
| biegen | Bestimmt die Komponenten einer flexiblen Länge. |
| flex-basis | Gibt die anfängliche Hauptgröße des flexiblen Elements an. |
| Flex-Richtung | Gibt die Richtung der flexiblen Elemente an. |
| Flex-Flow | Eine Abkürzungseigenschaft für die Flex-Richtung und die Flex-Wrap-Eigenschaften. |
| Flex-Grow | Gibt an, wie das Flex-Element im Verhältnis zu den anderen Elementen im Flex-Container wächst. |
| Flex-Shrink | Gibt an, wie das Flex-Element im Verhältnis zu den anderen Elementen im Flex-Container verkleinert wird. |
| Flex-Wrap | Gibt an, ob die flexiblen Elemente umbrochen werden sollen oder nicht. |
| Inhalt rechtfertigen | Gibt an, wie Flex-Elemente entlang der Hauptachse des Flex-Containers ausgerichtet werden, nachdem flexible Längen und automatische Ränder aufgelöst wurden. |
| Bestellung | Gibt die Reihenfolge an, in der Flex-Elemente in einem Flex-Container angezeigt und angeordnet werden. |
| Schrifteigenschaften | |
| Schriftart | Definiert eine Vielzahl von Schrifteigenschaften in einer Deklaration, z. B. den Schriftstil, die Schriftvariante, die Schriftstärke, die Schriftgröße / Zeilenhöhe und die Schriftfamilie. |
| Schriftfamilie | Definiert eine Liste von Schriftarten für das Element. |
| Schriftgröße | Definiert die Schriftgröße für den Text. |
| Schriftgröße anpassen | Erhält die Lesbarkeit von Text, wenn die Schriftart zurückgesetzt wird. |
| font-stretch | Wählt eine normale, komprimierte oder erweiterte Fläche aus einer Schriftart aus. |
| Schriftstil | Definiert den Schriftstil für den Text. |
| Schriftvariante | Gibt die Schriftartvariante an. |
| Schriftgröße | Gibt die Schriftgröße des Texts an. |
| Eigenschaften auflisten | |
| Listenstil | Definiert den Anzeigestil für eine Liste und Listenelemente. |
| Listen-Stil-Bild | Gibt das Bild an, das als Listenelementmarkierung verwendet werden soll. |
| Listenstil-Position | Gibt die Position der Listenelementmarkierung an. |
| Listenstil-Typ | Legt den Markierungsstil für ein Listenelement fest. |
| Randeigenschaften | |
| Spanne | Legt den Rand auf allen vier Seiten des Elements fest. |
| Rand-unten | Legt den unteren Rand des Elements fest. |
| Rand-links | Legt den linken Rand des Elements fest. |
| Rand rechts | Legt den rechten Rand des Elements fest. |
| Rand oben | Legt den oberen Rand des Elements fest. |
| Eigenschaften für mehrspaltiges Layout | |
| Spaltenanzahl | Gibt die Anzahl der Spalten in einem mehrspaltigen Element an. |
| Spaltenfüllung | Gibt an, wie Spalten gefüllt werden. |
| Spalte-Lücke | Gibt die Lücke zwischen den Spalten in einem mehrspaltigen Element an. |
| Spaltenregel | Gibt eine gerade Linie oder "Regel" an, die zwischen den einzelnen Spalten in einem mehrspaltigen Element gezeichnet werden soll. |
| Spaltenregelfarbe | Legt die Farbe der Regeln fest, die in einem mehrspaltigen Layout zwischen Spalten gezeichnet werden. |
| Spaltenregelstil | Gibt den Stil der Regel an, die in einem mehrspaltigen Layout zwischen den Spalten gezeichnet wird. |
| Spaltenregelbreite | Gibt die Breite der Regel an, die in einem mehrspaltigen Layout zwischen den Spalten gezeichnet wird. |
| Spaltenbreite | Gibt an, über wie viele Spalten sich ein Element in einem mehrspaltigen Layout erstreckt. |
| Spaltenbreite | Bestimmt die optimale Breite der Spalten in einem mehrspaltigen Element. |
| Säulen | Eine Abkürzungseigenschaft zum Festlegen der Eigenschaften für Spaltenbreite und Spaltenanzahl. |
| Spaltenanzahl | Gibt die Anzahl der Spalten in einem mehrspaltigen Element an. |
| Gliederungseigenschaften | |
| Gliederung | Legt die Breite, den Stil und die Farbe für alle vier Seiten des Umrisses eines Elements fest. |
| Umrissfarbe | Legt die Farbe der Kontur fest. |
| Outline-Offset | Legen Sie den Abstand zwischen einer Kontur und der Randkante eines Elements fest. |
| Umriss-Stil | Legt einen Stil für eine Gliederung fest. |
| Konturbreite | Legt die Breite der Kontur fest. |
| Polstereigenschaften | |
| Polsterung | Legt den Abstand auf allen vier Seiten des Elements fest. |
| gepolsterter Boden | Legt den Abstand zur Unterseite eines Elements fest. |
| links auffüllen | Legt den Abstand zur linken Seite eines Elements fest. |
| Polsterung rechts | Legt den Abstand zur rechten Seite eines Elements fest. |
| Polsterung | Legt den Abstand zur Oberseite eines Elements fest. |
| Druckeigenschaften | |
| Seitenumbruch danach | Fügt nach einem Element einen Seitenumbruch ein. |
| Seitenumbruch vorher | Fügt einen Seitenumbruch vor einem Element ein. |
| Seitenumbruch innen | Fügt einen Seitenumbruch in ein Element ein. |
| Tabelleneigenschaften | |
| Grenzzusammenbruch | Gibt an, ob Tabellenzellenränder verbunden oder getrennt sind. |
| Randabstand | Legt den Abstand zwischen den Rändern benachbarter Tabellenzellen fest. |
| Untertitelseite | Gibt die Position der Tabellenüberschrift an. |
| leere Zellen | Blendet Ränder und Hintergründe leerer Tabellenzellen ein oder aus. |
| Tabellenlayout | Gibt einen Tabellenlayoutalgorithmus an. |
| Grenzzusammenbruch | Gibt an, ob Tabellenzellenränder verbunden oder getrennt sind. |
| Texteigenschaften | |
| Richtung | Definiert die Textrichtung / Schreibrichtung. |
| Tab-Größe | Gibt die Länge des Tabulatorzeichens an. |
| Textausrichtung | Legt die horizontale Ausrichtung des Inline-Inhalts fest. |
| Text-Align-Last | Gibt an, wie die letzte Zeile eines Blocks oder eine Zeile direkt vor einem erzwungenen Zeilenumbruch ausgerichtet wird, wenn die Textausrichtung gerechtfertigt ist. |
| Text-Dekoration | Gibt die dem Text hinzugefügte Dekoration an. |
| Textdekorationsfarbe | Bestimmt die Farbe der Textdekorationslinie. |
| Text-Deko-Zeile | Gibt an, welche Art von Liniendekorationen dem Element hinzugefügt werden. |
| Text-Dekoration-Stil | Gibt den Stil der Linien an, die in der Eigenschaft text-decoration-line angegeben sind |
| Texteinzug | Rückt die erste Textzeile ein |
| Text rechtfertigen | Gibt die Ausrichtungsmethode an, die verwendet werden soll, wenn die Textausrichtungseigenschaft auf Ausrichten festgelegt ist. |
| Textüberlauf | Gibt an, wie der Textinhalt angezeigt wird, wenn er die Blockcontainer überläuft. |
| Text-Schatten | Wendet einen oder mehrere Schatten auf den Textinhalt eines Elements an. |
| Text-Transformation | Transformiert die Groß- und Kleinschreibung des Texts. |
| Zeilenhöhe | Legt die Höhe zwischen den Textzeilen fest. |
| vertikal ausrichten | Legt die vertikale Position eines Elements relativ zur aktuellen Textbasislinie fest. |
| Buchstaben-Abstand | Legt den zusätzlichen Abstand zwischen den Buchstaben fest. |
| Wortabstand | Legt den Abstand zwischen Wörtern fest. |
| Leerraum | Gibt an, wie Leerzeichen im Element behandelt werden. |
| Wortumbruch | Gibt an, wie Zeilen innerhalb von Wörtern umbrochen werden. |
| Zeilenumbruch | Gibt an, ob Wörter getrennt werden sollen, wenn der Inhalt die Grenzen seines Containers überschreitet. |
| Eigenschaften transformieren | |
| Sichtbarkeit der Rückseite | Gibt an, ob die "Rückseite" eines transformierten Elements gegenüber dem Benutzer sichtbar ist. |
| Perspektive | Definiert die Perspektive, aus der alle untergeordneten Elemente des Objekts angezeigt werden. |
| Perspektivursprung | Definiert den Ursprung (den Fluchtpunkt für den 3D-Raum) für die perspektivische Eigenschaft. |
| verwandeln | Wendet eine 2D- oder 3D-Transformation auf ein Element an. |
| Transformationsursprung | Definiert den Ursprung der Transformation für ein Element. |
| transform-style | Gibt an, wie verschachtelte Elemente im 3D-Raum gerendert werden. |
| Übergangseigenschaften | |
| Übergang | Definiert den Übergang zwischen zwei Zuständen eines Elements. |
| Übergangsverzögerung | Legt fest, wann der Übergangseffekt gestartet wird. |
| Übergangszeit | Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt dauern soll. |
| Übergangseigenschaft | Gibt die Namen der CSS-Eigenschaften an, auf die ein Übergangseffekt angewendet werden soll. |
| Übergangs-Timing-Funktion | Bestimmt die Geschwindigkeitskurve des Übergangseffekts. |
| Visuelle Formatierungseigenschaften | |
| Anzeige | Gibt an, wie ein Element auf dem Bildschirm angezeigt wird. |
| Position | Gibt an, wie ein Element positioniert wird. |
| oben | Gibt die Position der Oberkante des positionierten Elements an. |
| richtig | Gibt die Position der rechten Kante des positionierten Elements an. |
| Unterseite | Gibt die Position der Unterkante des positionierten Elements an. |
| links | Gibt die Position der linken Kante des positionierten Elements an. |
| schweben | Gibt an, ob ein Kästchen schweben soll oder nicht. |
| klar | Gibt die Platzierung eines Elements in Bezug auf schwebende Elemente an. |
| Z-Index | Gibt eine Ebenen- oder Stapelreihenfolge für positionierte Elemente an. |
| Überlauf | Gibt die Behandlung von Inhalten an, die über das Feld des Elements hinausgehen. |
| Überlauf-x | Gibt an, wie der Inhalt verwaltet wird, wenn die Breite des Inhaltsbereichs des Elements überschritten wird. |
| Überlauf-y | Gibt an, wie der Inhalt verwaltet wird, wenn die Höhe des Inhaltsbereichs des Elements überschritten wird. |
| Größe ändern | Gibt an, ob die Größe eines Elements vom Benutzer geändert werden kann. |
| Clip | Definiert den Beschneidungsbereich. |
| Sichtweite | Gibt an, ob ein Element sichtbar ist oder nicht. |
| Mauszeiger | Gibt den Typ des Cursors an. |
| Box Schatten | Wendet einen oder mehrere Schlagschatten auf das Feld des Elements an. |
| Kartongröße | Ändert das Standard-CSS-Boxmodell. |
| Animationseigenschaften | |
| Animation | Legt das Verhalten aller Animationen fest. |
| Animationsverzögerung | Legt fest, wann die Animation verzögert startet. |
| Animationsrichtung | Gibt an, ob die Animation vorwärts, rückwärts oder in alternativen Zyklen abgespielt werden soll. |
| Animationsdauer | Gibt an, wie viele Sekunden oder Millisekunden eine Animation benötigt, um einen Zyklus abzuschließen. |
| Animationsfüllmodus | Gibt an, wie eine CSS-Animation vor und nach der Ausführung Stile auf ihr Ziel anwenden soll. |
| Animations-Iterations-Zählung | Gibt an, wie oft ein Animationszyklus vor dem Stoppen abgespielt werden soll. |
| Animationsname | Gibt den Namen der von @keyframes definierten Animationen an, die auf das ausgewählte Element angewendet werden sollen. |
| Animations-Wiedergabestatus | Gibt an, ob die Animation ausgeführt oder angehalten wird. |
| Animations-Timing-Funktion | Gibt an, wie eine CSS-Animation über die Dauer jedes Zyklus fortschreiten soll. |
Gehen Sie über die Grundlagen von CSS hinaus
Sobald Sie die Bausteine von CSS beherrschen, empfehlen wir Ihnen, Ihre CSS-Kenntnisse zu verbessern. Starten Sie Ihre CSS-Projekte mit diesem KOSTENLOSEN eBook! Starten Sie Ihre CSS-Projekte mit diesem KOSTENLOSEN eBook! Dieses kostenlose eBook enthält eine Vielzahl von CSS-basierten Beispielen, mit denen Sie Ihre eigenen Webprojekte starten können. Lesen Sie mehr und lernen Sie JavaScript Was ist JavaScript und wie funktioniert es? Was ist JavaScript und wie funktioniert es? Was ist Javascript? Es ist eine Programmiersprache, die zur Verbesserung von Webseiten verwendet wird. Es umfasst die dynamische Aktualisierung von Webseiten, Benutzeroberflächen und mehr. Lassen Sie uns untersuchen, worum es bei Javascript geht. Lesen Sie mehr, um Ihre Webseiten auf ein neues Niveau zu bringen.
Bildnachweis: Nick Karvounis bei Unsplash
Erfahren Sie mehr über: Spickzettel, CSS, Webdesign.
