|
Outils Xml |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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 :
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{
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 {
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 {
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 {
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 {
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 {
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:
Par exemple pour une rubrique active : SPAN.rubriques {
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. |
© SiteFormTice avril 2020 - Tous droits réservés. Limitation à l'usage non commercial, privé ou scolaire.