Utilisation de XHTML et des CSS
Les graphismes
Les couleurs
Dans les feuilles de style la gestion des couleurs se fait grâce à trois méthodes différentes :
- La notation RGB, on la déclare de la façon suivante: rgb(0,0,255). Cet exemple représente la couleur bleue. On indique pour chaque couleur (rouge, vert, bleu) la valeur souhaitée entre 0 et 255.
- La notation hexadécimale, plus adaptée à l'informatique et à la manipulation d'octets. On utilise le caractère # puis ensuite une valeur RGB codée en hexadécimal. Les trois composantes de couleur sont donc rassemblées sur 6 caractères. Ici : #0000FF pour le bleu. Il existe aussi une version hexadécimale plus courte qui n'utilise qu'un caractère pour chaque composante de couleur, mais elle est beaucoup moins utilisée car elle propose une gamme de couleur moins large.
- Les mots clé de couleur, permettent d'utiliser des mots clés prédéfinis correspondants à certaines couleurs dominantes comme : green, black, blue, ... etc
Les polices de caractères
Grâce aux CSS on peut utiliser n'importe quel type de police de caractère sur son site, mais elle ne seront affichées correctement seulement si elles sont installées sur l'ordinateur des utilisateurs du site. Pour que tout le monde ait le même affichage du site il faut utiliser des polices dites simples et communes.
Pour utiliser une police de caractère on utilise la propriété font-family. Cette propriété se transmettant hiérarchiquement par héritage, on la déclare souvent dans l'élément body afin qu'elle soit appliquée sur le site en entier.
Afin de pallier le manque d'une police chez un utilisateur du site on peut déclarer une enchaînement de police à utiliser par exemple :
font-family: 'Trebuchet MS', times, verdana
Dans cet exemple si jamais la police Trebuchet MS n'est pas installée chez une personne alors le site sera affiché en utilisant la police de caractères times.
Les tailles et unités de mesures
Il existe de nombreuses unités de mesures mais on peut les diviser en deux grands types :
Les unités de taille fixe
- Le point noté : 1pt (par exemple ici cela équivaut a 35 mm)
- Le pica noté : 1pc
- Le centimètre noté : 1cm
- Le millimètre noté : 1mm
- Le pouce noté : 1 in (inch) qui équivaut à 2,54 cm
Ces unités ne sont pas très utilisées car cela peut donner un rendu différent selon la résolution des écrans des différents utilisateurs
Les unités de taille relative
- La largeur de M noté : 1em (cette mesure correspond à la largeur du caractère M dans la police de référence)
- La hauteur d' x note : 1 ex (cette mesure correspond à la hauteur du caractère x dans la police de référence)
- Le pourcentage noté : 1%
- Le pixel noté : 1px
La taille de la police de référence se transmet par héritage donc dans le cas d'éléments imbriqués, la police de référence change à chaque nouveau conteneur. Si on attribue une taille de police de 2em dans un paragraphe puis une taille de 2em dans un autre élément imbriqué, on attribuera donc à ce dernier élément une taille de 2em par rapport à 2em soit 4em.
Pour spécifier une taille de police on peut aussi utiliser des mots clés de taille comme : large, small, medium, etc ...
Les arrières plans
On peut définir deux types d'arrière plan pour un élément soit une image, soit une couleur simple. Les fonds de chaque élément étant par défaut transparents si on définit une couleur pour un élément alors ses enfants possèderont la même couleur de fond.
Pour afficher une couleur comme arrière plan on utilise la propriété : background-color. On lui spécifie ensuite dans la notation de notre choix la couleur voulue.
Si on veut utiliser une image comme arrière plan il suffit d'utiliser la propriété : background-image : url(image);
Par défaut une image affichée en fond se répetera automatiquement sur l'axe vertical et horizontal afin d'être présente sur toute la surface d'un élément. On peut spécifier grâce à la propriété background-repeat, sur quels axes on veut que l'image se répète ou non. On utilise alors les valeurs suivantes :
- no-repeat : pour qu'il n'y ait pas de répétition
- repeat-x : pour que l'image ne se répète que sur la largeur
- repeat-y : pour que l'image ne se répète que sur la hauteur
On peut aussi spécifier à une image de fond de rester au même endroit lors du défilement de la fenêtre grâce à la propriété background-attachment : fixed.
Il est aussi possible de positionner l'image de fond à sa guise grâce à des combinaisons de mots clés comme : center,left, right, top, bottom. Par exemple pour positionner en haut a gauche d'un élément on utilisera la propriété suivante :
background-position : top left;