Cours IT Bases CSS 021_Types de valeurs, unités, tailles, couleurs

Types numériques

En CSS, différentes valeurs numériques sont utilisées dans différentes propriétés. Les types numériques courants sont :

• Chaînes : Texte entre guillemets simples ou doubles, en assurant la cohérence des guillemets.
• Nombres : Entiers ou décimaux. Comme 1024, -100, 0.255. Évitez les nombres sans unité sauf pour les valeurs purement numériques.
• Unités : Type numérique avec unité, par exemple 45deg, 5s ou 10px.
• Pourcentages : Type numérique en pourcentage, par exemple 50%. Utilisés pour la largeur, la hauteur, etc.
• Valeurs de couleur : Hexadécimal, RGB, RGBA, HSL, HSLA, etc. Utilisez des représentations appropriées, considérez le contraste et l’accessibilité.
• Mots-clés : Mots avec une signification spécifique comme auto, initial, inherit, etc.

Unités

Les unités en CSS représentent les valeurs de propriétés telles que longueur, angle, temps, fréquence, etc.

Unités de longueur :

Unités de longueur relatives :

• em : Relatif à la taille de police de l’élément parent. 1.5em signifie 1,5 fois la taille de police du parent.
• rem : Relatif à la taille de police de l’élément racine (html). 1rem égale la taille de police de la racine.
• ex : Relatif à la hauteur de la lettre minuscule “x”.

Exemple :

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em;
4
  margin: 2rem;
5
  height: 2ex;
6
}

Unités de longueur absolues :

• px : Pixel, unité la plus basique et la plus utilisée en CSS.
• in : Pouce, 1 pouce = 96 pixels.
• cm : Centimètre.
• mm : Millimètre.
• pt : Point, 1pt = 1/72 pouce.
• pc : Pica, 1pc = 12pt = 16 pixels.

Exemple :

1
.example {
2
  width: 200px;
3
  height: 2in;
4
  margin: 1cm;
5
  font-size: 12pt;
6
}

Unités de pourcentage relatif :

• % : Pourcentage relatif au parent. width: 50% signifie 50% de la largeur du parent.

Exemple :

1
.example {
2
  width: 50%;
3
  padding: 10%;
4
}

Unités de viewport :

• vw : 1vw = 1% de la largeur du viewport.
• vh : 1vh = 1% de la hauteur du viewport.
• vmin : Le plus petit entre vw et vh.
• vmax : Le plus grand entre vw et vh.

Exemple :

1
.example {
2
  width: 50vw;
3
  height: 30vh;
4
}

Unités d’angle :

deg (degrés) :

• deg est l’unité d’angle la plus courante, un cercle complet = 360 degrés.

Exemple :

1
.example {
2
  transform: rotate(45deg);
3
  background: linear-gradient(45deg, red, yellow);
4
}

rad (radians) :

• rad, un cercle complet = 2π radians.

Exemple :

1
.example {
2
  transform: rotate(1rad);
3
}

grad (grades) :

• grad, un cercle complet = 400 grades.

1
.example {
2
  transform: rotate(50grad);
3
}

turn (tour) :

• turn représente un tour complet = 360 degrés.

1
.example {
2
  transform: rotate(0.5turn);
3
}

Unités de temps :

s (secondes)

• s est l’unité de secondes.

Exemple :

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease;
11
}

ms (millisecondes)

• ms, 1 seconde = 1000 millisecondes.

Exemple :

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease;
12
}

Unités de fréquence :

Hz (hertz)

• Hertz est l’unité de fréquence la plus courante.

Exemple :

1
.example {
2
  animation: shake 1s infinite;
3
}

kHz (kilohertz)

• 1 kHz = 1000 Hz.

Exemple :

1
.example {
2
  audio {
3
    frequency: 5kHz;
4
  }
5
}

Unités de résolution :

dpi (points par pouce)

• dpi représente les points par pouce.

Exemple :

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi;
5
}

dppx (points par pixel)

• dppx représente les points par pixel à l’écran.

Exemple :

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx;
5
}

dpcm (points par centimètre)

• dpcm représente les points par centimètre.

Exemple :

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm;
4
}

Tailles

Les tailles en CSS contrôlent les dimensions des éléments.

Propriétés width et height

Définissent la largeur et la hauteur de l’élément.

Exemple :

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

Propriétés max-width et max-height

Définissent la largeur et la hauteur maximales.

Exemple :

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

Propriétés min-width et min-height :

Exemple :

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

Couleurs

Couleurs par mot-clé

Couleurs représentées par des mots-clés prédéfinis : red (rouge), blue (bleu), green (vert), etc.

Exemple :

1
.example {
2
  color: red;
3
  background-color: blue;
4
}

Couleurs hexadécimales

Couleurs RGB en hexadécimal à six ou trois chiffres. Format #RRGGBB ou #RGB.

Exemple :

1
.example {
2
  color: #ff0000;
3
  background-color: #00f;
4
}

Couleurs RGB, RGBA

rgb() accepte trois paramètres (0-255). rgba() ajoute un paramètre de transparence (0-1).

Exemple :

1
.example1 {
2
  color: rgb(255, 0, 0);
3
  background-color: rgb(0, 0, 255);
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5);
8
  background-color: rgba(0, 0, 255, 0.7);
9
}

Couleurs HSL, HSLA

hsl() accepte teinte (0-360), saturation (0%-100%) et luminosité (0%-100%). hsla() ajoute la transparence (0-1).

Exemple :

1
.example1 {
2
  color: hsl(0, 100%, 50%);
3
  background-color: hsl(240, 100%, 50%);
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5);
8
  background-color: hsla(240, 100%, 50%, 0.7);
9
}

Table de couleurs RGB (oschina.net)