retour

Exemples de styles

Exemple simple
Exemple d'héritage
Conteneur de style <div>
Conteneur de style <span>
Les pseudo-éléments

Exemple simple

<span style="color : red; font-family : courier; font-weight : 100">
Exemple simple</span>
 <span style="color : blue; font-family : utopia; font-size:40pt; background-color : #ffcc99">
Simple exemple</span>


Exemple simple Simple exemple

haut de page

Exemple d'héritage

On suppose que la feuille de style du document contient les définitions suivantes :
h1{ color : red ;
font-style : normal;
font-size :
200%;}
et
em { color : green;
font-style : oblique;}
<h1> À titre <em> d'exemple </em> pour l'héritage </h1>


À titre d'exemple pour l'héritage


haut de page

Conteneur de style <div>

<div style=" color: #2542FF;
background-color:
#EEFFDB;
font-family:
serif;
font-size:
xx-large;
font-style:
oblique;
font-weight:
900;
text-alignment:
justify; " >
Mise en forme d'un premier paragraphe blabla blabla blabla  blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
</div>

<divstyle="font-family: cursive;
font-size: small;
font-weight: lighter;
color: #ebdfff;
background-color: #ff4d00;
"
>
Mise en forme d'un second paragraphe blabla blabla blabla  blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
</div>


Mise en forme d'un premier paragraphe blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
Mise en forme d'un second paragraphe blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

haut de page

Conteneur de style <span>

Les conteneurs <span style="color : #6f009f; font-weight : bold; "> &lt;span&gt;</span> permettent <span style="font-weight: 900; color: #378483; font-size: 150%; "> de changer de style </span> <span style="text-decoration: underline;color : red;"> localement </span> au cours d'une <span style="color: #7C7C7C; font-style: oblique;"> phrase </span>.


Les conteneurs <span> permettent de changer de style localement au cours d'une phrase.

haut de page

Les pseudo-éléments

On suppose que la feuille de style de la page contient les déclarations suivantes :

a.ex1:link{     color :  #FF7272;
                        text-decoration : underline;
                        }


a.ex1:visited{ color : #49E1FF;
                        text-decoration : none;
                        font-weight : bold;
                        }

a.ex1:hover{  border : solid blue;
                        color :  #FF22E2;
                        background-color : white;
                        }

a.ex1:active{  color : red;}
p.ex2:first-letter{font-size : 300%;
                        color : red;
                        font-weight: bold;
                        float : left;
                        vertical-align : top;
                       }

p.ex2:first-line{font-style : italic;
                        align : justify;  
                        }



<a href="#pseudo" class="ex1">Exemple de lien modifié</a>
<p class="ex2">Paragraphe avec lettrine et première ligne en italique
 blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
 blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
 blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
 blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
 blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
 blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla

</p>


Exemple de lien modifié

Paragraphe avec lettrine et première ligne en italique blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla




retour