La syntaxe des styles décrite aux fiches Les styles de paragraphe et Les styles de caractère est conçue pour couvrir les cas les plus courants mais elle ne peut évidememnt pas répondre à tous les cas de figure. C’est pourquoi elle intégre un mécanisme de saisie d’attributs qui permet d’étendre les possibilités et donne une très grande liberté. Parmi les attributs les plus connus, celui d’usage immédiat est l’attribut class qui va permettre d’appliquer une ou plusieurs classes CSS modifiant la mise en forme. La feuille CSS d’une fiche intègre d’ailleurs par défaut une série de classes utiles.
Pour les styles de caractère, la syntaxe des attributs est simple : il suffit de spécifier juste après l’opérateur du style les attributs entre parenthèses. Un attribut se présente sous la forme d’un nom suivi d’un signe égal suivi de sa valeur. La valeur doit être entre guillemets si elle comporte une espace. Lorsqu’une référence est définie (cas des liens), celle-ci figure au début du bloc entre parenthères et doit être mise entre guillemets si elle comporte une espace ou un signe égal.
[c(class=XML) class]
[a("http://www.fph.ch/?lang=en" hreflang=en title="Version en anglais") FPH]
Exemples
Ce qui donne :
class (code informatique auquel on applique la classe XML (classe proposée par défaut par la feuille de style d’une fiche et qui met le texte en violet, le code HTML résultant est <code class="XML">class</code>)
FPH (Lien pour lequel on indique la langue du site de destination avec un titre complémentaire, le code HTML résultant est <a href="http://www.fph.ch/?lang=en" hreflang="en" title="Version en anglais">FPH</a>)
Le nombre d’attributs est illimité et les noms sont libres sous condition de respecter la syntaxe des attributs XML (pas d’espace, de caractères accentués ou spéciaux hormis -._).
Attention : la transformation XSLT par défaut ajoute tous les attributs à la balise HTML résultante, cela peut aboutir à du code HTML jugé non valide si on ajoute des attributs fantaisistes
Pour les styles de paragraphe, la syntaxe est similiaire : la déclaration des attributs doit être placé en début de paragraphe (avant même les caractères spéciaux) en commençant par [( et en finissant par )]. Cela s’applique aussi aux cellules d’un tableau et aux lignes de code.
La syntaxe pour les zones spéciales est la même que pour les paragraphes à ceci près que les attributs doivent être déclarés sur la ligne précédent la déclaration de la zone spéciale et ne pas contenir autre chose que la déclaration d’attribut
[(class=G)] Paragraphe en vert
[(class=R)]##Titre de niveau 2 en rouge
[(class=M)]
+++
Zone de codes
entièrement en magenta
[(class=B)] sauf cette ligne en bleu
[(class=G)] et cette ligne en vert
+++++++++++
[(class=R)]
===
l= la légende aussi peut {{avoir}} des [z(class=B) styles] de caractère
Cellule 1
Celulle 2 (avec un long texte pour que l'alignement à droite soit visible et avec du [z(class=G)style] dedans)
[(colspan=2 class="B TAR")] Cellule en bleu sur deux colonnes alignée à droite
===
Exemples
Ce qui donne :
Paragraphe en vert
Titre de niveau 2 en rouge
Zone de codes
entièrement en magenta
sauf cette ligne en bleu
et cette ligne en vert
| Cellule 1 | Celulle 2 (avec un long texte pour que l’alignement à droite soit visible et avec du style dedans) |
| Cellule en bleu sur deux colonnes alignée à droite | |
Classes prédéfinies
Le tableau suivant donne les classes proposées par défaut dans fiche.css. Certaines de ces classes ont un but purement visuel (R, TAL), d’autres ont une approche plus « sémantique » (XML). Elles sont toutes en majuscules, ce qui permet de le distinguer des classes personnalisées.
| Nom de la classe | Conséquence à l’affichage |
|---|---|
| B | colorie le texte en bleu |
| C | colorie le texte en bleu clair (Cyan) |
| CB | propriété CSS clear: both utilisée pour qu’un paragraphe ne « s’écoule » pas autour d’une image placée avant lui |
| CL | Équivalent de clear: left; |
| CLS | Classe d’objet informatique, interface |
| CR | Équivalent de clear: right; |
| G | colorie le texte en vert |
| KEY | Mot-clé réservé (par exemple, true) |
| M | colorie le texte en magenta |
| MTD | Méthode, fonction |
| PTH | Chemin |
| R | colorie le texte en rouge |
| RSC | Ressource (par exemple le nom d’un fichier) |
| STG | Chaîne de caractères, valeur constante |
| TAR | text-align: right; Alignement à droite (uniquement pour les paragraphes et les cellules) |
| TAC | text-align: center; Alignement au centre (uniquement pour les paragraphes et les cellules) |
| TAL | text-align: left; Alignement à gauche (uniquement pour les paragraphes et les cellules) |
| TAJ | text-align: justify; Alignement justifié (uniquement pour les paragraphes et les cellules) |
| UI | Élément d’interface |
| XML | Élément XML |
| Y | colorie le texte en jaune |
Le cas des listes
Le cas des listes est un plus compliqué si l’on veut avoir une gestion très fine des attributs. En effet, le début d’une liste se signale simplement en commençant par un tiret Cependant, lorsque l’on tape « - début de liste » , on crèe en réalité trois éléments imbriqués <ul><li><p> Or chacun est susceptible de diposer de ses propres attributs. Il faut alors respecter la syntaxe suivante :
La définition de classe de l’élément <ul> se fait avant la ligne (comme dans le cas des zones spéciales)
La définition des classe des éléments <li> et <p> se fait à l’aide de deux blocs entre parenthèses : [()()], le premier correspondant au <li> (il peut être vide) et le second au <p>
La classe OL donné à un élément <ul> permet de transformer cette liste en liste numérotée Cette fonction est propre à la transformation XSLT du modèle par défaut. Cette classe doit être définie en premier.
[(class=R)]
- Liste par défaut en rouge
[(class=G)] - cet élément est entièrement en vert
_ y compris les paragraphes suivant
_ comme le montre ce paragraphe
[()(class=G)] - ici seule la première ligne est en vert
_ la suite est en rouge
- ici la première ligne est en rouge
[(class=G)]_ et c’est la deuxième ligne qui est seulement en vert
_ (effectivement)
[(class=M)(class=C)] - Enfin, cette première ligne est en bleu ciel
_ alors que le reste
_ est en magenta
[(class=G)]_ sauf la dernière
[(class=OL)]
-- Ici on inclut
[(class=G)] -- une liste numérotée
__ avec toujours les mêmes possibilités
[(class=M)]__ de couleur
Ce qui donne la liste suivante :
Liste par défaut en rouge
cet élément est entièrement en vert
y compris les paragraphes suivant
comme le montre ce paragraphe
ici seule la première ligne est en vert
la suite est en rouge
ici la première ligne est en rouge
et c’est la deuxième ligne qui est seulement en vert
(effectivement)
Enfin, cette première ligne est en bleu ciel
alors que le reste
est en magenta
sauf la dernière
Ici on inclut
une liste numérotée
avec toujours les mêmes possibilités
de couleur
Sur la même principe que OL, si la première classe attribuée à la liste est DL, la liste est transformée en liste de définition (<dl><dt></dt><dd></dd>. Dans ce cas, le premier paragraphe d’un item de la liste sert à la construction de la balise (<dt> et les suivants sont inclus dans la balise <dd>.
[(class=DL)]
-BDF
_ logiciel de gestion d'une fichotèque
-Scrutarit
_ Moteur de recherche sur les métadonnées
donne :
logiciel de gestion d’une fichotèque
Moteur de recherche sur les métadonnées
Repose sur le format ScrutariData