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;
">
<span></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