Les styles CSS - Tutoriel

Directives :

• @keyframes : Définition d'une animation.

Propriétés :

• animation : Paramètres d'animation.
• animation-delay : Temps d'attente avant le démarrage de l'animation.
• animation-direction : Sens de l'animation.
• animation-duration : Durée d'une animation.
• animation-fill-mode : Style de remplacement.
• animation-iteration-count : Nombre de répétition de l'animation.
• animation-name : Nom d'une animation.
• animation-play-state : État de l'animation.
• animation-timing-function : Progression de l'animation.
• backface-visibility : Visibilité de la face arrière.
• transition : Effet d'animation simple.
• transition-delay : Temps d'attente avant que la transition ne commence.
• transition-duration : Durée de la transition.
• transition-property : Propriété sur laquelle doit s'appliquer la transition.
• transition-timing-function : Progression de la transition.

Fonctions :

• cubic-bezier() : Fonction de Bézier.
• steps() : Définit une animation saccadée, pas par pas.

Propriétés :

• background : Arrière-plan.
• background-attachment : Mode de défilement de l'image d'arrière-plan.
• background-blend-mode : Interaction entre couleur et image d'arrière-plan.
• background-clip : Interaction entre arrière-plan et bordure.
• background-color : Couleur de l'arrière-plan.
• background-image : Image d'arrière-plan.
• background-origin : Position de l'image d'arrière-plan.
• background-position : Emplacement de l'image d'arrière-plan.
• background-repeat : Mode de répétition de l'image d'arrière-plan.
• background-size : Dimensionnement de l'image d'arrière-plan.
• isolation : Interaction entre les couches.
• mix-blend-mode : Mélange des couleurs entre contenu et arrière-plan.
• opacity : Opacité (ou transparence).

Fonctions :

• conic-gradient() : Dégradé conique.
• linear-gradient() : Détermine un dégradé de couleur linéaire.
• radial-gradient() : Détermine un dégradé de couleur radial (depuis le centre vers les bords).
• repeating-conic-gradient() : Dégradé conique.
• repeating-linear-gradient() : Détermine un dégradé de couleur linéaire avec répétition.
• repeating-radial-gradient() : Détermine un dégradé de couleur radial avec répétition.

Propriétés :

• border : Résumé des propriétés des bordures.
• border-collapse : Mode d'encadrement des cellules de tableau.
• border-color : Couleur des bordures.
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• border-image-outset : Débordement de l'image de bordure.
• border-image-repeat : Mode de répétition de l'image de bordure.
• border-image-slice : Découpage de l'image de bordure.
• border-image-source : L'image utilisée pour construire la bordure.
• border-image-width : La largeur de la bordure image.
• border-radius : Rayon des angles arrondis.
• border-style : Type de bordure.
• border-width : Epaisseur de la bordure.

Propriétés :

• box-sizing : Mode de calcul des dimensions de blocs.
• height : Hauteur de l'élément.
• margin : Résumé des quatre marges.
• margin-bottom : Marge du bas.
• margin-left : Marge de gauche.
• margin-right : Marge de droite.
• margin-top : Marge du haut.
• max-height : Hauteur maxi.
• max-width : Largeur maxi.
• min-height : Hauteur mini.
• min-width : Largeur mini.
• padding : Marges intérieures des quatre cotés.
• width : Largeur de l'élément.

Propriétés :

• hyphens : Césure des mots.
• overflow-wrap : Coupure des mots.
• white-space : Gestion des espaces multiples et des retours chariot.
• word-break : Coupure des mots longs.
• word-wrap : Coupure des mots.

Fonctions :

• attr() : Valeur d'un attribut.
• calc() : Calcule une valeur
• clamp() : Valeur entre deux limites.
• max() : Détermine la valeur la plus petite parmi une série de valeurs.
• min() : Valeur mini.
• minmax() : Renvoie une fourchette de valeurs.

Propriétés :

• background-color : Couleur de l'arrière-plan.
• border-color : Couleur des bordures.
• caret-color : Couleur du curseur de texte.
• color : Couleur du texte.
• column-rule-color : Couleur des traits de séparation de colonnes.
• outline-color : Couleur de l'encadrement.
• text-decoration-color : Couleur de la décoration.
• text-emphasis-color : Couleur de la mise en exergue.

Fonctions :

• hsl() : Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
• hsla() : Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
• hue-rotate() : Change les couleurs d'une image (rotation des teintes).
• hwb() : Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
• rgb() : Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
• rgba() : Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Propriétés :

• break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
• break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
• break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
• column-count : Nombre de colonnes.
• column-fill : Répartition du contenu entre les colonnes.
• column-gap : Espacement entre les colonnes.
• column-rule : Trait de séparation entre les colonnes.
• column-rule-color : Couleur des traits de séparation de colonnes.
• column-rule-style : Type de trait entre les colonnes.
• column-rule-width : Épaisseur du trait entre les colonnes.
• column-span : Chevauchement sur plusieurs colonnes.
• column-width : Largeur des colonnes.
• columns : Largeur et nombre de colonnes.
• orphans : Gestion des coupures en bas de page.
• widows : Gestion des ruptures en haut de page.

Directives :

• @charset : Jeu de caractères de la feuille de styles.
• @counter-style : Compteur personnalisé.

Propriétés :

• content : Contenu à ajouter.
• counter-increment : Incrément d'un compteur.
• counter-reset : Initialisation d'un compteur.
• hanging-punctuation : Ponctuation suspendue.
• quotes : Caractères utilisés pour les guillemets.

Fonctions :

• attr() : Valeur d'un attribut.
• counter() : Valeur d'un compteur.
• counters() : Valeur d'un compteur hiérarchique.

Propriétés :

• display : Type de l'élément et la façon de l'afficher.
• visibility : Affichage ou masquage.

Propriétés :

• align-content : Disposition verticale.
• align-items : Alignement vertical.
• align-self : Alignement vertical individuel.
• display : Type de l'élément et la façon de l'afficher.
• flex : Caractéristiques du flex-box.
• flex-basis : Dimension d'un élément d'un flex-box.
• flex-direction : Axes d'un flex-box.
• flex-flow : Disposition des éléments d'un flex-box.
• flex-grow : Agrandissement d'un élément d'un flex-box.
• flex-shrink : Réduction de la taille d'un élément de flex-box.
• flex-wrap : Retours à la ligne dans un flex-box.
• justify-content : Positionnement dans un flex-box ou une grille.
• order : Ordre des éléments dans un flex-box.

Propriétés :

• clear : Côtoiement des éléments.
• clip-path : Partie visible de l'élément.
• float : Positionnement relatif des éléments les uns par rapport aux autres.
• shape-outside : Définit le contournement du texte pour un élément flottant.

Directives :

• @charset : Jeu de caractères de la feuille de styles.
• @font-face : Police de caractères téléchargeable.

Propriétés :

• font : Police de caractères.
• font-display : Consigne concernant le chargement des polices.
• font-family : Police de caractères.
• font-feature-settings : Fonctionnalités spécifiques aux polices OTF, WOFF, etc.
• font-kerning : Crénage des caractères.
• font-size : Taille des caractères.
• font-size-adjust : Coefficient d'aspect de la police.
• font-stretch : Étirement des caractères.
• font-style : Italique.
• font-synthesis : Simulation des styles manquants.
• font-variant : Attributs typographiques évolués.
• font-variant-alternates : Substitution de caractères.
• font-variant-caps : Capitalisation des caractères.
• font-variant-east-asian : Typographie spécifique aux caractères CJK.
• font-variant-ligatures : Ligature des caractères.
• font-variant-numeric : Mode d'affichage des nombres.
• font-weight : Graisse des caractères.
• text-decoration : Soulignement ou rayure du texte.
• text-decoration-color : Couleur de la décoration.
• text-decoration-line : Type de décoration : souligné, barré, etc.
• text-decoration-style : Type de trait de décoration.
• text-shadow : Ombrage du texte.
• text-transform : Casse du texte.

Propriétés :

• align-content : Disposition verticale.
• align-items : Alignement vertical.
• align-self : Alignement vertical individuel.
• grid : Caractéristiques d'une grille.
• grid-area : Positionne un élément dans une zone nommée de la grille.
• grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
• grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
• grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
• grid-column : Numéro de colonne(s) d'un élément dans une grille.
• grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
• grid-column-gap : Espacement des colonnes.
• grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
• grid-gap : Espacements dans une grille.
• grid-row : Numéro des lignes d'un élément dans une grille.
• grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
• grid-row-gap : Espacement des lignes.
• grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
• grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
• grid-template-areas : Définition des zones dans une grille
• grid-template-columns : Colonnes d'une grille.
• grid-template-rows : Lignes d'une grille.
• justify-content : Positionnement dans un flex-box ou une grille.
• justify-items : Disposition horizontale dans un flex-box ou une grille.
• justify-self : Position horizontale d'un élément dans un flex-box ou une grille.

Fonctions :

• minmax() : Renvoie une fourchette de valeurs.
• repeat() : Répète une valeur un certain nombre de fois.

Propriétés :

• clip : Partie visible de l'élément.
• clip-path : Partie visible de l'élément.
• filter : Filtre graphique.
• image-rendering : Mode de mise à l'échelle des images.

Fonctions :

• blur() : Effet de flou.
• brightness() : Ajuste la luminosité d'une image.
• contrast() : Contraste.
• drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
• grayscale() : Convertit une image en nuances de gris (noir et blanc).
• hue-rotate() : Change les couleurs d'une image (rotation des teintes).
• image() : Désigne ou définit une image.
• inset() : Définit un rectangle, utilisable pour découper une image.
• invert() : Inverse les couleurs d'une image.
• opacity() : Détermine le degré de transparence d'un élément.
• saturate() : Définit la saturation des couleurs d'une image.
• sepia() : Applique un effet sépia à une image.

Directives :

• @counter-style : Compteur personnalisé.

Propriétés :

• list-style : Formatage des listes.
• list-style-image : Image remplaçant les puces.
• list-style-position : Emplacement des puces ou numéros.
• list-style-type : Type de puces ou de numérotation.
• marker-offset : Position des puces ou numéros.

Fonctions :

• counter() : Valeur d'un compteur.
• counters() : Valeur d'un compteur hiérarchique.
• symbols() : Définit tous les paramètres d'une numérotation

Propriétés :

• mask : Résumé des paramètres de masquage.
• mask-clip : Zone concernée par le masquage.
• mask-image : Image ou le fichier SVG qui sera utilisé comme masque
• mask-mode : Mode de masquage (couche alpha, luminance...)
• mask-origin : Référence pour le positionnement du masque.
• mask-position : Position du masque.
• mask-repeat : Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.
• mask-size : Dimensions du masque.

Propriétés :

• direction : Sens d'écriture.
• font-variant-east-asian : Typographie spécifique aux caractères CJK.
• line-break : Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
• unicode-bidi : Gestion des possibilités d'écriture bidirectionnelle de Unicode.
• writing-mode : Sens et direction d'écriture (horizontale ou verticale).

Propriétés :

• border : Résumé des propriétés des bordures.
• outline : Résumé des caractérisitques d'encadrement.
• outline-color : Couleur de l'encadrement.
• outline-offset : Espacement entre contour et élément.
• outline-style : Type de trait de l'encadrement (simple, double, pointillé...).
• outline-width : Epaisseur du trait d'encadrement.

Propriétés :

• bottom : Position du bas de l'élément.
• left : Position du bord gauche de l'élément.
• position : Mode de positionnement.
• right : Position du bord droit.
• top : Position du haut de l'élément.
• z-index : Plan d'affichage (dessus, dessous).

Directives :

• @page : Page imprimée.

Propriétés :

• bleed :
• break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
• break-before : Interdit ou impose des sauts (page, colonne...) avant l'élément.
• break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
• color-adjust : Optimisation des couleurs.
• marks : Traits de coupe et repères d'alignement.
• orphans : Gestion des coupures en bas de page.
• page-break-after : Saut de page après l'élément.
• page-break-before : Saut de page avant l'élément.
• page-break-inside : Sauts de page au milieu de l'élément.
• size : Dimensions et orientation des pages imprimées.
• widows : Gestion des ruptures en haut de page.

Propriétés :

• clip-path : Partie visible de l'élément.
• shape-outside : Définit le contournement du texte pour un élément flottant.

Fonctions :

• circle() : Cercle.
• drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
• ellipse() : Définit une ellipse.
• inset() : Définit un rectangle, utilisable pour découper une image.
• polygon() : Définit une forme.
• rect() : Définit un rectangle.

Propriétés :

• azimuth : Provenance horizontale du son.
• cue : Son avant et après.
• cue-after : Séquence sonore à jouer après la lecture d'un élément.
• cue-before : Séquence sonore à jouer avant la lecture d'un élément.
• elevation : Provenance verticale du son.
• pause : Silence avant et après un élément.
• pitch : Timbre de voix.
• pitch-range : Variation de timbre de la voix.
• play-during : Son à restituer en fond.
• richness : Portée de la voix.
• speak : Mode de restitution des textes.
• speak-header : Mode de restitution des titres de tableaux.
• speak-numeral : Mode de restitution des nombres.
• speak-punctuation : Mode de restitution de la ponctuation.
• speech-rate : Débit de parole en mots par minutes.
• stress : Inflexion de la voix (calme, précipitée...).
• voice-family : Type de voix (homme, femme, enfant...).
• volume : Volume sonore.

Propriétés :

• border-collapse : Mode d'encadrement des cellules de tableau.
• border-spacing : Espacement entre cellules.
• caption-side : Emplacement du titre pour un tableau.
• empty-cells : Mode d'affichage des cellules vides.
• table-layout : Largeur des colonnes.
• vertical-align : Alignement vertical.

Propriétés :

• direction : Sens d'écriture.
• hyphens : Césure des mots.
• letter-spacing : Espacement des lettres.
• line-height : Hauteur de ligne.
• text-align : Alignement du texte.
• text-align-last : Alignement dernière ligne.
• text-emphasis-color : Couleur de la mise en exergue.
• text-emphasis-position : Position des caractères de mise en exergue.
• text-emphasis-style : Style de mise en exergue.
• text-indent : Indentation.
• text-justify : Méthode utilisée pour justifier le texte.
• text-overflow : Indication de débordement du texte.
• unicode-bidi : Gestion des possibilités d'écriture bidirectionnelle de Unicode.
• word-spacing : Espacement des mots.
• writing-mode : Sens et direction d'écriture (horizontale ou verticale).

Propriétés :

• backface-visibility : Visibilité de la face arrière.
• perspective : Effet de perspective appliqué à un élément ayant subi une transformation 3D.
• perspective-origin : Position de l'observateur dans le cas d'une déformation 3D avec perspective.
• transform : Applique une transformation géométrique.
• transform-origin : Point d'origine pour certaines transformations.
• transform-style : Rendu des éléments soumis à une transformation 3D.

Fonctions :

• matrix() : Applique une transformation composite à un élément (translations, rotations...)
• matrix3d() : Applique une série de transformations 3D à un élément.
• perspective() : Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
• rotate() : Rotation 2d.
• rotate3d() : Rotation 3d.
• rotateX() : Rotation autour de l'axe horizontal.
• rotateY() : Rotation autour de l'axe vertical.
• rotateZ() : Rotation 2d.
• scale() : Définit un agrandissement ou une réduction de l'élément.