Ce cours décrit les principes de base du CSS en plusieurs parties claires et compréhensibles. Dans les prochains modules, vous découvrirez comment fonctionnent les principaux aspects du CSS et comment les utiliser efficacement dans vos projets. Utilisez le volet de menu à côté du logo "Apprendre le CSS" pour parcourir les modules.
Vous allez découvrir les principes de base du langage CSS, comme le modèle de zone, la cascade et la spécificité, les formats Flexbox, la grille et le z-index. Vous découvrirez également les fonctions, les types de couleurs, les dégradés, les propriétés logiques et l'héritage pour faire de vous un développeur frontend complet, prêt à gérer n'importe quelle interface utilisateur.
Chaque module propose de nombreuses démonstrations interactives et des auto-évaluations vous permettant de tester vos connaissances. En plus de l'apprentissage par la lecture et les démonstrations, chaque sujet est accompagné d'un épisode de podcast qui vous permet d'apprendre et de continuer à élargir vos connaissances.
Ce cours s'adresse aux développeurs CSS débutants et expérimentés. Vous pouvez parcourir la série du début à la fin pour mieux comprendre le langage CSS de haut en bas, ou l'utiliser comme référence pour des styles spécifiques. Si vous débutez dans le développement Web, consultez la section Apprendre le HTML pour apprendre à écrire des balises et à associer des feuilles de style.
Vous y découvrirez:
Modèle de boîte
Étant donné que tout ce qui s'affiche dans CSS correspond à une case, il est essentiel de comprendre le fonctionnement du modèle Box de CSS.
Sélecteurs
Pour appliquer le code CSS à un élément, vous devez le sélectionner. Avec les CSS, vous pouvez procéder de différentes manières, que vous pouvez découvrir dans ce module.
La cascade
Parfois, plusieurs règles CSS concurrentes peuvent s'appliquer à un élément. Découvrez comment le navigateur choisit les éléments à utiliser et comment contrôler cette sélection.
Spécificité
Ce module examine plus en détail la spécificité, un élément clé de la cascade.
Héritage
Certaines propriétés CSS héritent si vous ne spécifiez pas de valeur. Découvrez dans ce module comment cela fonctionne et comment en tirer le meilleur parti.
Couleur
Il existe plusieurs façons de spécifier une couleur en CSS. Ce module examine les valeurs de couleur les plus couramment utilisées.
Unités de dimensionnement
Découvrez comment dimensionner les éléments à l'aide de code CSS, en utilisant le support flexible du Web.
Disposition
Présentation des différentes méthodes de mise en page à votre disposition lorsque vous créez un composant ou une mise en page.
Flexbox
Flexbox est un mécanisme de mise en page conçu pour mettre en page des groupes d'éléments en une seule dimension. Découvrez comment l'utiliser dans ce module.
Grille
La mise en page en grille CSS fournit un système de mise en page en deux dimensions, qui contrôle la mise en page en lignes et en colonnes. Découvrez tout ce que la grille a à offrir.
Propriétés logiques
Les propriétés et valeurs logiques relatives au flux sont liées au flux du texte, et non à la forme physique de l'écran. Découvrez comment profiter de cette nouvelle approche des CSS.
Espacement
Découvrez comment choisir la meilleure méthode d'espacement des éléments pour la méthode de mise en page que vous utilisez et le composant que vous créez.
Pseudo-éléments
Un pseudo-élément revient à ajouter ou cibler un élément supplémentaire sans avoir à ajouter plus de code HTML. Ils ont différents rôles, que vous découvrirez dans ce module.
Pseudo-classes
Les pseudo-classes vous permettent d'appliquer le CSS en fonction des changements d'état. Cela signifie que votre conception peut réagir aux entrées utilisateur, telles qu'une adresse e-mail non valide.
Bordures
Une bordure fournit un cadre pour vos boîtes. Découvrez comment modifier la taille, le style et la couleur des bordures à l'aide de code CSS.
Ombres
Il existe plusieurs façons d'ajouter des ombres au texte et aux éléments en CSS. Apprenez à utiliser chaque option et les tâches pour lesquelles elles ont été conçues.
Mise au point
Comprenez l'importance de la concentration dans vos applications Web. Vous apprendrez à gérer le focus, et à vous assurer que le chemin d'accès à votre page fonctionne à la fois pour les personnes utilisant une souris et celles utilisant le clavier.
Contextes de z-index et d'empilement
Découvrez comment contrôler l'ordre dans lequel les éléments se superposent à l'aide du z-index et du contexte d'empilement.
Fonctions
CSS propose différentes fonctions intégrées. Découvrez certaines des fonctions clés et comment les utiliser.
Dégradés
Dans ce module, vous apprendrez à utiliser les différents types de dégradés disponibles en CSS. Les dégradés permettent de créer toute une gamme d'effets utiles, sans avoir besoin d'applications graphiques pour créer des images.
Animations
L'animation est un excellent moyen de mettre en évidence des éléments interactifs et d'ajouter de l'intérêt et du plaisir à vos conceptions. Découvrez comment ajouter et contrôler des effets d'animation avec CSS.
Filtres
Les filtres dans CSS vous permettent d'appliquer des effets que vous pensiez peut-être seulement possibles dans une application graphique. Dans ce module, vous allez découvrir les fonctionnalités disponibles.
Modes de fusion
Créez des effets de composition en mélangeant au moins deux calques et découvrez comment isoler une image avec un arrière-plan blanc dans ce module sur les modes de fusion.
Listes
Structurellement, une liste est composée d'un élément de conteneur de liste rempli d'éléments de liste. Dans ce module, vous allez apprendre à appliquer un style à toutes les parties d'une liste.
Les transitions
Découvrez comment définir des transitions entre les états d'un élément. Utilisez des transitions pour améliorer l'expérience utilisateur en fournissant un retour visuel pour les interactions utilisateur.
Dépassement
Le dépassement est la façon dont vous gérez le contenu qui ne correspond pas à une taille parent définie. Dans ce module, vous allez sortir des sentiers battus et apprendre à styliser les contenus qui débordent.
Arrière-plans
Découvrez comment appliquer un style à l'arrière-plan des zones de texte à l'aide de code CSS.
Texte et typographie
Découvrez comment appliquer un style au texte sur le Web.
Conclusion et prochaines étapes
Autres ressources pour vous aider à passer aux étapes suivantes.
Alors, êtes-vous prêt à apprendre le CSS ? C'est parti !