CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3

Mise en page et style CSS des éléments

Retour à la formation
Chapitre 50 Leçon 4
Précédent
Suivant

Cette leçon porte sur la mise en page CSS et la personnalisation des listes, ainsi que l'ajout de bordures.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous abordons comment utiliser des classes CSS pour positionner des éléments côte à côte. Nous corrigons un problème de positionnement en ajoutant la classe appropriée avec une largeur définie. Ensuite, nous nous concentrons sur la section des ingrédients d'une maquette, où nous retirons les puces des listes et le padding, tout en ajoutant des bordures basses entre les éléments de la liste. Enfin, chaque élément de la liste reçoit un padding pour garantir un bon espacement par rapport aux bordures, apportant ainsi une meilleure organisation visuelle.

Ces étapes permettent non seulement d'illustrer l'utilisation de classes CSS pour le positionnement, mais aussi d'incorporer des bordures et des styles de liste via CSS. Cela inclut l'annulation des marges et des styles de liste par défaut, pour améliorer l'esthétique et la lisibilité des éléments.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de comprendre le positionnement CSS, apprendre à personnaliser les listes et ajouter des bordures aux éléments.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est nécessaire d'avoir une bonne connaissance des bases du CSS et de la structure HTML.

Métiers concernés

Les compétences abordées dans ce sujet sont particulièrement utiles pour les développeurs front-end, web designers, et intégrateurs web.

Alternatives et ressources

Des alternatives aux approches présentées incluent Flexbox pour le positionnement et Grid Layout pour la mise en page des éléments CSS.

Questions & Réponses

Les éléments ne se positionnent pas correctement côte à côte parce que la classe CSS 'bloc deux tiers' n'était pas créée, ce qui est corrigé en définissant une largeur appropriée.
Les puces de liste et le padding sont retirés, et une bordure basse est ajoutée à chaque élément de liste pour améliorer son apparence et organisation.
Un padding de 5 pixels à droite et à gauche, et de 15 pixels en haut et en bas, est ajouté aux éléments de la liste pour espacer les bordures et améliorer l'apparence visuelle.