Avec les CSS (Cascading Style Sheets), plus connus sous le nom de "feuille de styles", vous contrôlez parfaitement la mise en page des différents éléments qui composent votre document. Il existe deux spécifications : CSS1 (level 1) et la dernière en date, CSS2 (level 2). Ces spécifications ont été validées par le W3C.
Introduction
Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets surprenants (Dynamic html) et cela en un clin d'œil. En fait, avec les feuilles de styles (CSS ou Cascading style Sheets), vous contrôlez parfaitement la mise en page des différents éléments qui composent votre document. Par exemple, vous pouvez définir la couleur d'une police, sa taille, le positionnement d'un objet (image, texte,...), l'espacement entre les paragraphes, et même gérer des effets de transition.
Note : Internet Explorer à partir de la version 3.0 (attention la version d'Internet Explorer 3.0 ne gère pas toutes les propriétés des feuilles de styles) et, Netscape à partir de la version 4 supportent les feuilles de styles.
La syntaxe
Normalement, la syntaxe des déclarations CSS est toujours identique. La méthode est simple : il s'agit de redéfinir le rôle d'une balise html en lui imposant de nouvelles propriétés :
- Comme les feuilles de styles ne sont pas une composante directe du html, vous pouvez définir à l'aide de la balise meta (dans l'en-tête de la page) la déclaration suivante :
<meta http-equiv="content-style-type" content="text/css">
- Comme pour les navigateurs ignorant le JavaScript, vous devez cacher le code des feuilles de styles à l'aide des commentaires :
<!-- -->
- Quatre méthodes différentes sont possibles pour intégrer les feuilles de styles en html :
+ L'instruction style en tant qu'élément :
<style type="text/css">
+ L'élément link pour établir un lien vers une feuille de style externe (fichier texte avec l'extension .css) :
<link title="test" type="text/css" rel="stylesheet" href="mafeuille.css">
+ L'instruction style en tant qu'attribut :
<p style="font-size: 12pt; color: green">
+ Importer une feuille de style (fichier texte avec l'extension .css) :
<style type="text/css"> @import url(http://www.allhtml.com/feuille.css); </style>
Note : Le fichier .css ne doit pas contenir de code html.
- Pour définir une propriété, on indique d'abord la balise concernée, puis entre deux accolades les caractéristiques de cette propriété (s'il y a plusieurs propriétés, on les sépare par un point virgule):
<html> <head> <style type="text/css"> <!-- h1 { font-size: 12pt; color: green; } --> </style> </head>
Sujet: Introduction 
Dim 20 Jan - 14:15
