La syntaxe d'une règle CSS

Un cours complet sur les CSS.

Ce second article a pour objectif de vous faire découvrir les bases du CSS : vous allez être initié à la syntaxe utilisée dans les feuilles de style.


Cela va consister à étudier en particulier ce qu'est une règle CSS. On va la décortiquer pour vous donner un aperçu de ses principales composantes : les sélecteurs, les blocs de déclarations, les déclarations, les propriétés et les valeurs.


Nous verrons ensuite quelle est l'influence de la présentation du code CSS : c'est-à-dire les effets de la casse du texte, des espaces, tabulations et autres retours à la ligne sur la bonne interprétation du code.


Puis nous aborderons les notions de regroupement des sélecteurs et de propriétés raccourcies. Je vous montrerai comment mettre des commentaires dans une feuille de style, et, enfin, j'aborderai des règles un peu particulières : les règles at-rules.



Cet article est le second d'une série consacrée à CSS, retrouvez les autres articles de cette série dans le sommaire ou dans l'encadré bleu en bas de page.


Tous mes remerciements vont à kdmbella, jacques_jean et à michel.di pour leur relecture et leurs corrections, ainsi qu'à CinePhil, Lcf.vs et tous les autres membres de l'équipe Web que j'ai oubliés, pour leur soutien.


Commentez cet article : 7 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

La syntaxe d'une règle CSS

Dans cet article nous allons étudier la structure d'une règle CSS et ses principales composantes que sont les sélecteurs et les déclarations. Nous verrons ensuite l'influence de la présentation du code CSS. Puis on abordera les notions de regroupement des sélecteurs et les propriétés raccourcies. On verra comment mettre des commentaires dans le code CSS. Et, enfin, on étudiera succinctement les règles at-rules.

A. Structure d'une règle CSS

Une feuille de style est structurée en règles CSS. En voici un exemple :

Une règle CSS :
Sélectionnez
div {
        margin :           0px;
        padding :          5px 2px;
        background-color : blue;
}

Une règle CSS se décompose en un sélecteur et une ou plusieurs déclarations appelées bloc de déclaration se trouvant entre les accolades.
Le sélecteur permet d'indiquer à quel élément la règle s'applique. Le bloc de déclaration englobe toutes les déclarations que l'on souhaite voir appliquer au sélecteur indiqué.

Toutes les règles CSS sont donc écrites sur le même modèle : un sélecteur suivi d'une accolade ouvrante ( { ), puis une ou plusieurs déclarations chacune subdivisée entre propriété et valeur, se terminant par un point virgule. Et enfin une accolade fermante ( } ).

Une règle CSS décomposée
Une règle CSS décomposée

1. Sélecteurs

Dans une règle CSS, le sélecteur correspond à la partie du code se trouvant en dehors des accolades. Il a pour rôle d'indiquer au navigateur ce qui doit être mis en forme. Vous allez indiquer le ou les éléments (X)HTML auxquels une règle CSS va s'appliquer.

Deux exemples de sélecteurs :
Sélectionnez
div {
        border :           1px solid blue;
        padding :          10px;
        color :            white;
        background-color : gray;
}
p.paragraphe {
        font-size :        1.6em;
        color :            red;
}

Dans cet exemple, la première règle va attribuer une bordure, des marges internes, la couleur blanche au texte et grise à l'arrière-plan de tous les éléments <div>.
La seconde règle déclare une taille de texte et la couleur rouge pour tous les paragraphes (balises <p> ) possédant l'attribut class avec la valeur 'paragraphe'.

Consultez l'exemple 01 sur le principe des sélecteurs dans une règle CSS.

Je détaillerai l'ensemble des sélecteurs disponibles dans le langage CSS dans un prochain article.

2. Déclarations et blocs de déclarations

Les déclarations sont placées à la suite du sélecteur, entre des accolades. L'ensemble des déclarations d'une règle est appelé "bloc de déclaration".

Un bloc de déclaration est composé d'une ou plusieurs déclarations. Chaque déclaration est constituée de deux éléments : une propriété et une valeur.

Exemple schématique d'une règle CSS :
Sélectionnez
sélecteur {
        propriété :        valeur;
        propriété :        valeur;
}

La propriété est un mot clé CSS permettant de modifier un point précis au niveau du rendu des éléments (X)HTML ciblés par le sélecteur. Par exemple les marges avec le mot clé margin, ou la taille du texte avec le mot clé font-size...

La valeur permet de spécifier une valeur différente que celle appliquée par défaut à la propriété en question.

Voici un exemple concret :

Un exemple de déclaration avec différentes propriétés et valeurs :
Sélectionnez
#contenu {
        position :         relative;
        top :              10px;
        left :             100px;
        width :            70%;
        border :           2px dashed #000000;
        padding :          12px;
        font-size :        1.2em;
        font-weight :      bold;
        background :       url('../images/logo.gif') no-repeat center;
        color :            rgb(125,200,100);
}

Consultez l'exemple 02 sur le principe des déclarations dans une règle CSS.

Vous voyez là aussi que toutes les déclarations sont fondées sur le même modèle : une propriété suivie de deux-points, lui-même suivi d'une valeur (composée d'un ou plusieurs éléments) et se terminant par un point-virgule.
Le point-virgule de fin est optionnel pour la dernière déclaration ; mais là encore il est conseillé de l'indiquer tout de même pour des questions de lisibilité et de maintenance du code.

B. Présentation du code

L'indentation d'une règle CSS, et plus généralement sa mise en forme, est soumise à des règles assez souples : comme dans le code (X)HTML il n'est pas tenu compte des caractères blancs (espaces, tabulations, retours à la ligne...) pour la bonne interprétation du code par l'agent utilisateur. La présentation du code CSS est donc à votre convenance.

Mise en forme d'une règle CSS, exemples valides mais à déconseiller :
Sélectionnez
#ss-err { color : 
blue;
        font-size :                             1.4em;
        background 
: fuchsia
;
margin : 
                50px
 50px
                                                                50px

                50px;
}

L'exemple ci-dessus est par exemple identique à celui-ci :

Mise en forme d'une règle CSS plus lisible :
Sélectionnez
#ss-err {
        color :            blue;
        font-size :        1.4em;
        background :       fuchsia;
        margin :           50px 50px 50px 50px;
}

Ce dernier code est bien mieux organisé que le précédent : cela lui permet d'être plus lisible et plus clair. N'hésitez donc pas à utiliser cette seconde méthode pour écrire votre code.

Ceci n'est pas la seule méthode valable pour présenter son code, il doit exister autant de manières de présenter son code que de développeurs ! Voyons-en quelques-unes des plus usitées :

Diverses manières de mettre en forme du code CSS :
Sélectionnez
#ss-err
{
        color : blue;
        font-size : 1.4em;
        background:fuchsia;
        margin:50px 50px 50px 50px;
}

#ss-err { color: blue;font-size: 1.4em;background: fuchsia;margin: 50px 50px 50px 50px; }
 

Dans cet exemple les accolades sont toutes deux en début de ligne. Certains vont préférer cette méthode car cela permet de mieux visualiser l'ouverture et la fermeture des accolades de chaque règle. Une autre différence de présentation consiste à ne pas aligner les valeurs entre elles, ou encore à ne pas laisser d'espace entre les deux-points.
La seconde règle de cet exemple met en œuvre une autre méthode qui fait perdre un peu de lisibilité, mais qui a l'avantage de condenser un peu le code. À vous de faire votre choix...


Cependant cette liberté n'est pas totale : vous ne pouvez, par exemple, pas insérer de retour à la ligne, de tabulation ou d'espace pour couper une propriété, ou pour séparer le nombre et l'unité de mesure utilisée...

Ce code est faux et ne fonctionnera pas :
Sélectionnez
#av-err {
        col
or : blue;
        font-  size : 1.4em;
        background : fuch        sia;
        margin : 50px 50px 50 px 50px;
}

Consultez l'exemple 03 sur l'indentation du code.


Le CSS est également, sauf exception, insensible à la casse. Vous pouvez écrire vos règles en majuscules ou en minuscules, même si la convention est d'écrire en minuscules.

Voici un code en majuscules qui est totalement opérationnel :

Une règle CSS en majuscules valide :
Sélectionnez
DIV {
        COLOR :            BLUE;
        FONT-SIZE :        1.3EM;
        BACKGROUND :       FUCHSIA;
        MARGIN :           50PX;
}

Ce principe d'insensibilité à la casse s'applique également au sélecteur lorsque c'est le sélecteur de type qui est employé, c'est-à-dire lorsque nous ciblons une balise (X)HTML. Que vous utilisiez div ou DIV comme sélecteur ne posera aucun problème, les deux seront pris en compte de la même manière.

Par contre sont sensibles à la casse les éléments qui ne sont pas régis par le CSS : cela concerne les noms de classe et d'identifiant, les noms des polices et les adresses URI. Par exemple la classe 'header' n'est pas la même que la classe 'HeaDer' ou encore la classe 'HEADER'.

Le code ci-dessous ne fonctionnera qu'avec un identifiant exactement identique dans le code (X)HTML.

Exemple de code CSS avec un nom d'identifiant en majuscules :
Sélectionnez
#EXCEPTION {
        propriété :        valeur;
}

Cette règle n'aura d'effet que sur le second <div> et non sur le premier :

Exemple de code (X)HTML démontrant la sensibilité à la casse des noms d'id :
Sélectionnez
<div id="exception">
La règle CSS ci-dessus ne s'appliquera pas à ce paragraphe.
</div>

<div id="EXCEPTION">
La règle CSS ci-dessus s'appliquera à ce paragraphe.
</div>

Visualisez ces trois morceaux de code dans l'exemple 04 relatif à la casse du code CSS.

Je vous ai indiqué à l'instant que les noms de police sont sensibles à la casse comme cela ressort des spécifications CSS. Il faut cependant préciser que cette règle n'est pas appliquée de manière stricte par tous les navigateurs.

Exemple de déclarations de nom de police avec différentes casses :
Sélectionnez
#ex11 {
        font-family :      Arial, sans-serif;
}
#ex12 {
        font-family :      arial, sans-serif;
}
#ex13 {
        font-family :      ARiAl, sans-serif;
}

Ces trois règles vont toutes s'appliquer comme vous pouvez le constater dans l'exemple 05 sur l'influence de la casse sur les noms de police.

C. Regroupement de sélecteurs

Il arrive que vous ayez un même bloc de déclarations à appliquer à plusieurs sélecteurs. Alors, au lieu de réécrire plusieurs fois les mêmes déclarations dans la feuille de style, vous pouvez utiliser le regroupement de sélecteurs. Pour ce faire il suffit de mettre les différents sélecteurs à la suite les uns des autres, simplement séparés par une virgule et de placer le bloc de déclaration à la suite comme nous l'avons vu plus haut. La règle s'applique alors à tous les sélecteurs indiqués.

Exemple de regroupement de sélecteurs :
Sélectionnez
p, h2, h3, div {
        border :           1px dashed black;
        color :            #228b22;
        background-color : orange;
}

Dans cet exemple, tous les paragraphes (balise <p>), titres de niveau 2 et 3 (balises <h2> et <h3>) et <div> se voient attribuer une bordure en pointillés de '1px', la même couleur de texte ('#228b22' soit la couleur verte) ainsi que la couleur orange en arrière-plan.

Il suffit qu'un seul des sélecteurs de la liste soit erroné pour invalider le regroupement de sélecteurs et donc l'ensemble de la règle. Le style ne s'appliquera alors à aucun des sélecteurs. Seul Internet Explorer dans ses versions 6 et 7 fait exception à l'application de ce principe.

Un sélecteur peut, par exemple, être erroné lorsqu'on commet une erreur dans l'orthographe d'un sélecteur de type, et plus généralement lorsqu'on écrit mal un des mots-clés utilisés dans les sélecteurs, comme le nom de l'attribut pour le sélecteur d'attribut, ou encore les noms des pseudo-éléments et pseudo-classes.
Dans l'exemple ci-dessous nous allons nous tromper dans l'orthographe du sélecteur de type h2, que nous allons écrire de la manière suivante : h 2 (avec un espace entre les deux caractères). Cela va rendre invalide l'ensemble de la règle, le style ne s'appliquera donc à aucun des sélecteurs présents dans cette règle.

Voir l'exemple 06 sur le regroupement des sélecteurs.

D. Commentaires css

Comme pour le langage (X)HTML, il est possible d'ajouter des commentaires dans les feuilles de style.

Un commentaire est constitué en ouverture d'une barre oblique (/) suivi d'un astérisque (*), puis du texte en commentaire, et en fermeture d'un astérisque suivi d'une barre oblique.

Un exemple de commentaire :
Sélectionnez

/* Ceci est un commentaire */
 

Tout le texte entre ces caractères (/* */) sera ignoré ; il ne sera par contre pas possible d'insérer dans le texte commenté les caractères astérisque suivi d'une barre oblique.

Exemple de commentaire non valide :
Sélectionnez
/*
Ceci est un commentaire non valide parce que les caractères */ ne sont pas autorisés au sein d'un commentaire
Voyez vous même la coloration syntaxique de cet exemple.
*/

Les commentaires sont multilignes. Il n'existe pas en CSS de commentaire de fin de ligne (1).

Les commentaires sont bien sûr conseillés. Ils permettent par exemple d'expliquer le code, de préciser à quels éléments les règles CSS s'appliquent, de séparer les différentes parties, donc de structurer votre code, etc. Un code commenté permet de le maintenir et de le faire évoluer plus facilement. Enfin les commentaires permettent aussi de tester le code et ainsi de le déboguer. Nous allons voir concrètement comment faire avec des cas pratiques.

Comme indiqué un peu plus haut, les commentaires sont multilignes, ils peuvent donc s'étendre sur plusieurs lignes :

Un commentaire multiligne :
Sélectionnez
/*
        Section sur l'entête du document
    Ceci est un commentaire sur plusieurs lignes
*/

Ils peuvent se retrouver à de nombreux endroits dans le code, par exemple dans une règle :

Un commentaire dans une règle CSS :
Sélectionnez
div {
        text-indent :      2em;
        /* Ceci est un commentaire dans une règle */
        margin :           10px;
}

Dans une déclaration :

Un commentaire dans une déclaration :
Sélectionnez
div {
        border :           1px /* Ceci est un commentaire dans une déclaration */ solid black;
}

Les commentaires permettent également de désactiver une ou plusieurs règles :

Un commentaire désactivant une règle :
Sélectionnez
/*
div {
        font-weight :      bold;
        font-style :       italic;
}
*/

Mais aussi de désactiver une déclaration dans une règle :

Un commentaire désactivant une déclaration :
Sélectionnez
li {
        padding :          0px;
        /* list-style-type : disc; */
}

E. Propriétés raccourcies

Le CSS permet pour un certain nombre de propriétés, de les regrouper en une seule et d'y spécifier toutes leurs valeurs. Cela permet d'avoir un code plus rapide à écrire et plus condensé, donc plus facile à lire, moins lourd et plus rapide à télécharger.

Les principales propriétés qui permettent une écriture abrégée sont les suivantes :

Propriété Description
font Concerne les propriétés que l'on peut appliquer aux polices. La propriété font permet de regrouper en une seule les propriétés font-style, font-variant, font-weight, font-size, line-height, et enfin font-family.
background Concerne les propriétés que l'on peut appliquer à un arrière-plan. La propriété background permet de regrouper en une seule les propriétés background-color, background-image, background-repeat, background-attachment et background-position.
list-style Concerne les propriétés que l'on peut appliquer aux listes. La propriété list-style permet de regrouper en une seule les propriétés list-style-type, list-style-position et list-style-image.
border Concerne les propriétés que l'on peut appliquer aux bordures des boîtes, la propriété border va appliquer son style aux quatre côtés des boîtes. Elle permet de regrouper les propriétés border-width, border-style et border-color.
border-width Concerne l'épaisseur des bordures que l'on peut appliquer aux quatre côtés d'une boîte. La propriété border-width permet de regrouper en une seule les propriétés border-top-width, border-right-width, border-bottom-width et border-left-width.
border-style Concerne le type de style des bordures que l'on peut appliquer aux quatre côtés d'une boîte. La propriété border-style permet de regrouper en une seule les propriétés border-top-style, border-right-style, border-bottom-style et border-left-style.
border-color Concerne la couleur des bordures que l'on peut appliquer aux quatre côtés d'une boîte. La propriété border-color permet de regrouper en une seule les propriétés border-top-color, border-right-color, border-bottom-color et border-left-color.
margin Concerne les propriétés d'espacement que l'on peut appliquer aux quatre bords extérieurs d'une boîte. La propriété margin permet de regrouper en une seule les propriétés margin-top, margin-right, margin-bottom et margin-left.
padding Concerne les propriétés d'espacement que l'on peut appliquer aux quatre bords intérieurs d'une boîte. La propriété padding permet de regrouper en une seule les propriétés padding-top, padding-right, padding-bottom et padding-left.
outline Concerne les propriétés que l'on peut appliquer aux contours (autres que des bordures) appliqués aux objets visuels. La propriété outline permet de regrouper en une seule les propriétés outline-color, outline-style et outline-width.

Il ne s'agit pas ici de décrire en détail toutes ces propriétés, mais d'expliquer plutôt le principe de l'écriture abrégée.

Une propriété raccourcie permet de remplacer plusieurs propriétés par une seule qui va accepter toutes les valeurs des propriétés qu'elle remplace. Les différentes valeurs devront être indiquées soit dans un ordre précis, soit dans n'importe quel ordre voulu. De même certaines d'entre elles seront à indiquer obligatoirement, les autres seront alors facultatives.

Pour décrire les propriétés raccourcies nous allons prendre l'exemple de la propriété font, mais avant cela il faut expliciter la nomenclature utilisée pour déclarer les valeurs des propriétés. Enfin nous verrons le cas particulier des propriétés permettant d'appliquer leur style aux quatre côtés des boîtes.

1. Explication de la nomenclature du W3C

Le W3C a introduit une nomenclature pour décrire la manière dont les valeurs des propriétés doivent être déclarées. Cette nomenclature vous servira tout au long de ce cours, et plus encore si vous voulez vous plonger dans les spécifications du W3C.

C'est cette nomenclature que nous allons voir maintenant en prenant quelques exemples de propriétés raccourcies.

La syntaxe de la propriété font :
Sélectionnez

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [/ <'line-height'> ]? <'font-family'>
 
La syntaxe de la propriété margin :
Sélectionnez

<marge-largeur>{1,4} | inherit
 

Ces exemples nécessitent les explications suivantes :

  • les crochets [ ] servent aux regroupements ;
  • une barre | distingue deux ou plusieurs options : seule l'une d'entre elles doit survenir ;
  • une barre double || distingue également deux ou plusieurs options, à la différence que l'une de ces options doit survenir et plusieurs peuvent survenir quel que soit leur ordre ;
  • plusieurs mots juxtaposés signifient que tous doivent survenir dans l'ordre donné.

Il existe aussi des modificateurs :

  • un point d'interrogation (?) signifie que ce qui le précède est optionnel ;
  • un astérisque (*) signifie que ce qui le précède peut survenir de zéro à plusieurs fois ;
  • un plus (+) signifie que ce qui le précède survient une ou plusieurs fois ;
  • une paire de nombre entre accolades {A,B} signifie que ce qui précède survient au moins A fois et au plus B fois.

2. Application à une propriété : la propriété font

Pour bien comprendre ce système nous allons décortiquer la propriété raccourcie font qui va permettre de remplacer les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family.

Après ces explications nous pouvons traduire la ligne ci-dessous :

Les propriétés font-style, font-variant et font-weight :
Sélectionnez

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?
 

Ceci signifie que ces trois propriétés sont regroupées (du fait des caractères '[ ]'), elles sont facultatives (du fait du caractère '?') et elles ne doivent pas forcément survenir toutes les trois ensemble (du fait des caractères '||') : soit on en indique une, soit deux, soit les trois et ceci dans l'ordre désiré.

La propriété font-size :
Sélectionnez

<'font-size'>
 

Il faut ensuite indiquer font-size, c'est-à-dire la taille de la police, qui est obligatoire du fait de l'absence du caractère '?'.

La propriété line-height :
Sélectionnez

[/ <'line-height'> ]?
 

Cette partie n'est pas obligatoire en raison de la présence du point d'interrogation, mais si nous l'indiquons, il faut séparer la valeur de font-size et celle de line-height avec la barre oblique (présence du caractère '/' entre les crochets et avant la propriété line-height).

La propriété font-family :
Sélectionnez

<'font-family'>
 

Enfin la propriété font-family est obligatoire du fait de l'absence du point d'interrogation.

En résumé, seul font-size et font-family sont obligatoires. Pour les autres valeurs que vous avez omises, elles conservent leur valeur initiale.

Toutes les propriétés en relation avec font :
Sélectionnez
p#exemple {
        font-family :      Arial, Verdana, sans-serif;
        font-size :        1.2em;
        font-weight :      bold;
        font-style :       italic;
        font-variant :     normal;
        line-height :      1.5em;
}

Cet exemple se réduira à ceci en utilisant les propriétés abrégées :

Les propriétés en relation avec font réunies en une seule :
Sélectionnez
p#exemple {
        font :             italic bold 1.2em/1.5em Arial, Verdana, sans-serif;
}

Vous remarquerez que la propriété font-variant, qui a la valeur 'normal' dans le premier exemple, n'est pas présente dans la propriété raccourcie et ce pour la simple raison qu'elle a la valeur par défaut. Dans ce cas il n'est pas nécessaire de spécifier explicitement la valeur par défaut : une propriété absente dans la propriété raccourcie prend automatiquement sa valeur par défaut. Et cette valeur par défaut trouvera à s'appliquer même si une valeur contraire est appliquée à l'élément via l'héritage.

Voir l'exemple 07 sur les propriétés raccourcies : exemples avec la propriété font.

3. Le cas des propriétés s'appliquant aux quatre bords d'une boîte

D'autres propriétés raccourcies s'appliquent directement aux boîtes que vont créer les balises (X)HTML. Elles sont particulières dans le sens où les propriétés peuvent avoir jusqu'à quatre valeurs différentes s'appliquant aux quatre côtés de ces boîtes. Il faut donc expliquer comment vont se répartir ces valeurs entre les quatre côtés.

Cela concerne les propriétés raccourcies margin, padding, ainsi que border-width, border-style et border-color.

Ces propriétés acceptent de une à quatre valeurs :

  • pour la propriété margin : ce sont les propriétés margin-top, margin-left, margin-bottom et margin-right ;
  • pour la propriété padding : ce sont les propriétés padding-top, padding-left, padding-bottom et padding-right ;
  • pour la propriété border-color : ce sont des valeurs de couleur ou la valeur transparent (de une à quatre valeurs) ;
  • pour la propriété border-style : ce sont des valeurs de style (de une à quatre valeurs) ;
  • pour la propriété border-width : ce sont des valeurs d'épaisseur (de une à quatre valeurs).

Les valeurs sont spécifiées dans l'ordre horaire en partant de midi. Vous pouvez vous référer à la liste ci-dessus indiquant les propriétés qui sont regroupées dans la propriété raccourcie : on indique d'abord la valeur s'appliquant à 'top' (haut), puis 'right' (droite), puis 'bottom' (bas) et enfin 'left' (gauche).

Prenons l'exemple de la propriété border-color parce qu'elle permet de très bien distinguer les côtés en fonction des couleurs appliquées :

Indication de quatre valeurs :
Sélectionnez
div {
        border-color :     red blue green yellow;
}

Si vous indiquez quatre valeurs : la première vaut pour le haut, la seconde pour la droite, la troisième pour le bas et la quatrième pour la gauche.

Répartition de 4 valeurs
Quatre valeurs
Indication de trois valeurs :
Sélectionnez
div {
        border-color :     red blue green;
}

Si vous indiquez trois valeurs : la première vaut pour le haut, la seconde pour la droite et la gauche, la troisième vaut pour le bas.

Répartition de 3 valeurs
Trois valeurs
Indication de deux valeurs :
Sélectionnez
div {
        border-color :     red blue;
}

Si vous indiquez deux valeurs : la première vaut pour le haut et le bas, la seconde pour la droite et la gauche.

Répartition de 2 valeurs
Deux valeurs
Indication d'une valeur :
Sélectionnez
div {
        border-color :     red;
}

Si vous indiquez une valeur : elle vaut pour les quatre côtés.

Répartition de 1 valeur
Une valeur


Consultez l'exemple 08 sur les propriétés raccourcies s'appliquant aux bordures des boîtes.

Cette répartition dans le sens des aiguilles d'une montre ne concerne pas seulement la propriété border-color, mais s'applique à l'ensemble des propriétés listées ci-dessus : margin, padding, ainsi que border-width, border-style et bien sûr border-color.

F. Les règles at-rules

Les règles at-rules sont des règles spécifiques qui débutent par le caractère arobase (@) suivi d'un identifiant. Elles permettent de regrouper un ensemble de règles qui vont s'appliquer à des domaines spécifiques.

Ces règles sont au nombre de cinq :

  • la règle @import qui permet de gérer l'importation de fichiers css ;
  • la règle @media qui permet d'appliquer des règles css à un type de média précis ;
  • la règle @charset qui permet de définir un encodage au fichier css ;
  • la règle @font-face qui permet d'insérer une police externe ;
  • la règle @page qui permet d'appliquer des styles aux médias paginés.

1. La règle @import

La règle @import permet, en lieu et place de la balise <link>, de lier des feuilles de style à un document (X)HTML. Elle peut tout autant être insérée dans le fichier (X)HTML que dans un fichier CSS.

Cette règle sera étudiée dans le prochain article.

2. La règle @media

La règle @media permet d'appliquer un ensemble de règles en fonction du type d'agent utilisateur qui va afficher la page. Ce peut être un navigateur (média 'screen'), l'impression de la page web (média 'print'), un synthétiseur vocal (média 'speech')...

Ainsi dans l'exemple suivant, toutes les règles déclarées à l'intérieur de la règle @media ne vont s'appliquer que si vous imprimez la page :

Mise en œuvre de la règle @media pour l'impression des pages :
Sélectionnez
@media print {
        #menu {
                display :      none;
                border :       0 none;
        }
        p {
                background-color : none;
        }
}

3. La règle @charset

La règle @charset permet de déclarer le codage qui est utilisé dans le fichier CSS extérieur. Précisez le au début du fichier CSS externe et de la manière suivante :

La règle @charset, premier exemple :
Sélectionnez
@charset "UTF-8";

/* Les différentes déclarations CSS */
La règle @charset, second exemple :
Sélectionnez
@charset "ISO-8859-15";

/* Les différentes déclarations CSS */

Cette règle ne doit s'appliquer qu'aux fichiers CSS externes et non aux règles intégrées dans un fichier (X)HTML car elle est inutile dans ce cas (les navigateurs Safari et Google Chrome peuvent même rencontrer des soucis dans ce cas d'utilisation). Vous ne pourrez indiquer qu'une seule règle @charset par fichier CSS.

De même que la règle @import, cette règle at-rule doit être la première du document. Il ne doit y avoir ni ligne, ni aucun caractère avant, cela inclut également les commentaires qui sont donc également interdits.

Vous pouvez retrouver la liste des codages autorisés ici : liste des codages autorisésliste des codages autorisés par l'IANA.

4. La règle @font-face

La règle @font-face permet d'afficher une police originale sur votre site Internet. En principe pour que la police que vous avez choisie grâce à la propriété font-family s'affiche effectivement, il faut qu'elle soit présente sur l'ordinateur du visiteur.

Pour mettre un terme à cette limitation nous avons à notre disposition la règle at-rule @font-face, qui permet d'appeler une police que vous aurez au préalable placée sur le serveur et qui sera téléchargée sur le poste local (mise en cache).

Un exemple d'utilisation de @font-face :
Sélectionnez
@font-face {
        font-family :      nom-dappel;
        src :              url(nom-police-sur-le-serveur.eot);
}

/* appel à cette police pour les paragraphes : */
p {
        font-family :      nom-dappel;
}

La propriété font-family, dans le cadre de la règle @font-face, sert à attribuer un nom quelconque à la police. Ce nom servira dans le document pour faire appel à cette police, comme vous le montre l'exemple ci-dessus dans la règle s'appliquant au paragraphe. La propriété src sert à indiquer le chemin vers le fichier de police se trouvant sur le serveur.

5. La règle @page

La règle @page est destinée aux médias paginés, et permet donc d'appliquer un style spécifique aux pages Web en mode impression. Dans cette configuration le modèle de mise en forme visuel est quelque peu modifié par la création d'un nouveau modèle de boîte : la boîte de page. Ce nouveau modèle de boîte permet de gérer les différents aspects spécifiques à une page qui sont de pouvoir déterminer la taille de la page, ses marges, les sauts de page...

Un exemple d'utilisation de la règle @page :
Sélectionnez
@page {
        size :             16cm 20cm;
        margin :           1cm;
}

Remerciements

Le prochain article sera consacré à l'étude des différentes manières d'appliquer du CSS à un document (X)HTML.

Tous mes remerciements vont à kdmbella, jacques_jean et à michel.di pour leur relecture et leurs corrections, ainsi qu'à CinePhil, Lcf.vs et tous les autres membres de l'équipe Web que j'ai oubliés, pour leur soutien.

Commentez cet article : 7 commentaires Donner une note à l'article (5)

 
Tous les articles de cette série sur CSS :
Le sommaire

Introduction aux CSS
La syntaxe d'une règle CSS


Pour savoir ce qu'est un commentaire de fin de ligne consultez par exemple, la FAQ PHP : Qu'est-ce qu'un commentaire de fin de ligneQu'est-ce qu'un commentaire de fin de ligne.

  

Copyright © 2011 Christophe F.. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.