Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les styles CSS - Tutoriel

CSS

CSS = Cascading Style Sheets. Soit en français les feuilles de styles en cascade.

CSS est un langage de mise en forme qui peut s'appliquer à de nombreux types de documents mais son utilisation la plus courante est la mise en forme des pages HTML ou des documents XML.

HTML comporte lui aussi des possibilités de mise en forme mais, depuis la version HTML5, la mise en forme directe par HTML est devenue obsolète. Il est en effet souhaitable de séparer les données et la mise en forme :
    - HTML véhicule les informations proprement dites,
    - CSS s'occupe de leur mise en forme.

CSS est un langage déclaratif facile à appréhender. Sa seule difficulté est de comporter beaucoup de mots clés. Ce site est là pour vous aider à retrouver les syntaxes.

Où commencer ?

Pour découvrir les principes de base du CSS, commencez votre lecture par les tutoriels. Vous pouvez aussi accéder directement à :

  • La référence des selectors, ou des pseudo-classes et pseudo-elements.
  • La liste des unités CSS.
  • La liste des couleurs CSS.
  • La liste des propriétés et de leurs valeurs, ainsi que la liste des fonctions sont accessibles à partir de la table des matières à gauche de l'écran ou du menu "hamburger" sur un mobile.
  • Enfin, un index thématique est affiché ci-dessous.

 

Index thématique des termes CSS.

Animation

Directives :

Propriétés :

Fonctions :

Arrière-plan

Propriétés :

Fonctions :

Bordures

Propriétés :

Dimensions et marges des blocs

Propriétés :

Césure et coupure des mots

Propriétés :

Fonctions de calcul

Fonctions :

  • abs() : Valeur absolue.
  • acos() : Calcule l'arc-cosinus.
  • asin() : Calcule l'arc-sinus.
  • atan() : Calcule l'arc-tangente d'un angle.
  • atan2() : Calcule l'arc-tangente.
  • attr() : Valeur d'un attribut.
  • calc() : Calcule une valeur
  • clamp() : Valeur entre deux limites.
  • cos() : Cosinus d'un angle
  • exp() : Exponentielle d'un nombre.
  • hypot() : Calcule l'hypoténuse.
  • log() : Logarithme d'un nombre.
  • max() : Détermine la valeur la plus petite parmi une série de valeurs.
  • min() : Valeur mini.
  • minmax() : Valeur comprise dans une fourchette
  • mod() : Reste de la division.
  • pow() : Mises à l'exposant.
  • rem() : Reste de la division.
  • round() : Arrondi d'un nombre.
  • sign() : Signe d'un nombre.
  • sin() : Sinus d'un angle.
  • sqrt() : Racine carrée.
  • tan() : Tangente d'un angle.
  • var() : Valeur d'une variable.

Structuration du code

Directives :

  • @apply : Groupe de propriétés.
  • @import : Insertion de styles.
  • @media : Contraintes sur le périphérique.
  • @supports : Test de compatibilité.

Couleurs

Propriétés :

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.

Colonnes multiples

Propriétés :

Ajout de contenu

Directives :

Propriétés :

Fonctions :

Affichage/masquage d'éléments

Propriétés :

Flex-box

Propriétés :

Éléments flottants (côte à côte)

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.

Polices et caractères

Directives :

Propriétés :

Grilles

Propriétés :

Fonctions :

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

Images et filtres

Propriétés :

Fonctions :

  • blur() : Effet de flou.
  • brightness() : Luminosité d'un élément.
  • 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.

Listes à puces ou à numéros

Directives :

Propriétés :

Fonctions :

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

Masquage

Propriétés :

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

Langues non latines : arabes, chinoises, japonaises ou coréennes

Propriétés :

Contours

Propriétés :

Blocs positionnés

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).

Impression

Directives :

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 : Gestion des sauts de colonne ou de page.
  • color-adjust : Optimisation des couleurs.
  • marks : Traits de coupe et repères d'alignement.
  • orphans : Coupures en bas de page ou de colonne.
  • 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 : Rupture en haute de page ou de colonne.

Formes géométriques

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 :

Restitution sonore

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 pendant la restitution sonore
  • pause-after : Silence après la lecture de l'élément (restitution sonore)
  • pause-before : Silence avant la lecture de l'élément (restitution sonore)
  • 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 : Lecture de l'élément ou non
  • 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.
  • volume : Volume sonore.

Propriétés spécifiques aux tableaux

Propriétés :

Blocs de texte

Propriétés :

Transformations géométriques

Propriétés :

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() : Réduction ou agrandissement.
  • scale3d() : Définit une mise à l'échelle en 3D.
  • scaleX() : Définit une mise à l'échelle suivant l'axe X.
  • scaleY() : Définit une mise à l'échelle suivant l'axe Y.
  • scaleZ() : Définit une mise à l'échelle suivant l'axe Z.
  • skew() : Définit une inclinaison de l'élément suivant les axes X et/ou Y.
  • skewX() : Définit une inclinaison de l'élément suivant l'axe X.
  • skewY() : Définit une inclinaison de l'élément suivant l'axe Y.
  • translate() : Translation dans le plan 2D.
  • translate3d() : Translation en 3D
  • translateX() : Translation horizontale.
  • translateY() : Translation verticale.
  • translateZ() : Translation en 3d.

Fonctionnalités spécifiques à SVG.

Propriétés :