CSS : les feuilles de style

Sommaire

  1. #Appel d'une feuille de style
  2. #Conception d'une feuille de style
  3. #Modele de mise en page
  4. #Utilisation abusivedes feuilles de style
  5. #Combinaison de l'usage des feuilles de style et du langage Javascript
Introduction

Habituellement, les pages HTML sont présentées selon les caractéristiques de la feuille de style par défaut du butineur utilisé.

Une feuille de style permet de (re)définir certaines caractéristiques de présentation de marques prédéfinies, et ainsi de personnaliser tout un site, en respectant une charte de présentation propre au site.

L'utilisateur peut aussi éventuellement indiquer une feuille de style qui s'appliquera à tous les documents visualisés.

Appel d'une feuille de style

Le langage HTML permet de demander qu'un document soit présenté selon feuille de style particulière. Pour cela, il faut ajouter dans la section <head> (l'entête) :

<head>
... 
<link rel="StyleSheet" type="text/css" href="UrlDeLaFeuilleDeStyle">

Avec la directive @import , on peut aussi importer une ou plusieurs feuilles de style, en ajoutant dans l'entête, ou au début d'une autre feuille de style :

<head>
... 
<style type="text/css">
@import url(http://Un.Serveur/.../UnFichierDeStyle)
@import url(http://Un.Serveur/.../UnAutreFichierDeStyle)
</style>

La balise STYLE, utilisée dans l'entête, permet de surcharger un style dans tout un document :

<head>
... 
<style type="text/css">
H1 {color: blue }
</style>

On peut aussi modifier localement (directement dans la section <body>) le style d'un paragraphe : une marque de paragraphe peut porter l'attribut style="NomDePropriété: Valeur".

...
<body>
...
<p style="color: aqua">Paragraphe bleu ciel

Il peut y avoir conflit entre les directives fournies par ces différentes approches. La résolution de ces conflits est basée sur la pondération des directives:

Conception d'une feuille de style

Modèle de mise en page

Utilisation abusive des feuilles de style

Outils pour les feuilles de style

Voir aussi http://www.w3.org/Provider/Style/Overview.html

Cette page est très largement inspirée de http://cui.unige.ch/eao/www/TechInternet/CSS.html