CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zur Beschreibung des Erscheinungsbilds und der Formatierung von in HTML geschriebenen Dokumenten verwendet wird. Es ist ein wichtiger Teil der Webentwicklung, da es Entwicklern ermöglicht, das Erscheinungsbild ihrer Websites und Anwendungen zu steuern.
In diesem Artikel besprechen wir einige der nützlichsten CSS-Funktionen, mit denen jeder Frontend-Entwickler vertraut sein sollte. Mit diesen Funktionen können Sie Ihrer Website oder Anwendung Stil und Formatierung hinzufügen und das Benutzererlebnis erheblich verbessern.
Wie andere Programmiersprachen vereinfachen Funktionen in CSS Aufgaben, indem sie einzeilige Lösungen bereitstellen. Aber im Gegensatz zu anderen Programmiersprachen hat das Ergebnis einer Funktion in CSS keinen Einfluss auf die Logik der Website, sondern wird nur dazu verwendet, die auf der Website vorhandenen visuellen Elemente zu beeinflussen.
Nachstehend sind die vielen verschiedenen Arten von Funktionen aufgeführt, die in CSS verfügbar sind:
Die Funktion benutzerdefinierter Attribute
Farbfunktion
Pseudoklassenauswahlfunktion
Animationsfunktion
Filterfunktion
Dimensions- und Skalierungsfunktionen
Vergleichsfunktion
Logische Funktion
Es gibt viele andere Arten von Funktionen, die in CSS verfügbar sind. In diesem Artikel werden jedoch nur 10 davon für unseren Gebrauch besprochen.
Die einzige in CSS verfügbare benutzerdefinierte Eigenschaftsfunktion ist die var-Funktion. Wann immer wir eine benutzerdefinierte Eigenschaft in CSS verwenden müssen, verwenden wir die Funktion var, um darauf zu verweisen
Im Folgenden finden Sie ein Beispiel für die Verwendung der Funktion var, um auf eine benutzerdefinierte Eigenschaft zu verweisen -
html { --background-color: teal; } div { background-color: var(--background-color); }
Die am häufigsten für mathematische/arithmetische Berechnungen in CSS verwendete Funktion ist die Funktion calc. Sie wird häufig zusammen mit der oben besprochenen Funktion var verwendet, um Immobilienwerte dynamisch zu berechnen.
p { height: calc(100px – 80px); }
Wir können calc auch mit anderen formalen Einheiten wie em, rem usw. verwenden.
Die Ressourcen, die Sie Ihrer Website hinzufügen müssen, befinden sich oft an verschiedenen Orten. Zu diesem Zeitpunkt benötigen wir also eine Funktion, mit der diese Ressourcen in CSS-Dateien geladen werden können. Die URL-Funktion tut genau das: Sie verknüpft und lädt eine Ressource von einem Quellspeicherort zu einem Zielspeicherort, bei dem es sich um eine CSS-Datei handelt. Sie können alle Arten von Ressourcen wie Bilder, SVGs, Schriftarten, Stylesheets und mehr
verknüpfenbody{ background-image: url(/fonts/myFont); }
Beim Entwerfen einer Website müssen wir oft Farbe verwenden. CSS bietet viele Möglichkeiten zur Verwendung von Farben, z. B. Hexadezimalcodes, Farbnamen usw. Eine Möglichkeit, Farben darzustellen, besteht darin, ihre RGB-Werte zu verwenden. Mit der Funktion rgb() können wir diese Hex-Codes in RGB konvertieren und in Stylesheets verwenden.
html{ color: rgb(255, 255, 255); }
Wir können eine andere Funktion RGBA verwenden, mit der die Deckkraft der definierten Farbe gesteuert werden kann.
Eine weitere Funktion, die zur Darstellung von Farben verwendet werden kann, ist die HSL-Funktion. Es definiert Farbe als Farbton-, Sättigungs- und Helligkeitswerte. Einige Entwickler verwenden es lieber anstelle von RGB.
Beispielhtml{ color: hsl(100, 50%, 80%); }
hsla, die auch die Deckkraft der definierten Farbe steuert.
blur()-FunktionBeispiel
.someClass{ filter: blur(67%); }
Beispiel
.someClass{ filter: opacity(0.75); }
ntes Kind verwenden. Es handelt sich um eine Pseudoklassenauswahlfunktion mit einigen Änderungen, die auf Ihren Anforderungen basieren, um auf verschiedene Elemente abzuzielen.
Beispiel.someClass:nth-child(3){ Color: black; }
nth-last-child, nth-of-type, nth-last-of-type usw.
scale()-FunktionBeispiel
.someClass{ transform: scale(100%); }
Beispiel
.someClass{ transform: translate(30%); }
Das obige ist der detaillierte Inhalt von10 CSS-Funktionen, die jeder Frontend-Entwickler kennen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!