# Le langage CSS/Glossaire

* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
* Introduction
** Premier exemple
** Structure et syntaxe
** Les sélecteurs
** Valeurs et unités utilisées
* Mise en forme
** Texte
** Fonds, bordures, marges et espacements
** Listes
** Tableaux
** Héritage
* Mise en page
** Le positionnement des éléments
** Le modèle de boîte
** Transformation géométrique
* Pour aller plus loin
** Techniques avancées
** Navigateurs et débogage
** CSS 3
** Bootstrap
* Annexes
** Glossaire
** Mots réservés
** Notions de design et de colorimétrie
** Interface HTML
[ Modifier le sommaire ]

## A
### Adaptabilité

    Un document adaptatif peut s'afficher sans problème sur toutes les tailles d'écran disponible, du plus petit (téléphone portable, montre connectée, ...) au plus grand (écran HD cinéma/projection). Pour cela, la feuille de style doit prévoir différentes disposition possible selon la largeur d'affichage disponible. Par exemple :
   * placer 4 sections par ligne sur écrans larges, 2 par ligne sur écrans moyens et une seule section par ligne sur petits écrans ;
   * choisir une grande taille de police de caractères sur écrans larges pour éviter les vides et avoir une meilleur visibilité sur les écrans à haute résolution, et choisir une taille plus petite pour loger davantage de texte par ligne sur les petits écrans de téléphone mobile.

### Alignement

    Alignement du texte : à gauche, à droite, centré, justifié.
    Voir la section « Alignement du texte » du chapitre « Texte ».

### Arborescence

    Un document HTML définit une structure hiérarchique sous la forme d'un arbre d'éléments : chaque élément peut en contenir plusieurs autres. En CSS, il est possible d'enchaîner les sélecteurs pour sélectionner les éléments parents (directs ou non) avant l'élément ciblé :
    Exemple 1 : Tous les éléments p enfants directs d'un élément de classe info : .info > p
    Exemple 2 : Tous les éléments de classe item enfants directs ou indirects d'un élément de classe menu : .menu .item

### Attribut

    Un attribut est une propriété associée à un élément HTML. Par exemple, l'attribut style définit une série de propriétés CSS appliquées à l'élément.
    Exemple : <div style="border: solid 1px; font-weight:bold;">Zone avec bordure, en gras</div>
    Un sélecteur peut utiliser les attributs en encadrant le nom avec des crochets, et peut aussi tester la valeur associée.
    Exemple 1 : Tous les éléments ayant un attribut style défini : [style]
    Exemple 2 : Tous les éléments ayant un attribut style défini et contenant la chaîne "color:" : [style*="color:"]

## B
### BEM

    Bonne pratique du CSS consistant à organiser les styles en arborescence. Par exemple, __ dans un nom de sélecteur signifie "enfant direct".

### Bordure

    Zone entourant un élément comprise entre la marge et l'espace interne dans le modèle de boîte. Par défaut, cette zone est vide (aucune bordure).
    Voir le chapitre « Le modèle de boîte »

## C
### Canevas

    Représente l'espace fermé dans lequel la structure de formatage est traitée. Pour l'écran d'ordinateur, il s'agira de la zone de visualisation du navigateur ; pour une page papier, il s'agira de l'espace imprimable de la page ; etc.
    Recommandation CSS2 - Le canevas (FR)

### Chrome

    Navigateur de Google basé sur le moteur Chromium.

### Couleur

    La couleur est définie par un ensemble de composants, en général RVB : Rouge, Vert, Bleu (en anglais : RGB = Red, Green, Blue), et potentiellement une composante alpha indiquant l'opacité. Les propriétés CSS permettent de définir différentes couleurs :
   * Couleur de texte : color: blue;
   * Couleur de fond : background-color: #432;
   * Couleur de bordure : border-color: rgb(100%, 50%, 0%);
    Voir la section « Les couleurs » du chapitre « Valeurs et unités »

### CSS

    Feuilles de styles en cascade (Cascading Style Sheets), servent à mettre en forme des documents web, type page HTML ou XML et sont le sujet de ce livre.

## D
### Dégradé de couleur

    Les règles de style CSS permettent de mettre un dégradé de couleur en fond d'un élément en utilisant l'une des fonctions gradient pour la propriété background-image : linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient ou conic-gradient.
    Voir la section « Fond en dégradé de couleur » du chapitre « Fonds, bordures, marges et espacements »

### Document

    Les règles de style CSS s'applique à un document HTML ou XHTML. Ce document définit un ensemble d'éléments imbriqués. Les règles CSS ciblent des éléments particulier à styliser en utilisant des sélecteurs.

## E
### Edge

    Navigateur de Microsoft successeur d'Internet Explorer. Les dernières versions sont basées sur le moteur Chromium.

### Élément

    Nœud de l'arborescence des documents HTML, XHTML ou XML défini par une balise d'ouverture et une balise de fermeture.
    Un sélecteur peut désigner tous les éléments ayant le même nom :
    Exemple 1 : Tous les éléments nommés div : div
    Exemple 2 : Tous les éléments : *

## F
### Feuille de style

    Une feuille de style est un ensemble de règles CSS. Elle peut être un fichier séparé (extension .css) ou incluse dans un document HTML dans un élément <style>.
    Voir le chapitre « Interface HTML ».

### FF

    Firefox, navigateur de la fondation Mozilla.

### Fond

    Le fond d'un élément est la partie du modèle de boîte incluant l'espace interne (padding) mais pas la bordure ni la marge (margin). La propriété background permet d'en changer l'apparence (couleur, image, dégradé...).
    Voir le chapitre « Le modèle de boîte » et le chapitre « Fonds, bordures, marges et espacements ».

## G
### Gras

    Le texte peut être mis en gras avec la propriété CSS font-weight.
    Voir la section « Gras, italique » du chapitre « Texte ».

## H
### Héritage

    La plupart des propriétés appliquées à un élément s'appliquent également aux éléments qu'il contient : police de caractère, couleur de texte et de fond, ... D'autres ne sont pas héritées ; par exemple les propriétés sur la bordure ne s'appliquent qu'à l'élément ciblé.
    La valeur spéciale inherit permet d'écraser la valeur d'une propriété pour utiliser la même valeur que celle de l'élément parent.
    Voir le chapitre « Héritage »

### HTML

    HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS.
    Voir le livre sur le langage HTML.

## I
### IE

    Internet Explorer ; navigateur ancien de Microsoft très peu utilisé et ne supportant pas complètement les standards récents. Il a été remplacé par Edge.

### Italique

    Le texte peut être mis en italique avec la propriété CSS font-style.
    Voir la section « Gras, italique » du chapitre « Texte ».

## J
### JS

    Javascript est un langage de programmation permettant les interactions avec l'utilisateur.
    Voir le livre « Programmation Javascript »

### Justification

    Alignement du texte : à gauche, à droite, centré, justifié.
    Voir la section « Alignement du texte » du chapitre « Texte ».

## M
### Marge

    La marge est l'espacement entre la bordure d'un élément et celle des éléments voisins. Elle est définie par la propriété margin.
    Voir le chapitre « Le modèle de boîte ».

### Modèle de boîte

    Le rendu des éléments de type bloc peut être modélisé par un ensemble de zone rectangulaire imbriquées appelées boîtes.
    Voir le chapitre « Le modèle de boîte ».

## O
### Opacité

    L'opacité permet de rendre un élément plus ou moins opaque : 100% = opaque (par défaut), 0% = transparent. Elle s'applique à tout l'élément : fond et contenu. Pour ne l'appliquer que sur le fond, il faut utiliser une couleur de fond avec composante alpha pour indiquer l'opacité de la couleur.
    Voir la section « Opacité » du chapitre « Fonds, bordures, marges et espacements »

### Ordre

    L'ordre d'application des règles de style est défini par :
   * la spécificité des sélecteurs : plus le sélecteur est précis plus il a la priorité,
   * l'attribut style a la priorité sur les feuilles de styles (sauf les valeurs marquées avec !important),
   * l'ordre d'inclusion des feuilles de style en cas d'égalité : la nouvelle règle écrase l'ancienne valeur.
    Voir la section « Ordre d'interprétation des styles et cascade » du chapitre « Structure et syntaxe » pour plus de détails.

## P
### Page

    Une page web est définie par un document HTML constitué d'une hiérarchie d'éléments.

### Plate-forme

    Désigne généralement le type de système d'exploitation d'un ordinateur. On parlera de la plate-forme Linux, la plate-forme Macintosh, la plate-forme Windows, etc.

### Profondeur

    La profondeur d'un élément définit l'ordre de superposition des éléments en utilisant la propriété CSS z-index.
    Voir la section « Profondeur » du chapitre « Fonds, bordures, marges et espacements »

### Propriété

    Une propriété définit une valeur à un attribut changeant l'apparence : color, background-color, margin, padding, font-family, ...
    Voir la section « Structure générale » dans le chapitre « Structure et syntaxe »

### Pseudo-classe, pseudo-élément

    Dans un sélecteur, une pseudo-classe désigne un état particulier d'un élément : premier élément du parent, survol de la souris, lien déjà visité, ... Un pseudo-élément est similaire mais possède un contenu à définir : contenu avant, contenu après... Leur nom est précédé d'un signe deux-points. Ils sont en général combinés avec d'autres sélecteurs.
    Voir la section « Les pseudo-classes et les pseudo-éléments » du chapitre « Les sélecteurs »

## S
### Sélecteur

    Un sélecteur désigne les éléments auxquels s'appliquent les propriétés regroupées dans le bloc qui suit le sélecteur. Il peut désigner les éléments par leur nom, une classe CSS particulière, un identifiants, une combinaison de sélecteurs, ...
    Voir le chapitre « Les sélecteurs »

### Spécificité

    La spécificité est la précision d'un sélecteur. Elle est utilisée pour définir la priorité des règles de style. Quand plusieurs valeurs différentes existe pour une même propriété, le sélecteur plus spécifique a la priorité.
    Voir la section « Ordre des spécificités des règles » du chapitre « Structure et syntaxe »

### Structure de formatage

    Tout document HTML ou XML donne lieu à la construction d'un arbre du document reflétant l'organisation de ses contenus et de leur structure. À partir de l'arbre du document, le moteur de rendu CSS d'un navigateur produit une structure dite « de formatage » qui est utilisée pour appliquer les règles de style aux éléments. La structure de formatage est déduite de l'arbre du document, mais peut en différer lorsque des contenus sont générés ou supprimés via CSS.

### Style

    Le style définissant l'apparence d'un élément peut être fourni par l'attribut style dans le document HTML ou de manière plus réutilisable dans un document séparé de feuille de style d'extension .css.

## T
### Taille de police

    La taille de la police de caractères définit la hauteur des caractères d'une ligne de texte. En unité absolue, celle-ci est couramment exprimée en points ; elle peut utiliser d'autres unités absolues ou des unités relatives.
    Voir le chapitre « Valeurs et unités » et les sections « Police et taille de police » et « font-size : taille des caractères » du chapitre « Texte ».

## U
### Unité

    Les valeurs de certains propriété sont exprimées en différentes unités spécifiées en général après la valeur.
    Voir le chapitre « Valeurs et unités »

## V
### Variable

    Une variable permet de stocker une valeur utilisée plusieurs fois. cela facilite la maintenance car la modification de la valeur ne se fait qu'à un seul endroit : la définition de la variable.
    Voir la section « Déclaration de variable » dans le chapitre « Structure et syntaxe »

## X
### XHTML

    eXtensible HyperText Markup Language ; langage utilisé pour les documents web, définissant une structure hiérarchique d'éléments dont le style est définissable par une feuille de style CSS. Il s'agit de HTML utilisant la syntaxe plus stricte du XML.
    Voir le livre sur le langage HTML.

### XML

    eXtensible Markup Language ; langage générique définissant une structure hiérarchique d'éléments. Ce langage est d'utilisation plus générale pour définir des structures de données. Le rendu peut être stylisé pour le transformer en XHTML en utilisant des feuilles de style XSLT.
    Voir le livre sur le langage XML.

## Z
### z-index

    La propriété CSS z-index définit la profondeur d'un élément définissant l'ordre de superposition des éléments.
    Voir la section « Profondeur » du chapitre « Fonds, bordures, marges et espacements »

## Voir aussi

* Catégorie:Lexique en français de la programmation sur le Wiktionnaire