Les valeurs de couleurs peuvent être utilisées dans plusieurs propriétés : color, background-color et border-color (penser à changer aussi la largeur border-width et son aspect border-style: solid).
Les couleurs peuvent être spécifiées par 3 systèmes : des noms, le système RGB et le système HSL (peu usité). Aux derniers s'ajoutent les variantes avec transparence (rgba et hsla).
Les trois syntaxes RGB sont à connaître :
#XYZ : composantes RGB sur une échelle de 0 à 15 (F) ;
#XXYYZZ : pareil, sur une échelle de 0 à 255 (FF) ;
rgb(x,y,z) : pareil mais en décimal (0–255).
Par exemple, #FF0000, #F00 et rgb(255,0,0) désignent du rouge pur.
Toutefois, l'aspect des polices ne doit pas être primordial dans l'expression du sens du document. Beaucoup de navigateurs substituent les polices téléchargeables pour d'autres. Il est préférable de raisonner sur les cinq familles prédéfinies : serif, sans-serif, monospace, cursive, fantasy.
De plus, il est recommandé de n'avoir qu'au maximum cinq formes d'affichage différentes à l'écran, y compris les italiques et le gras ; lorsqu'il y a de la titraille, on peut avoir un de plus par niveau de titre présent.
La couleur peut aider à donner du sens supplémentaire (titres, liens).
Feuilles de style centralisées
Sur un même site, on utilise en général une charte graphique qui codifie l'aspect des textes et des pages. Plutôt que de répéter les indications de style sur chaque page, on les met alors dans un unique fichier centralisé.
En plus de n'être téléchargé qu'une seule fois, cette page peut être modifiée en une fois pour tout le site : résistance à l'erreur, performance.
La syntaxe est la suivante (le nom du fichier est évidemment libre) :
Voyons maintenant plus de sélecteurs. Il est possible de sélectionner non pas par balise mais par identifiant ou par classe.
Rappel : un identifiant se donne à un nœud par l'attribut id. Un nom d'identifiant ne doit pas contenir d'espaces (et éviter les caractères non-ascii). Le sélecteur CSS pour l'identifiant abc est #abc.
Une classe se donne à un nœud par l'attribut class. Un nom de classe ne doit pas contenir d'espaces (et éviter les caractères non-ascii). Le sélecteur CSS pour la classe abc est .abc. Un nœud peut avoir plusieurs classes.
Ce titre de niveau 1 a un identifiant (Initialisation) et deux classes (extra, impair).
Rôles des langages
Les documents numériques publiés sur le Web distinguent entre la structure du document, son contenu, tous les deux exprimés par le langage HTML, et sa présentation, exprimée par le langage CSS.
Le protocole HTTP permet d'envoyer les données à la requête du client depuis le serveur.
Le but premier du web est la mise à disposition de l'information pour toutes les personnes, et on utilise le développement par consensus au sein du W3C pour faire évoluer les pratiques.
Les modèles de présentation
Regardons comment CSS dispose les éléments sur la page.
Affichage des éléments
Un élément peut s'afficher de plusieurs façons. La façon dont il s'insère dans le flot de composition du moteur de rendu du navigateur est choisi par la propriété display.
Les trois premières valeurs que l'on peut regarder sont block, inline et none. Si l'effet de la dernière est assez évident (pas d'affichage), la deuxième permet de forcer l'affichage d'éléments selon la dichotomie bloc ou inline.
Les éléments de type bloc sont empilés les uns sur les autres verticalement dans le flot normal.
Les éléments de type inline sont enfilés les uns derrière les autres horizontalement puis soumis au processus de césure, qui fabrique des lignes de longueur maximale.
À cause de la disposition en colonne étroite et contrairement à l'écrit, il est habituelle de choisir une justification au fer à gauche plutôt que des deux côtés.
Les divers dépassements des éléments inline peuvent être gérés par overflow, word-break par exemple.
Direction
Certaines langues n'ont pas les directions usuelles ; il existe tout un groupe de propriétés ayant trait aux directions assez complexe (writing-mode).
Liens hypertexte(image: M. Apsel / Wikipédia)
Le modèle de boîte
Chaque boîte a trois mesures dans chaque direction : padding, border, margin.
Le fond du padding est le même que celui du contenu.
La couleur du bord est donnée par border-color, son épaisseur par border-width et son style par border-style.
Les marges sont transparentes. Les valeurs verticales de blocs voisins peuvent être fusionnées : 1cm de marge basse suivi de 2cm marge haute donnent 2 cm de séparation.
Pour les éléments inline, les six dimensions verticales n'ont pas d'effet sur le texte environnant.
Les containers neutres
Deux balises HTML existent pour faire des regroupements à visée d'affichage. Ils regroupent des éléments qui ont un lien non spécifié (mais qui doivent garder une logique à l'affichage).
Le conteneur div est un conteneur neutre de type bloc.
Le conteneur span est un conteneur neutre de type inline.
<div class="important"><h3>Attention !</h3><p>Il ne faut pas confondre <span class="def">vitesse</span> et <span class="def">précipitation</span>.</p></div>
Attention !
Il ne faut pas confondre vitesse et précipitation.
Unités de longueur
Les unités de longueur qui peuvent être utilisées sont exprimées:
En px (pixels): unité arbitraire correspondant à un pixel typique (réseolution 96ppi)
En unités absolues (cm, mm, in): un nombre de pixels qui avec une résolution de 96ppi fait l'unité nommée.
En em : une unité qui correspond à la largeur de la police ; elle est réglable par l'utilisateur. Initialement largeur d'un M. Existe aussi ex, soit la hauteur d'un x.
En rem : c'est la largeur d'un em au niveau du body du document, et donc a la même valeur dans toute la page.
Mise en application
Avec ces propriétés, vous pouvez déjà mettre en page des documents. Il reste à voir encore plusieurs modèles, mais vous avez le plus important.
Pour chaque propriété, vous pouvez consulter une documentation en allant la chercher dans la documentation MDN.
Avec CSS2 puis CSS3, les options d'affichage se sont enrichies, notamment pour permettre des mises en page complexes.
Les flexbox
Les flexbox sont une disposition de cellules en colonnes qui se suivent.
Chaque cellule est indépendante, et des propriétés permettent de modifier l'enchaînement des cellules les unes par rapport aux autres.
Les grilles
Les grilles permettent de définir un grillage et ensuite de placer des zones sur des rectangles dans le grillage.
Sortir du flot
Il est possible de sortir complètement un bloc (ou un élément inline) du flot de composition habituel en utilisant la propriété position.
Il peut alors être placé à un autre endroit de la fenêtre. En fait, il est placé par rapport à l'élément de l'arbre du document qui est son ancêtre le plus proche et a lui aussi la propriété position. Cet élément sert alors de référence.
La valeur relative gardent l'espace normal de la boîte.
D'autres valeurs absolutefixed suppriment l'espace occupé. L'une est relative à l'élément de référence, une autre à la vue (fenêtre).
Toutes ces propriétés peuvent poser des problèmes de masquage du texte par d'autres parties de la page.
Flotter à côté du texte
Encore une dernière possibilité de disposition est de permettre de faire flotter du texte à côté du texte principal. Le branche de l'arbre est alors sortie du contexte de composition, et la largeur disponible est réduite de la largeur de la boîte qui est sortie sur la hauteur nécessaire.
Si on veut s'assurer que le flottant est terminé, on utilise la propriété clear: both sur le paragraphe suivant
Le placement des flottants est complexe et de nos jours il est plus simple d'utiliser les flexbox pour un bon nombre d'usages.
Les priorités des sélecteurs
Avec les dispositions complexes et les mises en pages plus riches, il devient difficile d'avoir des sélecteurs qui s'appliquent de façon unique à un élément.
Pour chaque élément et chaque propriété, on regarde toutes les règles qui s'appliquent directement à lui pour elle. S'il n'y en a pas qui s'appliquent directement alors on regarde celles qui s'appliquent aux parents.
S'il y en a plusieurs:
On prend en priorité celle dont le sélecteur a le plus d'identifiants (#x)
En cas d'égalité, celle dont le sélecteur a le plus de classes (.x)
En cas d'égalité, celle dont le sélecteur a le plus de balises (X)
En cas d'égalité, celle qui est en dernier.
On pourra s'aider de cet aide-mémoire (il y a quelques sélecteurs basiques qui n'ont pas encore été vus).
Conclusion
À ce stade, vous avez presque toutes les armes pour mettre en page des sites, y compris les plus complexes.
Mais nous allons voir des outils qui permettent de simplifier ces mises en page.
Pour voir le pouvoir des CSS, n'hésitez pas à vous promener dans le Jardin Zen des CSS pour admirer le même fichier HTML transformé par des CSS
