Conception & Réalisation de sites Web

Mettre en forme un bloc

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 !
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!