Manuel de formatage avancé
notation: +23+x
blank.png

Introduction

Vous pénétrez ici dans un monde étrange. Étrange, car ce guide se veut une fenêtre sur une infime section d'un monde bien plus grand et complexe qui s'étend bien au-delà des frontières de ce site. Il a pour but de vous apprendre avant tout à comprendre comment fonctionnent les éléments susceptibles de vous être utiles dans vos articles ici, mais ne prétend nullement vous apprendre à maîtriser le CSS ou n'importe quel autre langage de façon complète ou même suffisante pour un autre usage. Il existe pour cela de nombreux cours en ligne et sites de référence.

Mais avant de passer au code lui-même, voyons les règles de base : le formatage basique que vous avez sûrement déjà utilisé sur le site s'appelle la syntaxe Wikidot ; une syntaxe est un ensemble de règles conçues pour faciliter la vie aux utilisateurs en leur permettant d'utiliser les fonctions les plus souvent utilisées (texte gras, italique, tableaux, etc) de façon très simple et rapide. Pour en apprendre plus sur cette syntaxe et quelques concepts basiques, le Guide de syntaxe est à votre disposition.

Cependant, dès que vous voudrez faire quelque chose de plus spécifique, il vous faudra passer par les "vrais" langages qu'utilisent les développeurs, designers et autres artistes du code sur internet. Ils ne dépendent pas de Wikidot, mais vous pouvez les y utiliser de différentes manières que nous allons voir ici.

Avant de passer à la section suivante, un survol rapide de quelques résultats originaux ou surprenants que vous pouvez obtenir par ces moyens pour vous donner une idée des possibilités offertes :


Le CSS

Le CSS — pour cascading style sheets, feuilles de style en cascade en français — est un langage utilisé pour définir l'apparence d'un objet. Il permet d'en spécifier les dimensions, la forme, la couleur et bien d'autres éléments encore. C'est celui que vous utiliserez dans 99 % des cas pour styliser vos articles, et par chance sa compréhension est très simple. Voyons cela.

Il existe deux moyens principaux d'organiser du texte et d'y appliquer du code : les éléments div et span.

Voici un élément span, qui concerne un segment de texte défini et permet de passer d'un style à l'autre sur la même ligne.

Voici un élément div, aussi appelé bloc (ou cadre) div parce qu'il concerne toute une portion de texte. C'est le div qui est utilisé pour les cadres d'entretiens ou rapports d'explorations stylisés dans les rapports SCP.


Il nécessite un retour à la ligne après la fin de son code pour passer à un autre format.

Apprenons donc comment ça marche.

Construction d'un cadre pas à pas

[[div]]
Texte
[[/div]]

Ça, c'est le modèle de base d'un div. Celui-ci ne fait rien, parce qu'on ne lui a rien dit de faire ; à nous maintenant de choisir ce à quoi on veut qu'il ressemble.

[[div style=" "]]
Texte
[[/div]]

Là-dedans, on va mettre une série de déclarations CSS qui sont les morceaux de code désignant chaque propriété comme la couleur de fond, la bordure, etc. Disons que je veux un fond bleu clair.

[[div style="background-color: skyblue;"]]
Texte
[[/div]]


Texte

Une déclaration CSS se compose toujours de la même façon : un argument CSS, ici background-color qui indique que l'on va spécifier quelque chose quant à l'arrière-plan, suivi de deux points puis une valeur qui indique ce qu'on veut lui faire ou comment, ici un nom de couleur en anglais. Ça aurait aussi pu être un code hexadécimal (ou RGBA, ou d'autres codes moins courants désignant aussi des couleurs) ou même le lien d'une image à afficher en arrière-plan. La déclaration se finit ensuite par un point-virgule, et peut ou non être suivie d'autres déclarations.

La seule difficulté de ce processus est de connaître les noms justes pour les arguments et valeurs : vous finirez par en connaître de plus en plus par cœur avec le temps, mais commencez par vous aider d'une liste de référence qui vous donnera tous les détails nécessaires.

En utilisant d'autres de ces valeurs, je peux rapidement donner une meilleure apparence à mon cadre div !

[[div style="background-color: skyblue; border: 1px solid black;"]]
Texte
[[/div]]


Texte

Ici, plusieurs valeurs se suivent pour désigner dans l'ordre différents aspects de l'élément demandé : je veux une bordure, donc je spécifie sa largeur (1 pixel), son apparence (continue, par opposition à des pointillés) et sa couleur (noir). Mais vous avez peut-être aussi remarqué un espacement peu agréable pour les yeux dans ce cadre.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em;"]]
Texte
[[/div]]


Texte

Les arguments margin et padding désignent respectivement l'espace entre le bord extérieur du cadre et le contenu au-dessus, en dessous et sur les côtés et l'espace entre son bord intérieur et le texte ou les autres éléments qu'il contient. Ils sont tous deux presque obligatoires, surtout padding, pour que votre cadre puisse avoir une apparence agréable.

La mesure utilisée ici, l'em ou cadratin, est une mesure qui s'adaptera en fonction de la taille de la police utilisée en association. Si votre cadre contient des lettres très grandes, ces espaces s'adapteront pour y correspondre. Vous pouvez cependant aussi utiliser des pixels (px) pour une valeur fixe.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%;"]]
Texte
[[/div]]


Texte

Mais passons un coup de brosse sur ce cadre pour le rendre plus présentable.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%; border-radius: 0.5em; box-shadow: 5px 5px;"]]
Texte
[[/div]]


Texte

Voilà les angles arrondis et une ombre ajoutée, mais elle est un peu trop agressive pour les yeux et je l'aimerais vers le haut. Les deux premières indications en px indiquent l'ombre horizontale puis l'ombre verticale (axes x et y). Inversons la verticale et ajoutons une troisième mesure en px, qui indique un flou de l'ombre pour l'adoucir.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px;"]]
Texte
[[/div]]


Texte

Et pourquoi pas donner une couleur à cette ombre, d'ailleurs.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px #0404b4;"]]
Texte
[[/div]]


Texte

Et voilà, vous avez créé un cadre div ! Ça peut sembler complexe parce que nous avons fait référence à plusieurs reprises à des arguments dont vous n'avez peut-être jamais entendu parler, mais le véritable travail est précisément de comprendre et assimiler l'utilité et le fonctionnement de ces codes, et pour cela un seul moyen : essayer. Pour commencer et prendre la main avec les valeurs les plus communes, vous pouvez essayer cet outil par exemple, et vous apprendrez peu à peu à voler de vos propres ailes !

Les éléments span

Les span fonctionnent comme les cades div et avec les mêmes arguments, à l'exception de quelques propriétés qui ne sont pas applicables à un petit segment de texte.

[[span style="background-color: gold; border: 0.9px solid grey; border-radius: 0.2em; padding: 0.2em"]] Exemple de texte dans un span [[/span]] qui se poursuit ensuite sans conserver le même formatage


Exemple de texte dans un span qui se poursuit ensuite sans conserver le même formatage

Les modules CSS

L'ajout d'une propriété dite "inline" (via un style=" " directement dans le code de la page) à un élément span, div ou autre est un moyen facilité d'utiliser du CSS dans votre article. Cependant, il peut être plus pratique voire nécessaire d'utiliser un module CSS1.

Un module CSS est un bloc de texte qui ne s'affichera nulle part sur votre page et contient un ensemble de déclarations CSS qui s'appliqueront à son contenu. Les différents thèmes du site ne sont que de gros modules CSS affectant le plus souvent l'apparence d'éléments esthétiques généraux — et c'est là que ça devient intéressant. Les modules CSS vous permettent non seulement de définir l'apparence d'éléments spécifiques que vous créez à partir de zéro, mais également de modifier les attributs et l'apparence d'éléments possédant déjà une apparence par défaut et auxquels vous ne pouvez pas appliquer de valeur style=" ". Ce code, par exemple, permet de modifier l'apparence des tableaux Wikidot :

[[module CSS]]
table.wiki-content-table {
    background-color: #CEF6CE !important;
    color: black !important;
}
table.wiki-content-table th {
    background-color: #3B0B17 !important;
    color: #F6CED8 !important;
}
[[/module]]

Et ainsi, ce code :

||~ Titre 1 ||~ Titre 2 ||~ Titre 3 ||
|| Cellule 1 || Cellule 2 || Cellule 3 ||

Donnera ceci :

Titre 1 Titre 2 Titre 3
Cellule 1 Cellule 2 Cellule 3

"table.wiki-content-table" est le nom CSS qui désigne les cases des tableaux et la spécification "th" désigne plus précisément les cases "Titre". En plus de leur donner une couleur de fond et de police différente, on ajoute la spécification "!important" pour indiquer que cette indication doit écraser l'affichage par défaut qui n'utilise normalement pas ces couleurs. Faites attention à ne pas abuser de cet outil cependant, limitez son usage aux codes qui ne marchent que quand vous l'y ajoutez. Un usage excessif ou mal calculé peut casser votre code (mais rien d'irréparable, si ça arrive contentez-vous de le retirer à nouveau et tout reviendra à la normale).

Mais vous aurez peut-être remarqué que le format a changé ? Effectivement, les modules font intervenir 1) une mise en forme pensée pour être plus lisible et 2) la nécessité de préciser à quel élément doit s'appliquer notre déclaration CSS, puisque le module n'est pas directement lié à un élément de la page mais à son ensemble. Le format de déclaration dans un module CSS est le suivant :

nomdellément {
    argument: valeur;
    argument: valeur;
    argument: valeur;
}

À noter que les espaces et retours à la ligne ne sont utilisés que pour la lisibilité du code : le module suivant serait également valable.

nomdellément{argument:valeur;argument:valeur;argument:valeur;}

Vous êtes maintenant en droit de vous demander comment trouver le nom d'un élément si vous désirez le modifier : pour cela, votre ordinateur possède un outil tout désigné que vous avez peut-être déjà utilisé, l'inspecteur d'élément. Nous reviendrons sur les possibilités de cet outil plus tard, mais sachez simplement qu'il vous suffit de faire clic droit puis "Inspecter" sur ce que vous désirez modifier pour en trouver le nom, qui s'affichera dans la fenêtre contextuelle apparue.

inspection.png

Un clic droit sur cette image me montre que les blocs utilisés ici s'appellent "div.code" ou tout simplement ".code" en CSS.

Une fois cette fenêtre ouverte, vous pouvez vous servir de l'outil d'inspection par curseur en haut à gauche plutôt que de repasser par clic droit à chaque fois. Conseil : Celui-ci est également accessible par le raccourci Ctrl + Maj + C.

inspectclic.png

Voyons à présent les différentes applications pratiques d'un module CSS.

Cas 1 : Vous utilisez de nombreuses fois le même cadre div dans votre article et vous aimeriez alléger votre code en évitant de devoir le répéter à chaque fois. Il vous faut donc définir une classe, c'est-à-dire créer un ensemble de règles que vous pourrez appliquer à plusieurs éléments simultanément. Pour cela, utilisez en guise d'élément à cibler un point suivi du nom que vous voulez donner à votre classe.

.votrenomdeclasse {
    padding: 1em;
    margin: 1em;
    background-color: gold;
    color: darkred;
    border: 1px dashed black;
}

Pour appliquer votre classe à un élément div, span ou autre, ajoutez-y simplement class="votrenomdeclasse".

[[div class="votrenomdeclasse"]]
Texte de votre bloc div
[[/div]]


Texte de votre bloc div

Cas 2 : Vous utilisez de nombreuses fois le même cadre div dans votre article en y changeant parfois un détail. Pour cela, vous pouvez 1) utiliser plusieurs classes ou 2) passer par l'ajout d'un style=" ". Voyons d'abord la première de ces deux méthodes.

.cadre {
    padding: 1em;
    margin: 1em;
    color: darkred;
    border: 1px dashed black;
}
.jaune {
    background-color: gold;
}
.bleu {
    background-color: lightblue;
}

Tous les éléments qui appartiendront à la classe "cadre" recevront ses attributs, et leur apparence pourra ensuite être précisée à l'aide d'une seconde classe plus spécifique, ici pour la couleur. L'ordre des classes ne change rien.

[[div class="cadre jaune"]]
Texte du cadre jaune
[[/div]]

[[div class="bleu cadre"]]
Texte du cadre bleu
[[/div]]


Texte du cadre jaune

Texte du cadre bleu

Mais vous pouvez aussi obtenir ce même résultat en combinant classe et style, comme ceci :

[[div class="cadre" style="background-color: gold;"]]
Texte du cadre jaune
[[/div]]

[[div class="cadre" style="background-color: lightblue;"]]
Texte du cadre bleu
[[/div]]

Aucune de ces deux options n'est meilleure que l'autre dans l'absolu, c'est à vous de voir ce qui sera le plus agréable et pratique à utiliser au cas par cas.


Des vertus de l'étude et de l'expérimentation comme apprentissage

Il existe un moyen plus efficace que tous les autres pour apprendre efficacement à manier la syntaxe avancée : essayer. L'inspection d'éléments, accessible notamment via clic droit ou Ctrl + Maj + I ou Ctrl + Maj + C (selon votre navigateur), est le meilleur moyen pour ce faire.

Une fois ceci fait, vous verrez toutes les propriétés de l'élément sélectionné et pourrez les modifier à loisir en suivant en direct l'effet de vos modifications sur la page. Ces modifications ne seront visibles que de vous, n'affecteront aucun autre utilisateur et seront réinitialisées si vous rechargez la page, alors lâchez-vous ! Voici un cadre quelconque pour vous entraîner :

Texte d'exemple



Si ce jeu vous amuse, vous pouvez le pousser plus loin en y ajoutant l'étude de formats existants, en comparant le code mis en œuvre avec le résultat pour comprendre ce qui fait quoi. Vous pouvez et êtes encouragés à vous essayer à cette activité un peu partout sur le site, mais voici quelques exemples de formats intéressants commentés selon cette méthode. P.S. : Si vous vous interrogez sur l'usage de components, l'onglet 2 pourrait bien être pour vous.


Conclusion

Si vous avez lu et compris l'intégralité de ce qui précède, il ne devrait plus vous manquer que la pratique pour passer maître dans l'art de la syntaxe avancée. Si vous deviez avoir des questions ou des problèmes divers sur le sujet, n'hésitez pas à me contacter par message privé (Dr LekterDr Lekter sur Wikidot, Lekter#1551 sur Discord) ou à poser la question dans le salon #aide-technique du serveur officiel du site.

Bonne chance dans votre quête, et sachez faire un usage sage et mesuré des capacités que vous acquerrez sur la route !

Récapitulatif des liens utiles

pour aller plus loin

» Liste des arguments CSS «
» Créer vos propres cadres div «
» Documentation complète «
» Codes couleur HTML «
» Codes prêts à l'usage34 «

Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License