10 CSS-Funktionen, die jeder Frontend-Entwickler kennen sollte

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.

var()-Funktion

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

Beispiel

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);
}

calc()-Funktion

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.

Beispiel

p {
   height: calc(100px – 80px);
}

Wir können calc auch mit anderen formalen Einheiten wie em, rem usw. verwenden.

URL()-Funktion

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üpfen

Beispiel

body{
   background-image: url(/fonts/myFont);
}

rgb()-Funktion

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.

Beispiel

html{
   color: rgb(255, 255, 255);
}

Wir können eine andere Funktion RGBA verwenden, mit der die Deckkraft der definierten Farbe gesteuert werden kann.

hsl()-Funktion

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.

Beispiel

html{
   color: hsl(100, 50%, 80%);
}

Genau wie RGB gibt es auch für hsl eine veränderte Version

hsla, die auch die Deckkraft der definierten Farbe steuert.

blur()-Funktion

Um zwischen Elementen zu unterscheiden, verwenden wir eine Unschärfefunktion.

Beispiel

.someClass{
   filter: blur(67%);
}

Opacity()-Funktion

Die Deckkraft eines Elements ist die Sichtbarkeit des entsprechenden Elements. Sie gibt an, wie viel vom Hintergrund durch diesen Hintergrund hindurch sichtbar ist.

Beispiel

.someClass{
   filter: opacity(0.75);
}

Die chinesische Übersetzung von

The nth-child() function

lautet:

nth-child() function

Wenn wir ein bestimmtes untergeordnetes Element eines übergeordneten Elements auswählen müssen, können wir die Funktion

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;
}

Einige seiner Variationen sind

nth-last-child, nth-of-type, nth-last-of-type usw.

scale()-Funktion

Mit dieser Funktion können Sie die Größe eines Elements und seiner untergeordneten Elemente steuern. Wir können auch die Achse definieren, auf der diese Änderung stattfinden soll.

Beispiel

.someClass{
   transform: scale(100%);
}

translate()-Funktion

Mit dieser Funktion können Sie die Position eines Elements ändern. Wir können sogar die Achse angeben, auf die sich das Element ändern muss.

Beispiel

.someClass{
   transform: translate(30%);
}

Fazit

In diesem Artikel haben wir Funktionen, ihren Zweck in CSS und ihre Unterschiede zu Funktionen und anderen Programmiersprachen besprochen. Wir haben auch etwas über die verschiedenen Arten von Funktionen gelernt, die in CSS verfügbar sind. Abschließend haben wir uns die 10 am häufigsten verwendeten Funktionen in CSS angesehen, die jeder Frontend-Entwickler kennen muss. Dies sind nur einige der beliebtesten Funktionen, aber es gibt immer noch mehr zu lernen.

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!