Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes

Feuilles de Style en Cascade - Présentation et Utilisation

Sommaire

Déclaration et utilisation des Feuilles de style en cascade

Les feuilles de styles peuvent être déclarées et utilisées de 3 manières différentes:

Retour au sommaire

Style Inline

La déclaration se fait à l'intérieur de la balise et plus précisément au niveau de la valeur de l'attribut style d'une balise. Cette déclaration ne doit porter que sur ce qui sera utilisé dans l'élément délimité par la balise d'ouverture et de fermeture. La déclaration se fait de la manière suivante: attribut style="nom_de_l'attribut_de_style : valeur_de_l'attribut_de_style" . Si plusieurs attributs de style doivent être utilisés, ils sont séparés par des ; .
Lorsque la valeur est une URL, la déclaration se présente de la façon suivante: attribut, suivit de : et de url(URL) .
Exemple: background-image:url(http://deuxcha.online.fr/html/images/bluegrad.jpg) .

Exemple d'utilisation d'une style inline
Code Effet
<p style="text-align:center ; text-decoration:underline"> paragraphe centré et souligné grâce à un style inline </p>

paragraphe centré et souligné grâce à un style inline

Retour au sommaire

Style Externes

Les Styles externe sont définit dans un document texte dont l'extension est ".css" . Ce document peut être appelé un nombre infini de page qui utiliseront donc les mêmes styles définit dans ce document. Cela permet d'une part d'éviter de recopier les styles dans chaque page, et d'autre part de pouvoir modifier facilement l'apparence d'une grand nombre de document en modifiant uniquement celui qui définit les styles.

Pour être utilisé dans un document html, la balise <style> doit être utilisée de manière à importer les données du document en ".css" dans le document html. Cela se fait de la manière suivante:

Exemple d'importation d'une feuille de style externe
Code Effet
<link rel="stylesheet" type="text/css" href="style.css" title="feuille de style principale" > Indication de l'existance d'une relation de type feuille de style entre le document actuel et le document style.css situé dans le même répertoire que le document actuel.
<style type="text/css" > début de la déclaration des styles de la page html.
<!-- début de commentaire servant à masquer la déclaration des styles pour les butineur ne reconnaissant pas les styles
@import url(style.css); Importation des styles définit dans le document se trouvant à l'URL relative style.css (une URL absolue peut aussi être utilisée pour importer le style).
--> fin du commentaire servant à masquer la déclaration des styles
</style> Fin de la déclaration des styles

Retour au sommaire

Style Internes

Les styles sont définit dans l'entête du document html, entre les balises <style> et </style>. La déclaration est identique à celle qui se fait dans le document .css des styles Externes. Elle est expliqué dans la sous-partie sur la Syntaxe des déclaration de styles Externes et Internes.

Retour au sommaire

Syntaxe des déclaration de styles Externes et Internes

Déclaration de base

Que ce soit dans un document avec l'extension .css pour les styles externes, ou dans un document html entre les balises <style> et </style> pour les styles internes , la déclaration des styles est identique.

Elle se fait de la façon suivante: Déclaration du nom de la balise affectée par les styles souhaités, suivit entre accolades de la liste des attributs de styles et des valeurs souhaitées. La déclaration des attributs de styles et valeurs souhaitées pour la balise définie se fait de la manière suivante: nom de l'attribut de style suivit de : puis de la valeur souhaitée. Si plusieurs attributs de style sont utilisés pour une même balise, les couples attribut-valeur sont séparés par des ; .

Exemple de déclaration de styles Externes et Internes:
p {background-color:#7fffd4 ; text-align:center}

Retour au sommaire

Valeur de type URL

Lorsque la valeur est une URL, la déclaration se présente de la façon suivante: attribut, suivit de : et de url(URL) .
Exemple: background-image:url(images/bluegrad.jpg) .

Retour au sommaire

Styles communs à plusieurs éléments

Plusieurs balises peuvent utiliser des styles identiques. Dans ce cas, les noms des balises sont séparés par des virgules.

Exemple de déclaration de styles commun à plusieurs balises.
p, h1, h2, h3, address {background-color:#7fffd4 ; text-align:center}

Effet:
Les paragraphes, titres de niveaux 1 à 3 et adresses des pages utilisant cette déclaration de style auront une couleur d'arrière plan du texte de couleur aquamarine (code hexadécimal:"7fffd4") , et le texte sera centré .

Retour au sommaire

pseudo-classes et pseudo-éléments

Certains éléments comme les balises de liens peuvent être définit de diffétes manière pour certaines sous-parties de l'élément. Par exemple, la balise lien peut avoir un style définit avec le sélecteur link. Mais, il est aussi possible de donner un style différent lorsque le lien est actif, a été visité,... Ceci se fait à l'aide des pseudo-classes du sélecteur link.
Les pseudo-classes sont définit de la manière suivante:
selecteur suivie de : puis de la sous-classe. Si ces pseudo-classes ne sont pas associés au sélecteur, c'est l'ensemble des pseudo-classes de l'élément qui seront affectés par la définition du style de la balise.

Exemple de définition de la pseudo-classe de lien activé.
Code Effet
a:link { color=#7fffd4 } Sélecteur a, pseudo-classe link:
donne la couleur aquamarine au liens non-actifs, non-visités .
a:visited { color=#7fffd4 } Sélecteur a, pseudo-classe visited:
donne la couleur aquamarine au liens visités .
a:active { color=#7fffd4 } Sélecteur a, pseudo-classe active:
donne la couleur aquamarine au liens actifs.
a { color=#7fffd4 } Sélecteur a, aucune pseudo-classe:
donne la couleur aquamarine au liens (quelque soit leur état).

La syntaxe est la même pour les pseudo-éléments first-line et first-letter du sélecteur p .

Retour au sommaire

Classes de styles

Il est parfois nécéssaire d'utiliser plusieurs styles différents pour un même élément d'un document. Par exemple avoir 2 types de tableaux ayant des aspects différents dans un même document.
Pour cela, il est possible d'associer des styles à des classes. Le style en question ne sera utilisé que lorsque la classe sera appelée. Le reste du temps, c'est le style par défaut (externe, ou interne) qui sera utilisé .

Pour déclarer une classe de style, le sélecteur qui utilisera ce style doit être suivit d'un point, puis du nom de la classe.
L'appel de ce style dans une page se fera alors en utilisant l'attribut commun class et en lui donnant comme valeur le ou les noms des styles appelés.

Déclaration d'une classe de style:

p.exemple {background-color:#7fffd4 ; text-align:center }
p.test {color:#8a2be2 ; text-decoration:underline }

Effet:
Les paragraphes utilisant la classe nommée exemple auront une couleur d'arrière plan du texte sera aquamarine (code hexadécimal:"7fffd4") , et le texte sera centré .
Les paragraphes des pages utilisant la classe nommée test auront un texte de couleur blueviolet (code hexadécimal:"8a2be2") , et le texte sera souligné.

exemple d'utilisation de styles internes ou externes avec l'attribut class
Code d'appel du style Effet
<p class="exemple">Ce paragraphe utilise le style déclaré sous le nom exemple, comme valeur pour son attribut classe.</p>

Ce paragraphe utilise le style déclaré sous le nom exemple comme valeur pour son attribut classe.

<p class="exemple, test">Ce paragraphe utilise les styles déclaré respectivement sous le nom exemple et test, comme valeurs pour son attribut classe.</p>

Ce paragraphe utilise les styles déclaré sous le nom exemple et test, comme valeurs pour son attribut classe. Seule la dernière classe de style trouvée est utilisée.

<p class="exemple, erreur">Ce paragraphe utilise les styles déclaré sous le nom exemple et erreur, comme valeurs pour son attribut classe. La dernière classe de style (erreur) n'existant pas, aucun style n'est utilisé.</p>

Ce paragraphe utilise les styles déclaré sous le nom exemple et erreur, comme valeurs pour son attribut classe. La dernière classe de style (erreur) n'existant pas, aucun style n'est utilisé.

Il est également possible de définir une classe sans l'associer avec un sélecteur. Dans ce cas, la classe pourra être appelée par n'importe quelle balise (supportant l'attribut class), et ses propriétés seront alors utilisées par l'élément en question.
Pour déclarer une classe de cette manière, il suffit de ne placer aucun sélecteur devant le point.

Exemple:
.test {color:#8a2be2 ; text-decoration="underline"}
Lorsque cette classe sera appelée l'élément (qu'il soit, p, address, blockquote,...) aura une couleur blueviolet, et seront soulignés.

Retour au sommaire

Classe et attribut commun ID

De la même manière qu'une classe peut être utilisée pour définir des styles particuliers, une description de style peut être associée à un élément particulier qui sera définit" par son attribut ID

Par exemple, si les premiers titres de chacune des pages d'un site sont identifés par l'attribut #top . Une description de style peut être associé à ces titres. Pour ce faire, il suffit de remplacer le point précédant le nom de la classe par le symbole # .
#top {color="red"}
tous les éléments ayant l'attribut ID="top" utiliseront ce style et auront une couleur rouge.

Retour au sommaire

Styles Contextuels

La dernière possibilité de définition de style, et de choisir un style particilier lorsque les éléments sont imbriqués dans d'autres éléments.
Par exemple, il est possible d'utiliser un style particulier pour les liens, et un autre style pour tous les liens qui se trouverons dans un tableau, dans une liste,....
Pour réaliser une telle chose, il faut définir le style en plaçant au début de la description les imbriquations qui seront nécéssaire pour que le style soit utilisé .

Par exemple, si les liens situés dans une liste non ordonnée doivent avoir une couleur rouge, j'utiliserais la déclaration de style suivante:
ul a { color:red }

Retour au sommaire

Commentaires dans les feuilles de style

Il est possible de mettre des commentaires dans les délarations de feuilles de styles. Les commentaires peuvent s'étendre sur plusieurs lignes etdoivent commencer par /* et se terminer par */ :
a:hover { color:red } /* lorsque les liens sont survolés par la souris, ils deviennent rouge */

Retour au sommaire

Règles de priorité des styles

Plusieurs sortes de style (Externe, Interne, Inline) peuvent être utilisé pour un même document html. Il existe une règle de priorité qui permet de savoir quel style est utilisé s'il y a conflit entre plusieurs styles définit pour une même balise.
Le règle est que les styles les plus "proches" du code sont utilisés. C'est à dire que les Styles Inline sont prioritaires par rapport aux styles Internes qui sont eux même prioritaires par rapport aux styles Externes.

Avec les CSS2, de nouvelles priorités ont été définies: les éléments n'utilisant pas de style, et étant situés dans un élément qui utilise des styles héritent des même styles.
Cepedant, si L'élément situé à l'intérieur utilise des styles, alors, il les gardes.

Retour au sommaire

Entrée | Sommaire | Historique | Structure | Entête et Corps | Textes | Liens | Listes | Images | Tableaux | Cadres | CSS | Propriétés CSS | Annexes


1 juillet 2002
Stéphane Chalamet : stephane.chalamet@free.fr