Zone Webmasters - CSS - Syntaxe des feuilles de styles

Recherche <> Connexion

Zone Membre

Ressources

Kits graphiques

Liens utiles

> 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:

Les balises XHTML (séparées par des virgules s’il y en a plusieurs) auxquelles il doit s'appliquer.
Les différents attributs du style enfermés entre deux accolades, chacuns séparés des autres par un point virgule.

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