User Tools

Site Tools


2015_2016:s1:webdoc:td2

This is an old revision of the document!


TD2 - Initiation à CSS

Inspiré du cours de Gaëtan Rey.

Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. L'un des objectifs majeurs de CSS est de séparer le contenu de la forme dans un document (x)html. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document.

Ainsi, les avantages des feuilles de style sont multiples :

  • La structure et la présentation du document sont gérées dans des fichiers séparés.
  • La conception d'un document se fait sans se soucier de la présentation.
  • La présentation est uniformisée (plusieurs pages (X)HTML peuvent faire référence aux mêmes feuilles de styles).
  • Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran.
  • La lisibilité des pages (X)HTML est améliorée puisqu’elles ne contiennent plus de balises ni d'attributs de présentation.

Utilisation de CSS

Toutes les instructions de mises en forme seront contenues dans un fichier CSS identifiable par son extension .css. Le fichier (X)HTML contenant la structure du document doit alors contenir une référence vers le fichier CSS.

Par exemple, si vous possédez un fichier style.css, vous devrez ajouter la ligne suivante dans le *bloc header* du fichier HTML :

<head> 
   <link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
2015_2016/s1/webdoc/td2.1446996094.txt.gz · Last modified: 2015/11/08 16:21 by urli