5.Balises et attributs : des nouveautés…

5.Balises et attributs : des nouveautés…

 

1.1 Les attributs class et id

1.1.1 Class

Les class vous permettent de définir un style personnalisé et réutilisable.

Voici en exemple de code html :

<p class= »important »>
Voici le texte qui sera important : What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

 

Voici le code css :

.important
{
color: #990000;
font-size: 18px;
}

1.1.2 id

Lui, il fonctionne exactement de la même manière que class, à un détail prêt : il ne peut être utilisé qu’une fois.

Quel intérêt ? cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises. D’ailleurs, nous avons déjà vu l’attribut id dans le chapitre sur les liens (pour réaliser des ancres). Il est très utilisé pour identifier la balise div.

Voici en exemple de code xhtml :

<div id= »menu »>
</div>

 

Voici le code css :

#conteneur

{
position: relative;
width: 760px;
margin: 0 auto;
background-color:#999999;
}

 

1.2 Les balises span et div

1.2.1 <span> </span> :

C’est une balise de type « Enligne ». Vous vous souvenez ce qu’est une balise « Enligne » ? C’est une balise qui se met à l’intérieur d’un paragraphe, comme <strong>, <em>, <q>. Cette balise s’utilise donc au milieu d’un paragraphe par exemple.

Voici en exemple de code html :

<p class= »important »>
Voici le texte qui sera important : <span class= « gras »>What is Lorem Ipsum?</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

 

Voici le code css :

.gras
{
color: #999999;
}

 

 

1.2.2 <div> </div> :

C’est une balise de type block. Comme <p>, <h1> etc… Elle crée un nouveau « bloc » dans la page, et provoque donc obligatoirement un retour à la ligne. C’est une balise très très utilisée pour faire un design et diviser l’espace dans une page web.

Voici en exemple de code html :

<div id= »menu »>
<ul class= »menu_haut »>
<li>&Eacute;ditorial</li>
<li>Chroniques</li>
<li>Dossier</li>
<li>Favoris</li>
</ul>
</div>

 

Voici le code css :

#menu

{
position:absolute;
left:0px;
top:67px;
width:720px;
height:49px;
background-color: #FF6600;
}

1.3 En résumé

 

Résumé des balise et attributs
balise Attribut code html code css
<div> id <div id= »menu »>
</div>

#menu

{

}

<span> class

<span class= »important »>

</span>

.important
{

}

<p> class

<p class= »important »>

</p>

.important
{

}