CSS - Datentypen

Einführung

Hallo da draußen, zukünftige CSS-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise durch die Welt der CSS-Datentypen zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen sagen, dass das Verständnis von Datentypen so ist, wie das Lernen des Alphabets vor dem Schreiben eines Romans. Es ist grundlegend und ich wage zu sagen, spaßig! Also, tauchen wir ein und lüften wir die Geheimnisse der CSS-Datentypen gemeinsam.

CSS - Data Types

Syntax

Bevor wir uns den Details der Datentypen zuwenden, lassen Sie uns darüber sprechen, wie CSS seine Daten serviert. CSS hat eine bestimmte Art, Werte auszudrücken, und es ist wichtig, sich mit dieser Syntax vertraut zu machen.

auswahl {
eigenschaft: wert;
}

Zum Beispiel:

p {
farbe: rot;
Schriftgröße: 16px;
}

Hier sind 'rot' und '16px' Werte不同的 Datenarten. 'Rot' ist ein Farbkeyword, während '16px' eine Längenangabe ist. Sie sehen, wie einfach das war? Sie kriegen already den Dreh heraus!

Textuelle Datentypen

Nun, lassen Sie uns über Text sprechen. CSS liebt Text und hat mehrere Möglichkeiten, mit ihm umzugehen.

Zeichenketten

Zeichenketten in CSS sind wie Geschenkpapier für Wörter. Sie können in einfache oder doppelte Anführungszeichen eingepackt werden.

.greeting::before {
inhalt: "Hallo, Welt!";
}

In diesem Beispiel ist "Hallo, Welt!" eine Zeichenkette. Es ist, als würde CSS sagen: "Hey, behandle das genau so, wie ich es geschrieben habe!"

Bezeichner

Bezeichner sind wie Namen für Dinge in CSS. Sie benötigen keine Anführungszeichen und werden für Eigenschaften, Klassen, IDs und mehr verwendet.

#main-header {
Schriftfamilie: Arial, sans-serif;
}

Hier sind 'Arial' und 'sans-serif' Bezeichner. Sie sagen CSS, welche Schriftarten zu verwenden sind.

URLs

URLs in CSS sind wie Adressen für Ressourcen. Sie werden typischerweise mit der url()-Funktion verwendet.

körper {
hintergrundbild: url('hintergrund.jpg');
}

Dies sagt CSS, wo es das Bild für den Hintergrund finden kann.

Numerische Datentypen

Zahlen sind die Grundlage vieler CSS-Eigenschaften. Lassen Sie uns die Wege zählen!

Ganzzahlen

Ganzzahlen sind ganze Zahlen, keine Brüche erlaubt!

.container {
z-index: 5;
}

Hier ist 5 eine Ganzzahl, die die Stapelreihenfolge der Elemente bestimmt.

Zahlen

Zahlen in CSS können Dezimalzahlen enthalten.

.opacity-example {
deckung: 0.5;
}

Dies setzt die Deckung auf 50%, wodurch das Element halbtransparent wird.

Dimensionen

Dimensionen sind Zahlen mit anhängigen Einheiten.

.box {
breite: 100px;
höhe: 50%;
rand: 10em;
}

Hier sehen wir Pixel (px), Prozente (%) und ems (em) in Aktion.

Mengen

Mengen in CSS sind wie Maße in der Küche. Sie helfen uns zu definieren, wie viel von etwas wir wollen.

Längen

Längen können absolut (wie Pixel) oder relativ (wie em oder %) sein.

.container {
breite: 80vw;
polsterung: 2rem;
}

'vw' steht für Viewport-Breite, und 'rem' ist relativ zur Schriftgröße des Wurzelelements.

Winkel

Winkel werden für Drehungen und Gradienten verwendet.

.rotated {
transform: drehen(45deg);
}

Dies dreht ein Element um 45 Grad.

Zeit

Zeitwerte werden für Animationen und Übergänge verwendet.

.animated {
übergang: alle 0.5s ease;
}

Dies setzt einen halben Sekunden-Übergang für alle Eigenschaften.

Kombinationen von Typen

Manchmal mag CSS es, Datentypen zu mischen und zu kombinieren.

Funktionswerte

Funktionen in CSS nehmen Argumente an und geben einen Wert zurück.

.gradient {
hintergrund: lineargradient(zu rechts, rot, blau);
}

Dies erstellt einen Gradienten von rot nach blau.

Farbe

Farben in CSS sind wie die Palette eines Malers. Es gibt mehrere Möglichkeiten, sie zu definieren.

.colorful {
farbe: #ff0000;  /* Hexadezimal */
hintergrundfarbe: rgb(0, 255, 0);  /* RGB */
randfarbe: hsl(240, 100%, 50%);  /* HSL */
}

Jede dieser Definitionen gibt eine andere Farbe mit unterschiedlicher Notation an.

Bilder

Bilder in CSS können mehr sein als nur Bilder aus Dateien.

.image-types {
hintergrundbild: url('katze.jpg');
listenstilbild: lineargradient(zu rechts, rot, blau);
}

Hier verwenden wir sowohl ein externes Bild als auch einen Gradienten als Bilder.

2D-Positionierung

Positionierung in CSS ist wie Schach auf einer Webseite zu spielen.

.positioned {
position: absolut;
oben: 50px;
links: 100px;
}

Dies positioniert ein Element 50 Pixel von oben und 100 Pixel von links seines umschließenden Elements.

Berechnungsdatentypen

Manchmal müssen wir CSS dazu bringen, Mathematik für uns zu erledigen.

.calculated {
breite: calc(100% - 20px);
}

Dies berechnet die Breite zu 100% des Elternteils minus 20 Pixel.

Andere Datentypen

CSS hat einige weitere Tricks auf Lager.

Globale Werte

Globale Werte können auf jede Eigenschaft angewendet werden.

.inherited {
farbe: erben;
}

Dies sagt dem Element, die gleiche Farbe wie sein Elternteil zu verwenden.

Hier ist eine Tabelle, die die Haupt-CSS-Datentypen zusammenfasst, die wir behandelt haben:

Datentyp	Beispiel	Beschreibung
Zeichenkette	"Hallo, Welt!"	Text in Anführungszeichen
Bezeichner	Arial	Unbezeichneter Name für Schriftarten, Eigenschaften, etc.
URL	url('bild.jpg')	Adresse einer Ressource
Ganzzahl	5	Ganze Zahl
Zahl	0.5	Zahl mit Dezimalstellen
Länge	10px, 2em, 50%	Messung mit Einheiten
Winkel	45deg	Drehungswert
Zeit	0.5s	Dauer für Animationen
Farbe	#ff0000, rgb(255,0,0)	Farbvalue
Funktion	calc(), lineargradient()	Führt Berechnungen oder erstellt Effekte aus

Erinnern Sie sich daran, dass CSS wie eine Werkzeugkiste ist, und Datentypen sind Ihre Werkzeuge. Je vertrauter Sie mit ihnen werden, desto kreativer und präziser können Ihre Designs sein. Weiter üben, und bald werden Sie Webseiten wie ein Profi stylen!

Credits: Image by storyset