Syntaxe CSS

Très simple, la syntaxe CSS est formée de simples déclarations
Exemple
css
donne
donne

Tout le monde est capable de lire immédiatement cette déclaration : "tous les titres de niveau h1 seront écris en Rouge", ce langage est vraiment naturelle et intuitif.

Les difficultés du CSS ne résident pas dans son langage, mais dans le rendu variable des navigateurs, ou dans les modalités plus subtiles d'héritage et de gestion des marges.

Entrons dans le vif du Sujet

I Une règle permet d'associer à un sélecteur, un ensemble de déclarations

Syntaxe CSS
selecteur et regles
Syntaxe CSS
selecteur et regles
Syntaxe CSS
selecteur et regles

II 3 types de sélecteurs : la balise, l'identifiant, la classe

Nous venons d'examiner dans les exemples précédents, une règle s'appliquant à une balise

Exemple


donne
donne
titre rouge

Il existe deux autres types de sélecteurs simples : l'identifiant et la classe

Syntaxe CSS
selecteur et regles

En CSS, on préfixe les id par un '#' (dièze) et les classes par un '.' (point)


e

donne
donne
titre rouge

 

III Regroupement des sélecteurs

On peut énoncer une règle pour plusieurs sélecteurs à la fois en les justaposant et en les séparant par une virgule

Exemple
selecteur et regles

IV Placer des commentaires

Un CSS se commente comme partout en informatique, comme de nombreux langage le commentaire est une chaîne de caractères placer entre /* et */

Exemple
selecteur et regles

V Sélecteurs descendants ( enchâssement )

Dans une page html, les éléments html (ou conteneur) s'imbriquent de manière hiérachique (on parle d' enchâssement : les éléments ne peuvent pas se chevaucher, c'est interdit)

Exemple
selecteur et regles
titre rouge

Pour désigner les liens de la liste de classe .navigation placés dans la division d'id #sidebar1, il suffit de justaposer les sélecteurs élémentaires dans l'ordre hiérarchique.

Exemple
selecteur et regles
titre rouge

VI Sélecteurs parents

Le symbole > entre deux sélecteurs élémentaires précise que la descendance doit être immédiate

Exemple
Pour la configuration suivante, on pourra écrire :
selecteur et regles
titre rouge

VII Sélecteurs frères

Le symbole + entre deux sélecteurs élémentaires précise que le second est le frère immédiat du premier,

le symbole ~ entre deux sélecteurs élémentaires précise que le second est un frère (au même rang) du premier mais pas forcément immédiat

Exemple


tt

donne

titre rouge

VII Conjonction d'un balise et d'une classe

 

On peut préciser une balise en y collant une classe ou un id.

Exemple
selecteur et regles

Ressources :

http://www.tomsyweb.com/component/content/article/48-css/101-les-30-selecteurs-css-a-connaitre

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Questions immédiates :

  1. Dans la syntaxe CSS, comment reconnait-on un sélecteur "id" et un sélecteur "class" ?
  2. Dans une règle avec sélecteur p>em la règle portera-t-elle sur toutes les balises em ?
  3. Voici un sélecteur complexe p.encart ? désigne-t-il un élément de class "encart" contenu dans un paragraphe ou un paragraphe de classe "encart" ?

Questions de réflexion :

  1. Dans une page, faut-il mieux utiliser des "id" ou des "class" ? dans quels cas ?

Exercice d'application immédiate.