Conception & Réalisation de sites Web

Introduction

Les feuilles de style, qu'est ce que c'est ?

Ce sont des instructions de mise en page qui vont nous permettre :

  • d'améliorer la présentation de nos pages web
  • de travailler de manière plus pratique et plus logique

Feuilles de style ou CSS, quelle différence ?

Aucune, il s'agit de la même chose !
CSS est l'accronyme de Cascading Style Sheets qui se traduit ainsi :
Feuilles de style en cascade.

Les feuilles de style, pourquoi faire ?

Les lacunes du HTML

En HTML, pour mettre en forme un titre nous utilisons la balise <font>.

Par exemple :

<h2><font size="+1" color="#333366" face="Verdana, Arial, sans-serif">Mon titre ici</font></h2>

Ce qui donne le résultat suivant :

Mon titre ici

Imaginons que nous ayons 6 titres dans la même page, avec la même présentation, nous répéterions 6 fois notre balise <font> avec tous ses attributs. Ceci donnerai un code bavard et nous obligerai à de multiples modifications le jour ou l'on souhaite modifier la couleur de nos titres.

La solution, séparer le code et la présentation avec les CSS

Avec les feuilles de style, nous allons regrouper les informations de présentation une fois pour toute pour notre page.

Nous allons pour cela utiliser une balise <style> que nous placerons dans les entêtes de notre page web, c'est à dire quelque part entre les balises <head> et </head>.

Nos instructions de style seront placées entre les balises <style> et </style>.

Exemple :

<style type="text/css">
h2 { color:#333366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px;}
</style>

Et notre code HTML sera alors réduit :

<h2>Mon titre ici</h2>

Ce qui donne le même résultat :

Mon titre ici

Des styles similaires pour plusieurs pages

Il est également possible deregrouper les informations de présentation dans un fichier à part qui pourra être appelé par plusieurs pages.

Ceci est même vivement conseillé afin de garder une cohérence visuelle d'une page à l'autre.

Nous allons pour cela utiliser une balise <link> que nous placerons dans les entêtes de notre page web et pour laquelle nous préciserons le chemin vers la feuille de style.

Ce fichier feuille de style sera un simple fichier texte contenant nos instructions, que l'on renommera avec l'extension «.css»

Exemple, je créé un fichier "style.css" avec les instructions suivantes :

h1 { color:#000066; font-family:Verdana, Arial, sans-serif; font-size:18px;}
h2 { color:#333366; font-family:Verdana, Arial, sans-serif; font-size:14px;}

Et dans ma page, j'appelle ce fichier ainsi :

<link rel="stylesheet" href="style.css" type="text/css" />

La syntaxe des CSS

Pour définir un style dans notre CSS, nous précisons l'élément que nous modifions, puis, entre 2 accolades, nous précisons les propriétés modifiées.

Exemple :

mon_element { liste des propriétés ici }

Nous verrons ci-desous que mon_element peut être le nom d'une balise, le nom d'une classe, ou un identifiant.

Pour chaque propriété, nous saisisons toujours le nom de la propriété, suivi du signe «:» (2 points), suivi de la valeur de la propriété. Nous terminons chaque propriétés avec le signe «;» (point-virgule).

Exemple :

mon_element { ma_propriété:valeur_de_ma_propriété; ma_propriété_2:valeur_de_ma_propriété_2; }

La disposition des sauts de lignes et des espaces autour des ":" ou des ";" n'a pas d'importance. On aurait le même résultat avec l'exemple suivant :

mon_element {
   ma_propriété : valeur_de_ma_propriété;
   ma_propriété_2 : valeur_de_ma_propriété_2;
}

Une liste des propriétés et les valeurs possibles sont définies ici : mettre en forme un texte, mettre en forme un bloc.

L'exemple concret suivant rédéfinit l'élément img pour supprimer ses bordures (border) et rédéfinit l'élément body pour supprimer ses marges (margin) et ses enrobements (padding):

img {border:0}
body {margin:0; padding:0}

3 façons de définir des styles

1) Re-définir une balise

Pour cela, nous utiliserons simplement le nom de la balise dont nous souhaitons modifier l'apparence.

Par exemple, nous modifions la couleur du texte (color) et la couleur de fond (background-color) de nos titres h3 ainsi :

h3 { color:#fff; background-color:red;}

2) Définir une classe

Si l'on veut utiliser plusieurs fois la même balise dans notre page Web avec des affichages différents, nous utiliserons des classes. Cela revient à donner un nom de style à un élément HTML et a préciser les propriétés de style pour ce nom dans notre feuille de style.

Cela se fait donc en 2 temps :

  1. Dans notre page HTML, nous allons ajouter un attribut class="nom_de_ma_classe" aux élements que nous souhaitons modifier
  2. Dans notre feuille de style, nous allons définir cette classe ainsi :
    .nom_de_ma_classe { liste des propriétés ici }.

Le "." (point) avant le nom de la classe est très important. Il permet aux navigateur de distinguer la définition d'une classe, de la définition d'une balise HTML.

Exemple, dans ma feuille de style, je mets le code suivant :

.introduction { color:#336699; font-weight:bold; }

Et dans ma page HTML, je mets le code suivant :

<p class="introduction">Mon texte d'introduction ici.</p>
<p>Un paragraphe normal ici.</p>

Ce qui donne dans votre navigateur :

Mon texte d'introduction ici.

Un paragraphe normal ici.

Vous pouvez choisir le nom de classe que vous souhaitez.
Pensez cependant :

  • A ne pas y mettre d'espace ni de caractères spéciaux autre que le tiret
  • A utiliser des noms de classes logiques, qui vous permettent de vous y retrouver !

3) Définir un id, identifiant unique

Les id s'utilisent de la même manière que les classes. On ajoute un attribut à notre balise HTML et on définit les styles pour cet id dans la CSS :

  1. Dans notre page HTML, nous allons ajouter un attribut id="nom_de_mon_id" à l'élement que nous souhaitons modifier
  2. Dans notre feuille de style, nous allons définir ses propriétés ainsi :
    #nom_de_mon_id { liste des propriétés ici }.

Le "#" (dièze) avant le nom de l'id est très important. Il permet aux navigateur de distinguer la définition d'un id de celle d'une classe ou d'une balise HTML.

La principale différence avec les classes est qu'un id doit être unique dans une page web ! Par exemple, si vous avez 2 fois id="haut" dans votre page, votre code ne sera pas valide. On préfera donc utiliser un id à une classe pour un élément dont on sait qu'il sera une seule fois dans la page (par exemple, le pied de page)

Exemple, dans ma feuille de style, je mets le code suivant :

#pieddepage { text-align:center; font-size:10px; }

Et dans ma page HTML, je mets le code suivant :

<div id="pieddepage">
   <p>Mon pied de page ici.</p>
</div>

Ce qui donne dans votre navigateur :

Mon pied de page ici.

Nous allons découvrir ici les principales propriétés de styles qui nous permettent de mettre en forme de manière complète nos textes.

color / exemple : color:#33FF66;
Modifie la couleur du texte
Valeurs :Résultat dans le navigateur :
nom_de_couleur

Texte de la couleur "nom_de_couleur" (ex : red, yellow, green...)

#code_couleur

Texte de la couleur correspondant au code héxadécimal "code_couleur" (ex : #ff0000)

 

<div style="color:#ff0000;">Mon texte ici</div>

Mon texte ici
font-family / exemple : font-family:"Times New Roman", Times, serif;
Modifie la police de caractère du texte. On peut mettre plusieurs polices séparées par des virgules, dans ce cas le navigateur affiche la première qui est disponible sur la machine du visiteur.
Valeurs :Résultat dans le navigateur :
Arial, Helvetica, sans-serif

Texte en Arial

<div style="font-family:Arial, Helvetica, sans-serif;">Un exemple ici !</div>

Un exemple ici !
Times New Roman, Times, serif

Texte en Times new Roman

<div style="font-family:Times New Roman, Times, serif;">Un exemple ici !</div>

Un exemple ici !
Courier New, Courier, monospace

Texte en Courrier New

<div style="font-family:Courier New, Courier, monospace;">Un exemple ici !</div>

Un exemple ici !
Georgia, Times New Roman, Times, serif

Texte en Georgia

<div style="font-family:Georgia, Times New Roman, Times, serif;">Un exemple ici !</div>

Un exemple ici !
Verdana, Arial, Helvetica, sans-serif

Texte en Verdana

<div style="font-family:Verdana, Arial, Helvetica, sans-serif;">Un exemple ici !</div>

Un exemple ici !
Geneva, Arial, Helvetica, sans-serif

Texte en Georgia

<div style="font-family:Geneva, Arial, Helvetica, sans-serif;">Un exemple ici !</div>

Un exemple ici !
font-size / exemple : font-size:16px;
Modifie la taille du texte
Valeurs :Résultat dans le navigateur :
Xpx

Texte en X pixels, X étant un entier (ex : 20px).

 

<div style="font-size:20px;">Mon texte ici</div>

Mon texte ici
font-style / exemple : font-style:oblique;
Modifie l'inclinaison du texte
Valeurs :Résultat dans le navigateur :
oblique

Texte en oblique

<div style="font-style:oblique;">Un exemple ici !</div>

Un exemple ici !
italic

Texte en italique

<div style="font-style:italic;">Un exemple ici !</div>

Un exemple ici !
normal

Texte normal (droit)

<div style="font-style:normal;">Un exemple ici !</div>

Un exemple ici !
font-weight / exemple : font-weight:bold;
Modifie l'épaisseur du texte
Valeurs :Résultat dans le navigateur :
bold

Texte en gras

<div style="font-weight:bold;">Un exemple ici !</div>

Un exemple ici !
normal

Texte normal (non-gras)

<div style="font-weight:normal;">Un exemple ici !</div>

Un exemple ici !
letter-spacing / exemple : letter-spacing:3px;
Modifie l'espace entre les lettres
Valeurs :Résultat dans le navigateur :
Xpx

Texte avec des lettres espacées de X pixels, X étant un entier

normal

Texte normal (sans espace supplémentaire entre les lettres)

 

<div style="letter-spacing:5px;">Mon texte ici</div>

Mon texte ici
line-height / exemple : line-height:15px;
Modifie l'espace entre les lignes
Valeurs :Résultat dans le navigateur :
Xpx

Texte avec des lignes espacées de X pixel souhaité, X étant un entier

normal

Texte normal (sans espace supplémentaire entre les lignes)

 

<div style="line-height:26px;">Mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici</div>

Mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici mon texte ici
text-align / exemple : text-align:center;
Modifie l'alignement horizontal du texte
Valeurs :Résultat dans le navigateur :
left

Texte aligné à gauche

center

Texte centré

right

Texte aligné à droite

justify

Texte justifié

text-decoration / exemple : text-decoration:underline;
Modifie la «decoration» du texte
Valeurs :Résultat dans le navigateur :
underline

Texte souligné

<div style="text-decoration:underline;">Un exemple ici !</div>

Un exemple ici !
line-through

Texte barré

<div style="text-decoration:line-through;">Un exemple ici !</div>

Un exemple ici !
blink

Texte clignotant

<div style="text-decoration:blink;">Un exemple ici !</div>

Un exemple ici !
none

Texte normal (non souligné, non barré, non clignotant)

<div style="text-decoration:none;">Un exemple ici !</div>

Un exemple ici !
text-transform / exemple : text-transform:uppercase;
Modifie la casse du texte
Valeurs :Résultat dans le navigateur :
uppercase

Texte en lettres capitales

<div style="text-transform:uppercase;">Un exemple ici !</div>

Un exemple ici !
lowercase

Texte en lettres minuscules

<div style="text-transform:lowercase;">Un exemple ici !</div>

Un exemple ici !
capitalize

Texte avec la première lettre de chaque en majuscule.

<div style="text-transform:capitalize;">Un exemple ici !</div>

Un exemple ici !
none

Texte normal (non changé)

<div style="text-transform:none;">Un exemple ici !</div>

Un exemple ici !
text-align / exemple : text-align:center;
Modifie l'alignement horizontal du texte
Valeurs :Résultat dans le navigateur :
left

Texte aligné à gauche

<div style="text-align:left;">Un exemple ici !</div>

Un exemple ici !
center

Texte centré

<div style="text-align:center;">Un exemple ici !</div>

Un exemple ici !
right

Texte aligné à droite

<div style="text-align:right;">Un exemple ici !</div>

Un exemple ici !
justify

Texte justifié

<div style="text-align:justify;">Un exemple ici !</div>

Un exemple ici !
vertical-align / exemple : vertical-align:top;
Modifie l'alignement vertical du texte
Valeurs :Résultat dans le navigateur :
top

Texte aligné en haut

middle

Texte centré verticalement

bottom

Texte aligné en bas

 

<table border="1"><tr>
<td height="40" style="vertical-align:top;">A</td>
<td height="50" style="vertical-align:middle;">A</td>
<td height="50" style="vertical-align:bottom;">C</td>
</tr></table>

A A C
list-style / exemple : list-style:square;
Modifie l'aspect d'une puce. Utilisé pour les balises ul, ol et li.
Valeurs :Résultat dans le navigateur :
circle

Puce ronde filaire

disc

Puce ronde et pleine

square

Puce carrée

decimal

Puce numérique

decimal-leading-zero

Puce numérique avec un 0 avant les chiffres inférieur à zéro.

upper-alpha

Puce alphabétique en majuscules

upper-roman

Puce en caractère romain en majuscules

none

Masque la puce

...

 

<ul>
<li style="list-style:circle;">Item</li>
<li style="list-style:disc;">Item</li>
<li style="list-style:square;">Item</li>
<li style="list-style:decimal;">Item</li>
<li style="list-style:decimal-leading-zero;">Item</li>
<li style="list-style:upper-roman;">Item</li>
<li style="list-style:upper-alpha;">Item</li>
<li style="list-style:none;">Item</li>
</ul>

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

Nous allons découvrir ici les principales propriétés de styles qui nous permettent de mettre en forme de manière trés précise nos éléments HTML.

border / exemple : border:2px solid #ff0000;
Ajoute une bordure de chaque côté du bloc. On précise à chaque fois une épaisseur de trait, un style de trait et une couleur de trait.
Valeurs :Résultat dans le navigateur :
1px solid #ff0000

Bordure rouge continue de pixels

<div style="border:1px solid #ff0000;">Un exemple ici !</div>

Un exemple ici !
2px dotted #00ff00

Bordure verte en pointillés de 2 pixels

<div style="border:2px dotted #00ff00;">Un exemple ici !</div>

Un exemple ici !
3px double #0000ff

Bordure bleue double de 3 pixels

<div style="border:3px double #0000ff;">Un exemple ici !</div>

Un exemple ici !
1px dashed #000000

Bordure noire en tirets de 1 pixels

<div style="border:1px dashed #000000;">Un exemple ici !</div>

Un exemple ici !
border-top / exemple : border-top:2px solid #ff0000;
Ajoute une bordure en haut du bloc.
Valeurs :Résultat dans le navigateur :
1px solid #ff0000

Bordure rouge continue de pixels

<div style="border-top:1px solid #ff0000;">Un exemple ici !</div>

Un exemple ici !
2px dotted #00ff00

Bordure verte en pointillés de 2 pixels

<div style="border-top:2px dotted #00ff00;">Un exemple ici !</div>

Un exemple ici !
3px double #0000ff

Bordure bleue double de 3 pixels

<div style="border-top:3px double #0000ff;">Un exemple ici !</div>

Un exemple ici !
1px dashed #000000

Bordure noire en tirets de 1 pixels

<div style="border-top:1px dashed #000000;">Un exemple ici !</div>

Un exemple ici !
border-bottom / exemple : border-bottom:2px solid #ff0000;
Ajoute une bordure en bas du bloc.
Valeurs :Résultat dans le navigateur :
1px solid #ff0000

Bordure rouge continue de pixels

<div style="border-bottom:1px solid #ff0000;">Un exemple ici !</div>

Un exemple ici !
2px dotted #00ff00

Bordure verte en pointillés de 2 pixels

<div style="border-bottom:2px dotted #00ff00;">Un exemple ici !</div>

Un exemple ici !
3px double #0000ff

Bordure bleue double de 3 pixels

<div style="border-bottom:3px double #0000ff;">Un exemple ici !</div>

Un exemple ici !
1px dashed #000000

Bordure noire en tirets de 1 pixels

<div style="border-bottom:1px dashed #000000;">Un exemple ici !</div>

Un exemple ici !
border-left / exemple : border-left:2px solid #ff0000;
Ajoute une bordure à gauche du bloc.
Valeurs :Résultat dans le navigateur :
1px solid #ff0000

Bordure rouge continue de pixels

<div style="border-left:1px solid #ff0000;">Un exemple ici !</div>

Un exemple ici !
2px dotted #00ff00

Bordure verte en pointillés de 2 pixels

<div style="border-left:2px dotted #00ff00;">Un exemple ici !</div>

Un exemple ici !
3px double #0000ff

Bordure bleue double de 3 pixels

<div style="border-left:3px double #0000ff;">Un exemple ici !</div>

Un exemple ici !
1px dashed #000000

Bordure noire en tirets de 1 pixels

<div style="border-left:1px dashed #000000;">Un exemple ici !</div>

Un exemple ici !
border-right / exemple : border-right:2px solid #ff0000;
Ajoute une bordure à droite du bloc.
Valeurs :Résultat dans le navigateur :
1px solid #ff0000

Bordure rouge continue de pixels

<div style="border-right:1px solid #ff0000;">Un exemple ici !</div>

Un exemple ici !
2px dotted #00ff00

Bordure verte en pointillés de 2 pixels

<div style="border-right:2px dotted #00ff00;">Un exemple ici !</div>

Un exemple ici !
3px double #0000ff

Bordure bleue double de 3 pixels

<div style="border-right:3px double #0000ff;">Un exemple ici !</div>

Un exemple ici !
1px dashed #000000

Bordure noire en tirets de 1 pixels

<div style="border-right:1px dashed #000000;">Un exemple ici !</div>

Un exemple ici !
background-color / exemple : background-color:#6699cc;
Ajoute une couleur de fond au bloc.
Valeurs :Résultat dans le navigateur :
#6699cc

Fond de bloc de la couleur correspond au code hexadécimal 6699cc

<div style="background-color:#6699cc;">Un exemple ici !</div>

Un exemple ici !
cyan

Fond de bloc en cyan

<div style="background-color:cyan;">Un exemple ici !</div>

Un exemple ici !
background-image / exemple : background-image:url(i/cours/bg.gif);;
Ajoute une image au fond du bloc.
Valeurs :Résultat dans le navigateur :
url(chemin_vers_mon_image)

Affiche une image. Si background-repeat n'est pas précisé, l'image sera répété afin de tapisser entièrement le bloc.

 

<div style="background-image:url(i/cours/bg.gif);">Mon texte ici !<br /><br /><br /><br /></div>

Mon texte ici !



background-repeat / exemple : background-repeat:repeat-x;
Précise la manière dont l'image de fond va se répéter.
Valeurs :Résultat dans le navigateur :
repeat-x

L'image sera répétée en x (horizontalement)

repeat-y

L'image sera répétée en y (verticalement)

repeat

L'image sera répétée en x (horizontalement) et en y (verticalement)

no-repeat

L'image ne sera pas répétée

 

<div style="background-color:#FF33CC; background-image:url(i/cours/bg.gif); background-repeat:no-repeat">Mon texte ici !<br /><br /><br /><br /></div>
<br />
<div style="background-color:#FF33CC; background-image:url(i/cours/bg.gif); background-repeat:repeat-x">Mon texte ici !<br /><br /><br /><br /></div>

Mon texte ici !




Mon texte ici !



background-position / exemple : background-position:left bottom;
Précise la position de l'image de fond du bloc. On précise d'abord la position horizontale, puis la position verticale.
Valeurs :Résultat dans le navigateur :
left top

Image de fond positionnée à gauche et en haut du bloc

center center

Image de fond positionnée au centre du bloc (horizontalement et verticalement)

right bottom

Image de fond positionnée à droite et en bas du bloc

...

 

<div style="background-color:#FF33CC; background-image:url(i/cours/bg.gif); background-position:center center; background-repeat:no-repeat">Mon texte ici !<br /><br /><br /><br /></div>
<br />
<div style="background-color:#FF33CC; background-image:url(i/cours/bg.gif); background-position:bottom right; background-repeat:no-repeat">Mon texte ici !<br /><br /><br /><br /></div>

Mon texte ici !




Mon texte ici !



width / exemple : width:250px;
Précise la largeur du bloc en pixels ou en pourcentage du bloc parent (c'est à dire du bloc qui le contient).
Valeurs :Résultat dans le navigateur :
Xpx

Bloc de X pixels de large, X étant un entier

X%

Bloc de X% de large, X étant un entier

 

<div style="background-color:#FF33CC; width:250px;">Mon texte ici !</div>

Mon texte ici !
height / exemple : height:40px;
Précise la hauteur du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

Bloc de X pixels de haut, X étant un entier

 

<div style="background-color:#FF33CC; height:40px;">Mon texte ici !</div>

Mon texte ici !
margin / exemple : margin:10px;
Spécifie l'espace tout autour du bloc généralement en pixels (Dans les exemples ci-dessous, nous ajoutons une bordure pour bien voir ou sont les limites de notre bloc).
Notez bien que certaines balises HTML ont des marges définies par défaut. C'est le cas par exemples des titres (h1, h2, h3...), des paragraphes (p), des balises de liste (ul, ol, li), et même du corps de notre page (body). Les feuilles de style et la propriété «margin» permettent de supprimer ces marges par défaut et/ou d'en préciser de nouveaux.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels de d'espace seront laissés libres de chaque côté du bloc, X étant un entier

 

<div style="margin:10px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
margin-top / exemple : margin-top:15px;
Spécifie l'espace au dessus du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels de d'espace seront laissés libres au dessus du bloc, X étant un entier

 

<div style="margin-top:15px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
margin-bottom / exemple : margin-bottom:15px;
Spécifie l'espace en dessous du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels de d'espace seront laissés libres en dessous du bloc, X étant un entier

 

<div style="margin-bottom:15px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
margin-left / exemple : margin-left:30px;
Spécifie l'espace à gauche du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels de d'espace seront laissés libres à gauche du bloc, X étant un entier

 

<div style="margin-left:30px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
margin-right / exemple : margin-right:30px;
Spécifie l'espace à droite du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels de d'espace seront laissés libres à droite du bloc, X étant un entier

 

<div style="margin-right:30px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
padding / exemple : padding:10px;
Spécifie l'enrobage tout autour du bloc généralement en pixels. A la différence du "margin", le "padding" spécifie l'espace entre le contenu du bloc et son contour (par exemple, entre le texte du bloc et sa couleur de fond). Dans les exemples ci-dessous, nous ajoutons une bordure pour bien voir ou sont les limites de notre bloc.
Notez bien que certaines balises HTML ont des enrobages définis par défaut. C'est le cas par exemples des titres (h1, h2, h3...), des paragraphes (p), des balises de liste (ul, ol, li), et même du corps de notre page (body). Les feuilles de style et la propriété «padding» permettent de supprimer ces espaces par défaut et/ou d'en préciser de nouveaux.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels d'enrobage seront préservés de chaque côté du bloc, X étant un entier

 

<div style="padding:10px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
padding-top / exemple : padding-top:15px;
Spécifie l'enrobage au dessus du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels d'enrobage seront préservés en haut du bloc, X étant un entier

 

<div style="padding-top:15px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
padding-bottom / exemple : padding-bottom:15px;
Spécifie l'enrobage en dessous du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels d'enrobage seront préservés en bas du bloc, X étant un entier

 

<div style="padding-bottom:15px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
padding-left / exemple : padding-left:30px;
Spécifie l'enrobage à gauche du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels d'enrobage seront préservés à gauche du bloc, X étant un entier

 

<div style="padding-left:30px; border:1px solid #003366;">Mon texte ici !</div>

Mon texte ici !
padding-right / exemple : padding-right:30px;
Spécifie l'enrobage à droite du bloc.
Valeurs :Résultat dans le navigateur :
Xpx

X pixels d'enrobage seront préservés à droite du bloc, X étant un entier

 

<div style="padding-right:30px; border:1px solid #003366;">Mon texte ici ! Mon texte ici ! Mon texte ici ! Mon texte ici ! Mon texte ici ! Mon texte ici ! </div>

Mon texte ici ! Mon texte ici ! Mon texte ici ! Mon texte ici ! Mon texte ici ! Mon texte ici !

Deux comportements d'affichage différents

Chaque balise donne un résultat différent. Nous pouvons cependant distinguer 2 grands types d'affichage :

  • Les balises s'affichant en "block" (bloc) : elles prennent toute la largeur disponible et s'affichent avec un saut de ligne avant et après.
  • Les balises s'affichant en "inline" (dans la ligne) : elles prennent uniquement la largeur dont elles ont besoin, sans ajouter de saut de ligne.

Exemples de balises HTML qui s'affichent naturellement en block

  • <div> (cf plus bas)
  • Les balises de titre : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • La balise paragraphe : <p>
  • Les balises de liste : <ul>, <ol>, <li>
  • La balise de citation : <blockquote>
  • Les balises de tableaux : <table>
  • ...

Exemples de balises HTML qui s'affichent naturellement en inline

  • <span> (cf plus bas)
  • <a> (lien)
  • <strong> (gras), <em> (italic), <u> (souligné)
  • <img> (image)

Exemples

Par exemple, étudier la différence de comportement entre une balise <p> et <strong> :

Mon texte
   <p style="background-color:#ffcc00;">Cette balise s'affiche comme en "block".</p>
   Mon texte 2
   <strong style="background-color:#00ccff;">Cette balise s'affiche en "inline".</strong>
Mon texte 3

Ce qui donne dans votre navigateur :

Mon texte

Cette balise s'affiche comme un bloc.

Mon texte 2 Cette balise s'affiche en "inline". Mon texte 3

Important ! Certains styles ne fonctionne correctement uniquement sur les balises se comportant en "Block" ! Par exemple : width, height, padding, margin… En effet, ces propriétés sont contraires à la notion d'affichage "dans la ligne" ("inline").

Par exemple, dans le code suivant je donne les mêmes hauteurs et largeur à ma balise "<p>" et à ma balise "<strong>" :

Mon texte
   <p style="background-color:#ffcc00; width:200px; height:60px; padding:5px;">mon bloc</p>
   Mon texte 2
   <strong style="background-color:#00ccff; width:200px; height:60px; padding:5px;">mon affichage "inline".</strong>
Mon texte 3

Mais dans votre navigateur, le résultat est bien différent :

Mon texte

mon bloc

Mon texte 2 mon affichage "inline". Mon texte 3

La propriété display

Nous pouvons modifier ce comportement d'affichage "block" / "inline" en feuille de style avec la propriété «display».

Ainsi nous pouvons par exemple afficher une balise <strong> comme un bloc ou une balise <p> en inline.

La propriété display permet également de masquer un élément si on lui donne la valeur "none" ("aucun" en français).

display / exemple : display:block;
Modifie le comportement d'affichage d'un élément
Valeurs :Résultat dans le navigateur :
block

Affichage en bloc (avec un saut de ligne avant et après)

inline

Affichage en ligne ( à la suite, sans saut de ligne)

none

Masque l'élement (aucun affichage)

 

<p style="background-color:cyan;">Exemple A</p>
<p style="background-color:cyan; display:inline;">Exemple B</p>
<strong style="background-color:yellow;">Exemple C</strong>
<strong style="background-color:yellow; display:block;">Exemple D</strong>
<strong style="background-color:red; display:none">Exemple E</strong>

Exemple A

Exemple B

Exemple C Exemple D Exemple E

Reprenons notre exemple précédent : cette fois nous allons forcer notre balise "strong" à s'afficher comme un bloc…

Mon texte
   <p style="background-color:#ffcc00; width:200px; height:60px; padding:5px;">mon bloc</p>
   Mon texte 2
   <strong style="display:block; background-color:#00ccff; width:200px; height:60px; padding:5px;">mon affichage "inline".</strong>
Mon texte 3

Du coup, les styles "width" et "height" sont désormais respectés :

Mon texte

mon bloc

Mon texte 2 mon affichage "inline". Mon texte 3

Les balises DIV et SPAN

Voici 2 nouvelles balises ! Nous ne les avions pas vues à ce jour, car elles ne sont utiles qu'avec les feuilles de style :

  • La balise "<div>" ("division") : c'est la plus simple des balises s'affichant en "block" ; elle crée simplement un nouveau bloc sans marges ni enrobement (padding). Elle est cependant très utiles pour créer des sections dans son code HTML.
  • La balise "<span>" : c'est la plus simple des balises s'affichant en "inline". Seule, elle n'a aucun effet sur le rendu du code html. Cependant, elle devient très utile lorsqu'on lui attribut des styles.

Par exemple, étudier ce code; :

   Mon texte <div>contenu du div</div> Mon texte 2 <span>contenu du span</span> Mon texte 3

Ce qui donne dans votre navigateur :

Mon texte
contenu du div
Mon texte 2 contenu du span Mon texte 3

Maintenant, en ajoutant des styles :

<style type="text/css">
div {color:green; padding:5px; background-color:yellow;}
span {color:red; font-style:oblique;}
</style>
Mon texte <div>contenu du div</div> Mon texte 2 <span>contenu du span</span> Mon texte 3

Ce qui donne dans votre navigateur :

Mon texte
contenu du div
Mon texte 2 contenu du span Mon texte 3
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!