Tous les types de données CSS courants

Dans cet article, nous parlerons des types de données courants en CSS. Il existe de nombreux formats pour les valeurs d'attribut en CSS. Pour que l'agent utilisateur (c'est-à-dire le navigateur) reconnaisse si une valeur est valide, il doit confirmer si la valeur est conforme à l'un des formats pris en charge par ce type de valeur. Les formats pris en charge par ces valeurs d'attribut sont appelés types de données, qui sont identifiés dans la spécification sous la forme .

Il existe deux types de données en CSS : les types de données spécifiques et les types de données généraux. Un type de données spécifique est associé uniquement à un seul attribut ou à une classe d'attributs. Par exemple, le type de données ne peut être utilisé que comme valeur de l'attribut transform.

En revanche, les types de données génériques ne sont associés à aucune propriété spécifique. Par exemple, le type de données a une valeur de 10px, qui peut être utilisée pour la marge, la taille de la police et une série d'autres propriétés.

Dans cet article, je vais donner un aperçu de tous les types de données courants.

Type de nom de répertoire

Mot-clé de valeur de texte

Mot-clé personnalisé de valeur de texte

Chaîne de citation de valeur de texte < string>

Valeur texte Localisateur de ressources

Valeur numérique de base Entier >Valeur de base Rapport

Valeur de base Pourcentage

Distance de mesure

Fréquence de mesure

Résolution de mesure image>

Autres Position

Type de données texte

Mots clés

Le type de données mot-clé

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

Ces mots-clés ne sont pas sensibles à la casse et ne peuvent pas être utilisés entre guillemets. Cela évite toute confusion avec le type de données chaîne .

Mots-clés personnalisés

Le type de données de mot-clé personnalisé (également écrit ) fait référence aux mots-clés définis par l'auteur de la feuille de style. La définition de comporte certaines restrictions, par exemple, il ne peut pas s'agir d'un des mots CSS courants.

L'exemple le plus courant de mot-clé personnalisé est la valeur de l'attribut animation-name. Cette propriété peut accepter une animation personnalisée comme valeur. Le nom de l'animation personnalisée est défini par l'auteur de la feuille de style.

Chaîne entre guillemets

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

/* Absolute URL */@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400"); /* Realtive URL */.foo { background-image: url("../img/bg.png"); }
@import "components/buttons.css"; /* Fragment URL */.bar { filter: url("#blurFilter"); }

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