Comment Ca Marche - Communauté informatique  
   
Accueil - Encyclopédie informatiqueTélécharger l'encyclopédieContribuer à cet article

CSS - Déclaration d'une feuille de style

CSS - déclaration d'une feuille de style Encyclopédie

Déclaration d'une feuille de style

Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec des éléments indiquant d'une part le type du document, c'est-à-dire la version des recommandations HTML et CSS utilisées dans la page, et d'autre part les styles à proprement parler.

Déclaration du type de document

Il est nécessaire d'indiquer dans la page HTML le prologue du type de document, c'est-à-dire une référence à la norme HTML utilisée. Cette déclaration se fait par une ligne du type : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>...</HEAD>
	<BODY>Contenu de la page</BODY>
</HTML>

De plus, une balise Meta permet d'indiquer au navigateur ou aux moteurs de recherche le langage utilisé pour la définition des feuilles de style. Cette balise Méta, à inclure dans l'en-tête HTML du document est la suivante : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
	</HEAD>
	<BODY>Contenu de la page</BODY>
</HTML>

Incorporer les styles

Les styles peuvent être incorporés au sein du document HTML de trois manières différentes :

  • Style du document: déclaré dans l'en-tête, c'est-à-dire au sein des balises <HEAD> et </HEAD>
  • Style en ligne, c'est-à-dire en tant qu'attribut des balises
  • Style externe, déclaré dans un fichier à part dont l'extension est .css
  • Style importé, déclaré dans un fichier à part dont l'extension est .css

Style du document

Les feuilles de style d'une page web sont déclarées grâce à la balise STYLE, au sein des balise <HEAD> et </HEAD>. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--

		Définition des styles;

		-->
		</STYLE>
	</HEAD>
<BODY></BODY>
</HTML>
L'attribut type="text/css" de la balise <STYLE> permet de spécifier le type de feuille de style utilisée. La balise de commentaire <!-- ... --> sert à éviter que des navigateurs peu récents, donc ne supportant pas les feuilles de style, affichent ces informations.

Style en ligne

Il est également possible de définir le style au sein même d'une balise d'un document. On appelle ce type de déclaration une déclaration en ligne.

Cette façon de définir les feuilles de style est peu recommandée car elle va à l'encontre de l'intérêt des feuilles de style, dans la mesure où le style est embarqué au sein même de chaque élément. Cela peut néanmoins servir pour définir de façon exceptionnelle un style pour un élément HTML particulier, ne nécessitant pas une définition globale.

Pour définir un style en ligne, il suffit de renseigner l'attribut STYLE de la balise HTML à laquelle on souhaite appliquer un style particulier : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
	...
	</HEAD>
<BODY>
...
<BALISE Style="style:valeur;"> ... </BALISE>
...
</BODY>
</HTML>

Nota Il est possible d'appliquer un style "en ligne" à toutes les balises HTML, hormis les balises suivantes : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Voici un exemple de style appliqué à une balise <H1> : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
	...
	</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>
...
</BODY>
</HTML>

Style externe

Le fait de pouvoir stocker la définition des feuilles de style à l'extérieur du document est un "plus" car il est ainsi possible, en modifiant le fichier contenant les feuilles de style, de changer l'allure de toutes les pages web s'y référant !

Il s'agit dans un premier temps de créer un fichier texte contenant les feuilles de style et dont l'extension est .css, par exemple style.css : 

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
	body	{background-image: home.gif;}
	LI		{font: 13px Verdana;}
	B		{font: 14px Verdana; font-weight: bold;}
	A		{
			  font:12px Verdana;
			  font-weight: bold;
			  color=black;
			  text-decoration: none;
			}
	H1		{font: 16px Arial;font-weight: bold;color=black;}
	H2		{font: 14px Arial;font-weight: bold;color=black;}
-->

Dans un second temps il suffit de créer dans chaque page HTML le raccourci vers cette page de définition de style : 

<HTML>
	<HEAD>
		<LINK rel="stylesheet" type="text/css" href="style.css">
	</HEAD>
...
  • La balise <LINK> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.
  • L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.
  • L'attribut type="text/css" précise le type de feuille de style.
  • L'attribut href=" URL " donne l'URL de la feuille de style, c'est-à-dire son emplacement sur Internet.

Style importé

Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @IMPORT immédiatement après la balise style : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--
		@IMPORT URL(url de la feuille à importer);

		Définition des styles du document;

		-->
		</STYLE>
	</HEAD>
<BODY></BODY>
</HTML>

Nota Si plusieurs définitions importées concernent la même balise, seule la dernière sera prise en compte par le navigateur

Les balises <SPAN> et <DIV>

Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux de texte, c'est à cela que servent les balises <SPAN> et <DIV>

La balise <SPAN>

La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe.
Elle s'utilise aussi bien avec ID qu'avec CLASS.
Sa syntaxe est la suivante : 

<SPAN class=Nom_de_la_classe> Texte </SPAN>

La balise <DIV>

Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV s'applique à un bloc, c'est-à-dire à un ou plusieurs paragraphes.

La syntaxe de la balise DIV est la suivante : 

<DIV class=important> paragraphes </DIV>

Les styles en cascade

Il est possible de définir plusieurs styles en utilisant les différents moyens qu'offrent les CSS. Ainsi, lorsque plusieurs feuilles de style externes sont appelées, on obtient ce que l'on appelle une cascade de styles, c'est-à-dire une combinaison de styles pour divers éléments HTML. Si plusieurs styles concernent le même élément, seul le dernier style sera conservé. 

<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">

Dans le cas où plusieurs styles sont redondants entre différentes feuilles de style externes, les recommandations CSS permettent également d'offrir le choix entre plusieures feuilles de styles alternatives grâce à l'attribut rel de la balise STYLE, combiné à un attribut TITLE permettant de les choisir nominativement : 

<LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">
<LINK rel=stylesheet type="text/css" href="stylepardefaut.css">

D'autre part, lorsque plusieurs styles sont appelés dans une page en utilisant les différents moyens d'inclusion possibles, la prise en compte des styles, lorsque plusieurs styles sont redondants, est telle que le style le plus proche du contenu est maintenu. Ainsi, l'ordre de priorité est le suivant :
Style en ligne > Style du document > Style importé > Style externe

Trucs & astuces pertinents trouvés dans la base de connaissances

13/12 16h46 Définir une hauteur verticale et relative à un élément (Webmaster)
25/07 12h59 Outil! (CSS)
CSS Plus d'astuces sur « CSS »

Discussions pertinentes trouvées dans le forum

03/08 10h17 css taille page css : taille de la page ? Webmastering 19/08 09h56->bg6229
18/11 14h25 css CSS ..... HELP ! ! ! ! Webmastering 18/11 16h30->Erdnax22
27/06 09h15 css html codes 2 css et html : problèmes de codes 2 ! sos Webmastering 30/06 10h07->bg6219
22/07 16h33 css site seule fois une css pour tout un site en une seule fois ? Webmastering 03/08 10h06->bg6216
28/09 16h07 css installer [css]comment l'installer? Jeux vidéos 23/10 14h31->pepergignn14
01/01 15h47 css ie firefox les CSS !!! IE!=FireFox Webmastering 03/01 14h00->Gihef14
14/06 16h19 html php css taille image [html/php ou CSS]taille d'image Webmastering 14/06 17h00->nauno12
11/10 15h09 html css site flexible. [Html&Css]site flexible. Webmastering 17/10 21h59->Ssylvainsab11
07/09 14h14 css aligner image bas droite [CSS] Aligner image en bas a droite Webmastering 08/09 16h10->StreM10
12/09 12h38 html css ie iframe [HTML/CSS] IE et Iframe Webmastering 12/09 17h43->GallyNet10
Discussion fermée Problème résolu CSS Plus de discussions sur « CSS »

Ce document intitulé « CSS - Déclaration d'une feuille de style » issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.