Un élément de niveau bloc dans un document HTML (une page Web, par exemple) apparaît dans un ordre séquentiel. Pour modifier l'ordre afin de rendre la page plus attrayante ou pour en améliorer l'utilité, vous devez envelopper les blocs, y compris les images, afin que le texte de cette page coule autour de celle-ci.
En termes Web, cet effet est appelé "flottant" l'image. Ce style est obtenu avec la propriété CSS pour "float". Cette propriété permet au texte de circuler autour de l'image alignée à gauche sur son côté droit. Ou autour d'une image alignée à droite sur son côté gauche.
Commencez avec HTML
La première chose à faire est de travailler avec du HTML. Pour notre exemple, nous allons écrire un paragraphe de texte et ajouter une image au début du paragraphe (avant le texte, mais après l’ouverture).
étiquette). Voici à quoi ressemble ce balisage HTML:
Le texte du paragraphe va ici. Dans cet exemple, nous avons l'image d'une photo à la tête, de sorte que ce texte concerne probablement la personne à qui s'adresse le portrait.
Par défaut, notre page Web s'afficherait avec l'image au-dessus du texte, car les images sont des éléments HTML au niveau des blocs. Cela signifie que le navigateur affiche les sauts de ligne avant et après l'élément d'image par défaut. Nous allons changer ce look par défaut en nous tournant vers CSS. Cependant, nous allons d’abord ajouter une valeur de classe à notre élément d’image. Cette classe agira comme un "crochet" que nous utiliserons plus tard dans notre CSS.
Le texte du paragraphe va ici. Dans cet exemple, nous avons l'image d'une photo à la tête, de sorte que ce texte concerne probablement la personne à qui s'adresse le portrait.
Notez que cette classe de "gauche" ne fait rien du tout par elle-même. Pour que nous puissions obtenir le style souhaité, nous devons ensuite utiliser CSS.
Styles CSS
Avec notre code HTML en place (y compris notre attribut de classe "gauche"), nous pouvons maintenant nous tourner vers CSS. Nous voudrions ajouter une règle à notre feuille de style qui flotterait cette image et ajouterait également un peu de remplissage à côté pour que le texte qui entourera finalement l'image ne soit pas trop serré contre elle. Voici le CSS que vous pouvez écrire:
.la gauche { float: gauche; remplissage: 0 20px 20px 0;}
Ce style fait flotter cette image vers la gauche et ajoute un peu de rembourrage (en utilisant un raccourci CSS) à la droite et au bas de l'image. Si vous avez examiné la page contenant ce code HTML dans un navigateur, l'image serait maintenant alignée à gauche et le texte du paragraphe s'afficherait à sa droite, avec un espacement approprié entre les deux. Notez que la valeur de classe "left" que nous avons utilisée est arbitraire. Nous aurions pu l'appeler n'importe quoi parce que le terme "gauche" ne fait rien par lui-même. Quel que soit le terme que vous utilisez, le code HTML doit avoir un attribut de classe qui fonctionne avec un style CSS réel qui dicte les modifications visuelles que vous souhaitez apporter. Cette approche consistant à attribuer un attribut de classe à l’élément d’image, puis à utiliser un style CSS général qui le fait flotter, n’est qu’une des façons de réaliser cet aspect "image alignée à gauche". Vous pouvez également retirer la valeur de classe de l'image et la styler avec CSS en écrivant un sélecteur plus spécifique. Par exemple, regardons un exemple où cette image est à l'intérieur d'une division avec une valeur de classe "contenu principal". Pour styler cette image, vous pouvez écrire ce CSS: .main-content img { float: gauche; remplissage: 0 20px 20px 0;}
Dans ce scénario, notre image serait alignée à gauche, avec le texte flottant autour d'elle comme auparavant, mais il n'était pas nécessaire d'ajouter une valeur de classe supplémentaire à notre balisage. Faire cela à l'échelle peut aider à créer un fichier HTML plus petit, ce qui sera plus facile à gérer et peut également aider à améliorer les performances. Enfin, vous pouvez même ajouter les styles directement dans votre balise HTML, comme ceci:
Cette méthode s'appelle "styles inline". Il n'est pas conseillé car il combine le style d'un élément avec son balisage structurel. Les meilleures pratiques du Web exigent que le style et la structure d’une page restent séparés. Cette séparation est particulièrement utile lorsque votre page doit modifier sa présentation et rechercher des tailles d'écran et des dispositifs différents avec un site Web réactif. Si le style de la page est étroitement lié au code HTML, il sera beaucoup plus difficile de créer des requêtes multimédia qui modifieront l'apparence de votre site en fonction des besoins pour ces différents écrans. Moyens alternatifs pour atteindre ces styles
Le texte du paragraphe va ici. Dans cet exemple, nous avons l'image d'une photo à la tête, de sorte que ce texte concerne probablement la personne pour laquelle le portrait est destiné. Évitez les styles en ligne
Le texte du paragraphe va ici. Dans cet exemple, nous avons l'image d'une photo à la tête, de sorte que ce texte concerne probablement la personne à qui s'adresse le portrait.
