TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Présentation des CSS

Les CSS (feuilles de styles) ont été conçues pour permettre la séparation entre la structure d'un document et sa présentation.

Dans cette logique la structure et le contenu d'une page sont décrits en HTML tandis que la présentation est gérée par les feuilles de styles.

Avantages

Cette séparation procure de nombreux avantages permettant d'améliorer l'accessibilité et facilitant la gestion d'un site :

Forme générale d'une définition de style

La définition d'un style associe à un ensemble de balises, identifié par un sélecteur, certaines caractéristiques de mise en forme décrites par des propriétés.

Les information nécessaires à la définition d'un style sont donc :

La liste des propriétés étant mise entre accolades, la syntaxe générale de définition d'un style est la suivante :

sélecteur { liste de propriétés }

Les propriétés étant séparées par un point-virgule, la description d'un style se présente ainsi :

sélecteur { propriété1:valeur1; propriété2:valeur2;...; propriétéN:valeurN;}


Exemple :

 h1 { color : #FFFFFF; font-size: 24px; background-color: #333333; }

qui aura pour effet d'afficher tous les titres h1 en blanc sur fond gris avec une taille de de 24 pixels comme ci-dessous :

h1 redéfini

 

Les propriétés

Chaque aspect de la mise en forme d'un élément est caractérisé par une propriété.

Lors de la définition d'un style, on fixe les valeurs des propriétés pour certains éléments.

Les deux composantes nécessaires à la description d'une propriété sont :

Ces deux composantes sont séparées par un double point :

nom de propriété : valeur par exemple color : #FF0000 ou margin : 20px

 

Regroupement des propriétés

Si S est un sélecteur, les deux notations suivantes sont équivalentes :

S {prop1:valeur1}
S { prop2:valeur2}

...
S { propN:valeurN}

<====>

S {prop1:valeur1;
      prop2:valeur2;
      ...
      propN:valeurN;
 }

Les sélecteurs

Un sélecteur permet de caractériser un ensemble de balises selon :

Certains sélecteurs permettent d'identifier des éléments dynamiquement :

Le sélecteur le plus élémentaire est un nom de balise, comme dans l'exemple, qui permet d'appliquer les propriétés à toute les balises portant le nom du sélécteur.

Regroupement de sélecteurs

Lorsque plusieurs sélecteurs S1, S2, SN possèdent des propriétés communes, les sélecteurs peuvent être regroupés dans une même définition :

S1 { prop1:valeur;1
      ...
      propN:valeurN;
      }


S2 {prop1:valeur1;
      ...
      propN:valeurN;
      }


S{prop1:valeur1;
      ...
      propN:valeurN;
      }

<====>

S1 , S2 , SN
{
prop1:valeur1;
...
propN:valeurN;
}

 

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007