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

\defValidation W3C{Validation W3C}

Styles css utilisable

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_left spacer"> image </div>
 blablabla

<br class="clearall" />

permet de mettre une image à gauche et laisse le texte principal se placer sur la droite.

Pour un tableau, mettez le plus de renseignements possibles dans le CSS. Par exemple,

\css{<style type="text/css">
table.montableau { background-color:blue}
table.montableau td {text-align:left; color:red;}
table.montableau th {text-align:center;padding:10px;}
}

\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: 23/04/2019 05:00 (modification externe)