Les balises univercelles (la balise div et la balise span)

Allez, un petit rappelle sur un point important ne fera de mal à personne

Diférence entre balise block et balise inline

Et c'est cette différence qui va nous être utile par la suite.
Dans les chapitres précédents, nous avons parlé de "inline" et "blocks".
On parle des balises. On peut classer les balises HTML dans une des 2 catégories : inline et block ( "En ligne" et "Bloc" en français). Par exemple, <p></p> ? c'est une balise block.
Et <a></a> c'est une balise inline.
* Une balise de type "block" sur votre page web crée automatiquement un retour à la ligne avant et après la balise. Il suffit d'imaginer tout simplement un bloc. Il est possible de mettre un block à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
* inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit à la suite du texte précédent, sur la même ligne (on parle de balise "en ligne").
Exemples :
Quelques balises courantes.

Les balises universelles

Les éléments <span> et <div> servent à regrouper et structurer un document et seront souvent utilisés avec les attributs class et id.
Dans cette leçon, nous verrons de plus près l'utilisation des deux éléments <span> et <div>, et leur importance centrale pour CSS..
Il existe 2 balises génériques, l'une d'elle est inline, l'autre est block :
* <span></span> (inline) : on l'avons déjà utilisée.
La balise <span> ... </span> permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe ou même à une lettre au milieu d'un mot.
La balise <div> ... </div> permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes.
Code : HTML

	
<p class="rouge24"><span class="nom">François René</span>, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br />quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>

</p>
*<div></div> (block) : c'est aussi une balise qui n'a aucun sens, comme span, mai celle-là est de type block. Elle nous sera trés utile dans ce qui suivra pour créer le design de votre site. Un design, est une série de blocks qu'on dispose comme on veut.

Respectez la sémantique !

Les balises universelles sont "pratiques" dans certains cas, mais sauf si d'autres balises plus adaptées n' existent pas.
En HTML, on vous demande d'utiliser tant que possible des balises qui ont un sens : on appelle ça respecter la sémantique.
L'avantage c'est que le code aura une certaine "logique". Lorsque le robot viendra référencer votre site, il "comprendra" le sens des balises et cela pourra améliorer votre position dans le moteur de recherche.

La taille de blocks

Intéressons nous à la taille des blocks. Un block a des dimensions précises. Il a une largeur et une hauteur. Donc on dispose de 2 propriétés CSS :
* width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%).
* height : c'est la hauteur du block aussi exprimée en pixels (px), ou en pourcentage (%).

Par défaut, un block prend 100% de la largeur disponible.
Le CSS peut modifier la largeur des paragraphes.
Le CSS suivant dit : " que tous les paragraphes aient une largeur de 50%".
Code : CSS

	p{

	   width: 50%;
	   text-align: justify; /* Texte justifié pour mieux voir la largeur du block */
	}
 

Les pourcentages seront utiles pour créer un design qui s'adapte automatiquement à la résolution du visiteur.
Toutefois, on peut avoir besoin de blocks à une dimension précise en pixels :
Code : CSS

		P{
		   width: 200px;
		   text-align: justify;
		}
 

taille minimale ou maximale

Par fois c'est pratique d'avoir un block avec une . C'est le rôle des 4 propriétés CSS suivantes :
* min-width : largeur minimale
* min-height : hauteur minimale
* max-width : largeur maximale
* max-height : hauteur maximale
Attention cependant, ces propriétés ne fonctionnent pas sous IE 6 et fonctionnent partiellement sous IE 7. évitez de les utiliser tant qu'IE 6 est encore assez répandu.

Couper un block avec un overflow

Si vous avez un long paragraphe que vous vouliez qu'il ait 250px de large et 100px de haut.
Code : CSS

P{
width: 250px;
height: 100px;
text-align: justify;
}

Si le texte n'a pas assez de place, le block va s'agrandir de maniére à ce que tout soit visible. Si vous voulez "couper" votre paragraphe pour qu'il soit d'une dimension exacte de 250x100, vous allez devoir utiliser la propriété CSS overflow.
Les valeurs que peut prendre overflow sont les suivantes : * visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de maniére à ce que tout soit visible. C'est ce que nous venons de constater.
* hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
* scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la page.
* auto : mode "pilote automatique" :p. En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il en mettra si c'est nécessaire).
Avec ce CSS, nous allons pouvoir tester overflow :
Code : CSS

p /* Tous les paragraphes auront ces propriétés CSS */{
width: 250px;
height: 100px;
text-align: justify;
}
/* Et chacun des paragraphes aura en plus une valeur d'overflow différente */
.coupe{
overflow: hidden;
}
.barres_defilement{
overflow: scroll;
}
.auto{
overflow: auto;
}

En hidden, on ne peut pas voir tout le texte.
En scroll, le navigateur a mis des barres de défilement verticales et horizontales (alors qu'on n'a pas besoin de la barre horizontale).
En auto, le navigateur s'est dit "Bah tiens, j'ai pas besoin de la barre horizontale, je vais l'enlever".
En pratique, vous vous en doutez, on se sert plutôt de overflow: auto;
L'overflow vous sera trés utile si vous avez besoin de créer des "cadres" à l'intérieur de votre page web.
Il existe une ancienne balise HTML, <iframe>, qui donne à peu prés le même résultat. Toutefois, cette balise n'existe plus en HTML (elle est dépassée). Il vous faudra donc utiliser un overflow à la place.

Les bordures des blocks

Le CSS vous offre un large choix de bordures pour décorer votre page. Tellement large que si je vous en faisais la liste compléte vous sauriez étourdie.
Alors, pour aller à l'essentiel, j'ai décidé de vous montrer uniquement la grand-propriété qui regroupe tout. Vous vous souvenez d'une grand-propriété ? on en a vu une : pour le fond de votre page Web. Là, on va directement étudier la grand-propriété, car c'est le plus pratique.
La grand-propriété en question, c'est border. Elle permet d'indiquer quelle bordure on applique au block.

Comme toute grand-propriété , vous pouvez lui mettre plusieurs valeurs (ici, il y a 3 valeurs ). Vous n'êtes pas obligés de mettre toutes les valeurs et l'ordre dans lequel vous mettez ces valeurs n'a pas importance.
Comme je viens de vous le dire, pour border on peut utiliser jusqu'à 3 valeurs pour modifier l'apparence de la bordure :
* La largeur : indiquez la largeur de votre bordure.
Mettez une valeur en pixels (comme 2px), ou utilisez un des mots-clé suivants :
* thin : bordure fine
* medium : bordure moyenne
* thick : bordure épaisse

C'est le navigateur qui choisit le nombre de pixels qui correspond à thin, medium et thick.
* La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ("black", "red"...), soit une valeur hexadécimale (#FF0000), soit une valeur rgb (rgb(198, 212, 37))
* Le type de bordure : là, vous avez pas mal de choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc... Voici les différentes valeurs disponibles :
* none : pas de bordure (par défaut)
* solid : un trait simple.
* dotted : pointillés.
* dashed : tirets.
* double : bordure double.
* groove : en relief.
* ridge : effet 3D.
* inset : autre effet 3D (on a l'impression que le block forme un creux).
* outset : encore un autre effet 3D (on a l'impression que le block est surélevé).
Testons maintenant un peu tout ça
Code CSS:

Exemple :      Copier le code

p{
width: 300px; /* Tous les paragraphes font 300px */
text-align: justify; /* Tous les paragraphes sont justifiés */
}	 
.rien{
border: none;
}
.solid{
border: 2px solid black;
}
.dotted{
border: 2px dotted green;
}
.dashed{
border: 2px dashed red;
}
.double{
border: 4px double maroon;
}
.groove{
border: 4px groove teal;
}
.ridge{
border: 4px ridge fuchsia;
}
.inset{
border: 3px inset black;
}
.outset{
border: 3px outset black;
}

En haut, à droite, à gauche, en bas...

Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans probléme. Dans ce cas, vous devrez utiliser ces 4 propriétés :
* border-top : bordure en haut.
* border-bottom : bordure en bas.
* border-left : bordure à gauche.
* border-right : bordure à droite.

Ce sont aussi des grand-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté.
Voici quelques tests de bordures.
Code : CSS

Exemple :      Copier le code

p
{
width: 350px;
}
h2
{
border-bottom: 2px solid black;
}	 
.haut_bas
{
border-top: 1px dashed red;
border-bottom: 1px dashed red;
}
.points
{
border-top: 3px dotted blue;
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 3px dotted blue;
}
.trais_solide
{
border-left: 6px solid black;
border-right: 6px solid gray;
}

En particulier, vous remarquerez que j'ai appliqué une bordure en bas du titre. Ca n'a rien à voir avec un soulignement.
Je vous l'ai dit plus haut : par défaut, un block (comme le titre) prend 100% de la largeur disponible. En l'occurrence, le block prend la largeur de toute la fenêtre. Le fait de mettre une bordure en bas du titre révéle qu'il prend effectivement toute la largeur.

C'est une technique décorative assez "classe" que d'utiliser un border-bottom sur un titre. Le titre crée ainsi une ligne de séparation, ce qui rend votre page plus structurée. Au fait, si vous voulez appliquer la même bordure aux 4 côtés de votre block, ne vous fatiguez pas à utiliser ces propriétés. Utilisez plutôt border qui s'applique à tous les 4 côtés simultanément.
Ca marche aussi sur des balises inline !

Je vous ai dit que toutes les propriétés CSS que nous voyons dans ces chapitres s'appliquent le plus souvent aux blocks... Mais pas toujours. Par exemple, on peut utiliser border sur des balises inline.
Il y a une balise inline sur laquelle on utilise fréquemment border : c'est <img /> (pour les images). En effet, vous vous souvenez que si vous transformez une image en lien, elle se voit dotée d'une immonde bordure bleue :
Code : HTML

Exemple :      Copier le code

<p>

Vous voulez faire un teste alors mettez à la place de mon-image le nom d'une image que vous voulez et testez le code<br />

<a href="http://www.site.com"><img src="images/mon-image.jpg" alt="image"  title="Clique pour voir !" /></a>

</p>

Maintenant, avec la propriété border du CSS vous allez pouvoir éviter ce petit désagrément :
Code : CSS

a img /* Toutes les images contenues dans un lien */{
border: none; /* Pas de bordure */
}

A la place de "border:none", j'aurais pu utiliser "border:0px" ou encore "border:0" (ça marche aussi). D'ailleurs, la plupart des webmasters ont tendance à mettre "border:0" tout simplement parce que c'est le plus court.

Les marges : margin et padding

Si vous ne savez pas précisément comment fonctionnent les marges des blocks, vous serez bien embêtés lors de la création de votre design !
Tous les blocks possédent des marges. Ce qui est important, c'est de savoir qu'il existe 2 types de marges :
* Les marges intérieures
* Les marges extérieures
Regardez bien ce schéma :
Sur ce block, j'ai mis des couleur pour qu'on repére mieux ses bords.

L'espace entre le texte(représenté par la couleur bleu) et le bord du carré jaune est la marge intérieure (le petit trait rouge).
L'espace entre le bord du carré jaune et le prochain block le bord du carré blanc est la marge extérieure (le petit trait vert).

En CSS, on peut modifier la taille des marges avec les 2 propriétés suivantes :
* padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).
* margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.
Pour bien voir les marges, prenons 2 paragraphes auxquels je mets une bordure :
Ecrivez deux paragraphes dans votre page HTML et appliquez le code CSS suivant :
Code : CSS

p{
width: 400px;
border: 1px solid black;
text-align: justify;
}

Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding). En revanche, il y a une marge extérieure (margin). C'est cette marge qui fait que 2 paragraphes ne sont pas collés et qu'on a l'impression de "sauter une ligne".
Les marges par défaut ne sont pas les mêmes pour toutes les balises block. Essayez d'appliquer ce CSS à des balises <div> qui contiennent du texte par exemple, vous verrez que là il n'y a par défaut ni marge intérieure, ni marge extérieure !
Supposons que je veuille rajouter une marge intérieure de 12px aux paragraphes :
Code : CSS

p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px; /* Marge intérieure de 12px */
}

Maintenant, je veux que mes paragraphes soient plus espacés entre eux. Je rajoute la propriété margin pour demander à ce qu'il y ait 50px de marge entre 2 paragraphes :
Code : CSS

p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin: 50px; /* Marge extérieure de 50px */
}

Margin (comme padding d'ailleurs) s'applique aux 4 côtés du block.
Si vous voulez indiquer une marge en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises... Et vous allez voir que les créateurs du CSS se sont pas foulés, ça fonctionne comme pour border
En haut, à droite, à gauche, en bas... Et on recommence !

Ce qui serait bien, ce serait que vous reteniez les traductions suivantes en anglais :
* top : haut
* bottom : bas
* left : gauche
* right : droite

Comme ça, vous pouvez retrouver toutes les propriétés de tête.
Je vais quand même vous faire la liste des propriétés pour margin et padding, histoire que vous soyez sûrs que vous avez compris le principe.
Voici la liste pour margin :
* margin-top : marge extérieure en haut.
* margin-bottom : marge extérieure en bas.
* margin-left : marge extérieure à gauche.
* margin-right : marge extérieure à droite
Et la liste pour padding :
* padding-top : marge intérieure en haut.
* padding-bottom : marge intérieure en bas.
* padding-left : marge intérieure à gauche.
* padding-right : marge intérieure à droite.

Pour tester on va utiliser margin-bottom pour indiquer un espace en bas de chaque paragraphe, ce qui nous évitera d'avoir une marge à gauche comme tout à l'heure. Et aussi, je vais rajouter une marge à gauche pour le titre (h1) afin qu'il soit un peu décalé.
Code : CSS

p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin-bottom: 50px;
}
h1{
margin-left: 30px;
}

Centrer des blocks

Il est tout à fait possible de centrer des blocks, c'est même trés pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur.
Toutefois, et c'est trés important, cela ne fonctionne que si vous avez indiqué une largeur précise (width) au block. Si vous n'avez pas indiqué de largeur, le block ne sera pas centré !
Prenons le cas de nos petits paragraphes. On leur a déjà donné une largeur précise ; maintenant si on veut les centrer sur notre écran nous allons mettre la valeur "auto" à la propriété margin, comme ceci :
Code : CSS

p
{

width: 350px; /* On a indiqué une largeur (obligatoire) */

border: 1px solid black;

text-align: justify;

padding: 12px;

margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */

margin-bottom: 20px;

}

Ainsi, le navigateur centre automatiquement nos paragraphes. N'oubliez pas, je le répéte, que le margin:auto ne peut fonctionner que si vous avez indiqué une largeur précise pour votre block !
Transformer un inline en block (et vice-versa)
Nous allons apprendre ici à modifier les lois du CSS.
Les images ( <img /> ) sont des balises de type inline, et vous préféreriez que ce soient des blocks ?
Les titres ( <h1> ) sont de type block, et ça vous souhaitez que ça soient des balises inline ?
La propriété trés puissante CSS, display permet de faire çà.
Elle peut prendre les valeurs suivantes :
* block : la balise deviendra de type block.
* inline : la balise deviendra de type inline.

Elle peut prendre beaucoup d'autres valeurs mais je vous montre juste les 2 plus utilisées.
Pour transformer une balise inline en balise de type block taper :
display:block;
Exemple: je veux que TOUTES mes images soient de type block, j'écrirai donc ceci :
Code : CSS

img{
display: block;
}

Aprés quoi toutes vos images vont aller automatiquement à la ligne, comme le font les autres balises de type block.
On peut trés bien utiliser l'attribut "class" sur une balise pour qu'elle ait une présentation différente.
Par exemple :
Code : HTML

<img src="image.png" alt="Cette image est normale (type inline)" />
<img src="image.png" class="imageblock" alt="Cette image est modifiée (type block)" />	

Il faudra écrire le code CSS suivant pour que la deuxiéme image soit de type block :
Code CSS

.imageblock{
display: block;
}

Et l'inverse alors ? Pour transformer une balise de type block en balise de type inline c'est pareil, sauf qu'on utilise display:inline.

chapitre précédent    chapitre suivant