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 :

  • 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() : Valeur comprise dans une fourchette

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 :

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

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

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

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

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

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

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 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 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() : Définit un agrandissement ou une réduction de l'élément.