Einführung in Cheatsheet CSS3
Cascading Stylesheet (CSS) ist im Grunde eine Stylesheet-Sprache, die zum Implementieren des Erscheinungsbilds und der Formatierung eines Dokuments verwendet wird, das in einer Auszeichnungssprache entwickelt wurde. Die CSS-Spezifikation wird hauptsächlich vom World Wide Web Consortium (W3C) gepflegt. Das Hauptmotiv für die Implementierung von CSS ist es, die Trennung von Präsentation und Inhalt zu demonstrieren, die Fronten und Layoutformate umfasst. CSS3 ist die neueste Version oder der neueste Standard für CSS nach CSS2. CSS3 ist hauptsächlich eine Mischung aus CSS2-Spezifikationen und einigen neuen Funktionen.
Nachfolgend finden Sie einige wichtige Module von Cheatsheet CSS3:
- Box-Modell
- Selektoren
- Texteffekte
- 2D-Transformationen
- 3D-Transformationen
- Bilddarstellung
- Benutzerinterphase
- Mehrere Spaltenlayouts
- Animationen
- Anpassung und Neuzuweisung von Inhalten
In diesem Cheatsheet-CSS3-Artikel werden wir uns mit CSS3 und den verschiedenen CSS3-Befehlen befassen.
Befehle und Inhalte im Cheatsheet CSS3
CSS3 verfügt über eine umfangreiche Bibliothek, die interaktiv und erweiterbar ist und viele integrierte Methoden zur Berechnung allgemeiner Vorgänge enthält. Nachfolgend sind die genannten Cheatsheet CSS3-Befehle aufgeführt, die verschiedene Befehlszeilenoperationen ausführen:
|
BEFEHL |
BESCHREIBUNG |
| : Fokus | Sich auf ein Element konzentrieren |
| : aktiv | Anzeige und Auswahl eines aktiven Elements |
| : aktiviert | Anzeige eines aktivierten Elements |
| : geprüft | Anzeige eines markierten Elements |
| : lang | Damit der Entwickler die Sprache für ein bestimmtes Element festlegen kann |
| : Auswahl | Anzeige des markierten und ausgewählten Elements |
| : Wurzel | Anzeigen des Stammelements im Dokument |
| :erstes Kind | Zum Anzeigen des ersten Geschwisterelements |
| :letztes Kind | Anzeige des letzten Geschwisterelements |
| :Einzelkind | Das einzige untergeordnete Element anzeigen |
| : erster Typ | Anzeigen des ersten Geschwisterelements eines bestimmten Typs |
| : letzter Typ | Anzeige des letzten Geschwisterelements eines bestimmten Typs |
| : nur vom Typ | Anzeigen des einzigen Geschwisterelements eines bestimmten Typs |
| : leer | Anzeige des Elements ohne untergeordnete Elemente |
| ::erster Brief | Hinzufügen eines bestimmten Stils zum ersten Buchstaben eines Textes |
| ::erste Linie | Hinzufügen eines bestimmten Stils zur ersten Textzeile |
| :: nach | Einfügen von Inhalten nach einem Textelement |
| :: Vor | So fügen Sie Inhalte vor einem Textelement ein |
Operatoren: - Die verschiedenen Arten von Operatoren in CSS3 sind Vergleichsoperatoren (relationale Operatoren), Zuweisungsoperatoren, logische Operatoren und Identitätsoperatoren.
Messskalen : CSS3-Messskalen für Spickzettel lauten wie folgt
|
WAAGE / PARAMETER |
BESCHREIBUNG |
| em | Schriftgröße des aktuellen Elements |
| Ex | Schrifthöhe des Elements |
| px | Anzeigegerät Pixel |
| rem | Schriftgröße des Stammelements |
| vh | Höhe des Ansichtsfensters |
| vw | Breite des Ansichtsfensters |
| % | Prozentsatz |
| pc | Pica |
| pt | Punkt |
Farbcode: Farbname = rot, blau, grün und dunkelgrün. Finden Sie unten die Codes für das gleiche
|
CODE |
BESCHREIBUNG / BEDEUTUNG |
| rgb (x, y, z) | Für rot = rgb (255, 0, 0) |
| RGB (x%, y%, z%) | Für rot = rgb (100%, 0, 0) |
| #rrggbb | Für Rot = # ff000 |
| Flabor | Benutzerdefinierte Farbe zum Anpassen der Benutzerinterphase |
| rgba (x, y, z, alpha) | Für rot = rgb (255, 0, 0) |
Eigenschaften der Benutzerinterphase: CSS3 Die Eigenschaften der Benutzerinterphase des Spickzettel lauten wie folgt.
|
IMMOBILIENWERTE |
BESCHREIBUNG |
| Symbol | Bereitstellen des Symbols für den Bereich |
| Größe ändern | Größe der angegebenen Flächenelemente ändern |
| Kartongröße | Festlegen des angegebenen Elementbereichs |
| Aussehen | Die Elemente als UI-Elemente implementieren |
| nav-down | Um die Elemente nach unten zu bewegen, drücken Sie die Abwärtspfeiltaste |
| nav-left | Um die Elemente nach links zu verschieben, drücken Sie die linke Pfeiltaste |
| Navi | Elemente entsprechend der linken Pfeiltaste der Tastatur nach oben bewegen |
| Navi-rechts | Um die Elemente nach rechts zu bewegen, drücken Sie die rechte Pfeiltaste auf der Tastatur |
| Outline-Offset | Umriss des ausgewählten Textbereichs zeichnen |
Auswahltypen: CSS3-Auswahltypen für Spickzettel lauten wie folgt.
|
MODELLNAME |
BESCHREIBUNG / BEDEUTUNG |
| Universal | Jedes Element anzeigen |
| Art | Anzeigen eines bestimmten Typelements |
| Klasse | Anzeige mehrerer Elemente unterschiedlichen Typs |
| Ich würde | Anzeigen und Identifizieren eines einzelnen bestimmten Elementtyps, ohne andere zu beeinflussen |
| Kind | Ein Element anzuzeigen, das direkt unter fällt, fällt unter ein anderes Element |
| Gruppierung | Mehrere Elemente unterschiedlichen Typs identifizieren |
| Benachbarte Geschwister | Abrufen aller Elemente, die dasselbe übergeordnete Element und dieselben Elemente haben und sich in der unmittelbaren Reihenfolge befinden |
| General Geschwister | Abrufen aller Elemente, die dasselbe übergeordnete Element und dieselben Elemente haben und nicht unbedingt in der unmittelbaren Reihenfolge vorliegen |
Kostenlose Tipps und Tricks zur Verwendung von CSS3-Befehlen für Spickzettel: -
- Der CSS3-Mischmodus kann verwendet werden, um das Erscheinungsbild des angegebenen Inhalts zu vereinheitlichen. Außerdem können Benutzer verschiedene Bildfarbversionen festlegen. In CSS3 Cheat Sheet sind ungefähr 15 Mischmoduswerte vorhanden. Dies bietet auch einen zusätzlichen Vorteil aus Sicht der Benutzerinterphasendarstellung.
- Clipping ist ein weiteres großartiges Feature von CSS. Mit der Beschneidungsfunktion kann der Benutzer die Sichtbarkeit des Bildbereichs gemäß den Anforderungen definieren. Wenn also ein Bildbereich außerhalb des gewünschten Bereichs liegt, kann ein Zuschneiden implementiert werden, um diesen zusätzlichen Bildbereich auszublenden.
- Im Falle von CSS können Shape-Inside- und Shape-Outside-Eigenschaften implementiert werden, um den Inhalt um den benutzerdefinierten CSS-Pfad zu wickeln, und es kann gemäß den Endbenutzeranforderungen definiert und zugewiesen werden. Es ermöglicht dem Benutzer grundsätzlich, die Interphase gemäß den definierten Spezifikationen zu gestalten.
- Die Verwendung von SVG-Animationen (Scalable Vector Graphics) ist ein weiterer Vorteil von CSS3. Bei Verwendung von SVG mit CSS3-Animation wird die Interphase interaktiver und SVG verfügt auch über eine eigene DOM-API.
- Die Kartenfunktion wird auf alle Elemente in einer Eingabeliste angewendet.
- Die Reduktionsfunktion wird verwendet, um einige Berechnungen auf eine Liste anzuwenden und einen Wert zurückzugeben
- Hover-Effekte können mit CSS3 Cheat Sheet implementiert werden
- Ein Gooey-Menü kann mithilfe von CSS3- und SVG-Filtern implementiert werden. Dies unterstützt einen neuen repräsentativen Ansatz aus Sicht der Benutzerinterphase
- Aus der Perspektive des Webdesigns können mit CSS3 Parallaxeneffekte erzeugt werden.
- Interaktive 3D-Struktur und Benutzerinterphase können mit CSS3 erstellt werden
- Mit einer anderen Auswahlkombination kann mithilfe von CSS3 ein Dateiformatsymbol neben dem Download-Link erstellt werden.
Fazit
In diesem Cheat Sheet CSS3-Artikel haben wir gesehen, dass CSS3 einfach zu verwenden und seine Syntax leichter zu merken ist. CSS3 kann zur Darstellung von Webentwicklungstechnologien verwendet werden, indem verschiedene Ansätze und Stylesheet-Technologien verwendet werden, die CSS3 unterstützen. Basierend auf der Art des Projektbedarfs, der Arbeitszeit und allen anderen diskutierten Aspekten sollte CSS3 verwendet werden, um das gewünschte Ziel zu erreichen.
Empfohlene Artikel
Dies war ein Leitfaden für das Spickzettel-CSS3. Hier haben wir den Inhalt und den Befehl sowie die kostenlosen Tipps und Tricks für das Spickzettel-CSS3 besprochen. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren.
- Spickzettel CSS
- Spickzettel HTML
- Erstaunlicher Spickzettel für UNIX
- Cheat Sheet JavaScript: Funktionen