CSS-Werte und -Einheiten

In CSS-Spezifikationen und auf den Eigenschaftsseiten hier auf MDN können Sie Wertetypen erkennen, da sie in spitzen Klammern (<, >) eingeschlossen sind, z. B. <color> oder <length>. Wenn Sie den Wertetyp <color> als gültig für eine bestimmte Eigenschaft sehen, bedeutet das, dass Sie jede gültige Farbe als Wert für diese Eigenschaft verwenden können, wie sie auf der Referenzseite <color> aufgeführt ist.

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, welchen Fall Sie jeweils studieren. HTML-Elemente verwenden ebenfalls spitze Klammern, aber es sollte aus dem Kontext klar sein, welchen Sie gerade betrachten. Wenn Sie sich nicht sicher sind, versuchen Sie es auf MDN zu suchen.

Im folgenden Beispiel haben wir die Farbe unserer Überschrift mithilfe eines Schlüsselworts festgelegt und den Hintergrund mit der rgb()-Funktion:

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

Ein Wertetyp in CSS ist eine Möglichkeit, eine Sammlung von zulässigen Werten zu definieren. Das bedeutet, dass wenn Sie <color> als gültig sehen, Sie sich nicht Gedanken darüber machen müssen, welche der verschiedenen Farbwerttypen verwendet werden kann - Schlüsselwörter, Hexadezimalwerte, rgb()-Funktionen usw. Sie können jeden verfügbaren <color>-Wert verwenden, vorausgesetzt, sie werden von Ihrem Browser unterstützt. Die Seite auf MDN für jeden Wert gibt Ihnen Informationen über die Browser-Unterstützung. Wenn Sie sich zum Beispiel die Seite für <color> ansehen, werden Sie sehen, dass der Abschnitt zur Browser-Kompatibilität die verschiedenen Typen von Farbwerten auflistet und deren Unterstützung.

Werfen wir einen Blick auf einige der Typen von Werten und Einheiten, die Sie häufig antreffen werden, mit Beispielen, damit Sie verschiedene mögliche Werte ausprobieren können.

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

Der numerische Typ, auf den Sie am häufigsten stoßen werden, 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 Längeneinheiten sind absolute Längeneinheiten — sie sind nicht relativ zu etwas anderem und werden allgemein als immer gleich groß angesehen.

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

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 Elternelements, wenn es für font-size verwendet wird. rem ist relativ zur Schriftgröße des Root-Elements.
• vh und vw sind relativ zur Höhe und Breite des Ansichtsfensters, entsprechend.

Der Vorteil der Verwendung von relativen Einheiten ist, dass Sie mit sorgfältiger Planung erreichen können, dass die Größe von Text oder anderen Elementen relativ zu allem anderen auf der Seite skaliert wird. 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 gängigsten relativen Einheiten erkunden.

Ein Beispiel erkunden

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

Die zweite Box hat eine Breite in vw (Ansichtsbreite) Einheiten festgelegt. Dieser Wert ist relativ zur Breite des Ansichtsfensters, daher sind 10vw 10 Prozent der Breite des Ansichtsfensters. Wenn Sie die Breite Ihres Browserfensters ändern, sollte sich die Größe der Box ändern. Da dieses Beispiel jedoch in die Seite eingebettet ist, wird es nicht funktionieren. Um dies in Aktion zu sehen, müssen Sie das Beispiel öffnen, nachdem Sie es in einem eigenen Browser-Tab geöffnet haben.

Die dritte Box verwendet em Einheiten. Diese sind relativ zur Schriftgröße des Elements. Ich habe eine Schriftgröße von 1em auf dem umgebenden <div> festgelegt, der eine Klasse von .wrapper hat. Ändern Sie diesen Wert in 1.5em und Sie werden sehen, dass sich die Schriftgröße aller Elemente vergrößert, aber nur das letzte Element breiter wird, da seine Breite relativ zu dieser Schriftgröße ist.

Nachdem Sie die obigen Anweisungen befolgt haben, versuchen Sie, mit den Werten auf andere Weise zu spielen, 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 stoßen werden, wenn Sie alles von Boxen bis hin zu Textgrößen gestalten möchten. Es ist es wert, zu verstehen, wie diese funktionieren und die Unterschiede zwischen ihnen, besonders wenn Sie zu komplexeren Themen wie Textgestaltung oder CSS-Layout kommen. Das untenstehende Beispiel liefert eine Demonstration.

Der unten illustrierte HTML-Code ist eine Anordnung von verschachtelten Listen — wir haben insgesamt zwei Listen und beide Beispiele haben denselben HTML-Code. Der einzige Unterschied besteht darin, dass die erste eine Klasse von ems und die zweite eine Klasse von rems hat.

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

Zur Erinnerung: Die em Einheit bedeutet "mein Eltern-Element's Schriftgröße" wenn es für font-size verwendet wird (und "meine eigene Schriftgröße" wenn es für etwas anderes verwendet wird). Die <li>-Elemente innerhalb der <ul> mit einer class von ems nehmen ihre Größenordnung von ihrem Elternteil an. Also wird jede tiefere Nestung progressiv größer, da jede ihre Schriftgröße auf 1.3em setzt — 1.3 mal die Schriftgröße ihres Eltern-Elements.

Zur Erinnerung: Die rem Einheit bedeutet "die Schriftgröße des Stamm-Elements" (rem steht für "root em"). Die <li>-Elemente innerhalb der <ul> mit einer class von rems nehmen ihre Größenordnung von dem Wurzelelement (<html>) an. Das bedeutet, dass jede tiefere Nestung nicht fortlaufend größer wird.

Wenn Sie jedoch die font-size des <html>-Elements im CSS ändern, werden Sie sehen, dass sich alles andere relativ dazu ändert — sowohl rem- als auch em-großer Text.

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

Zeilenhöhe-Einheiten

lh und rlh sind relative Längeneinheiten, die em und rem ähneln. Der Unterschied zwischen lh und rlh ist, dass die erste relativ zur Zeilenhöhe des Elements selbst ist, während die zweite relativ zur Zeilenhöhe des Wurzelelements, üblicherweise <html>, ist.

Mit diesen Einheiten können wir Textdekorationsboxen präzise an den Text anpassen. In diesem Beispiel verwenden wir die lh Einheit, um Notizblock-ähnliche Linien mit repeating-linear-gradient() zu erstellen. Es spielt keine Rolle, was die Zeilenhöhe des Textes ist, die Linien beginnen immer an der richtigen Stelle.

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 24px;
  gap: 24px;
  background-color: floralwhite;
  font-family: sans-serif;
}

@supports not (height: 1lh) {
  body::before {
    grid-column: 1 / -1;
    padding: 8px;
    border-radius: 4px;
    background-color: tomato;
    color: white;
    content: "You browser doesn't support lh unit just yet";
  }
}

p {
  margin: 0;
  background-image: repeating-linear-gradient(
    to top,
    lightskyblue 0 2px,
    transparent 2px 1lh
  );
}

<p style="line-height: 2em">
  Summer is a time for adventure, and this year was no exception. I had many
  exciting experiences, but two of my favorites were my trip to the beach and my
  week at summer camp.
</p>

<p style="line-height: 4em">
  At the beach, I spent my days swimming, collecting shells, and building
  sandcastles. I also went on a boat ride and saw dolphins swimming alongside
  us.
</p>

In vielen Fällen wird ein Prozentsatz wie eine Länge behandelt. Das Problem mit Prozentsätzen ist, dass sie immer relativ zu einem anderen Wert gesetzt werden. Zum Beispiel, wenn Sie die font-size eines Elements als Prozentsatz festlegen, wird es ein Prozentsatz der font-size des Elternelements sein. Wenn Sie einen Prozentsatz für einen width-Wert verwenden, wird es ein Prozentsatz der width des Elternteils sein.

Im folgenden Beispiel haben die beiden prozentual großen Boxen und die beiden pixelgroßen Boxen dieselben Klassennamen. Die Sets sind jeweils 40% und 200px breit.

Der Unterschied besteht darin, dass das zweite Set aus zwei Boxen in einem Wrapper liegt, der 400 Pixel breit ist. Die zweite 200px breite Box hat dieselbe Breite 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 Prozentsatzwert zu ändern, um zu sehen, wie dies 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%;
}

Das nächste Beispiel hat Schriftgrößen, die in Prozentangaben festgelegt sind. Jedes <li> hat eine font-size von 80%; daher werden die geschachtelten Listenelemente progressiv kleiner, da sie ihre Größenordnung von ihrem Elternteil 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%;
}

Beachten Sie, dass, obwohl viele Wertetypen sowohl eine Länge als auch einen Prozentsatz akzeptieren, es einige gibt, die nur Länge akzeptieren. Sie können auf den MDN-Eigenschaftsreferenzseiten sehen, welche Werte akzeptiert werden. Wenn der zulässige Wert <length-percentage> enthält, können Sie eine Länge oder einen Prozentsatz verwenden. Wenn der zulässige Wert nur <length> enthält, ist es nicht möglich, einen Prozentsatz zu verwenden.

Einige Wertetypen akzeptieren Zahlen, ohne dass eine Einheit hinzugefügt wird. Ein Beispiel für eine Eigenschaft, die eine einheitslose Zahl akzeptiert, ist die opacity-Eigenschaft, die die Opazität eines Elements steuert (wie transparent es ist). Diese Eigenschaft akzeptiert eine Zahl zwischen 0 (vollständig transparent) und 1 (vollständig undurchsichtig).

Im folgenden Beispiel versuchen Sie, den Wert der opacity auf verschiedene Dezimalwerte zwischen 0 und 1 zu ändern und sehen, wie die Box und ihr Inhalt mehr oder weniger transparent 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: 10px;
  opacity: 0.6;
}

Farbwerte können in vielen Bereichen von CSS verwendet werden, sei es bei der Angabe der Farbe von Texten, Hintergründen, Rahmen und vielem mehr. Es gibt viele Möglichkeiten, in CSS Farbe festzulegen, die Ihnen die Kontrolle über viele aufregende Eigenschaften ermöglichen.

Das Standard-Farbsystem, das in modernen Computern verfügbar ist, unterstützt 24-Bit-Farben, die es ermöglichen, etwa 16,7 Millionen unterschiedliche Farben über eine Kombination von unterschiedlichen Rot-, Grün- und Blaukanälen mit jeweils 256 verschiedenen Werten anzuzeigen (256 x 256 x 256 = 16.777.216).

In diesem Abschnitt werden wir uns die am häufigsten gesehenen Methoden zur Spezifizierung von Farben ansehen: die Verwendung von Schlüsselwörtern, Hexadezimal- und rgb()-Werten. Wir werden auch einen kurzen Blick auf zusätzliche Farb-Funktionen werfen, um sie bei Bedarf zu erkennen oder um mit verschiedenen Methoden zur Farbgebung zu experimentieren.

Wahrscheinlich werden Sie sich für eine Farbpalette entscheiden und dann diese Farben - und Ihre bevorzugte Methode zur Farbgebung - in Ihrem gesamten Projekt verwenden. Sie können Farbmodelle mischen und anpassen, aber es ist in der Regel am besten, wenn Ihr gesamtes Projekt die gleiche Methode zur Farberklärung verwendet, um Konsistenz zu gewährleisten!

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

Versuchen Sie, mit verschiedenen Farbwerten in den Live-Beispielen unten zu spielen, um mehr zu erfahren, wie sie funktionieren:

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

Der nächste Typ von Farbwert, auf den Sie wahrscheinlich stoßen werden, sind hexadezimale Codes. Hexadezimal verwendet 16 Zeichen von 0-9 und a-f, sodass die gesamte Bandbreite 0123456789abcdef ist. Jeder hexadezimale Farbwert besteht aus einem Raute-/Pfund-Symbol (#) gefolgt von drei oder sechs hexadezimalen Zeichen (#fcc oder #ffc0cb, zum Beispiel), mit einem optionalen ein oder zwei hexadezimalen Zeichen, die die Alpha-Transparenz der vorherigen drei oder sechs Zeichen Farbe darstellen.

Wenn hexadezimal zur Beschreibung von RGB-Werten verwendet wird, ist jedes Paar von hexadezimalen Zeichen eine Dezimalzahl, die einen der Kanäle — rot, grün und blau — darstellt und uns ermöglicht, einen der 256 verfügbaren Werte für jeden zu spezifizieren (16 x 16 = 256). Diese Werte sind weniger intuitiv als Schlüsselwörter für die Definition von Farben, aber sie sind weitaus vielseitiger, weil sie jede RGB-Farbe damit darstellen können.

Versuchen Sie, die Werte zu ändern, um zu sehen, wie sich die Farben ändern:

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

Um RGB-Werte direkt zu erstellen, nimmt die rgb()-Funktion drei Parameter entgegen, die die rot, grün und blau Kanalwerte der Farbe repräsentieren, mit einem optionalen vierten Wert, der durch einen Schrägstrich ('/') getrennt ist und die Opazität in ähnlicher Weise wie hexadezimale Werte darstellt. Der Unterschied zu RGB besteht darin, dass jeder Kanal nicht durch zwei hexadezimale Ziffern, sondern durch eine Dezimalzahl zwischen 0 und 255 oder einen Prozentsatz zwischen 0% und 100% inklusive (aber keine Mischung aus beiden) dargestellt wird.

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

Sie können einen vierten Parameter zu rgb() hinzufügen, der den Alphakanal der Farbe repräsentiert, der die Opazität steuert. Wenn Sie diesen Wert auf 0 setzen, wird die Farbe vollständig transparent, während 1 sie vollständig undurchsichtig macht. Werte dazwischen geben Ihnen unterschiedliche Transparenzstufen.

Im Beispiel unten haben wir ein Hintergrundbild zum umgebenden Block unserer farbigen Boxen hinzugefügt. Wir haben dann die Boxen mit unterschiedlichen Opazitätswerten versehen - beachten Sie, wie der Hintergrund mehr durchscheint, wenn der Alpha-Kanalwert kleiner ist. In diesem Beispiel versuchen Sie, die Werte des Alpha-Kanals zu ändern, um zu sehen, wie sich die Farbausgabe verändert.

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

Der sRGB Farbraum definiert Farben im rot (r), grün (g), und blau (b) Farbraum.

Wenn Sie über Schlüsselwörter, Hexadecimal and rgb() für Farben hinausgehen möchten, könnten Sie versuchen <hue> zu verwenden. Hue ist die Eigenschaft, die 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 ein Hue-Wert in einem <angle> angegeben werden kann, weil die meisten Farbsysteme Hues mit einem Farbrad beschreiben.

Es gibt mehrere Farb-Funktionen, die eine <hue> Komponente enthalten, darunter 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 Applying color to HTML elements using CSS Leitfaden an, die <color> Referenz, die alle verschiedenen Möglichkeiten auflistet, wie man Farben in CSS verwenden kann, und das CSS color module, das einen Überblick über alle Farbtpyen in CSS bietet und die Eigenschaften, die Farbwerte verwenden.

Ein großartiger Ausgangspunkt für die Verwendung von Hues in CSS ist die hwb() Funktion, die eine srgb() Farbe spezifiziert. Die drei Teile sind:

• Hue: Der Grundton der Farbe. Dies nimmt einen <hue> Wert zwischen 0 und 360, der die Winkel um ein Farbrad repräsentiert.
• Weißgehalt: Wie weiß ist die Farbe? Dies nimmt einen Wert von 0% (kein Weißgehalt) bis 100% (voller Weißgehalt).
• Schwarzgehalt: Wie schwarz ist die Farbe? Dies nimmt einen Wert von 0% (kein Schwarzgehalt) bis 100% (voller Schwarzgehalt).

Ähnlich wie die hwb() Funktion ist die hsl() Funktion, die auch eine srgb() Farbe spezifiziert. HSL verwendet Hue, zusätzlich zu Saturation und Lightness:

• Hue
• Saturation: Wie gesättigt ist die Farbe? Dies nimmt einen Wert von 0–100%, wobei 0 keine Farbe ist (es wird als Grauton erscheinen), und 100% ist volle Farbsättigung.
• Lightness: Wie hell oder grell ist die Farbe? Dies nimmt einen Wert von 0–100%, wobei 0 kein Licht ist (es wird komplett schwarz erscheinen) und 100% ist voll Licht (es wird komplett weiß erscheinen).

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

Lassen Sie uns das RGB-Beispiel aktualisieren, um HSL-Farben anstelle 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() hinzufügen, um die Opazität 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);
}

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 angezeigt wird, oder ein Verlauf.

Im folgenden Beispiel haben wir ein Bild und einen Verlauf als Wert für die CSS background-image Eigenschaft demonstriert.

<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 / 100%)
  );
}

Der <position> Wertetyp repräsentiert eine Menge von 2D-Koordinaten, die dazu verwendet werden, 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 bestimmten Begrenzungen eines 2D-Felds auszurichten, zusammen mit Längen, die Offsets von den oberen und linken Kanten des Felds 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 auf center standardisiert.

Im folgenden Beispiel haben wir ein Hintergrundbild 40px von der oberen und rechten Seite des Containers positioniert, indem wir ein Schlüsselwort verwenden. Experimentieren Sie mit diesen Werten, um zu sehen, wie Sie das Bild verschieben können.

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

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

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

Es gibt Stellen, an denen Sie Zeichenfolgen in CSS verwenden. Zum Beispiel, wenn spezifizierter erzeugter Inhalt. In diesem Fall wird der Wert zitiert, um zu demonstrieren, dass es sich um eine Zeichenfolge handelt. Im Beispiel unten verwenden wir nicht zitiert Farb-Schlüsselwörter zusammen mit einer zitierten erzeugten 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.";
}

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

CSS hat auch Funktionen, die auf ähnliche Weise wie Funktionen in anderen Sprachen arbeiten. Tatsächlich haben wir bereits CSS-Funktionen im Farbe Abschnitt oben mit den Funktionen rgb() und hsl() gesehen.

Neben der Farbgebung können Sie Funktionen in CSS verwenden, um eine Menge anderer Dinge zu tun. Zum Beispiel sind Transformationsfunktionen eine verbreitete Methode, um Elemente auf einer Seite zu verschieben, drehen und 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.

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

CSS hat Unterstützung für Mathematische Funktionen, die es uns ermöglichen, Berechnungen durchzuführen, anstatt auf statische Werte angewiesen zu sein oder die Mathematik in JavaScript auszuführen. Eine der häufigsten mathematischen Funktionen ist calc(), die es Ihnen ermöglicht, Operationen wie Addition, Subtraktion, Multiplikation und Division durchzuführen.

Zum Beispiel, wenn wir die Breite eines Elements auf 20% seines übergeordneten Containers plus 100px setzen möchten. Wir können diesen Wert nicht mit einem statischen Wert angeben — wenn der Elternteil eine prozentuale Breite verwendet (oder eine relative Einheit wie em oder rem), dann variiert er je nach Kontext, in dem er verwendet wird, sowie anderen Faktoren wie das Gerät des Benutzers oder die Breite des Browserfensters. Wir können jedoch calc() verwenden, um die Breite des Elements auf 20% seines übergeordneten Containers plus 100px zu setzen. Die 20% basieren auf der Breite des übergeordneten Containers (.wrapper) und wenn sich diese Breite ändert, ändert sich auch die Berechnung:

<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 mathematische Funktionen, die Sie in CSS verwenden können, wie min(), max(), und clamp(); diese lassen Sie respektive den kleinsten, größten oder mittleren Wert aus einer Menge von Werten wählen. Sie können auch Trigonometrische Funktionen wie sin(), cos(), und tan() verwenden, um Winkel für das Drehen von Elementen um einen Punkt zu berechnen, oder Farben auszuwählen, die einen Farbwinkel als Parameter haben. Exponentialfunktionen könnten auch für Animationen und Übergänge verwendet werden, wenn Sie sehr spezifische Kontrolle darüber benötigen, wie sich etwas bewegt und aussieht.

Das Wissen über CSS-Funktionen ist nützlich, damit Sie sie erkennen, wenn Sie ihnen begegnen. Sie sollten anfangen, mit ihnen in Ihren Projekten zu experimentieren — sie helfen Ihnen dabei, das Schreiben von maßgeschneidertem oder wiederholendem Code zu vermeiden, um Ergebnisse zu erzielen, die Sie mit üblichen CSS erreichen können.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können ein paar weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Werte und Einheiten.

Dies war ein kurzer Durchlauf der häufigsten Typen von Werten und Einheiten, die Sie antreffen könnten. Sie können sich alle verschiedenen Typen auf der CSS-Werte und Einheiten Modulseite ansehen — Sie werden viele davon in der Anwendung sehen, während Sie diese Lektionen durcharbeiten.

Das Wichtigste, was Sie sich merken sollten, ist, dass jede Eigenschaft eine definierte Liste erlaubter Wertetypen hat, und jeder Wertetyp eine Definition hat, die erklärt, was die Werte sind. Sie können dann die spezifischen Details dazu hier auf MDN nachlesen. Zum Beispiel zu verstehen, dass <image> auch erlaubt, einen Farbverlauf zu erstellen, ist nützlich, aber vielleicht nicht sofort offensichtlich!

Im nächsten Artikel werfen wir einen Blick darauf, wie Elemente in CSS dimensioniert werden.

• Zurück
• Übersicht: Grundlagen der CSS-Stilgestaltung
• Weiter