======Styles css utilisables======
=====Caractéristiques=====
//Objectif// : Utiliser des styles css communs

//Prérequis// :
  * Avoir des exercices en développement

//Commentaires// : 

//Niveau// : Avancé

=====Explications=====

Quelques classes CSS utilisables (voir l'aide de Createxo pour une liste plus complète)
<code>
.wimscenter, .center
.wimsborder, .wimsnoborder (pour <table>)
.spacer : <br class="spacer"> un peu plus d'espace
.white, .smaller, .small, .bold, .nowrap, .wims_emph
.float_right, .float_left
.clearall : <br class="clearall">
.inline
.wims_nopuce  pour la balise ul
.wims_instruction  pour préciser comment taper la réponse
.wims_question     pour distinguer les questions du reste de l'énoncé
</code>

Par exemple,
<code>
<div class="wims_instruction"> Veuillez donner la valeur à 0.01 près.</div>
</code>

Pour analyser les réponses, des couleurs sont utilisées dans les exercices OEF.
Vous pouvez les utiliser.

<code>
.oef_indgood bonne réponse
.oef_indbad mauvaise réponse
.oef_indpartial réponse partielle
.oef_indprec mauvaise précision
.oef_condgood bonne condition
.oef_condbad mauvaise condition
</code>

Classes CSS des couleurs de WIMS :

<code>
.wims_color1 : couleur des menus
.wims_color2 : couleur des boutons permettant de soumettre
.wims_color3 : couleur des boutons d'aide
</code>

Classes CSS pour la balise audio
<code>
''wims_audio''
</code>
Classes CSS pour jsxgraph (par défaut, centre)
<code>
.jxgbox
.jsxgraph_button
</code>

Beaucoup de tables ont été utilisées dans les exercices de manière à rigidifier
la disposition. Ce n'est pas forcément une bonne idée (pensez à la taille des
écrans qui peuvent être petits). Il vaudrait mieux les enlever et garder les
tableaux lorsqu'on veut vraiment mettre des données en tableaux.
Par exemple :
<code>
<div class="float_right spacer">image</div>
 blablabla

<br class="clearall">
</code>
permet de mettre une image à droite et laisse le texte principal se placer sur
la droite.
On peut utiliser aussi les classes
<code>
<div class="flex_box">
  <div>premier</div>
  <div>deuxième</div>
</div>
</code>

Pour faire un tableau simplement, il existe une slib
<code>
slib(text/matrixhtml [parameters])
</code>
Si cette slib ne convient pas, mettez le plus de renseignements possibles dans le CSS.
Par exemple,
<code>
\css{<style>
table.montableau { background-color:blue}
table.montableau td {text-align:left; color:red;}
table.montableau th {text-align:center;padding:10px;}
</style>}

\statement{
<table class="montableau">
 <tr>
  <th>En-tête1</th><td>3</td>
 </tr>
 <tr>
  <th>En-tête2</th><td>6</td>
 </tr>
 </table>
 }
</code>

Privilégiez html5 et xhtml. Quand vous trouvez un conseil sur un site, vérifiez
qu'il est correct et valide !

http://www.w3schools.com/

http://www.w3schools.com/css/