Objectif : Utiliser des styles css communs

Prérequis :

• Avoir des exercices en développement

Commentaires :

Niveau : Avancé

Quelques classes CSS utilisables (voir l'aide de Createxo pour une liste plus complète)

.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é

Par exemple,

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

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

.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

Classes CSS des couleurs de WIMS :

.wims_color1 : couleur des menus
.wims_color2 : couleur des boutons permettant de soumettre
.wims_color3 : couleur des boutons d'aide

Classes CSS pour la balise audio

''wims_audio''

Classes CSS pour jsxgraph (par défaut, centre)

.jxgbox
.jsxgraph_button

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 :

<div class="float_right spacer">image</div>
 blablabla

<br class="clearall">

permet de mettre une image à droite et laisse le texte principal se placer sur la droite. On peut utiliser aussi les classes

<div class="flex_box">
  <div>premier</div>
  <div>deuxième</div>
</div>

Pour faire un tableau simplement, il existe une slib

slib(text/matrixhtml [parameters])

Si cette slib ne convient pas, mettez le plus de renseignements possibles dans le CSS. Par exemple,

\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>
 }

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/