CSS : comprendre comment utiliser les balises DIV et SPAN facilement
Les balises DIV et SPAN en CSS

Les balises DIV, SPAN et id en CSS

Les balises html "DIV"

Les balises <div> et </div> sont utilisées pour appliquer un style à un contenu.
<div id="container"> 
Ici le code HTML relatif au contenu..
</div>
Selon mon code CSS, le contenu entre les deux balises div sera mis en forme, exemple :
#container{
  width: 80%;
  padding: 20px;
  border: 1px solid #666;
  background: #ffffff;
}

Et les balises <span></span> alors ?

L'utilisation des balises <span></span> permet aussi d'appliquer un style CSS de type gras ou italique, les div permettent plutot une mise en page

<span class="italic">Texte en italique</span> 
Dans ma feuille de style :
.italic{
  font-style: italic; 
}
Résultat :
Texte en italique
Maintenant, vous connaissez les bases, on continu ? >>>

Comprendre la notion de ID en CSS

Simple et utile : les ID

La déclaration d'un ID en CSS est identique à la notion de class à une execption près : On ne peut déclarer une seule fois un ID
<div id="container"> 
Ici le code HTML relatif au contenu..
</div>
Puis dans le fichier CSS :
#container{
  width: 80%;
  padding: 20px;
  border: 1px solid #666;
  background: #ffffff;
}
A savoir : On utilise souvent les ID pour définir la struture générale du site (le haut, contenu, navigation...) Remarque : On utilise un # pour les id et un "." pour les classes

Les balises DIV et SPAN pour déclarer votre CSS >>>

Les ID et Javascript

Il est possible d'utiliser les ID dans une div :

<div id="nom_de_ID"> .... </div>
et avoir un identifiant pour faire une action avec Javascript : Par exemple, faire une fonction Javascript qui cherche une div avec un id="cache" puis masque la div... par exemple !

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/debuter-en-css-les-balises-div-et-span.html Votes: 4 / 5 étoiles - 45 vote(s) et 10 commentaires