!set titb=Quels styles d&eacute;finir ?
!set keyw=
!set datm=20050622
!set prev=html
!set next=style2
!set upbl=html
!set dat1=19000101
!set dat2=24000101

!if $wims_read_parm!=$empty
 !goto $wims_read_parm
!endif

!exit

:content
Pour simplifier la mise en forme du document, il est important de raisonner avec des styles. On définit un style pour les théorèmes, un pour les plis, un pour les noms de fichiers etc… On les appelle à chaque fois qu'on en a besoin, le choix des caractéristiques est fait une seule fois et peut être modifié en un seul endroit (voir 
!read primitives.phtml 1, link, style2 
).
<p>
<h2>Pour le document, les paragraphes, les titres</h2>
Pour le document on peut choisir la couleur du fond, la police de caract&egrave;res, sa taille,
sa couleur, ...<br>
<br>
<p>
<pre class="ccc">
body	{
   font-family&#58; Helvetica, Arial, sans-serif;
   font-size&#58; 100%;
   background-color&#58; #FFFFCC;
}
</pre>
<br>
 Ici on définit un style pour la balise   
 <tt class="c">body</tt> qui existe déjà.  
<p>
On peut définir  l'indentation de tous les paragraphes par &#58;
<tt class="c">p	{text-ident&#58; 1.3em;}</tt> 
<p>
  En html, les titres ont des styles d&eacute;finis par d&eacute;faut. Dans 
les documents WIMS, le titre du document est en <tt class="c">h1</tt>, les 
titres des blocs en <tt class="c">h3</tt>, le <tt class="c">h2</tt> est disponible 
pour vos titres de paragraphe. Chaque style de titre peut &ecirc;tre red&eacute;fini 
dans l'ent&ecirc;te du document &#58;  
<p>
<pre class="ccc">
h3 {
   font-size&#58; 130%;
   text-align&#58; center;
   color&#58; green;
 }
</pre>
 
<p>
<h2>Définition d'une classe</h2>
<p>
On définit une classe par un nom commençant par un point, puis entre accolades ses caractéristiques, séparées par des point-virgules.
Une classe qui définit les caractéristiques des caractères peut être appelée pour un mot ou un paragraphe.
<pre class="ccc">
.c   { 
   color&#58; #c52d2d;
   font-size&#58;100%;
   font-weight&#58; bold;
}
</pre>
<p>
Pour quelques mots, on peut écrire &#58; 
<p>
Le style <tt class="c">&lt;span class="c"&gt;</tt>c<tt class="c">&lt;/span&gt;</tt> indique un mot important.
<p>
pour 
<p>
le style <span class="c">c</span> indique un mot important.
<p>
Pour un paragraphe, on écrit &#58;
<p>
<tt class="c">&lt;p class="c"&gt;</tt>Ce paragraphe est important.<tt class="c">&lt;/p&gt;</tt> 
<p>
pour
<p>
<p class="c">Ce paragraphe est important.</p>
<p>
<h2>Pour un paragraphe ou une partie</h2>
Le style peut définir le fond d'un paragraphe (<tt class="c">&lt;p class="ccc"&gt;</tt> …<tt class="c">&lt;/p &gt;</tt>) ou d'une division qui peut comporter plusieurs paragraphes  (<tt class="c">&lt;div class="ccc"&gt;</tt>…<tt class="c">&lt;/div &gt;</tt>). La balise <tt class="c">pre</tt> indique une partie où la mise en forme est conservée.
<p>

!read primitives.phtml 2, fold, , Style des encadrés de code, Le style suivant est celui des encadr&eacute;s verts de code :	<pre class="ccc">	.ccc {<br>	   margin: 0% 3% 0% 3%;<br>	   width: 90%;<br>	   padding: 2%;<br>	   background-color: #CCFFCC;<br>	   color: #c52d2d;<br>	   font-weight: bold; }<br>	 </pre> 

<p>
Dans l'exemple suivant, on définit un style de division pour faire
un fond au théorème &#58;<br>
<pre class="ccc">
.thm {
		margin&#58; 0% 8% 0% 8%;
		width&#58; 80%;
		padding&#58; 2%;
		background-color&#58; #E8E4D8;
		}
</pre>
<p>
Il vaut mieux d&eacute;finir la largeur (<tt class="c">width</tt>) de fa&ccedil;on
relative avec un pourcentage. Le <tt class="c">margin</tt> donne la r&eacute;partiion
des marges entre la couleur et le reste. Le&nbsp; <tt class="c">padding</tt>
indique la marge int&eacute;rieure &agrave; la couleur de fond. Evidemment, le total 2m+w+2p doit faire 100 %.
<p>
<a target="wims_external" href="http&#58;//openweb.eu.org/articles/initiation_css/">Pour en savoir plus.</a>
<p>
 
                          
