Propriétés CSS

 

CSS3 a introduit plusieurs nouvelles fonctionnalités et propriétés pour améliorer la conception Web et la flexibilité du style. Voici une liste de propriétés CSS3 organisées par catégories clés en fonction de leur fonctionnalité.

Typographie et Texte

• font-family : Spécifie la famille de polices à utiliser pour le texte.
• font-size : Définit la taille de la police.
• font-weight : Définit l'épaisseur de la police (normal, bold, etc.).
• text-align : Aligne le texte à gauche, au centre, ou à droite.
• text-decoration : Ajoute une décoration au texte (soulignement, barré, etc.).
• text-transform : Contrôle la mise en majuscules ou minuscules du texte.
• line-height : Définit l'espacement entre les lignes de texte.

Mise en Page et Dimensions

• width : Définit la largeur d'un élément.
• height : Définit la hauteur d'un élément.
• max-width : Définit la largeur maximale d'un élément.
• max-height : Définit la hauteur maximale d'un élément.
• min-width : Définit la largeur minimale d'un élément.
• min-height : Définit la hauteur minimale d'un élément.
• margin : Définit la marge externe autour de l'élément.
• padding : Définit l'espace interne entre le contenu et la bordure de l'élément.
• box-sizing : Détermine si les dimensions incluent la marge interne et la bordure.
• overflow : Contrôle ce qui se passe lorsque le contenu déborde de l'élément.
• display : Contrôle l'affichage de l'élément (inline, block, flex, grid, etc.).

Positionnement et Affichage

• position : Spécifie la méthode de positionnement de l'élément (relative, absolute, fixed, etc.).
• top, right, bottom, left : Définit la position d'un élément par rapport à son parent ou par rapport à l'écran.
• z-index : Détermine la superposition d'un élément par rapport aux autres.
• float : Permet de faire flotter un élément à gauche ou à droite de son conteneur.
• clear : Contrôle le comportement des éléments flottants voisins.
• visibility : Contrôle si un élément est visible ou caché sans le supprimer du flux.

Couleurs et Arrière-Plan

• color : Définit la couleur du texte.
• background-color : Définit la couleur de fond de l'élément.
• background-image : Applique une image de fond à un élément.
• background-repeat : Contrôle la répétition de l'image de fond.
• background-position : Spécifie la position de l'image de fond.
• background-size : Définit la taille de l'image de fond.
• opacity : Contrôle l'opacité de l'élément (transparence).

Bordures et Ombres

• border : Définit le style, la largeur et la couleur de la bordure.
• border-radius : Arrondit les coins de la bordure.
• box-shadow : Ajoute une ombre autour de l'élément.
• border-width : Spécifie l'épaisseur de la bordure.
• border-color : Définit la couleur de la bordure.

Flexbox et Grille

• display: flex : Active le modèle de boîte flexible pour l'élément conteneur.
• justify-content : Contrôle l'alignement horizontal des éléments flex.
• align-items : Contrôle l'alignement vertical des éléments flex.
• flex-direction : Spécifie la direction des éléments flex (ligne ou colonne).
• display: grid : Active le modèle de grille pour organiser les éléments en colonnes et lignes.
• grid-template-columns : Définit les colonnes de la grille.
• grid-template-rows : Définit les lignes de la grille.
• gap : Contrôle l'espace entre les éléments flex ou les éléments de la grille.

Transitions et Animations

• transition : Définit la transition entre deux états d'un élément.
• transition-duration : Spécifie la durée de la transition.
• animation : Applique une animation à un élément.
• animation-name : Définit le nom de l'animation utilisée.
• animation-duration : Définit la durée de l'animation.

Transformations

• transform : Applique une transformation à un élément (translation, rotation, etc.).
• transform-origin : Spécifie le point d'origine pour les transformations.
• scale : Agrandit ou réduit un élément.
• rotate : Fait pivoter un élément.
• translate : Déplace un élément horizontalement ou verticalement.

Propriétés Interactives et Apparence

• cursor : Spécifie le type de curseur lors du survol de l'élément.
• pointer-events : Détermine si l'élément peut répondre aux événements de la souris.