Comment Ca Marche l'informatique ?
Accueil
Forum
Aide
bordure
Page d'accueil
Ajouter aux favoris
Signalez une erreur
Ecrire à Jean-Francois Pillou
feuilles de style en cascade (CSS)
Les feuilles de style
Syntaxe des styles
Implantation des CSS
Classes de style
Positionner des éléments
La liste des propriétés
Version 2.0.3
CSS - Syntaxe des styles Page précédente Page suivante Retour à la page d'accueil

Définition d'un style

La définition d'un style est une chose simple à effectuer. Un style CSS est caractérisé par deux éléments :

  • Un sélecteur de balises, permettant de préciser à quelles balises du document le style s'applique
  • Une déclaration de style, permettant de définir précisément le style à appliquer aux balises sélectionnées
La syntaxe est la suivante :
selecteur-de-balise  {style}
balise  {
    propriété de style: Valeur;
    propriété de style: Valeur;
     ...
     }

Par exemple la syntaxe suivante définit le style à appliquer aux liens hypertextes (balise <A>), c'est-à-dire une police Verdana de taille 18 pixels, en gras et de couleur jaune :

A  {font-family: Verdana; font-size: 18px; font-style: bold; color: yellow}

Les sélecteurs de balise

On appelle "sélecteur de balise" le ou les mots-clés précédant l'accolade, servant à indiquer le ou les balises du document auxquelles le style entre accolades s'applique.

Pour définir le style d'une balise HTML spécifique, il suffit de mettre le nom de la balise (sans les caractères < et >. Par exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>	
		<STYLE type="text/css">
		<!--	
		
balise {propriétés}

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

<balise> ... <balise>

...

</BODY>
</HTML>

Il est également possible d'appliquer le style à plusieurs balises en séparant le nom de ces balises par une virgule (,) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>	
		<STYLE type="text/css">
		<!--	
		
balise1, balise2 {propriétés}

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

<balise1> ... <balise1>

<balise2> ... <balise2>

...

</BODY>
</HTML>

Les propriétés de style

Les commentaires

Il est possible (et conseillé) de documenter ses feuilles de style en y incorporant des commentaires donnant des informations additionnelles (raison du choix de tel ou tel style, à quels types de document cela s'applique, contexte, ...). Les commentaires CSS sont délimités par les sigles /* et */ :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>	
		<STYLE type="text/css">
		<!--	
/* Ceci est un commentaire */		
baliseA {propriétés}
baliseB {propriétés}
baliseC {propriétés}

		-->	
		</STYLE>
	</HEAD>
<BODY>
...
</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


Page suivante

Ce document issu de CommentCaMarche.net est soumis à la licence GNU FDL. Vous pouvez copier, modifier des copies de cette page tant que cette note apparaît clairement.