Différences

Ci-dessous, les différences entre deux révisions de la page.

--- documentation:devel:css [14/12/2020 08:32] – ↷ Page déplacée de documentation:devel:css à 01_souhaits:documentation:devel:css obado
+++ documentation:devel:css [25/06/2025 03:00] (Version actuelle) – créée - modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+======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/