Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Classes CSS personnalisées

Liste des classes CSS

Cette page liste les classes CSS qui ont été spécifiquement créées pour MDC. Si vous avez d'autres idées de classes CSS qui pourraient être utiles pour ce wiki, n'hésitez pas à contacter Dria (en).

Classe Résultat
div.note Affiche le texte d'une astuce dans le corps de la page.
div.bug Affiche un texte de bogue dans le corps de la page.
.float-left Crée un élément flottant à gauche (généralement une image).
.float-right Crée un élément flottant à droite (généralement une image).
.figure Défini pour un usage futur, ne contient actuellement aucun style
.standard-table Style de tableau standard simple.
.standard-table td.header Style d'en-tête d'un tableau standard.
.fullwidth-table Tableau ayant une largeur définie à 100% (ce tableau en est un exemple.)
.fullwidth-table td.header Style d'en-tête d'un tableau de largeur 100%.
div.breadcrumbs Style de l'extension breadcrumbs personnalisée.
div.breadcrumbs a.breadcrumbs Style de lien dans une chaîne breadcrumbs.
div.breadcrumbs span.breadcrumbs Style de titre de page locale dans une chaîne breadcrumbs.
div.highlight Met en évidence une partie de la page avec une barre bleue verticale, à gauche, de 3px de large.
.highlightred Change la couleur de texte en rouge.
.highlightblue Change la couleur de texte en bleu.
.highlightgreen Change la couleur de texte en vert.

Exemples

Mettre en évidence des parties de code

On souhaite souvent attirer l'attention sur certaines parties d'un morceau de code. Ceci est possible grâce à l'usage des balises span, en utilisant à la fois la fonction de formatage de code intégrée dans MediaWiki dite « indenter-d'au-moins-un-espace ». Remarquez qu'utiliser des spans à l'intérieur de blocs <pre> n'est pas une solution, car le parser MediaWiki ignore les spans et les traite simplement comme des parties du code.

 <span class="highlightred">ceci ne fonctionne pas</span>

Au lieu de cela, il faut indenter le morceau de code, et à l'intérieur utiliser la balise span pour la mise en évidence. Remarquez qu'il faudra aussi indenter des lignes vierges dans le bloc de code. S'il n'y a pas d'espace au début de la ligne vierge, le parser fermera le bloc de code, puis le rouvrira à la prochaine ligne de code indentée.

voici un exemple
   d'un bloc de code avec une ligne vierge
   qui n'est pas indentée.

Manifestement, l'exemple ci-dessus est incorrect. Voici comment le faire:

voici un exemple
   d'un bloc de code avec une ligne vierge

   qui n'est pas indentée.

 

table.standard-table

table header 1 table header 2
Ceci est un exmple de: table.standard-table

table.fullwidth-table

table header 1 table header 2
This is an example of: table.fullwidth-table

Divs

Astuces

Rédigez les astuces comme ceci :

   <div class="note">Ceci est une astuce</div>

Ce qui donne :

Ceci est une astuce
Bugs

Utilisez ceci pour faire allusion à un bug connu, avec un lien vers l'enregistrement correspondant dans bugzilla :

Ce qui donne :

Avertissements

Utilisez la classe div class="warning" pour mettre en évidence des avertissements dans les articles. Nous ajouterons éventuellement une icône ou quelque chose dans le même genre.

Ceci est un avertissement.
Notes

Utilisez la classe div class="note" pour mettre en évidence des notes dans les articles.

Ceci est une note. Ce n'est pas une note très intéressante.
Mise en évidence de sections

Exemple d'utilisation de div.highlight :

Ceci est un exemple de section mise en évidence à l'aide de la classe CSS .highlighting. Utilisez la pour attirer l'attention sur certaines portions de votre code. Cette classe a été créée pour en:XUL Tutorial.

Un exemple de
   section préformatée
   avec une DIV
      .highlighted
En-tête de tableau 1</td>

<th>En-tête de tableau 2</td>

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : teoli, suhail_1a, renoirb, Jeremie, fscholz, BenoitL, Fredchat, Vita, Yor.feix, Chbok, Cbeard
 Dernière mise à jour par : teoli,