Aller au contenu

Le langage CSS/Glossaire

Un livre de Wikilivres.
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:"]
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 »
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é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.
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 : *
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 ».
Gras
Le texte peut être mis en gras avec la propriété CSS font-weight.
Voir la section « Gras, italique » du chapitre « Texte ».
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.
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 ».
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 ».
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 ».
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.
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é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.
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 ».
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 »
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 »
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-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 »