CSS-Werte und -Einheiten

Was ist ein CSS-Wert?

CSS-Werte definieren, welche Wertetypen für jede CSS-Eigenschaft gültig sind. Beispielsweise können Sie für die Werte von color oder border-color Farben angeben, aber keine Längen oder Prozentsätze.

In CSS-Spezifikationen und auf den Eigenschaftsseiten hier auf MDN können Sie Wertetypen erkennen, da diese von spitzen Klammern (<, >) umgeben sind — wie <color> oder <length>. Wenn Sie den Wertetyp <color> als gültig für eine bestimmte Eigenschaft sehen, bedeutet dies, dass Sie jeden gültigen Farbwert als Wert für diese Eigenschaft verwenden können, wie auf der <color> Referenzseite aufgeführt.

Manchmal können Wertetypen und Eigenschaften denselben oder ähnliche Namen haben — zum Beispiel gibt es eine color-Eigenschaft und einen <color> Datentyp. Sie können die spitzen Klammern verwenden, um zu bestimmen, welche Sie in jedem Fall studieren. HTML-Elemente verwenden ebenfalls spitze Klammern, aber es sollte aus dem Kontext klar sein, welche Sie sich ansehen. Wenn Sie sich nicht sicher sind, versuchen Sie, danach auf MDN zu suchen.

Im folgenden Beispiel haben wir die Textfarbe unserer Überschrift mit einem Farb-Stichwort festgelegt und den Hintergrund mit einem anderen Typ von Farbwert — der rgb()-Funktion:

h1 {
  color: black;
  background-color: rgb(197 93 161);
}

Ein Wertetyp in CSS definiert eine Sammlung zulässiger Werte. Das bedeutet, dass Sie, wenn Sie <color> als gültig sehen, sich keine Sorgen machen müssen, welche der verschiedenen Typen von Farbwerten verwendet werden können — Stichwörter, Hex-Werte, rgb()-Funktionen usw. Sie können jede verfügbare <color>-Werte verwenden, vorausgesetzt, sie werden von Ihrem Browser unterstützt. Die Seite auf MDN für jeden Wert wird Ihnen Informationen über die Unterstützung durch den Browser geben. Wenn Sie sich beispielsweise die Seite für <color> ansehen, sehen Sie, dass der Abschnitt zur Browser-Kompatibilität unterschiedliche Arten von Farbwerten und deren Unterstützung auflistet.

Lassen Sie uns einige der Wertetypen und Einheiten betrachten, auf die Sie häufig stoßen könnten, mit Beispielen, damit Sie verschiedene mögliche Werte ausprobieren können.

Zahlen, Längen und Prozentsätze

Es gibt verschiedene numerische Wertetypen, die Sie möglicherweise in CSS verwenden. Die folgenden werden alle als numerisch eingestuft:

Längen

Der numerische Typ, auf den Sie am häufigsten stoßen, ist <length>. Zum Beispiel 10px (Pixel) oder 30em. Es gibt zwei Arten von Längen, die in CSS verwendet werden — relativ und absolut. Es ist wichtig, den Unterschied zu kennen, um zu verstehen, wie groß Dinge werden.

Absolute Längeneinheiten

Die folgenden sind alle absoluten Längeneinheiten — sie sind nicht relativ zu irgendetwas anderem und gelten im Allgemeinen als immer gleich groß.

Die meisten dieser Einheiten sind nützlicher, wenn sie für den Druck und nicht für die Bildschirmausgabe verwendet werden. Beispielsweise verwenden wir auf dem Bildschirm normalerweise keine cm (Zentimeter). Der einzige Wert, den Sie häufig verwenden werden, ist px (Pixel).

Beachten Sie, dass 1px nicht unbedingt einem physischen Gerätepixel entspricht. Auf HD-Bildschirmen kann es mehrere physische Pixel umfassen. Ebenso entspricht 1cm in CSS oft nicht einem hundertstel SI-Meter. Auf einem großen Fernsehbildschirm ist es normalerweise länger als das. Die Längen sind wahrnehmungsbedingt: 16px sehen auf einem Telefon, Laptop oder TV-Bildschirm aus typischer Betrachtungsentfernung ungefähr gleich aus.

Relative Längeneinheiten

Relative Längeneinheiten sind relativ zu etwas anderem. Zum Beispiel:

• em ist relativ zur Schriftgröße dieses Elements oder zur Schriftgröße des übergeordneten Elements, wenn es für font-size verwendet wird. rem ist relativ zur Schriftgröße des Wurzelelements.
• vh und vw sind relativ zur Höhe und Breite des Viewports, jeweils.

Der Vorteil der Verwendung von relativen Einheiten besteht darin, dass Sie mit ein wenig sorgfältiger Planung die Größe von Text oder anderen Elementen relativ zu allem anderen auf der Seite skalieren lassen können. Eine vollständige Liste der verfügbaren relativen Einheiten finden Sie auf der Referenzseite für den <length>-Typ.

In diesem Abschnitt werden wir einige der häufigsten relativen Einheitenerkunden.

Erforschen eines Beispiels

Im untenstehenden Beispiel können Sie sehen, wie einige relative und absolute Längeneinheiten sich verhalten. Das erste Feld hat eine width in Pixeln eingestellt. Als absolute Einheit bleibt diese Breite unverändert, egal was sich sonst ändert.

Das zweite Feld hat eine Breite in vw (Viewport-Breite)-Einheiten eingestellt. Dieser Wert ist relativ zur Breite des Viewports, und daher ist 10vw 10 Prozent der Breite des Viewports. Wenn Sie die Breite Ihres Browserfensters ändern, sollte sich die Größe des Feldes ändern. Allerdings ist dieses Beispiel in die Seite mit einem <iframe> eingebettet, sodass dies nicht funktioniert. Um dies in Aktion zu sehen, müssen Sie das Beispiel ausprobieren, nachdem Sie es in einem eigenen Browser-Tab geöffnet haben.

Das dritte Feld verwendet em-Einheiten. Diese sind relativ zur Schriftgröße des Elements. Ich habe eine Schriftgröße von 1em auf dem enthaltenen <div> eingerichtet, das eine Klasse von .wrapper hat. Ändern Sie diesen Wert auf 1.5em und Sie werden sehen, dass die Schriftgröße aller Elemente zunimmt, aber nur das letzte Element breiter wird, da seine Breite relativ zu dieser Schriftgröße ist.

Nachdem Sie die oben genannten Anweisungen befolgt haben, versuchen Sie, die Werte auf andere Weise zu ändern, um zu sehen, was Sie erhalten.

<div class="wrapper">
  <div class="box px">I am 200px wide</div>
  <div class="box vw">I am 10vw wide</div>
  <div class="box em">I am 10em wide</div>
</div>

.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  margin: 1em 0;
}

.wrapper {
  font-size: 1em;
}

.px {
  width: 200px;
}

.vw {
  width: 10vw;
}

.em {
  width: 10em;
}

ems und rems

em und rem sind die beiden relativen Längen, auf die Sie wahrscheinlich am häufigsten bei der Größenbestimmung von allem, von Boxen bis zu Text, stoßen werden. Es ist wichtig zu verstehen, wie diese funktionieren, und die Unterschiede zwischen ihnen zu kennen, besonders wenn Sie auf komplexere Themen wie Textgestaltung oder CSS-Layout eingehen. Das folgende Beispiel stellt eine Demonstration zur Verfügung.

Im nächsten Beispiel handelt es sich um eine Reihe von verschachtelten Listen — wir haben insgesamt zwei Listen, und beide Beispiele haben den gleichen HTML-Code. Der einzige Unterschied besteht darin, dass die erste eine Klasse von ems und die zweite eine Klasse von rems hat.

Zuerst setzen wir 16px als Schriftgröße auf dem <html>-Element.

Zur Erinnerung: Die em-Einheit bedeutet "die Schriftgröße meines übergeordneten Elements", wenn sie für font-size verwendet wird, und "meine eigene Schriftgröße", wenn sie für etwas anderes verwendet wird. Die <li>-Elemente innerhalb des <ul> mit einer class von ems nehmen ihre Größe von ihrem Elternteil. Daher wird jede aufeinanderfolgende Verschachtelungsebene immer größer, da jede ihre Schriftgröße auf 1.3em setzt — 1.3 mal die Schriftgröße ihres Elternteils.

Zur Erinnerung: Die rem-Einheit bedeutet "Die Schriftgröße des Wurzelelements" (rem steht für "root em"). Die <li>-Elemente innerhalb des <ul> mit einer class von rems beziehen ihre Größe vom Wurzelelement (<html>). Das bedeutet, dass jede aufeinanderfolgende Verschachtelungsebene nicht immer größer wird.

Wenn Sie jedoch die font-size des <html>-Elements im CSS ändern, sehen Sie, dass sich alles andere relativ dazu ändert — sowohl rem- als auch em-große Texte. Versuchen Sie dies jetzt im MDN Playground.

<ul class="ems">
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul class="rems">
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

html {
  font-size: 16px;
}

.ems li {
  font-size: 1.3em;
}

.rems li {
  font-size: 1.3rem;
}

Prozentsätze

In vielen Fällen wird ein Prozentsatz auf die gleiche Weise wie eine Länge behandelt. Das Besondere an Prozentwerten ist, dass sie immer relativ zu einem anderen Wert eingestellt sind. Wenn Sie beispielsweise die Schriftgröße eines Elements als Prozentsatz festlegen, wird es ein Prozentsatz der Schriftgröße des übergeordneten Elements. Wenn Sie einen Prozentsatz für einen Breite-Wert verwenden, wird es ein Prozentsatz der Breite des übergeordneten Elements.

Im nächsten Beispiel haben die beiden Paare von prozentualen und pixel-breiten Boxen die gleichen Klassennamen. Die Boxen innerhalb jedes Paares sind jeweils 40% und 200px breit.

Der Unterschied besteht darin, dass das zweite Set von zwei Boxen in einem Wrapper enthalten ist, der 400px breit ist. Die zweite 200px breite Box ist genauso breit wie die erste, aber die zweite 40% Box ist jetzt 40% von 400px — viel schmaler als die erste!

Versuchen Sie, die Breite des Wrappers oder den Prozentwert zu ändern, um zu sehen, wie das funktioniert:

<div class="box px">I am 200px wide</div>
<div class="box percent">I am 40% wide</div>
<div class="wrapper">
  <div class="box px">I am 200px wide</div>
  <div class="box percent">I am 40% wide</div>
</div>

.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 10px;
  margin: 1em 0;
}
.wrapper {
  width: 400px;
  border: 5px solid rebeccapurple;
}

.px {
  width: 200px;
}

.percent {
  width: 40%;
}

Im nächsten Beispiel sind die Schriftgrößen in Prozent angegeben. Jedes <li> hat eine font-size von 80%; daher werden die verschachtelten Listenelemente immer kleiner, da sie ihre Größe von ihrem übergeordneten Element erben.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

li {
  font-size: 80%;
}

Während viele Eigenschaften eine Länge oder einen Prozentsatz als Wert akzeptieren, akzeptieren einige nur eine Länge, zum Beispiel border-width. Die Eigenschaftsreferenzseiten von MDN führen detailliert auf, welche Wertetypen sie akzeptieren. Wenn der erlaubte Wert <length-percentage> enthält, können Sie eine Länge oder einen Prozentsatz verwenden. Wenn der erlaubte Wert nur <length> enthält, ist es nicht möglich, einen Prozentsatz zu verwenden.

Zahlen

Einige Wertetypen akzeptieren einheitenlose Zahlen; ein Beispiel ist die Transparenz-Eigenschaft, die die Transparenz eines Elements steuert (wie durchscheinend es ist). Diese Eigenschaft akzeptiert eine Zahl zwischen 0 (vollständig transparent) und 1 (vollständig opak).

Im folgenden Beispiel können Sie versuchen, den Wert von opacity auf verschiedene Dezimalwerte zwischen 0 und 1 zu ändern und zu sehen, wie die Box und ihre Inhalte mehr oder weniger opak werden:

<div class="wrapper">
  <div class="box">I am a box with opacity</div>
</div>

.wrapper {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-repeat: no-repeat;
  background-position: bottom left;
  padding: 20px;
}

.box {
  margin: 40px auto;
  width: 200px;
  background-color: lightblue;
  border: 5px solid darkblue;
  padding: 30px;
  opacity: 0.6;
}

Farbe

Farbwerte können an vielen Stellen in CSS verwendet werden, unabhängig davon, ob Sie die Farbe von Text, Hintergründen, Rahmen und vieles mehr angeben. Es gibt viele Möglichkeiten, Farbe in CSS festzulegen, wodurch Sie eine Vielzahl aufregender Eigenschaften steuern können.

Das standardmäßige Farbsystem, das in modernen Computern verfügbar ist, unterstützt 24-Bit-Farben, wodurch etwa 16,7 Millionen verschiedene Farben über eine Kombination von roten, grünen und blauen Kanälen mit jeweils 256 verschiedenen Werten angezeigt werden können (256 x 256 x 256 = 16.777.216).

In diesem Abschnitt werden wir zuerst die am häufigsten gesehenen Möglichkeiten zur Angabe von Farben betrachten: Verwendung von Schlüsselwörtern, Hexadezimal- und rgb()-Werten. Wir werfen auch einen kurzen Blick auf zusätzliche Farb-Funktionen, damit Sie sie erkennen können, wenn Sie sie sehen, oder mit verschiedenen Möglichkeiten der Farbgestaltung experimentieren können.

Sie werden wahrscheinlich eine Farbpalette auswählen und diese Farben — und Ihre bevorzugte Methode zur Angabe von Farben — in Ihrem gesamten Projekt verwenden. Sie können Farbmodelle mischen und zusammenpassen, aber es ist normalerweise am besten, wenn Ihr gesamtes Projekt die gleiche Methode zur Deklaration von Farben aus Gründen der Konsistenz verwendet!

Farb-Schlüsselwörter

Sie werden die Farb-Schlüsselwörter (oder "benannte Farben") in vielen MDN-Codebeispielen sehen. Da der <named-color> Datentyp eine sehr begrenzte Anzahl an Farbwerten enthält, werden sie nicht häufig auf Produktionswebsites mit einer ausgefeilten Designsprache verwendet. Auf der anderen Seite werden benannte Farben in Code-Beispielen verwendet, um dem Benutzer klar anzugeben, welche Farbe erwartet wird, sodass sich der Lernende auf den gelehrten Inhalt konzentrieren kann.

Im nächsten Beispiel können Sie mit verschiedenen Farb-Schlüsselwörtern experimentieren, um besser zu verstehen, wie sie funktionieren. Sie können sie mithilfe der <named-color> Referenzseite nachschlagen.

<div class="wrapper">
  <div class="box one">antiquewhite</div>
  <div class="box two">blueviolet</div>
  <div class="box three">greenyellow</div>
</div>

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}
.one {
  background-color: antiquewhite;
}

.two {
  background-color: blueviolet;
}

.three {
  background-color: greenyellow;
}

Hexadezimale RGB-Werte

Der nächste Farbw Fahrer Finalstringtyp, dem Sie wahrscheinlich begegnen werden, sind hexadezimale (Hex) Codes.

Hexadezimale Zahlen verwenden 16 Zeichen von 0-9 und a-f, sodass der gesamte Bereich 0123456789abcdef ist. Jeder hex-Farbwert besteht aus einem Hash- oder Pfund-Symbol (#) gefolgt von sechs hexadezimalen Zeichen (#ffc0cb, zum Beispiel). Jedes Paar von hexadezimalen Zeichen repräsentiert einen der Kanäle einer RGB-Farbe — rot, grün und blau — und ermöglicht es uns, jeden der 256 verfügbaren Werte für jeden Kanal zu spezifizieren (16 x 16 = 256).

Diese Werte sind weniger intuitiv als Schlüsselwörter zur Definition von Farben, aber sie sind viel vielseitiger, da Sie damit jede RGB-Farbe darstellen können.

Im nächsten Beispiel können Sie die Werte ändern, um zu sehen, wie sich die Farben variieren:

<div class="wrapper">
  <div class="box one">#02798b</div>
  <div class="box two">#c55da1</div>
  <div class="box three">#128a7d</div>
</div>

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: #02798b;
}

.two {
  background-color: #c55da1;
}

.three {
  background-color: #128a7d;
}

RGB-Werte

Um RGB-Werte direkt zu erstellen, nimmt die rgb() Funktion drei Parameter auf, die die Werte der Rot, Grün und Blau Kanäle der Farben darstellen, mit einem optionalen vierten Wert getrennt durch einen Schrägstrich (/) der Transparenz, auf ähnliche Weise wie hex-Werte. Der Unterschied zu RGB besteht darin, dass jeder Kanal nicht durch zwei hex-Ziffern dargestellt wird, sondern durch eine Dezimalzahl im Bereich von 0 bis 255 oder einen Prozentsatz im Bereich von 0% bis 100% (jedoch nicht eine Mischung der beiden).

Lassen Sie uns unser letztes Beispiel umschreiben, um RGB-Farben zu verwenden:

<div class="wrapper">
  <div class="box one">rgb(2 121 139)</div>
  <div class="box two">rgb(197 93 161)</div>
  <div class="box three">rgb(18 138 125)</div>
</div>

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}
.one {
  background-color: rgb(2 121 139);
}

.two {
  background-color: rgb(197 93 161);
}

.three {
  background-color: rgb(18 138 125);
}

Ein RGB-Beispiel mit Transparenz

Im nächsten Beispiel haben wir ein Hintergrundbild zum enthaltenen Block unserer Farbkästchen hinzugefügt. Wir haben dann die Boxen so eingestellt, dass sie unterschiedliche Transparenzwerte haben — beachten Sie, wie der Hintergrund besser durchscheint, wenn der Alpha-Kanal-Wert kleiner ist. Wenn Sie diesen Wert auf 0 setzen, wird die Farbe vollständig transparent, während 1 sie vollständig opak macht. Werte dazwischen geben Ihnen unterschiedliche Transparenzstufen.

Versuchen Sie, die Alpha-Kanal-Werte zu ändern, um zu sehen, wie sich dies auf die Farbdarstellung auswirkt.

<div class="wrapper">
  <div class="box one">rgb(2 121 139 / .3)</div>
  <div class="box two">rgb(197 93 161 / .7)</div>
  <div class="box three">rgb(18 138 125 / .9)</div>
</div>

.wrapper {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  padding: 40px 20px;
}

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: rgb(2 121 139 / 0.3);
}

.two {
  background-color: rgb(197 93 161 / 0.7);
}

.three {
  background-color: rgb(18 138 125 / 0.9);
}

Verwendung von Farbtönen zur Angabe einer Farbe

Wenn Sie über Stichwörter, Hexadezimal- und rgb() hinausgehen möchten, können Sie versuchen, <hue> zu verwenden. Farbton ist der Wertetyp, der es uns erlaubt, den Unterschied oder die Ähnlichkeit zwischen Farben wie Rot, Orange, Gelb, Grün, Blau usw. zu erkennen. Das Schlüsselkonzept ist, dass Sie einen Farbton in einem <angle> spezifizieren können, da die meisten Farbmodelle die Farbtöne mithilfe eines Farbkreises beschreiben.

Es gibt mehrere Farbfunktionen, die eine <hue> Komponente beinhalten, einschließlich hsl(), hwb() und lch(). Andere Farbfunktionen, wie lab(), definieren Farben basierend auf dem, was Menschen sehen können.

Wenn Sie mehr über diese Funktionen und Farbräume erfahren möchten, sehen Sie sich den Anwendung von Farbe auf HTML-Elemente mit CSS Leitfaden, die <color> Referenz, die alle verschiedene Möglichkeiten auflistet, wie Sie Farben in CSS verwenden können, und das CSS-Farbmodul an, das einen Überblick über alle Farbtypen in CSS und die Eigenschaften, die Farbwerte verwenden, bietet.

HWB

Ein guter Ausgangspunkt für die Verwendung von Farbtönen in CSS ist die hwb()-Funktion, die eine srgb()-Farbe angibt. Die drei Teile sind:

• Farbton: Der Grundton der Farbe. Dies nimmt einen <hue> Wert zwischen 0 und 360 an, der die Winkel auf einem Farbrad darstellt.
• Weißgrad: Wie weiß ist die Farbe? Dies nimmt einen Wert von 0% (kein Weiß) bis 100% (voller Weißgrad) an.
• Schwarzgrad: Wie schwarz ist die Farbe? Dies nimmt einen Wert von 0% (kein Schwarz) bis 100% (voller Schwarzgrad) an.

HSL

Ähnlich wie die Funktion hwb() ist die Funktion hsl(), die ebenfalls eine srgb()-Farbe angibt. HSL verwendet Farbton, sowie Sättigung und Helligkeit:

• Farbton: Wiederum repräsentiert dies den Grundton der Farbe.
• Sättigung: Wie gesättigt ist die Farbe? Dies nimmt einen Wert von 0–100% an, wobei 0 keine Farbe (es erscheint als Grauton) und 100% vollständige Farbsättigung ist.
• Helligkeit: Wie hell oder leuchtend ist die Farbe? Dies nimmt einen Wert von 0–100% an, wobei 0 kein Licht (es erscheint vollständig schwarz) und 100% volles Licht (es erscheint vollständig weiß) ist.

Der hsl()-Farbwert hat auch einen optionalen vierten Wert, getrennt durch einen Schrägstrich (/), der die Alpha-Transparenz darstellt.

Lassen Sie uns das RGB-Beispiel aktualisieren, um stattdessen HSL-Farben zu verwenden:

<div class="wrapper">
  <div class="box one">hsl(188 97% 28%)</div>
  <div class="box two">hsl(321 47% 57%)</div>
  <div class="box three">hsl(174 77% 31%)</div>
</div>

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: hsl(188 97% 28%);
}

.two {
  background-color: hsl(321 47% 57%);
}

.three {
  background-color: hsl(174 77% 31%);
}

Genau wie bei rgb() können Sie einen Alpha-Parameter zu hsl() geben, um die Transparenz zu spezifizieren:

<div class="wrapper">
  <div class="box one">hsl(188 97% 28% / .3)</div>
  <div class="box two">hsl(321 47% 57% / .7)</div>
  <div class="box three">hsl(174 77% 31% / .9)</div>
</div>

.wrapper {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  padding: 40px 20px;
}

.box {
  padding: 10px;
  margin: 0.5em 0;
  border-radius: 0.5em;
}

.one {
  background-color: hsl(188 97% 28% / 0.3);
}

.two {
  background-color: hsl(321 47% 57% / 0.7);
}

.three {
  background-color: hsl(174 77% 31% / 0.9);
}

Bevor Sie weitermachen, versuchen Sie, die vorherigen zwei Beispiele zu modifizieren, um einige auf Farbtönen basierende Farbwerte zu verwenden. Versuchen Sie, den Farbtonwert in jedem Fall zu variieren, um zu sehen, wie sich dies auf die Grundfarbe auswirkt, und versuchen Sie dann, auch die anderen Parameter zu variieren.

Bilder

Der <image> Wertetyp wird überall dort verwendet, wo ein Bild ein gültiger Wert ist. Dies kann eine tatsächliche Bilddatei sein, die über eine url()-Funktion verwiesen wird, oder ein Verlauf.

Im Beispiel unten verwenden wir ein Bild und einen Verlauf als Werte für die CSS-Eigenschaft background-image.

<div class="box image"></div>
<div class="box gradient"></div>

.box {
  height: 150px;
  width: 300px;
  margin: 20px auto;
  border-radius: 0.5em;
}

.image {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}

.gradient {
  background-image: linear-gradient(
    90deg,
    rgb(119 0 255 / 39%),
    rgb(0 212 255 / 25%)
  );
}

Sie erfahren mehr über Bildwerte in unserem Artikel Hintergründe und Rahmen später.

Position

Der <position> Wertetyp stellt eine Menge von 2D-Koordinaten dar, die verwendet werden, um ein Element wie ein Hintergrundbild zu positionieren (über background-position). Es kann Schlüsselwörter wie top, left, bottom, right und center annehmen, um Elemente mit spezifischen Begrenzungen eines 2D-Kastens auszurichten, und Längen, die Offsets von den oberen und linken Kanten des Kastens darstellen.

Ein typischer Positionswert besteht aus zwei Werten - der erste setzt die Position horizontal, der zweite vertikal. Wenn Sie nur Werte für eine Achse angeben, wird die andere standardmäßig auf center gesetzt.

Im folgenden Beispiel haben wir ein Hintergrundbild 60px von oben und rechts vom Container mit einem Schlüsselwort positioniert.

Versuchen Sie, mit diesen Werten herumzuspielen, um zu sehen, wie Sie das Bild verschieben können.

<div class="box"></div>

.box {
  height: 200px;
  width: 400px;
  background-image: url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
  background-repeat: no-repeat;
  background-position: right 60px;
  margin: 20px auto;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
}

Zeichenfolgen und Bezeichner

In den obigen Beispielen haben wir Stellen gesehen, an denen Schlüsselwörter als Wert verwendet werden (zum Beispiel <color> Schlüsselwörter wie red, black, rebeccapurple und goldenrod). Diese Schlüsselwörter werden genauer als Bezeichner beschrieben, ein spezieller Wert, den CSS versteht. Als solche sind sie nicht in Anführungszeichen gesetzt - sie werden nicht als Zeichenfolgen behandelt.

Es gibt Stellen, an denen Sie Zeichenfolgen in CSS verwenden. Beispielweise bei der Angabe generierter Inhalte. In diesem Fall wird der Wert zitiert, um zu zeigen, dass es sich um eine Zeichenfolge handelt. Im Beispiel unten verwenden wir nicht-zitierte Farb-Schlüsselwörter zusammen mit einer zitierten generierten Inhaltszeichenfolge.

<div class="box"></div>

.box {
  width: 400px;
  padding: 1em;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
}

.box::after {
  content: "This is a string. I know because it is quoted in the CSS.";
}

Funktionen

In der Programmierung ist eine Funktion ein Stück Code, das eine spezifische Aufgabe ausführt. Funktionen sind nützlich, weil Sie einmal Code schreiben und dann viele Male wiederverwenden können, anstatt die gleiche Logik immer wieder neu zu schreiben. Die meisten Programmiersprachen unterstützen nicht nur Funktionen, sondern bieten auch praktische eingebaute Funktionen für häufige Aufgaben, sodass Sie sie nicht selbst von Grund auf schreiben müssen.

Auch CSS verfügt über Funktionen, die auf ähnliche Weise wie Funktionen in anderen Sprachen funktionieren. Tatsächlich haben wir bereits CSS-Funktionen im Abschnitt Farbe oben gesehen, wie rgb() und hsl().

Abgesehen vom Anwenden von Farben können Sie in CSS viele andere Dinge mit Funktionen tun. Zum Beispiel sind Transformationsfunktionen eine gängige Möglichkeit, Elemente auf einer Seite zu verschieben, zu drehen und zu skalieren. Sie könnten translate() sehen, um etwas horizontal oder vertikal zu verschieben, rotate(), um etwas zu drehen, oder scale(), um etwas größer oder kleiner zu machen.

Mathematikfunktionen

Wenn Sie Stile für ein Projekt erstellen, beginnen Sie wahrscheinlich mit Zahlen wie 300px für Längen oder 200ms für Zeitdauern. Wenn Sie möchten, dass sich diese Werte basierend auf anderen Werten ändern, müssen Sie ein wenig rechnen. Sie könnten den Prozentsatz eines Wertes berechnen oder eine Zahl zu einer anderen Zahl hinzufügen und dann Ihr CSS mit dem Ergebnis aktualisieren.

CSS unterstützt Mathematikfunktionen, die es uns erlauben, Berechnungen im CSS durchzuführen, anstelle von statischen Werten oder das Rechnen in JavaScript. Eine der häufigsten Mathematikfunktionen ist calc(), die es Ihnen ermöglicht, Operationen wie Addition, Subtraktion, Multiplikation und Division durchzuführen.

Zum Beispiel, sagen wir, wir wollen die Breite eines Elements auf 20% seines übergeordneten Containers plus 100px setzen. Wir können diese Breite nicht mit einem statischen Wert spezifizieren — wenn das übergeordnete Element eine prozentuale Breite verwendet (oder eine relative Einheit wie em oder rem), dann wird es je nach verwendetem Kontext und anderen Faktoren wie dem Benutzergerät oder der Browser-Fensterbreite variieren. Aber wir können calc() verwenden, um die Breite des Elements auf 20% seines übergeordneten Containers plus 100px zu setzen. Der 20% ist basierend auf der Breite des übergeordneten Containers (.wrapper) und wenn sich diese Breite ändert, wird sich auch die Berechnung ändern:

<div class="wrapper">
  <div class="box">My width is calculated.</div>
</div>

.wrapper {
  width: 400px;
}
.box {
  padding: 1em;
  border-radius: 0.5em;
  border: 5px solid rebeccapurple;
  background-color: lightblue;
  width: calc(20% + 100px);
}

Es gibt viele andere Mathematikfunktionen, die Sie in CSS verwenden können, wie min(), max() und clamp(); diese lassen Sie jeweils den kleinsten, größten oder mittleren Wert aus einem Satz von Werten auswählen. Erkunden Sie unsere CSS-Wertfunktionen Referenzseite, um alle verfügbaren CSS-Funktionen zu überprüfen.

Das Wissen über CSS-Funktionen ist nützlich, damit Sie sie erkennen, wenn Sie sie sehen. Sie sollten anfangen, in Ihren Projekten mit ihnen zu experimentieren — sie helfen Ihnen, zu vermeiden, benutzerdefinierten oder sich wiederholenden Code zu schreiben, um Ergebnisse zu erzielen, die Sie mit regulärem CSS erzielen können.

Zusammenfassung

Das war ein kurzer Überblick über die häufigsten Arten von Werten und Einheiten, auf die Sie stoßen könnten. Sie können sich alle verschiedenen Typen auf der CSS-Werte und Einheiten Modulseite anschauen — Sie werden vielen dieser Typen im Einsatz begegnen, während Sie diese Lektionen durchlaufen.

Das Wesentliche, an das Sie sich erinnern sollten, ist, dass jede Eigenschaft eine definierte Liste zulässiger Wertetypen hat, und jeder Wertetyp hat eine Definition, die erklärt, worum es bei den Werten geht. Sie können dann die Einzelheiten hier auf MDN nachschlagen. Zum Beispiel ist es nützlich, aber vielleicht nicht offensichtlich zu wissen, dass <image> es Ihnen auch erlaubt, einen Farbverlauf zu erstellen!

Im nächsten Artikel geben wir Ihnen einige Tests, mit denen Sie überprüfen können, wie gut Sie die Informationen, die wir über Werte und Einheiten gegeben haben, verstanden und behalten haben.

• Zurück
• Übersicht: Grundlegende Informationen zur CSS-Gestaltung
• Weiter