Outils
Xml to Html > Feuille de style (UI.css)
La feuille de style UI.css
Cette feuille de style en cascade définit les styles des éléments contenus dans les pages Html: (menu horizontal, corps, sommaire ...)
En particulier celui :
  • des titres en rapport avec les section (police, gras/italique, taille, couleur)
  • des titres dans les pages imprimables (police, gras/italique, taille, couleur)
  • des paragraphes (police, taille)
  • des liens (couleurs pour les liens)
  • des menus
Les liens
Les couleurs des liens sont définies au début du fichier UI.css
   a:link {color:#848400;}
   a:active {color:#0033CC;}
   a:visited {color:#848400;}
   a:hover {color:#CC0033;}
Ici la couleur d'un lien (link) et la couleur d'un lien déjà utilisé (visited) est la même. On peut modifier ces couleurs en hexadécimal.
La couleur d'un lien survolé par la souris (hover) est également modifiable comme la couleur d'un lien qui est juste activé (active) mais toujours en hexadécimal. Ici ces deux couleurs sont deux variantes de bleu, bleu gris (hover) pour survoler le lien et bleu vif (active) quand on clique sur le lien
On peut utiliser un logiciel de dessin qui donne les couleurs RVB en Hexadécimal ou utiliser GenXML en cliquant sur le style "C" (couleur) en haut. Il suffit de régler les trois composantes R, V et B pour avoir la couleur voulue puis de noter cette couleur. Pour finir, il faut cliquer sur le bouton Annuler
Le style du corps
Le style du corps (de l'ensemble du texte) n'est défini que pour les polices :
Div.Corps{
font-family: Arial, Helvetica, sans-serif;
}
On peut modifier la liste ordonnée de polices (font-family) qui serviront à écrire le texte avec les caractères existants sur l'ordinateur en cherchant dans l'ordre les polices mentionnées.
D'autres styles pourront venir en complément de ce style du corps.
Les titres liés aux niveaux
Les styles de police des titres des sections de premier niveau (Section 1) sont définis par :
SPAN.Titre1 {
font-size: 12pt;
font-weight: bold;
color: #545400;
font-family: verdana,Arial, Helvetica, sans-serif;
}
On peut modifier la taille (font-size), la graisse ou épaisseur (font-weight) qui peut être normal ou grasse (bold), la couleur (color) toujours en Hexadécimal et la liste ordonnée de polices (font-family).
Pour la graisse de la police, on peut aussi indiquer un nombre de 100 à 900 par incrémant de 100 (exemple ; font-weight: 200).
De même pour les titres de niveaux 2, 3 et 4 (SPAN.Titre2, SPAN.Titre3, SPAN.Titre4).
Les titres des pages imprimables
Les différents niveaux de titre utilisés dans les pages imprimables pour indiquer la position du document dans le sommaire sont donnés par : DIV.TitregeneImp, DIV.TitreItemImp et DIV.TitreSItemImp.
Par exemple :
DIV.TitregeneImp {
font-size: 18pt;
color: #003366;
font-weight: bold;
font-family: Verdana,Arial, Helvetica, sans-serif;
margin-top: 8px;
text-align: center;
margin-bottom: 24px;
}
Comme pour les titres liés aux niveaux, on peut modifier la taille, la couleur, la graisse et la liste des polices des titres des pages imprimables. Mais on peut aussi préciser les marges hautes (margin-top) et basses (margin-bottom) en pixels (px) ou en centimètres (cm), c'est à dire ici avant le titre et après le titre. On peut également préciser si le titre est centré ou aligné à gauche ou à droite.
De même pour les autres titres des pages imprimables.
Les styles personnels
Trois styles personnels sont modifiables et peuvent êtrre utilisés pour les pages d'accueil du site (voir le site modèle). Ce sont les styles définis par : SPAN.Perso1, SPAN.Perso2 et SPAN.Perso3
On peut modifier : la taille, la graisse, la couleur et la liste des polices.
Le style d'un paragraphe
Il définit la taille et la liste des polices que l'on peut modifier :
SPAN.Para {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
}
La liste des polices est la même que pour le style du corps, le style paragraphe n'ajoute donc que la taille de la police lorsqu'il est inclus dans un style corps.
Résumé et Citation
Ces deux style ne sont pas utilisés actuellement par les utilitaires Xml, mais sont disponibles pour une future extension ou pour être insérés manuellement dans les pages Html.
Les sections
Il y a quatre niveaux de section, chaque niveau possède son propre style défini par : DIV.Sec1, DIV.Sec2, DIV.Sec3, DIV.Sec4.
Par exemple pour la section 1 :
DIV.Sec1 {
display: block;
margin-top: 24px;
margin-bottom: 10px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
On peut modifier pour chaque section : le mode d'affichage (display) en bloc (block) avec saut de ligne avant et après ou en line (inline), les marges hautes (margin-top) et basses (margin-bottom), l'alignement du texte et la liste des polices.
Les listes
Il y a deux sortes de liste : les listes à puces (Liste) et les listes numérotées (listenumero).
Pour la liste à puces :
DIV.Liste {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style: disc;
}
On peut donc modifier la liste et la taille de police mais aussi le symbole de la puce (point --> list-style: disc, carré --> list-style: square, aucun --> list-style: none).
Pour les listes numérotées, on peut également modifier la liste et la taille de police mais aussi la marge à gauche de la liste qui est fixée à 5 pixels par défaut (margin-left: 5px).
Le sommaire
Le sommaire contient des rubriques et des sous-rubriques. Il y a trois cas pour les rubriques et sous-rubriques:
  • la rubrique (ou sous-rubrique) est active (la page Html associée n'est pas affichée mais le lien vers cette page est actif). C'est la cas normal ;
  • la rubrique (ou sous-rubrique) est activée (le lien est inactif) et la page Html assoxciée est affichée (rubrique ou sous rubrique on) ;
  • la rubrique (ou sous-rubrique) n'a pas de page Html associée (rubrique ou sous-rubrique vide).
Ce qui correspond aux trois styles pour les rubriques : rubriques, rubriqueson, rubriquesvides et aux trois styles pour les sous-rubriques : sousrubrique, sousrubriqueon, sousrubriquevide.
Par exemple pour une rubrique active :
SPAN.rubriques {
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
On peut donc changer la liste des polices, la taille et la graisse de la police.
La couleur du lien pour une rubrique active n'est pas pécisée, ce sera donc la couleur des liens (a:link) definie en début du fichier UI.css
Les deux autres styles (rubriqueson et rubriquesvides) sont semblables mais fixent les couleurs que l'on peut modifier. De plus, pour le style rubriqueson, le soulignement du lien est supprimé par text-decoration: none;. Si on veut le lien souligné, il faut modifier en : text-decoration: underline;
Les styles des sous-rubriques sont sur le même modèle.
Autres styles
Quelques autres styles sont présents dans le fichier UI.css mais ne sont pas encore utilisés par les utilitaires Xml, mais sont disponibles pour une version ultérieure ou pour être insérés manuellement dans les pages Html.