Nous allons voir ce que l'on peut modifier en changeant le style d'un élément. Cela n'est pas exhaustif, mais vous permettra au moins de démarrer avec les styles.
Modifier le style du texte est chose très courante, pour mettre en valeur du texte suivant son importance. Voici un exemple:
p.special {
font-family: "times", serif;
font-style: italic;
font-weight: bolder;
font-stretch: expanded;
font-size: 24pt;
color: orange;
text-indent: 2em;
text-align: justify;
text_decoration: underline;
white-space: pre;
}
Je n'ai pas osé voir ce que donne ce style, mais il a le mérite de vous présenter différentes manières de modifier le texte.
-
font-familypermet de spécifier la police de caractères, un nom de famille ou un nom générique de famille, ou les deux comme ci-dessus. -
font-styleest l'un de: italic, oblique, normal ou inherit -
font-weightpeut être soit lighter, normal, bold ou bolder. Il peut aussi être une valeur entre 100 et 900, mais uniquement par centaines: 100, 200, 300 et ainsi de suite. -
font-stretchindique comment la police est étirée: normal, wider, narrower, expanded, condensed et j'en passe. -
font-size: comme son nom l'indique. On peut aussi mettre autre chose qu'une taille, mais je vous laisse fouiller dans la spécification CSS2. -
color: définit la longueur d'onde dans laquelle le navigateur va émettre pour afficher le texte -
text-indent: ceci est la longueur de l'alinéa pour un paragraphe -
text-align: l'indentation se fait left, center, right ou justify, ou inherit ou même... mais voyez la spécification CSS2 à nouveau! -
text-decoration: rajoute une ligne, underline, overline ou line-through... ou la specification CSS2 encore! -
white-space: normal, ou pre pour avoir un formatage comme avec la balise <pre>, ou encore nowrap qui fait comme normal mais ne va pas à la ligne après une balise <br>
Les liens, c'est comme du texte, mais ils ont quelques spécificités supplémentaires. On peut spécifier leur couleur quand ils sont sélectionnés, ou quand le ointeur de la souris est dessus. Ce ne sont pas des propriétés, mais des pseudo-classes. Voyez l'exemple suivant:
A.link { color: blue }
A.visited { color: purple }
A.hover { color: green }
A.active { color: yellow }
A.focus { color: red }
En bleu vous aurez donc les liens normaux, non visités, non sélectionnés, bref, vierges. En violet, ce sont ceux qui ont été visités. Les trois suivants définissent le style lorsque le pointeur de la souris touche le lien. Le lien passe en vert si la souris est sur le lien, mais qu'on ne clique pas. Amusez-vous à changer non seulement la couleur, mais aussi la taille de la police ou même la police elle-même, c'est assez amusant! En jaune, pareil, mais quand l'utilisateur presse le bouton de la souris. Et le dernier, en rouge, concerne les liens qui ont le focus, lorsque le clavier est en jeu et pas la souris.
Il existe dans les spécifications CSS2 d'autres pseudo-éléments, non pas pour les liens, mais pour le texte en général, comme par exemple pour spécifier un style précis aux premières lettres d'un paragraphe. Je vous laisser vous jeter sur la documentation pour en savoir plus.
Les bordures concernent tous les éléments de type boîte, comme évidemment les cellules d'un tableau, mais aussi tout simplement un paragraphe entre deux balises <p>, les listes, etc. Un tel élément est donc constitué d'un contenu, et de ce que j'appelle la bordure, bordure qui est elle-même constutiée de trois zones. La zone intérieure s'appelle le padding, la zone centrale border et la zone extérieure margin.
Pour ces trois zones, vous pouvez définir la taille, soit de manière globale:
padding: 1px 2px 3px 4px border: 1px 2px 3px 4px margin: 1px 2px 3px 4px
soit de manière précise:
padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;
Vous pouvez faire de même pour border et margin.
Vous pouvez encore indiquer border: 1px qui fixe 1 pixel pour chaque bord. Ou encore border: 1px 2px qui fixe 1 pixel pour le bord du haut et celui du bas, et 2 pixels pour les bords de droite et gauche. Ou encore border: 1px 2px 3px qui fixe à 1 pixel la bordure du haut, à 3 celle du bas, et à 2 celles de droite et de gauche.
En ce qui concerne le bord, non seulement on peut spécifier sa taille, mais aussi son style et sa couleur. Pour cela, comme nous avions border, nous avons border-style et border-color. Et comme nous avions entre autres border-top nous avons border-top-style et border-top-color. Pour la valeur de la couleur, nous avons les valeurs habituelles, plus transparent. Pour les styles:
-
noneethiddenreviennent à peu près au même. Le premier force la taille du bord à 0 alors que le second non. -
solid: la ligne est pleine. Lors de vos premiers tests, vous oublierez surement de mettre cette valeur au style en voulant tester la couleur! -
dotted: ligne en pointillés -
dashed: ligne ségmentée -
double: ligne double. L'espace intérieur se fixe avecborder-width -
groove: ligne semblant incrustée dans l'écran -
ridge: ligne semblant sortir de l'écran -
inset: ligne donnant l'impression que le contenu de la boîte est enfoncé dans l'écran -
outset: ligne donnant l'impression que le contenu de la boîte est en relief par rapport au reste de l'écran
Voici ce que donne le HTML suivant, rendu par galeon (version 1.3.3):
1 <table> 2 <tr style="margin: 3pt; padding: 3pt; font-size: 30pt;"> 3 <td style="border: 2pt; border-color: blue; border-style: solid">solid</td> 4 <td style="border: 2pt; border-color: blue; border-style: dotted">dotted</td> 5 <td style="border: 2pt; border-color: blue; border-style: dashed">dashed</td> 6 <td style="border: 2pt; border-color: blue; border-style: double">double</td> 7 <td style="border: 2pt; border-color: blue; border-style: groove">groove</td> 8 <td style="border: 2pt; border-color: blue; border-style: ridge">ridge</td> 9 <td style="border: 2pt; border-color: blue; border-style: inset">inset</td> 10 <td style="border: 2pt; border-color: blue; border-style: outset">outset</td> 11 </tr> 12 </table>
Pour le site web construit avec XSLT, vous pouvez maintenant définir le style du menu par exemple, en mettant ceci:
table.menu td {
border: 2px;
border-style: solid;
border-color: red;
}
span.menuitem a.link { color: red; text-decoration: none }
span.menuitem a.visited { color: purple; text-decoration: none }
span.menuitem a.hover { color: black; text-decoration: none }
span.menuitem a.active { color: black; text-decoration: none }
span.menuitem a.focus { color: black; text-decoration: none }
A vous de vous amuser avec les différentes balises et les différentes classes de la page web!
