Comment styliser une image avec CSS
Utilisez CSS pour présenter les images de votre site web de la meilleure façon. Dans cet article, vous apprendrez où placer une image et si vous devez inclure des décorations comme des bordures.
Flottement et centrage
Étape 1
Insérez votre image sur la page avec votre méthode habituelle. N'oubliez pas d'inclure un texte alternatif (alt) approprié pour l'image.
Étape 2
Pour faire envelopper le texte autour de l'image à droite (comme la photo d'introduction de cet article), utilisez une règle CSS comme :
img { float: left; padding-right: 1em; }
La règle float:left déplace l'image vers la marge gauche. padding-right empêche le texte de coller au bord droit de l'image. Si une bordure est ajoutée, le padding se place entre l'image et la bordure. Voir Section 2 pour une image avec bordure.
Étape 3
Pour faire envelopper le texte à gauche, flottez l'image sur la marge droite :
img { float: right; padding-left: 1em; }
Étape 4
Pour centrer une image, transformez d'abord l'élément image (normalement inline) en élément de niveau bloc :
img { display: block; }
Étape 5
Ajoutez des marges gauche et droite pour la centrer. La valeur correcte pour centrer quoi que ce soit est auto :
img { display: block; margin-right: auto; margin-left: auto; }
Bordures et marges
Étape 1
Les bordures peuvent créer un effet d'ombre portée ou l'apparence d'un cadre. Pour une bordure épaisse style cadre avec le style groove :
img { float: left; border-width: 1em; border-style: groove; border-color: #000000; }
Autres styles de bordure : solid, dotted, dashed, double, ridge, inset, outset. Largeur en pixels, ems, ou pourcentages.
Étape 2
Les bordures s'appliquent sélectivement aux côtés haut, droit, bas, gauche. Utilisez ceci pour créer un effet d'ombre portée.
Étape 3
Avec une bordure solide en deux nuances de gris sur les bordures droite et bas seulement, vous obtenez un effet d'ombre portée :
img { float: left; border-right-style: solid; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-color: #999999; }
Étape 4
La marge est en dehors de la bordure. Ajouter de la marge à droite et en bas empêche le texte de buter contre :
img { float: left; border-right-style: solid; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #999999; margin-right: 1em; margin-bottom: 1em; }
Astuce
Si vous avez des images dans plusieurs divisions (div) d'une page, utilisez des sélecteurs descendants pour les styliser individuellement. Sélecteurs possibles : #content img, #sidebar img, #feature img.