Comment styliser une image avec CSS
Comment styliser une image avec CSS. Utilisez CSS pour présenter les images de votre site Web de la meilleure façon possible. Dans cet article, vous apprendrez où placer une image et s'il faut ou non inclure des décorations telles que des bordures.
Flottant et centrant
Étape 1
Insérez votre image sur la page avec votre méthode habituelle. N'oubliez pas d'inclure un texte alternatif approprié pour l'image.
Étape 2
Pour que votre texte s'enroule autour de l'image de droite, comme sur la photo d'introduction de cet article, utilisez une règle CSS comme celle-ci :
img { flottant :gauche ; padding-right :1em ; }
La règle float:left déplace l'image vers la marge de gauche. La règle padding-right empêche le texte de se cogner contre le côté droit de l'image. Si une bordure était ajoutée à cette image, un rembourrage viendrait entre l'image et la bordure. Voir la section 2 pour travailler avec une image avec une bordure.
Étape 3
Pour que le texte s'habille à gauche, faites flotter l'image dans la marge de droite. Utilisez une règle comme celle-ci :
img { float :droite ; padding-gauche :1 em ; }
Étape 4
Pour centrer une image, vous devez d'abord transformer l'élément d'image normalement intégré en un élément de niveau bloc.
img { afficher :bloquer ; }
Étape 5
Ensuite, ajoutez des marges à gauche et à droite de l'image pour la centrer. La valeur appropriée pour les marges gauche et droite pour centrer quoi que ce soit est auto.
img { afficher :bloquer ; marge droite :automatique ; marge-gauche :auto ; }
Bordures et marges
Étape 1
Les bordures peuvent être utilisées pour créer un effet d'ombre portée ou l'apparence d'un cadre.
Pour créer une bordure épaisse en forme de cadre à l'aide du style de bordure rainurée, une règle comme celle-ci peut être utilisée :
img { flottant :gauche ; largeur de bordure :1 em ; style de bordure :rainure ; couleur de bordure :#000000 ; }
Les autres styles de bordure sont pleins, pointillés, pointillés, doubles, striés, en médaillon et en début. La largeur peut être exprimée en pixels, ems ou pourcentages.
Étape 2
Les bordures peuvent être appliquées sélectivement en haut, à droite, en bas et à gauche de l'image. Vous pouvez utiliser ces connaissances pour créer un effet comme une ombre portée.
Étape 3
En utilisant une bordure unie en 2 nuances de gris sur la bordure droite et inférieure uniquement, vous obtenez un effet d'ombre portée.
img { flottant :gauche ; border-right-style :solide ; border-right-color :#CCCCCC ; style border-bottom :solide ; border-bottom-color :#999999 ; }
Étape 4
La marge est à l'extérieur de la frontière. L'ajout d'une marge à droite et en bas de l'image empêchera le texte de s'y heurter.
img { flottant :gauche ; border-right-style :solide ; largeur de la bordure droite :8 px ; border-right-color :#CCCCCC ; style border-bottom :solide ; largeur de la bordure inférieure :8 px ; border-bottom-color :#999999 ; marge-droite :1 em ; marge-bas :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.