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é.
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
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.
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%);
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.
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.
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.
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>.
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é...).
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.
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.
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.
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.
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.
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.
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, ...
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é.
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.
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.
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.
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.
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.
