Le wiki de WIMS EDU

L'association WIMS EDU a ouvert ce wiki afin de favoriser les collaborations entre utilisateurs de WIMS.

Outils pour utilisateurs

Outils du site


Panneau latéral

Traductions de cette page:

Plan du Site

documentation:devel:css

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 :

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

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 : correspond aux boutons permettant de soumettre.

wims\_color3 : correspond aux 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 un tableau, 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/

Vous pourriez laisser un commentaire si vous étiez connecté.
documentation/devel/css.txt · Dernière modification: 18/04/2021 05:00 (modification externe)