Cette introduction admet que vous êtes déjà plus ou moins familier avec l'univers des CSS. La présente étude va porter sur une approche permettant d'utiliser les CSS et les CSS-P pour gérer la mise en page d'un contenu.
Dans une première étape la mise en page s'adressera au moteurs d'interprétation contemporain, puis, dans un second temps, la feuille de style s'éfforcera de prendre en charge les navigateurs plus anciens.
Introduction aux feuilles de styles CSS
L'idée majeure étant de séparer le contenu du mode de présentation, il est important de bien définir la structuration du document et de s'assurer du découpage optimal du contenu. Pour cet exemple, nous partirons sur un document classique avec un entête, une barre de menu, et une partie centrale de contenu. Le tout étant adaptable et reditribuable en fonction de la dimension de la fenêtre du navigateur.
Avant de débuter ce tutorial assurez vous d'avoir pris connaissance de l'utilisation de xHTML et des CSS sur ce tutorial.
Présentation des feuille de style CSS
Diverses versions et révisions des CSS
Les CSS 1 ont étés recommandés par le W3C de 1996 jusqu'en 1999, date à laquelle les CSS 2 les ont supplantées. CSS 1 se préoccupait principalement des polices, des espacements entre les blocks, et des couleurs. Plus d'infos sur CSS 1 depuis le site du W3C.
Donc depuis 1999, les recommandations en vigeur sont les CSS 2, toujours plus d'infos sur CSS 2 depuis le site du W3C. Actuellement, une version de CSS 3 est en cours de mise en place, quelques infos sur CSS 3 depuis le site du W3C, mais bien que quelques navigateurs intègrent déjà certaines de ces nouvelles fonctionalités, il n'est que peu recommandé de les utiliser.
Les outils disponibles
Dresser la liste des outils permettant de créer des feuilles de styles CSS, est une tâche assez fastidieuse, tant il en existe, allant du simple freeware, jusqu'au logiciel sous licence des plus honéreux. Le W3C, liste la plus grande partie de ces outils, vous pouvez en avoir un aperçu sur ce lien.
Toutefois, si vous utilisez Dreamweaver comme outil central de développement, vous pouvez déjà faire une grande partie du travail depuis cet éditeur. Lorsque vous en atteignez les limites vous pouvez relayez votre travail (depuis les préférences, type de fichiers .css) avec des outils comme Top Style, de Bradburry Software, sur PC, ou des outils comme Style Master Pro de WestCiv sous Mac.
Bien sur, ce ne sont ici que des suggestions, libre à vous d'utiliser d'autres outils. A ce sujet, nous vous serons reconnaissant pour tous vos retours ou conseils sur des outils éditeurs de CSS.
Principe d'attachement des feuille de style CSS
En ligne
<p style="color:#3399CC;">Du texte coloré par un style en ligne</p>
Embarqués
<head>
<style>
body {
color:#FF33cc;
}
</style>
</head>
Liés
<link href="/../medias/Styles/page_langage.css" rel="stylesheet" type="text/css" />
Importés
<style type="text/css" media="screen">
<!--
@import url("../medias/Styles/page_langage.css");
-->
</style>
Les types de médias de présentation
L'utilisation des CSS peut être spécifiée pour un type de média de présentation. Par exemple, un mode d'affichage peut être proposé pour la page visualisée sur un navigateur et une autre disposition peut être affectée à l'impression (par exemple ne pas imprimer les menu, et divers entête du document), ou encore ne se concentrer que sur une certaine partie du document, pour diffuser sur un appareil de type PDA... etc.. Vous aurez plus d'informations sur le site du w3c.
