Composants du langage

Une autre définition

Du point de vue du langage (plutôt que de son utilité), CSS est défini comme suit :

Une feuille de style CSS (…) consiste en une liste d’instructions (…). Il existe deux types d’instruction : les règles-at et les jeux de règles. (…)1

Nous reviendrons par la suite sur les règles-at et jeux de règles, après nous être intéressé à ce qui les compose.

Propriétés, valeurs (properties, values)

Propriétés

Une propriété est une caractéristique d’un élément qui, lorsque associée à un élément particulier, et attachée à une valeur, peut influencer le rendu visuel de l’élément.2

Un élément HTML peut avoir de multiples propriétés, par exemple font-family, font-size, background-color, width, height, margin. Il s’agit d’identificateurs définis par le langage.

Ce sont sur ces propriétés que l’on va chercher à agir en CSS, en leur assignant une valeur, ce qui constitue alors une déclaration.

Valeurs

Une valeur peut prendre différentes formes : celle d’un mot-clé, d’un nombre, associé ou non à une unité, d’une chaîne de caractère, d’une notation héxadécimale ou fonctionnelle, ou même d’une combinaison de ces différents éléments.

mots-clé (keywords)

L’élément plus courant est le mot-clé (keyword). Il s’agit d’une valeur prédéfinie par le langage et reconnue par celui-ci.

Ainsi, si l’on se rend sur la page de documentation relative à la propriété position, on peut voir que plusieurs valeurs peuvent être attachées au mot-clé position : static, relative, absolute, fixed sticky, inherit, initial, ou unset.

exemple
color: red;

La propriété color se voit assigner comme valeur le mot-clé red (rouge).

nombres et unités

Certaines propriétés (comme width par exemple) peuvent prendre aussi bien des mots-clé comme valeur, que des nombres associés ou non à une unité, comme 0, 10px ou 100%;

N.b. : l’unité est toujours accolée directement au nombre, sans espace entre ces deux éléments.

exemple
width: 0;
width: 10px;
width: 100%;

La propriété width (largeur) se voit assigner comme valeur les nombres et unités 0, 10px et 100%.

chaînes de caractères

Dans certains cas, comme avec font-family, il est possible de définir comme valeur une chaîne de caractère délimitée par une paire de séparateurs ' ou " (dans certains cas, les séparateurs ne sont même pas nécessaires). Par exemple la propriété font-family pourra se voir attribuer la chaîne de caractères "Helvetica Neue".

exemple
font-family: "helvetica neue";

La propriété font-family se voit assigner comme valeur le mot-clé helvetica neue.

notation hexadécimale

Il est courant d’utiliser pour la notation des couleurs une notation dite hexadécimale. Là où le décimal est une notation de base 10, utilisant les dix chiffres de 0 à 9, l’hexadécimal est une notation de base 16 utilisant les dix chiffres de 0 à 9 et six lettres de A à F. Ce qui donne les seize caractères 0 1 2 3 5 6 7 8 9 A B C D E F valant de 0 à 16.

La notation hexadécimale se note en commençant par un signe croisillon # et est suivi de 3 nombres en hexadécimal codés sur un ou deux caractères, correspondant respectivement aux rouge, vert et bleu, comme suit #RVB ou #RRVVBB, ce qui donnerait par exemple pour rouge = 255, vert = 0, bleu = 0 : #FF0000.

exemple
color: #FF0000;

La propriété color se voit assigner comme valeur la notation hexadécimale #FF0000 (rouge : FF (255), vert : 0, bleu : 0).

notations fonctionnelles

Dans certains cas, il est possible voire obligatoire d’employer une notation dite fonctionnelle, constituée d’un identificateur suivi d’une paire de parenthèses, lesquelles accueillent elles-même une autre valeur. On peut donner pour exemple rgb(255, 0, 0), url("assets/images/exemple.png") ou encore calc( 100% - 20px).

exemple
color: rgb(255, 0, 0);

La propriété color se voit assigner comme valeur la notation fonctionnelle rgb(255,0,0) (rouge : 255, vert : 0, bleu : 0).

Déclaration et bloc de déclarations

Déclaration (declaration)

Une déclaration est une paire constituée d’une propriété et d’une valeur.3

On peut ajouter à cela qu’une déclaration débute par l’identificateur correspondant à la propriété ciblée, suivi d’un deux-point : et de la valeur associée. Une déclaration est cloturée par un point-virgule ;.

Exemple

font-family: helvetica;

Bloc de déclarations (declaration block)

Il est possible de regrouper plusieurs déclarations s’appliquant au(x) même(s) élément(s) dans un bloc de déclaration. Pour cela on utilise les séparateurs accolade ouvrante { et fermante }.

exemple

{
  font-family: helvetica;
  font-size: 1.2em;
}

sélecteur et groupe de sélecteurs

Sélecteur (selector)

(Un sélecteur est) un chaîne de caractère permettant la recherche et l’identification dans le document des éléments auxquels les déclarations correspondantes s’appliquent.4

Il existe différents types de sélecteurs. À titre d’exemple, le sélecteur img permet de sélectionner tous les éléments img. Les sélecteurs sont traités plus en détail au prochain chapitre.

Groupe de sélecteur (selector group)

Il est possible de définir un groupe de sélecteur en séparant ceux-ci à l’aide d’une virgule, comme suit : article, section, div. Le bloc de règle auquel on associera le groupe de sélecteur s’appliquera à tous les éléments sélectionné par le groupe, ici aussi bien aux éléments de type article, section et div.

Jeux de règles (ruleset)

Un jeu de règles est un ensemble constitué d’un sélecteur, ou groupe de sélecteurs, associé à un bloc de déclaration.5

exemple

article, section {
  background-color: white;
  padding: 1em;
}

Règles-at (at-rules)

Les règles-at commencent par un mot-clé-at : un caractère @ immédiatement suivi par un identificateur (par exemple @import, @page) Une règle-at est constituée de tout ce qu’elle contient jusqu’au prochain point-virgule ou prochain bloc.6.

Les règles-at correspondent à des usages particuliers, comme définir l’encodage utilisé ou définir un format spécifique auquel associer des jeux de règles. Il existe une douzaine de règles-at;

Exemple

@charset "UTF-8";
@import url('landscape.css') screen and (orientation:landscape);

Règles-at imbriquées (nested at-rules)

Il est possible d’associer une règle-at à un bloc contenant lui même des jeux de règles. On parle alors de règle-at imbriquées. Deux exemples couramment utilisées sont les règles-at @font-face et @media.

Règles @font-face

Les règles @font-face permettent de fournir à un navigateur les informations nécessaires à l’utilisation d’une famille typographique qui n’aurait pas été préalablement installée par l’utilisateur sur son ordinateur.

Règles @media

Les règles @media permettent de conditionner l’application du jeu de règle à un ou plusieurs types de média donnés (selon les dimensions, le type d’écran, tactile ou non, s’il s’agit d’une impression, etc). Il s’agit d’un des outils permettant de faire du design adaptatif (responsive design).

exemple

@media (max-width: 320px) {
  body {
    font-size: 12px;
  }
}

commentaires

Il est possible d’utiliser des commentaires en CSS. Une seule forme de commentaire est possible, monoligne ou multiligne, en délimitant ceux-ci à l’aide des séparateurs /* et */ respectivement pour le début et la fin.

exemple

@media (max-width: 320px) {
  /* lorsque la taille du viewport
     est inférieure à 320px */
  body {
    /* la taille de la typo est à 12px **/
    font-size: 12px;
  }
}

notes & références

  1. “A CSS style sheet, for any level of CSS, consists of a list of statements (see the grammar above). There are two kinds of statements: at-rules and rule sets. There may be white space around the statements. CSS Working Group.” Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification, Chapter 4 : Syntax and basic data types. w3.org, 12 Apr. 2016. Web. 09 Mar. 2017. ↩

  2. “Property : A characteristic of an element which, when attached to a particular element and given a value, may influence the rendering the element.” Wium Lie, Håkon. “Cascading Style Sheets.” Faculty of Mathematics and Natural Sciences, University of Oslo, Norway, 29 Mar. 2005. Web. 07 Mar. 2017. ↩

  3. “declaration : A property and value pair.” Ibid. ↩

  4. “Selector : A search pattern that identifies to what elements the corresponding declaration applies.” Ibid. ↩

  5. “Rule : A statement that consists of a selector and a declaration.”, Ibid. Voir aussi : Mozilla Developper Network contributors. Syntax - CSS. Mozilla Developper Network, 31 Jan. 2017. Web. 07 Mar. 2017. ↩

  6. “At-rules start with an at-keyword, an ‘@’ character followed immediately by an identifier (for example, ‘@import’, ‘@page’). An at-rule consists of everything up to and including the next semicolon (;) or the next block, whichever comes first.” Ibid. ↩