Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Syntaxe CSS

Syntaxe CSS

Un nouveau chapitre s'annonce passionnant css On va y apprendre certaines conventions d'écriture en CSS, pour adopter de bonnes pratiques de codage CSS et pour pouvoir créer des sélecteurs CSS très avancés.

Appliquer plusieurs propriétés de style CSS au même sélecteur

h1 {
color: blue;
}
h1 {
font-size: 20pt;
}
h1 {
font-weight: bold;
}
Equivaut à
h1 {
color: blue;
font-size: 20pt;
font-weight: bold;
}

Lorsque plusieurs propriétés de style CSS définies séparément, concernent le même sélecteur (sélecteur de type, classe ou id). Elles seront réunies et affectées à l'élément XHTML ciblé par le sélecteur CSS.

Appliquer un style CSS à plusieurs sélecteurs

On peut affecter un style à plusieurs balises en faisant le raccourci suivant :
balise1, balise2, balise3 .. {votre style CSS}. Dans ce cas, toutes les balises vont recevoir le même style. Les deux notations suivantes aboutissent au même résultat :

h1, h2, p {
text-decoration: underline;
font-weight: bold;
} 
Equivaut à
h1 {
text-decoration: underline;
font-weight: bold;
}
h2 {
text-decoration: underline;
font-weight: bold;
}
p {
text-decoration: underline;
font-weight: bold;
}

Attribuer plusieurs valeurs à une même propriété

Il y a certaines propriétés de style qui peuvent recevoir plusieurs valeurs, soit séparées par des virgules, c'est le cas notamment de la propriété de style font-family. Ou bien séparées par des espaces, c'est le cas des méga-propriétés (sorte de propriétés génériques, qui peuvent envelopper plusieurs propriétés de style, histoire de faciliter et de raccourcir un peu la syntaxe CSS).

Cas particulier de la propriété de style css "font-family"

Généralement, on assigne plusieurs polices à la propriété font-family (même si une peut suffire). Exemple :

H3 {
font-family: Arial, Helvetica, "Arial Black", serif;
}

Ceci signifie que le navigateur va chercher en premier lieu la police Arial, s'il ne l'a trouve pas, il se lancera dans la quête de la police Helvetica, si elle fait défaut dans le dossier des fontes du visiteur, il va utiliser Arial Black, sinon il va employer une police standard dans la famille serif. Donc vaut mieux affecter plusieurs polices à la propriété "font-family" pour augmenter les chances de tomber sur une qui est présente dans l'ordinateur du visiteur. Notez que si une police est composée de plus d'un nom, elle doit être entourée par des guillemets. Exemple "Arial Black", "Comic Sans MS".

Pour s'approfondir en la matière, visitez le chapitre "formatage de texte, la propriété de style CSS : font-family".

Cas particulier des méga-propriétés font, border, background, margin, padding et List-style

En CSS, on peut recourir à certaines syntaxes raccourcies et abrégées dites "méga-propriétés", ces dernières peuvent envelopper plusieurs propriétés CSS. Par exemples la méga-propriété "font" peut remplacer les propriétés de style CSS : font-family, font-size, font-weight, font-style, color, font-variant et font-stretch etc.

Bon, pour ne pas trop disserter. Il faut pour l'instant savoir que les valeurs passées à une méga-propriété sont séparées par des espaces. Exemple :

h1, p {
font: large italic small-caps Geneva, Arial, Helvetica, sans-serif large italic small-caps;
margin: 10mm 20mm;
}

Au fil de l'eau vous aurez l'occasion d'apprendre toutes les propriétés CSS de plus près. Pour le moment essayez juste de vous habituer avec la syntaxe CSS css

Imbrication des sélecteurs simples (sélecteurs de balise, classes et id)

Comment faire pour que nos balises strong qui se trouvent à l'intérieur des paragraphes aient une couleur rouge, et reprennent leur comportement normal à l'extérieur des paragraphes ? Voici une solution très adaptée :

p strong {
color : red;
}
  

Grâce à cette écriture, seules les balises strong qui se trouvent à l'intérieur d'un paragraphe vont recevoir ce style. Pour ce qui est de la syntaxe, on met l'élément contenant (l'élément parent, en l'occurrence : "p"), puis une espace, enfin l'élément contenu (l'élément enfant).

A ne pas confondre l'espace avec la virgule. En fait si on met la virgule les deux balises <strong> et <h2> vont avoir une couleur rouge, car la virgule signifie "ET" dans la syntaxe des sélecteurs CSS.

On peut aussi mélanger les balises et les classes (ou id) :

p .important {
color: red; 
text-decoration: underline;
} 

Le sélecteur "p .important" cible uniquement les classes "important" qui se trouvent dans la balise <p>.

On peut aussi regrouper les espaces et les virgules css Voici un sélecteur d'enfer css "blockquote p em, p .important". Cette ligne signifie : toutes les balises em contenues dans la balise p, elle-même contenue Dans un élément blockquote ET toutes les classes ".important" contenues dans la balise p.

A noter qu'on peut pas imbriquer une balise de type "bloc" dans une balise de type "inline" css comme par exemple : em p {color: red;}. Certes ce sélecteur va opérer dans vos navigateurs. Mais votre document XHTML ne sera pas conforme aux normes du W3C. Voir les deux chapitres : "classification des balises : tag enligne (inline) et tag bloc (block)" et "les imbrications de balises interdites dans la spécification XHTML 1.0".

Je vais vous filer un dernier exemple, pour bien comprendre la règle d'imbrication des sélecteurs simlpes :

.important {
color: blue;
}
.important em {
background-color: yellow;
}

Tous les éléments em qui ont pour ancêtre une classe ".important", autrement dit, une balise em ne sera mise en gras que si et seulement si elle est imbriquée dans un élément qui a reçu la classe ".important". Par exemple :

<p class="important">Ce paragraphe sera tout d'abord affiché en bleu,
et puis <em>les emphases</em> seront restituées avec un arrière-plan jaune</p>

Ce paragraphe sera tout d'abord affiché en bleu, et puis les emphases seront restituées avec un arrière-plan jaune

Dans l'exemple ci-dessus, on dit que l'élément em hérite des propriétés de la classe ".important" à savoir la couleur bleue. Dans un chapitre plus avancé dans le domaine des CSS, vous allez apprendre une notion très importante en la matière à savoir l'héritage des styles CSS.

Réserver un sélecteur de classe ou id à une balise

Si vous entendez réserver spécialement un sélecteur de classe ou id à une balise, vous devez passer la syntaxe suivante :
nom-balise.classe (faire suivre immédiatement le nom de la balise par la classe ou l'id). Exemple :

em.important { /* ou bien em#important dans le cas d'un id */
font-weight: red;
}

Ceci signifie que la classe .important opère spécialement sur les éléments em. Ainsi si vous tapez dans votre code XHTML :

<p class="important">Le paragraphe sera restitué normalement même s'il a reçu la classe important.
Par contre, <em class="important">une emphase</em> aura une couleur rouge, car c'est la seule  qui
peut bénéficier de cette classe/</p>

Résultat :

Le paragraphe sera restitué normalement même s'il a reçu la classe important. Par contre, une emphase aura une couleur rouge, car c'est la seule qui peut bénéficier de cette classe.

Les commentaires en CSS

A l'instar du XHTML et les autres langages de programmation. On peut insérer des commentaires dans un fichier CSS, et ce pour faire des remarques ou bien créer des repères afin de ne pas se perdre dans le code, surtout s'il est très long. Ces commentaires-là ne seront pas interprétés par votre navigateur (le moteur Gecko).
Pour insérer un commentaire vous devez le placer entre les deux notations /* */ sous cette forme :
Styles CSS /* ici vos commentaires */ Styles CSS

Exemple :

/* 
Fichier crée par Peter le 25/09/2007 à 17:15 
*/
h1 {
color: red; /* Les paragraphes auront une couleur rouge */
}
Règle CSS ajoutée le Vendredi 2/05/2008 à 21:00
#banner {
margin : auto; /* bannière centrée */
}

Une astuce très brillante, consiste à déclarer votre copyright ou les conditions de réutilisation dans le haut du code CSS via un commentaire. Exemple :

/* Copyright © la présente feuille de style est la propriété exclusive de son concepteur.
Toute réutilisation totale ou partielle est totalement interdite sans l'accord du concepteur.
Adresse Email du concepteur : conditions-utilisation@hotmail.com
*/

Vous devez savoir que je n'ai pas évoqué toutes les règles syntaxiques des CSS, c'est fait exprès pour ne pas vous embrouiller css Mais rassurez-vous que vous allez tout apprendre au fil des chapitres. Tuto suivant : les balises universelles span et div.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau