L'insertion d'images

Insertion d'une image via html et CSS

Les techniques modernes de publication Web reposent désormais sur la séparation du fond de la forme.

Quand utiliser les CSS pour les images ?

Quand les images n'apportent rien au contenu, elle ne devrait pas être présentes dans la partie HTML de la page. De plus, si l'on souhaite changer l'apparence de la page, il est plus pratique de n'avoir que le fichier CSS à changer, plutôt que de devoir parcourir le ou les fichiers HTML à la recherche des images de présentation.
Les images CSS ne doivent pas remplacer des images significatives, propres au contenu.

Comment insèrer les images avec les CSS ?

Premièrement le fichier html doit contenir la ligne suivante entre les balises head :
	<!-- Chargement de la feuille de style -->
	<link rel="stylesheet" media="screen" type="text/css" title="Style primaire" href="style.css" />
	

Deuxièmement, l'image est insèré avec une simple balise div vide.
Code exemple:
	<!-- L'image est chargé à partir de la feuille de style par la classe logo_php 
				via une balise div -->
				
	<div class="logo_php"></div>
	
	/* le code CSS de la classe logo_php du fichier style.css */
	
	.logo_php
	{
		background-image: url(php.png);
		background-repeat: no-repeat;
		width: 220px;
		height: 116px;
		padding: 0;
		border: 1px dotted #5a69a6;
	}
	


Références :

Liens et outils utiles :