Résoudre les problèmes CSS courants
Cette page regroupe des questions, réponses et autres ressources du site MDN qui peuvent vous aider à résoudre les problèmes CSS courants.
Mettre en forme des boîtes
- Comment ajouter une ombre portée à un élément ?
-
Les ombres peuvent être ajoutées aux boîtes avec la propriété
box-shadow. Ce tutoriel explique son fonctionnement et donne un exemple. - Comment remplir une boîte avec une image sans la déformer ?
-
La propriété
object-fitpropose différentes façons d'adapter une image à une boîte ayant un rapport d'aspect différent, et ce tutoriel explique comment les utiliser. - Quelles méthodes peut-on utiliser pour mettre en forme des boîtes ?
-
Un aperçu des différentes propriétés utiles pour mettre en forme des boîtes en CSS.
- Comment rendre des éléments semi-transparents ?
-
La propriété
opacityet les couleurs avec canal alpha peuvent être utilisées ; découvrez laquelle utiliser selon le cas.
Leçons et guides sur la mise en forme des boîtes
CSS et texte
- Comment ajouter une ombre portée au texte ?
-
Les ombres peuvent être ajoutées au texte avec la propriété
text-shadow. Ce tutoriel explique son fonctionnement et donne un exemple. - Comment mettre en surbrillance la première ligne d'un paragraphe ?
-
Découvrez comment cibler la première ligne d'un paragraphe avec le pseudo-élément
::first-line. - Comment mettre en surbrillance le premier paragraphe d'un article ?
-
Découvrez comment cibler le premier paragraphe avec la pseudo-classe
:first-child. - Comment mettre en surbrillance un paragraphe uniquement s'il suit un titre ?
-
Les combinateurs permettent de cibler précisément des éléments selon leur position dans le document ; ce tutoriel explique comment les utiliser pour appliquer du CSS à un paragraphe uniquement s'il suit immédiatement un titre.
Leçons et guides sur la mise en forme du texte
Mise en page CSS
- Comment centrer un élément ?
-
Centrer un élément dans une boîte horizontalement et verticalement était autrefois complexe, mais flexbox rend cela simple.
Guides de mise en page
- Utiliser le flexbox CSS
- Utiliser les colonnes multiples en CSS
- Utiliser la grille CSS
- Utiliser le contenu généré en CSS
Note : Nous avons un livre de recettes dédié aux solutions de mise en page CSS, avec des exemples complets et des explications sur les tâches de mise en page courantes. Consultez aussi Exemples pratiques de positionnement, qui montre comment utiliser le positionnement pour créer un onglet d'informations ou un panneau coulissant caché.