Bonjour et bienvenue dans les styles de boîtes CSS — dans le précédent module, nous avons examiné le contenu des boîtes ; dans ce module, nous verrons le style de la boîte elle-même, en manipulant couleur de fond et images, bordures et autres parties de la boîte. Nous aborderons également d'autres sujets, de la création de tableaux HTML de bel aspect à l'application d'effets avancés tels que les filtres et les modes de fusion.

Prérequis

Avant de commencer ce module, vous devez être déjà familiarisé avec les bases du HTML, traitées dans le module Introduction à HTML, et être à l'aise avec les fondamentaux des CSS, tels que vus dans Introduction à CSS.

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.

Guides

Cet article vous enseignera tout ce dont vous avez besoin pour appliquer un style aux boîtes CSS de votre page de façon intéressante et utile.

Récapitulatif du modèle de boîte
Nous avons vu les bases du modèle de boîte CSS dans notre module Introduction à CSS. Cet article en est un récapitulatif ; il apporte quelques détails supplémentaires sur le sujet.
Arrières-plans
Avec les CSS, il y a beaucoup de possibilité pour donner un style à l'arrière-plan du contenu. Nous avons déjà examiné quelques utilisations simples, telles que couleurs et images d'arrière-plan de base ; dans cet article, nous allons évoquer tout le sujet et regarder quelques fonctionnalités avancées, comme images de fond multiples et dégradés de couleurs.
Encadrements
Encore une fois, nous avons déjà examiné un peu les encadrements des utilisations simples comme la définition des couleurs et des styles de bordure. Ici, nous vous donnerons une idée de ce qui est disponible, comme les coins arrondis et les images de bordure.
Styles de tableaux
Donner un style à un tableau HTML n'est pas le métier le plus prestigieux du monde, mais parfois nous devons le faire. Cet article fournit un guide pour que les tableaux HTML aient bel aspect, avec les outils détaillés dans les articles précédents.
Effets de boîte avancés
Cet article fait office de boîte à outils, offrant une introduction à certaines des fonctionnalités avancées disponibles pour les styles de boîte qui ne rentrent pas dans les autres catégories ci-dessus — comme les ombres, les modes de fusion et les filtres.

Évaluations

Les exercices suivants testeront votre compréhension des techniques de style de boîtes étudiées dans les guides ci-avant.

Création de papier à en-tête fantaisie
Si vous voulez faire une bonne impression, écrire une lettre sur un joli papier à en-tête peut être un très bon début. Dans cette auto-évaluation, nous vous mettons au défi de créer un modèle en ligne pour réaliser un tel papier.
Une boîte à l'air cool
Ici vous obtiendrez une meilleure pratique pour la création de boîtes rafraîchissantes, en essayant d'en créer une qui soit attrayante.

Voir aussi

Créer de belles boîtes
Quelques idées supplémentaires pour styler des boîtes.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab, loella16, tonybengue
Dernière mise à jour par : Dralyab,