Comment définir le style d'image avec CSS

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire l'apparence et le formatage des pages Web. CSS peut définir différents styles pour les éléments des pages Web via des feuilles de style, y compris les images. Dans cet article, nous apprendrons comment styliser les images en utilisant CSS.

1. Ajouter des images

Avant d'apprendre à définir des styles d'image, vous devez d'abord comprendre comment ajouter des images à une page Web. Le moyen le plus simple d’ajouter une image à une page Web consiste à utiliser la balise img du HTML. A l'aide de la balise img, vous pouvez préciser l'URL (adresse Web) de l'image :

où le "src" (source) L'attribut spécifie l'URL de l'image. Des URL relatives ou absolues peuvent être utilisées. Si les images sont dans le même répertoire, vous pouvez utiliser une URL relative :

Cela précisera que le fichier image nommé "image.jpg" est dans le même répertoire . Si les fichiers image se trouvent dans des répertoires différents, vous pouvez utiliser des chemins relatifs comme celui-ci :

Dans cet exemple, ".." signifie Remonter un répertoire, puis allez dans le répertoire "images" et recherchez le fichier nommé "image.jpg".

2. Définir la taille de l'image

La définition de la taille de l'image est l'un des styles les plus couramment utilisés en CSS. La taille de l'image peut être spécifiée à l'aide des propriétés "largeur" ​​et "hauteur". Ces propriétés acceptent les pixels (px), les pourcentages et d'autres unités de longueur comme valeurs.

Par exemple, pour définir la taille de l'image sur 200 pixels de largeur et 100 pixels de hauteur, vous pouvez utiliser le CSS suivant :

img {
width: 200px;
height: 100px; ou les attributs de hauteur en pourcentage. Par exemple, si vous souhaitez définir la taille d'une image à 50 % de son élément contenant, vous pouvez utiliser le CSS suivant :

img {

width : 50% ;

height :

}

Vous pouvez Pour ce faire, utilisez un seul attribut « largeur » pour définir la largeur de l'image et calculer automatiquement la hauteur afin de conserver le rapport hauteur/largeur. Par exemple, le CSS suivant définit la largeur de l'image à 300 pixels :

img {

width: 300px;

}

3 Alignement et flottement

Vous pouvez également utiliser CSS pour définir la position et l'alignement de l'image. . Vous pouvez contrôler l'espace blanc autour de l'image à l'aide des propriétés "margin" et "padding".

Par exemple, le CSS suivant aligne l'image à gauche et ajoute 10 pixels de marge à gauche et au-dessus de l'image :

img {

display: block;

float: left;

margin: 10px 0 0 10px;
}

Dans cet exemple, l'attribut « display » définit l'image comme un élément de niveau bloc afin qu'elle s'affiche en dessous d'un autre contenu. La propriété "float" et la valeur "left" font flotter l'image vers la gauche. Enfin, les valeurs de l'attribut "margin" sont en haut, à droite, en bas et à gauche dans l'ordre, en spécifiant une marge supérieure et gauche de 10 pixels.

Vous pouvez également aligner les images à l'aide de l'attribut "text-align". Par exemple, le CSS suivant aligne l'image au centre :

img {

display: block;

margin: 0 auto;

text-align: center;
}

Dans cet exemple, la valeur de la "margin" L'attribut est "0 auto" signifie centrer l'image horizontalement. Enfin, la propriété "text-align" est définie sur "center" pour centrer l'image verticalement.

4. Coins et bordures arrondis

Un autre style d'image courant est celui des coins et des bordures arrondis. Vous pouvez définir le rayon du coin de la bordure à l'aide de la propriété "border-radius". Par exemple, le CSS suivant définit l'image pour avoir une bordure arrondie de 50 px :

img {

border-radius: 50px;

}

Vous pouvez également utiliser l'attribut "border" pour définir la largeur, le style et la couleur de la bordure de l’image. Par exemple, le CSS suivant définit l'image sur 3 pixels de large avec une bordure noire :

img {

border: 3px solid black;

}

Vous pouvez utiliser "border-top", "border-right", "border -bottom" et l'attribut "border-left" définissent respectivement des bordures différentes.

Résumé

En utilisant CSS, vous pouvez facilement styliser les images dans les pages Web. La taille de l'image, la position, l'alignement, les coins arrondis et les bordures peuvent être définis. Ces styles peuvent être appliqués à un ou plusieurs éléments d'image d'un type spécifique via des sélecteurs de règles CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!