Liste des propriétés CSS

Ce document présente une liste complète des propriétés CSS essentielles pour le formatage du texte, la gestion des couleurs et des fonds, la manipulation des boîtes, le positionnement, les listes, les tableaux, ainsi que d'autres propriétés utiles comme le curseur de souris. Il s'adresse aux étudiants et développeurs souhaitant maîtriser les bases du CSS pour la création et la mise en forme de pages web.

Propriétés de formatage de texte

Police, taille et décorations

font-family : Permet d'indiquer une liste de noms de polices par ordre de préférence. Le navigateur utilise la première police disponible dans la liste. Si le nom de la police contient des espaces, il faut utiliser des guillemets.

font-family: "Arial Black", Arial, Verdana, serif;

font-size : Définit la taille du texte. Plusieurs unités sont possibles :

• px (pixels)
• % (pourcentage, 100% = taille normale)
• em (taille relative, 1.0 = normal)
• ex (taille relative à la hauteur de la lettre "x")
• noms de taille : xx-small, x-small, small, medium, large, x-large, xx-large

font-weight : Définit l'épaisseur du texte :

• normal (par défaut)
• bold (gras)
• bolder (plus gras)
• lighter (plus fin)

font-style : Définit le style du texte :

• normal (par défaut)
• italic (italique)
• oblique (variante d'italique)

text-decoration : Ajoute une décoration au texte :

• underline (souligné)
• overline (ligne au-dessus)
• line-through (barré)
• blink (clignotant)
• none (aucune décoration, par défaut)

font-variant : Permet d'utiliser des petites capitales :

• small-caps (petites capitales)
• normal (par défaut)

text-transform : Modifie la casse du texte :

• uppercase (tout en majuscules)
• lowercase (tout en minuscules)
• capitalize (première lettre de chaque mot en majuscule)
• none (aucune transformation, par défaut)

Méga-propriété font : Permet de définir plusieurs propriétés de police en une seule déclaration, dans n'importe quel ordre :

font: Arial, bold, 16px;

Cela applique la police Arial, en gras, avec une taille de 16 pixels.

Alignement et mise en forme

text-align : Définit l'alignement horizontal du texte :

• left (à gauche, par défaut)
• center (centré)
• right (à droite)
• justify (texte justifié)

vertical-align : Utilisé principalement dans les cellules de tableau pour l'alignement vertical :

• top (en haut)
• middle (au milieu)
• bottom (en bas)

line-height : Définit la hauteur de ligne, en pixels ou en pourcentage.

text-indent : Définit l'alinéa (retrait) du début des paragraphes, en pixels.

white-space : Contrôle le comportement du passage à la ligne :

• normal : passage à la ligne automatique (par défaut)
• nowrap : pas de passage à la ligne automatique sauf balise <br />
• pre : passage à la ligne respecté comme dans le code source (comme la balise <pre>)

Propriétés de couleur et de fond

Couleur du texte et du fond

color : Définit la couleur du texte. Plusieurs formats sont possibles :

• Nom de couleur en anglais (ex. black, blue, red)
• Code hexadécimal (ex. #CC48A1)
• Valeurs RGB (ex. rgb(128, 255, 0))

background-color : Définit la couleur de fond d'un élément, avec les mêmes formats que pour color.

Images et gestion du fond

background-image : Définit une image de fond via une URL :

background-image: url("images/fond.png");

background-attachment : Contrôle si le fond reste fixe ou défile avec le contenu :

• fixed : fond fixe
• scroll : fond défile avec le texte (par défaut)

background-repeat : Définit la répétition de l'image de fond :

• repeat (répétition sur les deux axes, par défaut)
• repeat-x (répétition horizontale uniquement)
• repeat-y (répétition verticale uniquement)
• no-repeat (pas de répétition)

background-position : Positionne l'image de fond :

• Valeurs en pixels ou pourcentages (ex. 50px 200px)
• Valeurs prédéfinies combinées (ex. bottom right, top center)

Méga-propriété background : Permet de combiner plusieurs propriétés :

background: url("images/fond.png") no-repeat fixed top right;

Le fond reste affiché en haut à droite, sans répétition et fixe lors du défilement.

Propriétés des boîtes

Dimensions

width et height : Largeur et hauteur d'un élément, en pixels, pourcentages ou "auto" (par défaut).

min-width, max-width, min-height, max-height : Définissent les dimensions minimales et maximales.

Bordures

border-width : Épaisseur de la bordure en pixels.

border-color : Couleur de la bordure (mêmes formats que color).

border-style : Type de bordure :

• none (aucune bordure, par défaut)
• hidden (bordure cachée)
• solid (ligne pleine)
• double (ligne double, nécessite au moins 3px)
• dashed (tirets)
• dotted (pointillés)
• inset (effet 3D enfoncé)
• outset (effet 3D surélevé)
• ridge (autre effet 3D)

border-left, border-top, border-right, border-bottom : Permettent de définir bordure, couleur, épaisseur et style pour chaque côté.

border-left: 2px inset blue;

Bordure gauche bleue de 2 pixels avec effet 3D enfoncé.

Méga-propriété border : Définit toutes les bordures en une seule déclaration.

Marges extérieures

margin-top, margin-left, margin-right, margin-bottom : Définissent les marges extérieures, avec des valeurs en pixels, em, etc.

Méga-propriété margin : Permet de définir plusieurs marges en une seule ligne :

• 1 valeur : marge pour tous les côtés
• 2 valeurs : première pour haut et bas, seconde pour gauche et droite
• 3 valeurs : première pour haut, seconde pour gauche et droite, troisième pour bas
• 4 valeurs : haut, droite, bas, gauche

margin: 20px 5px;

20px en haut et en bas, 5px à gauche et à droite.

Marges intérieures (padding)

padding-top, padding-left, padding-right, padding-bottom : Définissent les marges intérieures.

Méga-propriété padding : Fonctionne comme margin pour définir plusieurs valeurs à la fois.

Propriétés de positionnement et d'affichage

Affichage

display : Définit le type d'affichage d'un élément :

• none : élément non affiché
• block : élément de type bloc (ex. <p>)
• inline : élément en ligne (ex. <strong>)
• list-item : élément de liste (ex. <li>)

visibility : Contrôle la visibilité :

• visible : visible (par défaut)
• hidden : masqué mais occupe de la place

display:none; fait disparaître complètement un élément, tandis que visibility:hidden; le masque mais conserve son espace.

clip : Permet d'afficher seulement une partie d'un élément :

clip: rect(valeur1, valeur2, valeur3, valeur4);

Les valeurs correspondent aux coordonnées du rectangle visible (haut, droite, bas, gauche).

overflow : Gère le contenu dépassant les dimensions :

• visible : tout est affiché (par défaut)
• hidden : contenu coupé, non visible
• scroll : contenu coupé avec barres de défilement
• auto : navigateur décide d'ajouter ou non des barres de défilement

Positionnement

float : Permet de faire flotter un élément :

• left : flottant à gauche
• right : flottant à droite
• none : pas de flottant (par défaut)

clear : Permet de stopper l'effet d'un flottant :

• left : stoppe flottant à gauche
• right : stoppe flottant à droite
• both : stoppe tous les flottants
• none : pas de suppression (par défaut)

position : Définit le type de positionnement :

• static : position normale (par défaut)
• relative : position relative à sa position normale
• absolute : position absolue par rapport au coin en haut à gauche
• fixed : position fixe, reste visible au défilement

top, bottom, left, right : Définissent les positions selon le type de positionnement, avec des valeurs en px, %, em, etc.

z-index : Définit l'ordre d'affichage en cas de chevauchement. Plus la valeur est élevée, plus l'élément est au premier plan.

Propriétés des listes

list-style-type : Définit le type de puce ou de numérotation :

• Pour listes non ordonnées (<ul>) :
• disc : disque noir (par défaut)
• circle : cercle
• square : carré
• none : aucune puce
• Pour listes ordonnées (<ol>) :
• decimal : nombres 1, 2, 3... (par défaut)
• decimal-leading-zero : nombres avec zéro initial (01, 02...)
• upper-roman / lower-roman : chiffres romains majuscules/minuscules
• upper-alpha / lower-alpha : lettres alphabétiques majuscules/minuscules
• lower-greek : numérotation grecque (non supportée par Internet Explorer)

list-style-position : Position des puces :

• inside : sans retrait
• outside : avec retrait (par défaut)

list-style-image : Utilise une image personnalisée comme puce :

list-style-image: url("images/puce.png");

Méga-propriété list-style : Combine plusieurs valeurs :

list-style: inside square;

Propriétés des tableaux

border-collapse : Définit le comportement des bordures :

• collapse : bordures du tableau et des cellules fusionnées
• separate : bordures séparées (par défaut)

empty-cells : Affichage des cellules vides :

• show : bordures affichées même pour cellules vides
• collapse : cellules vides masquées (par défaut)

caption-side : Position du titre du tableau (balise <caption>) :

• top : au-dessus du tableau
• bottom : en dessous
• left : à gauche
• right : à droite

Autres propriétés utiles

cursor : Définit l'apparence du curseur de souris :

• auto : curseur automatique (par défaut)
• default : curseur standard
• pointer : main (comme sur un lien)
• text : curseur pour texte
• wait : sablier
• help : point d'interrogation
• move : croix pour déplacement
• n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize : flèches directionnelles
• url : curseur personnalisé (fichiers .cur ou .ani)

cursor: url("images/curseur.cur");

Glossaire des termes clés

• font-family : Liste des polices à utiliser par ordre de préférence.
• font-size : Taille du texte, exprimée en pixels, pourcentages, em, etc.
• font-weight : Épaisseur du texte (normal, bold, bolder, lighter).
• font-style : Style du texte (normal, italic, oblique).
• text-decoration : Décoration du texte (underline, overline, line-through, none).
• text-align : Alignement horizontal du texte.
• vertical-align : Alignement vertical, surtout dans les tableaux.
• line-height : Hauteur de ligne.
• margin : Marges extérieures d'un élément.
• padding : Marges intérieures d'un élément.
• border : Bordure autour d'un élément.
• display : Type d'affichage d'un élément (block, inline, none, etc.).
• visibility : Visibilité d'un élément (visible, hidden).
• float : Flottement d'un élément à gauche ou à droite.
• position : Mode de positionnement (static, relative, absolute, fixed).
• z-index : Ordre d'affichage en cas de chevauchement.
• list-style-type : Type de puce ou numérotation des listes.
• border-collapse : Fusion ou séparation des bordures dans les tableaux.
• cursor : Apparence du curseur de souris.

Points clés à retenir

• Les propriétés CSS permettent de contrôler précisément l'apparence du texte, des boîtes, des listes et des tableaux.
• Les méga-propriétés comme font, margin, padding, border et list-style simplifient la déclaration en regroupant plusieurs valeurs.
• Le positionnement et l'affichage des éléments sont gérés par des propriétés comme display, position, float et z-index.
• La gestion des couleurs et des images de fond offre de nombreuses possibilités pour personnaliser l'aspect visuel.
• La compréhension des unités (px, %, em, ex) est essentielle pour un rendu adapté et flexible.