CSS - Types de données

Introduction

Salut à toi, futur.e magicien.ne de CSS ! Je suis ravi.e de devenir ton guide sur ce voyage passionnant à travers le monde des types de données CSS. En tant que quelqu'un.e qui enseigne l'informatique depuis plus d'une décennie, je peux te dire que comprendre les types de données, c'est comme apprendre l'alphabet avant d'écrire un roman. C'est fondamental, et je dirais même, fun ! Alors, mettons-nous à découvrir ensemble les mystères des types de données CSS.

Syntaxe

Avant de rentrer dans les détails des types de données, parlons de la manière dont CSS aime servir ses données. CSS a un moyen particulier d'exprimer les valeurs, et il est important de se familiariser avec cette syntaxe.

selecteur {
propriété: valeur;
}

Par exemple :

p {
color: red;
font-size: 16px;
}

Ici, 'red' et '16px' sont des valeurs de différents types de données. 'Red' est un mot-clé de couleur, tandis que '16px' est une valeur de longueur. Tu commences déjà à comprendre !

Types de données textuelles

Maintenant, parlons du texte. CSS adore le texte, et il a plusieurs façons de le gérer.

Chaînes

Les chaînes en CSS sont comme du papier d'emballage pour les mots. Elles peuvent être envelopées dans des guillemets simples ou doubles.

.greeting::before {
content: "Hello, World!";
}

Dans cet exemple, "Hello, World!" est une chaîne. C'est comme dire à CSS : "Eh, traite cela exactement comme je l'ai écrit !"

Identifiants

Les identifiants sont comme des noms pour les choses en CSS. Ils n'ont pas besoin de guillemets et sont utilisés pour les propriétés, les classes, les IDs, etc.

#main-header {
font-family: Arial, sans-serif;
}

Ici, 'Arial' et 'sans-serif' sont des identifiants. Ils disent à CSS quelles polices utiliser.

URLs

Les URLs en CSS sont comme des adresses pour les ressources. Elles sont généralement utilisées avec la fonction url().

body {
background-image: url('background.jpg');
}

Cela indique à CSS où trouver l'image pour l'arrière-plan.

Types de données numériques

Les nombres sont la colonne vertébrale de beaucoup de propriétés CSS. Comptons les manières !

Entiers

Les entiers sont des nombres entiers, pas de fractions autorisées !

.container {
z-index: 5;
}

Ici, 5 est un entier, déterminant l'ordre d'empilage des éléments.

Nombres

Les nombres en CSS peuvent inclure des décimales.

.opacity-example {
opacity: 0.5;
}

Cela règle l'opacité à 50%, rendant l'élément semi-transparent.

Dimensions

Les dimensions sont des nombres avec des unités adjointes.

.box {
width: 100px;
height: 50%;
margin: 10em;
}

Ici, nous voyons des pixels (px), des pourcentages (%) et des ems (em) en action.

Quantités

Les quantités en CSS sont comme les mesures dans la cuisine. Elles nous aident à définir combien de quelque chose nous voulons.

Longueurs

Les longueurs peuvent être absolues (comme les pixels) ou relatives (comme em ou %).

.container {
width: 80vw;
padding: 2rem;
}

'vw' signifie largeur de la fenêtre, et 'rem' est relatif à la taille de la police de l'élément racine.

Angles

Les angles sont utilisés pour les rotations et les dégradés.

.rotated {
transform: rotate(45deg);
}

Cela tourne un élément de 45 degrés.

Temps

Les valeurs de temps sont utilisées pour les animations et les transitions.

.animated {
transition: all 0.5s ease;
}

Cela règle une transition de demi-seconde pour toutes les propriétés.

Combinations de types

Parfois, CSS aime mélanger et assortir les types de données.

Valeurs de fonction

Les fonctions en CSS prennent des arguments et retournent une valeur.

.gradient {
background: linear-gradient(to right, red, blue);
}

Cela crée un dégradé de rouge à bleu.

Couleur

Les couleurs en CSS sont comme la palette d'un peintre. Il y a plusieurs façons de les définir.

.colorful {
color: #ff0000;  /* Hexadécimal */
background-color: rgb(0, 255, 0);  /* RGB */
border-color: hsl(240, 100%, 50%);  /* HSL */
}

Chacun de ces exemples définit une couleur en utilisant une notation différente.

Images

Les images en CSS peuvent être plus que des photos provenant de fichiers.

.image-types {
background-image: url('cat.jpg');
list-style-image: linear-gradient(to right, red, blue);
}

Ici, nous utilisons à la fois une image externe et un dégradé comme images.

Positionnement 2D

Le positionnement en CSS est comme jouer aux échecs sur une page web.

.positioned {
position: absolute;
top: 50px;
left: 100px;
}

Cela positionne un élément à 50 pixels du haut et à 100 pixels de la gauche de son élément conteneur.

Types de données de calcul

Parfois, nous avons besoin que CSS fasse des calculs pour nous.

.calculated {
width: calc(100% - 20px);
}

Cela calcule la largeur pour être 100% du parent moins 20 pixels.

Affichage

L'affichage détermine comment un élément est rendu.

.flex-container {
display: flex;
}

Cela transforme un élément en conteneur flex, permettant un agencement en boîte flexible.

Autres types de données

CSS a quelques autres astuces dans son manche.

Valeurs globales

Les valeurs globales peuvent être utilisées sur n'importe quelle propriété.

.inherited {
color: inherit;
}

Cela indique à l'élément d'utiliser la même couleur que son parent.

Voici un tableau résumant les principaux types de données CSS que nous avons couverts :

Type de données	Exemple	Description
Chaîne	"Hello, World!"	Texte entouré de guillemets
Identifiant	Arial	Nom non entouré de guillemets pour les polices, propriétés, etc.
URL	url('image.jpg')	Adresse d'une ressource
Entier	5	Nombre entier
Nombre	0.5	Nombre pouvant inclure des décimales
Longueur	10px, 2em, 50%	Mesure avec des unités
Angle	45deg	Valeur de rotation
Temps	0.5s	Durée pour les animations
Couleur	#ff0000, rgb(255,0,0)	Valeur de couleur
Fonction	calc(), linear-gradient()	Effectue des calculs ou crée des effets

souviens-toi, CSS est comme une boîte à outils, et les types de données sont tes outils. Plus tu deviens à l'aise avec eux, plus tes designs peuvent être créatifs et précis. Continue à pratiquer, et bientôt tu styliseras des pages web comme un pro !

Credits: Image by storyset