Style de tous les formulaires de la page (ScrollBars)
Insérez ces lignes entre les balises <HEAD> et </HEAD> :
<style type="text/css"><!--
BODY {scrollbar-face-color:#865585;
scrollbar-shadow-color:black;
scrollbar-highlight-color:white;
scrollbar-3dlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-track-color:#935E94;
scrollbar-arrow-color:#dece6b;}
--></style>
Style de tous les formulaires de la page (Input, Select, Textarea)
<style type="text/css"><!--
input {color:white; background-color:navy;}
select {color:white; background-color:navy;}
textarea {color:white; background-color:navy;}
--></style> Liste des attributs -voici toutes les options que vous pouvez mettre entre les acolades {...}- :
-background-color:#0000ff; : couleur du fond, en hexadécimal ; blue; : couleur du fond, en lettres et en anglais.
-color:#ff0000; : pour définir la couleur du texte, en hexa ; red; : pour définir la couleur du texte, en lettres et en anglais.
-font-family:arial; : nature de la police du texte.
-font-size:8pt; : taille de la police du texte.
-font-weight:bold; : caractère de la police (gras, italique...).
-letter-spacing:2pt; : espacement des lettres du texte.
-text-transform:uppercase; : pour du texte en majuscules ; lowercase; : pour du texte en minuscules.
-width:100pt; : pour définir la longueur de l'élément.
-height:10pt; : pour définir la hauteur de l'élément.
-text-align:left : pour du texte aligné à gauche ; center : pour du texte centré ; right : pour du texte aligné à droite.
-border-width:2pt : pour définir la largeur de la bordure.
-border-color:green : pour définir la couleur de la bordure. Mélange de styles - Il est possible de "mélanger" les styles, notamment pour les éléments de type SELECT, et de définir ainsi un style pour chaque champ.
Exemple :
<select>
<OPTION VALUE="Blanc" STYLE="color:red;background-color:white"> Blanc
<OPTION VALUE="Gris" STYLE="color:white;background-color:gray"> Gris
<OPTION VALUE="Noir" STYLE="color:white;background-color:black"> Noir
<OPTION VALUE="Rouge" STYLE="color:white;background-color:red"> Rouge
<OPTION VALUE="Vert" STYLE="color:white;background-color:green"> Vert
<OPTION VALUE="Bleu" STYLE="color:white;background-color:blue"> Bleu
</select>
Style de tous les liens de la page (liens)
Insérez ces lignes entre les balises <HEAD> et </HEAD> :
<style type="text/css"><!--
a {color:white; text-decoration:none;}
a:hover {color:red; text-decoration:underline;} <-- seulement MSIE !
--></style>
a {...} contient les informations pour tous les liens :
-color:white; définit la couleur des liens. Ici, blanc.
-text-decoration:none; définit que les liens ne seront pas soulignés.
a:hover {...} contient les informations pour tous les liens au passage du curseur :
-color:red; définit la couleur au passage du curseur. Ici, rouge.
-text-decoration:underline; définit que les liens seront soulignés en bas. Classes de liens - En plus de de ces styles pour tous les liens d'une page, il est possible de créer un style particulier pour quelques liens. C'est ce qu'on appelle les classes de liens.
Insérez ces lignes entre les balises <HEAD> et </HEAD> :
<style type="text/css"><!--
a {color:white; text-decoration:none;}
a:hover {color:red; text-decoration:underline;}
a.class1 {color:blue; text-decoration:none;}
a:hover.class1 {color:black; text-decoration:underline;}
--></style>
Voilà, nous avons définit la classe class1, c'est à dire que tous les liens seront comme ceux de la première partie excepté ceux de la classe définie.
Pour définir un lien comme appartenant à une classe, il suffit d'ajouter une partie à votre code HTML : Exemple 2
<a href="page.html" class="class1">Exemple 2</a> Liste des attributs -Voici toutes les options que vous pouvez mettre entre les acolades {...}- :
-color:#ff0000; : pour définir la couleur, en hexadécimal ; red; : pour définir la couleur, en lettres et en anglais.
-text-decoration:none; : pas de soulignement ; underline; : pour souligner en bas ; overline; : pour souligner en haut !
-font-family:arial; : nature de la police des liens.
-font-size:8pt; : taille de la police des liens.
-font-weight:bold; : caractère de la police (gras, italique...).
-letter-spacing:2pt; : espacement des lettres du lien.
-text-transform:uppercase; : pour des liens en majuscules ; lowercase; : pour des liens en minuscules.
-background-color:#ffffff; : pour un cadre plein en arrière plan, en hexadécimal ; white; : pour un cadre plein, en lettres et en anglais.
-width:100pt; : pour définir la longueur du lien.
-height:10pt; : pour définir la hauteur du lien.
Vous pouvez bien entendu ne pas créer de CSS, et utiliser ces attributs dans votre code HTML uniquement pour certains liens. Dans ce cas, il faut écrire : ->Lien<-
<a href="page.html" style="text-decoration:none; ...">Lien</a>
