Section courante

A propos

Section administrative du site

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

Exemple

  1. <html>
  2. <head>
  3. <style>
  4. #monid {
  5. background-color: blue;
  6. color: white;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div id="monid">Gladir.com</div>
  12. </body>
  13. </html>

on obtiendra le résultat suivant :

Gladir.com

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

Exemple

  1. <html>
  2. <head>
  3. <style>
  4. .mondiv {
  5. background-color: red;
  6. color: white;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="mondiv">Gladir.com</div>
  12. <div>Entre les deux</div>
  13. <div class="mondiv">Gladir.ca</div>
  14. </body>
  15. </html>

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;
...
}


Dernière mise à jour : Mercredi, le 14 juillet 2013