Inclusion de la feuille de style (CSS)
Il est possible de définir des CSS de trois façons. La méthode la plus commune, est de les inclure dans un fichier CSS avec la balise «link» du HTML de la façon suivante :
| <link rel="stylesheet" href="mescss.css" type="text/css" /> |
La seconde méthode consiste à les inclure dans la page HTML à l'aide de la balise «style» avec la syntaxe suivante :
|
<style> mesdefinitions </style> |
Et la troisième méthode, beaucoup plus limitée, est de les inclure à l'aide du paramètre «style» de n'importe quelle balise HTML :
|
<mabalise style=mesdefinitions> |
Syntaxe d'une déclaration
Lorsqu'on définir un sélecteur (balise, classe ou identificateur), il faut soit l'inclure dans un fichier .CSS ou dans une balise «style» et elle devra avoir la syntaxe suivante :
|
selecteur { propriete1:valeur1; propriete2:valeur2; propriete3:valeur3; ... } |
Il est à noter qu'il n'est pas nécessaire de changer de ligne et qu'il peut ainsi être regroupé sur la même ligne si nécessaire. De plus, on peut définir autant de propriétés que l'on souhaite, il faut cependant en définir au moins une. La liste des propriétés que l'on peut inclure sont disponibles ici.
Les identificateurs (ID) et les classes (CLASS)
On peut définir un sélecteur d'identificateur (ID) dans un fichier de feuille de style ou dans une balise «style», selon la syntaxe suivante :
|
#selecteur { propriete1:valeur1; propriete2:valeur2; propriete3:valeur3; ... } |
Ensuite, il faudra l'associé à la balise de la façon suivante :
| <balise id=selecteur> |
Remarques
- Le nom d'identificateur ne doit pas commencer par un chiffre. Il doit obligatoirement commencer par une lettre ensuite, il peut avoir un mélange de chiffres et de lettres.
- Un sélecteur d'identificateur (ID) s'applique uniquement pour un simple élément.
Exemple
on obtiendra le résultat suivant :
On peut définir un sélecteur de classe (CLASS) dans un fichier de feuille de style ou dans une balise «style», selon la syntaxe suivante :
|
.selecteur { propriete1:valeur1; propriete2:valeur2; propriete3:valeur3; ... } |
Ensuite, il faudra l'associer à la balise de la façon suivante :
| <balise class=selecteur> |
Remarques
- Le nom de la classe ne doit pas commencer par un chiffre. Il doit obligatoirement commencer par une lettre ensuite, il peut avoir un mélange de chiffres et de lettres.
- Un sélecteur de classe (CLASS) peut s'appliquer à un ou plusieurs éléments.
- Si vous avez très peu de définitions de sélecteur et que vous ne les réutilisez pas dans d'autres pages HTML, il peut être préférable de les inclure directement dans le code de la page HTML car ils seront chargés plus rapidement par le navigateur. Cependant, à l'inverse, si vous en avez beaucoup, vous risquez d'être confronté à risque de redondance inutile. Ainsi, on bon dosage du contenu inclus dans les balises «style» versus fichier «.css» demandera réflexion.
Exemple
on obtiendra le résultat suivant :
|
Gladir.com
Entre les deux
Gladir.ca
|
On peut également forcer sélecteur de classe (CLASS) à ce qu'il s'applique uniquement à une balise en particulière, en utilisant la syntaxe suivante :
|
balise.selecteur { propriete1:valeur1; propriete2:valeur2; propriete3:valeur3; ... } |