Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
CSS : Feuilles de style en cascade
CSS (pourCascading Style Sheets en anglais), soitfeuilles de style en cascade, est un langage defeuille de style utilisé pour décrire la présentation d'un document écrit enHTML ouXML (y compris les dialects XML que sontSVG,MathML, ouXHTML). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur papier, à l'oral ou sur d'autres médias.
CSS est l'un des langages principaux duWeb ouvert et a été standardisépar le W3C(angl.). Auparavant, le développement des différentes parties de la spécification CSS était réalisé de façon synchrone, permettant d'avoir une version pour l'ensemble de la recommandation. Vous avez donc pu entendre parler de CSS1, CSS2.1, voire CSS3. Toutefois, il n'y aura pas de version CSS4 ou d'autres version globale numérotée de CSS.
En effet, après CSS 2.1, la portée de la spécification a augmenté significativement et les avancées sur les différents modules CSS ont commencé à diverger, et il est alors devenu plus efficace dedévelopper et diffuser les recommandations par module(angl.). Plutôt que d'avoir une version globale de la spécification CSS, le W3C collecte désormais de façon périodique un instantané dudernier état stable de la spécification CSS(angl.) et de l'avancée de chaque module. Les modules de spécification CSS ont un numéro de version, appelé niveau, commele module de spécification CSS sur les couleurs de niveau 5(angl.).
Dans cet article
Tutoriels pour les débutant·e·s
Nosmodules de base pour apprendre le développement web proposent des tutoriels modernes et à jour couvrant les fondamentaux de CSS.
- Votre premier site : Mettre en forme le contenu
Cet article propose une brève présentation de ce qu'est CSS et de son utilisation, à destination des personnes totalement débutantes en développement web.
- Bases de la présentation CSS
Ce module fournit tous les fondamentaux de CSS dont vous aurez besoin pour commencer à apprendre la technologie efficacement, y compris la syntaxe, les fonctionnalités et les techniques.
- Présentation du texte en CSS
Ici, nous examinons les fondamentaux du texte en CSS, y compris la définition de la police, du gras, de l'italique, de l'espacement des lignes et des lettres, et des ombres portées. Nous terminons le module en examinant l'application de polices personnalisées à votre page, ainsi que le style des listes et des liens.
- Mise en page CSS
Ce module examine les flottants, le positionnement, d'autres outils de mise en page modernes, et la création de conceptions réactives qui s'adapteront à différents appareils, tailles d'écran et résolutions.
Référence
Laréférence CSS est une ressource exhaustive pour les développeur·euse·s web expérimenté·e·s, décrivant chaque propriété et concept de CSS, notamment :
- Lasyntaxe et les formes du langage
- Spécificité,héritage etcascade
- Sélecteurs CSS, dont lespseudo-éléments,imbrication,portée etparties d'ombre
- Règles CSS, dont lesrequêtes média et lesrequêtes de conteneur
- Le module desvaleurs et unités CSS, dont lestypes de données numériques,types de données textuelles etnotations fonctionnelles
- Lemodèle de boîte et lafusion des marges
- Bloc englobant
- Contextes desuperposition et deformatage de bloc
- Valeursinitiale,calculée,utilisée etréelle
- Lespropriétés raccourcies CSS
- Mise en page deboîte flexible,multi-colonnes etgrille
- Animations,transitions ettransformations
Recettes CSS
Lecookbook de mise en page CSS vise à rassembler des recettes pour les schémas de mise en page courants, utiles à implémenter sur vos sites. En plus de fournir du code à utiliser comme point de départ dans vos projets, ces recettes mettent en avant les différentes façons d'utiliser les spécifications de mise en page et les choix que vous pouvez faire en tant que développeur·euse.
Outils pour le développement CSS
- Vous pouvez utiliser leService de validation CSS du W3C(angl.) pour vérifier la validité de votre CSS. C'est un outil de débogage précieux.
- Lesoutils de développement de Firefox(angl.) vous permettent de visualiser et d'éditer le CSS en direct d'une page via les outilsInspecteur(angl.) etÉditeur de style(angl.).
- L'extension Web Developer pour Firefox vous permet de suivre et d'éditer le CSS en direct sur les sites surveillés.
Bugs meta
- Firefox :Bug Firefox 1323667