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 dans les chapitres de la rubrique "Concepts". Vous pouvez aussi accéder directement à :


Syntaxe de base d'une règle CSS

Le site est en cours de modification (ce n'est pas trop tôt) et c'est loin d'être terminé. Ne soyez donc pas étonné si certaines pages s'affichent encore avec l'ancienne présentation.

 

Index thématique des propriétés CSS.

Paramètres d'animation.

Paramétrage de l'arrière-plan.

Paramétrage des bordures.

Dimensions et marges des blocs

Césure et coupure des mots.

Couleurs.

Mise en page sur plusieurs colonnes.

Ajout de contenu.

Directives.

  • @charset : Jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Police de caractères personnalisée.
  • @import : Insertion d'une feuille de styles.
  • @keyframes : Définition d'une animation.
  • @media : Affectation de règles CSS en fonction du périphérique (smartphone, écran de bureau, etc...).
  • @page : Caractéristiques de la page, à l'impression.
  • @supports : Teste la compatibilité du navigateur.

Affichage/masquage d'éléments.

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

Gestion des flex box.

  • align-content : Disposition des lignes dans un flex box.
  • align-items : Disposition verticale des éléments dans un flex box.
  • align-self : Position verticale de l'un des enfants d'un flex box.
  • display : Type de l'élément et la façon de l'afficher.
  • flex : Dimensions, agrandissement ou rétrécissement des éléments dans un flex-box.
  • flex-basis : Dimension d'un élément contenu dans un flex-box.
  • flex-direction : Axe principal et secondaire d'un flex box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-grow : Possibilité de s'agrandir pour un élément contenu dans un flex-box.
  • flex-shrink : Possibilité de se comprimer, pour un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Alignement horizontal dans un flex-box.
  • order : Ordre des éléments dans un flex-box.

Gestion des éléments flottants (côte à côte).

  • clear : Gestion de l'habillage.
  • float : Positionnement relatif des éléments les uns par rapport aux autres.

Mise en forme des caractères.

Organisation d'une page sous forme d'une grille.

Manipulation des images.

  • clip : Partie visible de l'élément.
  • clip-path : Partie de l'élément à afficher, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.

Mise en forme des listes à puces ou à numéros.

Polices et langues non latines : arabes, chinoises, japonaises ou coréennes.

  • direction : Sens d'écriture.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • 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.

Gestion des blocs positionnés.

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

Paramétrage de l'impression.

  • @page : Caractéristiques de la page, à l'impression.
  • bleed :
  • marks : Traits de coupe et repères d'alignement.
  • orphans : Gestion des coupures en bas de page.
  • page-break-after : Gestion des sauts de page après.
  • page-break-before : Gestion des sauts de page avant.
  • page-break-inside : Gestion des sauts de page au milieu.
  • size : Dimensions et orientation des pages imprimées.
  • widows : Gestion des ruptures en haut de page.

Restitution sonore.

  • azimuth : Provenance horizontale du son.
  • cue : Résumé des deux propriétés Cue-Before et Cue-After.
  • 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.
  • pause-after : Temps de silence après.
  • pause-before : Temps de silence avant.
  • 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.

Mise en page des blocs de texte.

Transformations géométriques.

  • backface-visibility : Visibilité de la face arrière de l'élément (pendant sa rotation).
  • 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.

 

Un synthétiseur de couleurs est maintenant disponible sur le site :

  • Synthèses RVB et HSL.
  • Prend en charge l'opacité.
  • Donne les codes #RRVVBB, rgb(), rgba(), etc.

En poursuivant votre visite sur ce site, vous acceptez l’utilisation de cookies pour la réalisation de statistiques anonymes et l'affichage de publicités adaptées à vos centres d’intérêts.

Pour en savoir plus sur notre politique de confidentialité, reportez-vous à la page "vie privée" accessible depuis toutes les pages de ce site.

Lorsque vous aurez accepté les cookies, ce message ne vous sera plus représenté (sur ce même navigateur). Mais vous pouvez revenir sur votre choix à tout moment en affichant la page "Vie privée" accessible par le lien présenté en bas de toutes les pages de ce site.