Zone Webmasters - CSS - Syntaxe des feuilles de styles

> Accueil > Cours > CSS > Syntaxe des feuilles de styles

CSS - Syntaxe des feuilles de styles

Définition d'un style

Pour définir un style, il faut écrire:
Balise1, Balise2 {
	propriété de style: valeur;
	propriété de style: valeur
}
Exemple:
H4, P {
	font-family: Arial;
	font-style: italic;
	font-color: green
}
Les paragraphes et les titres de niveau 4 seront en vert, en italique, et en police Arial. * est un caractère générique, il permet d'attribuer un style à tous les éléments de la page.

Sélecteurs contextuels

Il est possible de sélectionner une balise en fonction des éléments qui l'entourent, grâce aux sélecteurs contextuels :
Eléments imbriqués
Balise1 Balise2 {
/* style; */
}
Deux balises non séparées par une virgule permettent d'appliquer un style seulement si la Balise2, se trouve dans la Balise1. Exemple :
<code><p>texte1</p></code>

<p>texte2</p>
Le code suivant ne s’appliquera qu'à texte1.
code p {
	color: blue;
}

Eléments consécutifs
Balise1+Balise2 {
/* style; */
}
Deux balises successives séparées d'un signe + permettent d'appliquer le style seulement si la Balise2, suit directement la Balise1. Exemple :
<i>texte</i><p>texte1</p>

<p>texte2</p>
Le code suivant ne s’appliquera qu'au texte1.
i+p {
	color: blue;
}

Les commentaires

Il est possible de placer des commentaires dans votre feuille de style sans qu'ils soient interprétés par les navigateurs, avec la syntaxe suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" dir="ltr">
<head>
	<title>Titre de la page</title>
	<style>
	<!--
		/* Ceci est un commentaire */
		Balise { propriété de style: valeur; propriété de style: valeur }
		Balise { propriété de style: valeur; propriété de style: valeur }  
	-->   
	</style>
</head>


Cours CSS >> Incorporer les styles à une page



Imprimer ce cours





Faire un lien | Partenaires ©2005-2008 Rudy Onfroy Tous droits réservés Contact | RSS | Plan | Haut