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

Le type de données de chaîne fait référence à toute chaîne entre guillemets. Cette chaîne est placée entre guillemets et constitue une séquence arbitraire de caractères Unicode.

Resource Locator

Resource Locator est utilisé pour référencer des fichiers ou des fragments de ressources. Ce type de données est généralement exprimé à l'aide de la fonction url(), mais dans certains cas, il peut également être exprimé sous la forme de , comme dans une règle @import.

Ce type de données a trois URL (Uniform Resource Locators).

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

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

L'URL absolue inclut le protocole et le nom de domaine. La ressource spécifiée par ce type d'URL ne doit pas nécessairement être la même que le nom de domaine auquel appartient la feuille de style.

Le fichier pointé par l'URL relative est basé sur l'emplacement du fichier de la feuille de style.

L'URL locale (URL de fragment) est utilisée pour pointer vers des éléments dans le fichier principal lui-même. Référencé par l'identifiant de l'élément, et non par le chemin du fichier.

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

Type numérique de base

Entier

Le type entier C'est un nombre complet sans partie décimale. Les entiers incluent les entiers positifs et négatifs. Le signe d'un entier est spécifié par + ou - avant le premier chiffre, ou par défaut + si rien n'est spécifié.

.foo { z-index : 10 ; }.foo { z-index : +10 ; }.bar { z-index : -10 ;

Nombre réel

Le type de nombre réel Il peut s'agir d'un nombre entier , 0 ou d'une fraction décimale. Comme les types entiers, les nombres réels ont également des valeurs positives et négatives, encore une fois indiquées par le signe précédant le premier nombre.

/* 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"); }

Ratio

比率数据类型 表明两个数值之前的关系，这两个数值均为正的整数值 。尽管数学中比率有着多种书写方式，但是在CSS经常被写作 / 。

比率类型的典型用法是用来在媒体查询中指明目标设备的分辨率。

@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> */}

尺寸数据类型

尺寸是数值数据类型中的一种，是一种度量单位。它前半部分由数值组成，后面跟一个单位符号。当数值部分为 0 时，单位可以省略。

距离

距离数据类型 表示距离的单位，有两种长度单位。

绝对单位 ，如 px ， cm 以及 pt 。这些单位的距离值都是固定的，与物理测量相关。一旦声明，它们的大小不会因为容器元素的字体大小变化而发生改变。

相对单位 ，如 em ， rem 以及视口单位。这些单位并没有一个客观的度量标准。相反的，这类单位的实际值由它们的父元素决定。这就意味着它们的大小会因为所依赖元素的大小改变而改变。

.foo {
font-size: 16px; /* absolute */
width: 50vw; /* relative */}

角度

角度数据类型表示圆的一个角度。存在四种单位来定义角度度量。

deg 单位表示角的度数。一个完整的圆为360度。

grad 表示角的Gradians度。一个完整的圆为400 grad 。

rad 表示角的弧度。一个完整的圆为2π（约为57.29rad）。

turn 表示圆周长。一个完整的圆为1turn.

这些单位都存在正负值之分，表明顺时针或者逆时针。下面的例子中，指出了如何用各种单位表示顺时针90度。

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

时长

时长数据类型 是时间单位。有两种单位能够用来定义时间。

s 表示一秒钟。

ms 表示一毫秒。1秒等于1000毫秒。

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

频率

频率类型 表示声音的频率。存在两个单位用来定义频率。

kHz 表示千赫兹。

Hz 表示赫兹。1000Hz等于1kHz.

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

分辨率

分辨率数据类型 表示用户当前设备的分辨率。分辨率是单一像素点（物理）的大小，通过1CSS英寸、厘米或者像素需要多少像素点能填满来定义。这一计算方式依赖于我们所用的CSS单位，有四种方式可以指定分辨率。

dpi 表示每CSS英寸中物理像素点的个数。

dpcm 表示每CSS厘米中物理像素点的个数。

dppx 表示每CSS像素中物理像素点的个数。

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

其他数据类型

颜色

颜色数据类型 用来定义颜色值。这一数据类型有两种格式。

关键字形式 ：可以使预定义颜色中的一种（如 cornflowerblue ）， transparent 以及 currentColor 等关键之。

数值形式 ：可以使用颜色表示法中的一种， #rgb ， rgb() ， rgba() ， hsl() ， hsla() 。

下例是我们如何用不同的形式实现黑色颜色值。

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

图片

图片数据类型 表示一个2D图像。它可以是以下三种形式中的一种。

URL引用 ：通过 数据类型来指定。

文档中的元素 ：通过 element() 函数来指定。（提示：这一函数的支持度较为有限。）

渐变函数 :使用 数据类型来定义。

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

位置

位置数据类型 指出了一个元素在容器区域或元素中的位置。它可以使下列三种类型中的一种：

关键字 : top ， right ， bottom ， left 以及 center 。

长度值 。

百分比 ，长度百分比。

下例给出了如何让一个大小为100x100px背景图定位在容器元素（300x300px）的左下角。

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

以上就是css的通用数据类型，希望对大家有帮助。

相关推荐：

Résumé de l'explication détaillée des exemples de classes d'encapsulation de couche de données générales EF

Plusieurs sélecteurs couramment utilisés en CSS3

Quelques les utiles Conseils sur les fonctions CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!