Alle gängigen Datentypen von CSS

In diesem Artikel werden wir über die gängigen Datentypen von CSS sprechen. Es gibt viele Formate für Attributwerte in CSS. Damit der Benutzeragent (d. h. der Browser) erkennen kann, ob ein Wert gültig ist, muss er bestätigen, ob der Wert einem der von diesem Werttyp unterstützten Formate entspricht. Die von diesen Attributwerten unterstützten Formate werden als Datentypen bezeichnet, die in der Spezifikation in der Form identifiziert werden.

Es gibt zwei Datentypen in CSS – spezifische Datentypen und allgemeine Datentypen. Ein bestimmter Datentyp ist nur einem einzelnen Attribut oder einer Attributklasse zugeordnet. Beispielsweise kann der Datentyp nur als Wert des Transformationsattributs verwendet werden.

Im Gegensatz dazu sind generische Datentypen keinen spezifischen Eigenschaften zugeordnet. Der Datentyp hat beispielsweise den Wert 10px, der für Rand, Schriftgröße und eine Reihe anderer Eigenschaften verwendet werden kann.

In diesem Artikel gebe ich einen Überblick über alle gängigen Datentypen.

Typ des Verzeichnisnamens

Textwert-Schlüsselwort

Textwert-Benutzerdefiniertes Schlüsselwort Zeichenfolge> >Grundwertverhältnis

Grundwertprozentsatz 🎜>Messfrequenz Andere Position

Textdatentyp

Schlüsselwörter

Schlüsselwortdatentyp bezieht sich auf ein vordefiniertes Schlüsselwort in CSS. Dieser Typ umfasst nicht nur Werte, die für bestimmte Eigenschaften eindeutig sind, wie z. B. den Blockwert des Anzeigeattributs, sondern auch häufig in CSS verwendete Initial-, Inherit- und Unset-Werte.

.foo { border-color: red; position: inherit;

Bei diesen Schlüsselwörtern wird die Groß-/Kleinschreibung nicht beachtet und sie können nicht in Anführungszeichen verwendet werden. Dies vermeidet Verwechslungen mit dem String-Datentyp .

Benutzerdefinierte Schlüsselwörter

Der benutzerdefinierte Schlüsselwortdatentyp (auch als geschrieben) bezieht sich auf Schlüsselwörter, die vom Autor des Stylesheets definiert wurden. Die Definition von unterliegt bestimmten Einschränkungen, z. B. darf es sich nicht um eines der gebräuchlichen CSS-Wörter handeln.

Das häufigste Beispiel für ein benutzerdefiniertes Schlüsselwort ist der Wert des Attributs „animation-name“. Diese Eigenschaft kann eine benutzerdefinierte Animation als Wert akzeptieren. Der Name der benutzerdefinierten Animation wird vom Autor des Stylesheets definiert.

@keyframes hulkify {
  from { 
    color: pink; 
    transform: scale(1);
  }
  to { 
    color: green; 
    transform: scale(2);
  }

}.bruce-banner { animation-name: hulkify; }

.foo::after {  content: "Hello, world!";
}.foo::before {  content: "We can add 'quotes' within quotes \A And move to a separate line";
}

@media screen and (device-aspect-ratio: 16/9) { /* Wide screen displays, iPhone 5 */ }
@media screen and (device-aspect-ratio: 4/3) { … }

.foo { 
    width: 50%; /* <length-percentage> */
    line-height: 200% /* <number-percentage> */
    voice-pitch: 25% /* <frequency-percentage> */}

.foo { 
    /* Going clockwise */
    transform: rotate(90deg);    transform: rotate(100grad);    transform: rotate(0.25turn);    transform: rotate(1.57rad);    /* Going anti-clockwise */
    transform: rotate(-270deg);    transform: rotate(-300grad);    transform: rotate(-1.25turn);    transform: rotate(-55.72rad);
}

.foo { transition-duration: 1s; } 
.bar { transition-duration: 1000ms; }

.foo { voice-pitch: 250Hz; } 
.bar { voice-pitch: 1kHz; }

@media (min-resolution: 100ddpx) { .. }
@media (min-resolution: 100dpcm) { .. }
@media (min-resolution: 300dpi) { /* Retina display */ }

.foo {   color: black;   color: #000;   color: rgb(0,0,0);   color: rgba(0,0,0,1);   color: hsl(0,0%,0%);   color: hsla(0,0%,0%, 1);
}

.foo { background-image: url('path/to/bg.png'); }.bar { background-image: element('#background'); }.baz { background-image: linear-gradient(white, gray); }

.foo { 
  background-position: right bottom;  background-position: 200px 200px;  background-position: 100% 100%;
}