Introduction aux feuilles de style

Cascading Style Sheets ? C'est koi ?

On en parle souvent , mais comment les définir ?

Pour faire simple, nous allons dire que c'est un ensemble de parametres (polices , taille de police, couleur , mise en page) que l'on attribue aux balises d'un document HTML. En définissant une feuille de style associée à une balise de paragraphe par exemple (balise <p>) , le style sera appliqué à tous les paragraphes. si l'on souhaite changer la police de tout le texte correspondant à un paragraphe , il n'y aura alors qu'a changer la feuille de style correspondante , et les modifications seront appliquées a toutes les balises <p> d'un seul coup. ceci evite de remplacer individuellement les balises font à l'interieur d'un document sur plusieurs pages.

On l'aura donc compris, Les feuilles de style facilitent la mise en page mais quels en sont les autres avantages ?

Les avantages

Sur une page de contenu ordinaire, l'utilisation de feuilles évite la réutilisation de balises HTML. Ceci a pour effet de diminuer considérablement la taille de la page, et par consequent, son temps de chargement.

L'emploi de feuilles de style peut donner lieu a des effets visuels hors du commun de l'HTML : bloquer le fond d'ecran, créations de différentes couches de contenu sur la page, appliquer des bordures spéciales à des tableaux, et un grand nombre d'autres effets que l'on imagine meme pas.

La première feuille de style

on utilise les feuilles de style de deux facons différentes dans une page HTML : Soit les définitions de styles sont faites à l'interieur de la page (à l'aide de la balise <style>), soit dans un fichier séparé qui porte usuellement l'extension .css, auquel cas , on l'inclut dans la page a l'aide de la balise <link>

Commencons par le commencement avec ce premier exemple :

Une page en html pur comme celle ci :

<html>
	<head>
		<title>Test sans feuille de style</title>
	</head>
	<body bgcolor="#000033" text="#FFFFCC">
	
	<H1>}<font face="verdana" size="3" color="#DDDDDD">
		Le test sans feuille de style</font></H1>

	<p><font face="verdana" size="2">pour faire deux couleurs différentes en HTML pur,
	 il faut utiliser la balise font, ce qui alourdit très vite 
	la page si on a beaucoup de contenu... </font></p>

	</body>
</html>

Voir l'exemple en ligne ICI . cette page se transcrit en feuille de style de la manière suivante :

<html>
	<head>
		<title>Test de feuille de style</title>
		<style type="text/css">
		BODY { 
		background: #000033;
 		color:#FFFFCC; 
		}
		H1 { 
		font-family:Verdana,Helvetica,sans-serif;
		font-size: 16px; 
		color:#DDDDDD;
		}
		P { 
		font-family:Verdana,Helvetica,sans-serif;
		font-size: 12px; 
		color:#FFFFCC; 
		}
		</style>
	</head>
	<body>
	
	<H1>Le test de feuille de style</H1>

	<p>Sans aucun attribut particulier , 
	on peut faire du texte de deux couleurs différentes. </p>

	</body>
</html>

ce qui donne un apercu dans ce genre : cliquer ICI

2 Pages dans cet article
Le contenu de cette page a été vu 3054 fois / Contenu mis a jour le Mercredi 1 Septembre 2004 à 15:35
Les dernières pages que vous avez visitées sur ce site sont :

Citation 46 sur 50

Il y a deux sortes de justice : vous avez l'avocat qui connaît bien la loi, et l'avocat qui connaît bien le juge !

Coluche

0 Index
0 Unix/Linux
0 OpenBsd
0 Internet
0 Le Webmaster
Moteur de recherche
Les meilleures randonnées pedestres de bretagne.