Nous abordons enfin la deuxième partie essentielle de ce cours sur l’intégration avec les styles qui permettent l’ « habillage » graphique des pages web. Cette première leçon est spécifiquement consacré au principe des styles, les feuilles dites CSS étant vues à la leçon suivante. Les styles que nous allons voir concernent le texte, les paragraphes et les listes.
Examinons tout d’abord comment les styles s’écrivent de manière générale.
Styles
Un style est donné par trois éléments :
-
-
- une propriété, par exemple
color
pour la couleur du texte - une valeur parmi un ensemble de valeurs permises, par exemple
yellow
- un élément auquel il applique
- une propriété, par exemple
-
Par exemple pour passer en jaune la couleur d’un titre, nous écrivons ceci : <h1 style="color:yellow">Titre</h1>
.
Le style est donc appliqué directement à un élément par l’attribut style
et s’écrit en général propriété:valeur
. Nous verrons par la suite d’autres façons d’attribuer un style à un ou plusieurs éléments.
Vous pouvez attribuer plusieurs styles en une fois en les séparant par un point-virgule, par exemple :
<p style="color:green; font-size:12px"/>
Modalités d’application
Un style, selon sa nature, peut avoir un effet visuel selon deux modalités :
-
-
- soit il s’applique uniquement à l’élément et pas à ses descendants ; c’est par exemple le cas de
border
que nous verrons dans la leçon suivante, qui trace une bordure autour de l’élément uniquement - soit il s’applique à tout le contenu, c’est le cas en général pour tout ce qui touche au texte ; par exemple modifier la taille de police par
font-size
applique le changement à tout le texte contenu dans l’élément, quelque soit les sous-éléments
- soit il s’applique uniquement à l’élément et pas à ses descendants ; c’est par exemple le cas de
-
Prenons cette situation :
<p style="color:red">Le petit <b>chat</b> est <span style="color:blue">gris</span></p>
Le résultat, que vous pouvez tester en copiant ce code dans une page, est assez logique : la couleur rouge s’applique à tout le texte, y compris dans la balise <b>
, sauf à « gris » pour lequel la couleur a été définie en bleu. Notons au passage une nouvelle balise, dont nous reparlerons, qui sert uniquement à appliquer un style : span
.
Avant d’entrer dans le cœur du sujet, voyons quelles valeurs peut prendre une propriété :
- une liste fermée de valeurs possibles, comme par exemple
font-style
qui peut valoirnormal
,italic
ouoblique
- une couleur, pour
color
oubackground-color
par exemple - une adresse web (URL) comme pour background-image
- une longueur pour exprimer par exemple la taille police (
font-size
) ou la marge (margin
)
Avant de traiter en détail les styles, examinons comment les trois derniers types de valeurs s’écrivent.
Exprimer une couleur
technique | exemples |
Couleur nommée
Il en existe 140, voir par exemple www.colors.commutercreative.com ou w3schools |
white , black , red , green , blue , gray , yellow , orange , marron , etc |
Code couleur RGB complet
Code à 6 chiffres hexadécimaux précédés de #, codant la couleur par les trois composantes rouge, vert et bleue de la synthèse additive :
|
|
Code couleur RGB abrégé
Code à trois chiffres hexadécimaux où il faut répéter chaque chiffre pour obtenir le code complet (cela permet de coder 4096 couleurs, souvent bien suffisant pour un écran) |
|
Code RGB en décimal
Code RGB écrit en décimal sous la forme |
rgb(175, 32, 80) équivaut à #af2050 |
Code HSL
Modèle de couleur perceptif (voir Wikipédia) à trois composantes :
|
hsl(340, 69%, 41%) équivaut à #af2050 |
Canal (ou couche) alpha
Transparence introduite en CSS 3 pour représenter la transparence (ou plutôt l’opacité !) entre 0 (transparent) et 1 (opaque). Utilisable avec rgb() et hsl en 4e valeur. |
hsl(60, 100%, 50%, 0.5) est un jaune à moitié transparent |
Donner une longueur
Les unités de longueur les plus courantes sont :
- unités physiques, à réserver à l’impression (donc pas vraiment recommandées pour un site web affiché sur un écran !), que sont
pt
(point),pc
(pica),cm
(centimètre),mm
(millimètre),in
(pouce) avec comme équivalence 1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc - unité souvent qualifiée de « fixe », le pixel CSS abrégé en
px
; il n’a pas en réalité la même taille physique selon les écrans, il ne correspond donc pas à un pixel réel mais il représente un point très fin visible par un utilisateur à une distance courante à son écran (articles instructifs : https://hacks.mozilla.org/2013/09/css-length-explained) - unités relatives à la taille par défaut définie dans le navigateur (16px normalement),
em
etrem
; les deux sont des facteurs multiplicateurs par rapport à cette taille de base, maisem
est relatif au parent alors querem
directement à cette taille (voir explication plus bas) ; on peut aussi utiliser un pourcentage sur le même principe - nouvelles unités introduite en CSS 3 pour le développement mobile, relative à la taille du viewport (
vh
hauteur,vw
largeur) c’est-à-dire de la fenêtre dans laquelle le navigateur affiche le document, en centième (50 vh signifie la moitié de la hauteur de la fenêtre)
Résumons-les dans un tableau :
px |
pixel |
cm , mm , in |
unités physiques |
pt , pc |
point et pica |
em |
x fois la taille du parent |
rem |
x fois la taille par défaut |
% |
en pourcentage de la taille du parent |
vh , vw , vmin , vmax |
relatif au viewport pour les maquettes responsives |
Il y en a d’autres d’un usage quasi confidentiel, voir https://developer.mozilla.org/fr/docs/Web/CSS/length
font-size: 1cm; // pour l'impression, ne pas utiliser en général font-size: 24px; // l'unité de base, à utiliser pour les maquettes figées font-size: 2em; // à privilégier dans tous les cas car respecte le choix de l'utilisateur, indispendable pour les maquettes responsives font-size: 300%; // idem (la nouvelle unité rem est encore mieux, en général)
Pointer vers une adresse
Il est parfois nécessaire de désigner une ressource, souvent pour une image. Le principe est le même qu’avec les ressources liées ou intégrées dans le code HTML, avec les adresses absolues ou relatives (voir la Leçon 5). Dans les styles, l’adresse s’écrit url(adresse) avec la possibilité de mettre des guillemets simples ou doubles, soit par exemple :
background-image: url(img/fond.png) background-image: url('img/fond.png') background-image: url("img/fond.png")
Entrons enfin dans le vif du sujet avec les styles d’usage courant.
Styles de caractères
Changer la police de caractère
Il y a quatre propriétés incontournables pour changer la police de caractère (fonte) d’un élément :
propriété | description | valeurs possibles | |||||||||||||||||||
font-family |
font-family:cursive,helvetica,'times new roman' |
la valeur peut être un nom de police générique ou un nom de police particulière
liste des polices génériques :
|
|||||||||||||||||||
font-style |
A utiliser pour pencher un texte :
|
|
|||||||||||||||||||
font-weight |
|
|
|||||||||||||||||||
font-size |
Taille de la police de caractère | Unité de longueur
La valeur par défaut est celle définie par l’utilisateur dans le navigateur, en principe |
Ces propriétés sont souvent appliquées à l’élément body
pour que tout le document soit impacté.
Utiliser une police spéciale
Pour sortir des familles générique de police, vous pouvez déclarer une fonte particulière dans font-family, mais l’utilisateur final doit l’avoir installée sur son ordinateur. Sinon, la police par défaut sera utilisée.
Comment alors personnaliser et embellir le site avec une fonte particulière ? Il faudrait que le navigateur puisse récupérer la police juste pour afficher la page.
Ce mécanisme existe grâce à la version 3 des CSS. Nous pouvons intégrer une police directement dans une page en fournissant le fichier de fonte dans un format reconnu par le navigateur, par exemple ttf (TrueType Font), otf (OpenTypeFont) ou svg (voir w3schools.com pour la liste des formats, ou encore cet article). Il faut soit importer une police qui se trouve sur un autre serveur, notamment les Google Fonts avec @import
ou un simple link
(voir le fichier d’exemple fonts.html
ou ce tutoriel), soit l’intégrer au site. Pour cela, les étapes à réaliser sont :
- télécharger le fichier de police au format
otf
par exemple, le plus commun - placer ce fichier dans l’arborescence de votre site, à la racine ou dans un sous dossier
fonts
si vous en avez plusieurs (inutile ici d’installer la police dans le système, l’important est de l’envoyer à tous les navigateurs qui appelle votre site) - intégrer la police dans les styles de votre page qui doit l’utiliser (voir
fonts.html
pour un exemple détaillé)
Changer la couleur du texte
propriété | description | valeurs possibles ou exemple |
color |
La couleur du texte | Couleur nommée, RGB ou HSL |
background-color |
La couleur du fond valable pour du texte (balise <span> , <b> , <a> , etc) mais aussi pour des blocs (<h1> , <p> , etc). |
<strong style="background-color: yellow">surligné</strong> surligné |
Autres effets touchant les caractères
Voici quelques effets qui touchent au souligné, à l’espacement entre les mots ou les lettres et à la mise en majuscule.
propriété | description | valeurs possibles | ||||||||||
text-decoration |
« Décoration » du texte |
|
||||||||||
word-spacing , letter-spacing |
espacement entre les mots et entre les caractères, en unité de longueur (voir font-size ) |
<span style="letter-spacing:4px>La petite maison</span> La petite maison <span style="word-spacing:2em>La petite maison</span> La petite maison |
||||||||||
text-transform |
Mise en majuscule | A partir du texte : la touR eiffeL
|
||||||||||
white-spacing |
Définition de l’interprétation des espaces et des retours à la ligne, différentes valeurs voir MDN pour le détail |
|
Styles de paragraphe
Ces styles concernent les paragraphes au sens très général, pas seulement la balise <p>
. Ils touchent un bloc de texte fait de plusieurs lignes, selon la largeur de la fenêtre.
Espacer un paragraphe avec le contenu autour
La marge permet de réaliser cet espacement. Abordée ici du point de vue du paragraphe, nous verrons à la leçon suivante que cette propriété concernent tous les blocs
propriété | description | valeur par défaut |
margin-top |
|
0 |
Quelques exemples de déclarations de marge :
margin-top: 10px; /* marge haute de 10 pixels */ margin: 1%; /* toutes les marges sont à 1% de la taille du conteneur */ margin: 10px 1%; /* 10px en haut et en bas, 1% à droite et à gauche */ /* équivaut aux quatre directives qui suivent */ margin: 0 20px 5px 30px; margin-top: 0; margin-right: 20px; margin-bottom: 5px; margin-left: 30px;
Centrer horizontalement et verticalement
Dans ce leçon d’initiation aux styles, nous traitons du contenu textuel avec des styles que je qualifie de styles de caractère ou de paragraphe. Plus précisément, ce contenu recouvre :
- le texte brut mis dans une balise quelconque, par exemple un dans un <p>
- le texte mis dans une balise de mise en forme comme <i>, <b>, etc
- les images
- les liens <a>
Tous ces éléments s’affichent en suivant le fameux « flux » HTML, c’est-à-dire en ligne de gauche à droite (ce sens peut toutefois être inversé), puis vers le bas selon la largeur de la fenêtre du navigateur. Il n’y a de balise qui provoque implicitement un retour à la ligne, si ce n’est <br>
.
-
<h1 style="font-size:4rem; font-weight: normal"> <img src="tree-logo_opt.svg" style="height:6rem"/> <a href="www.w3c.org">wXyz</a> <span style="font-size:2rem">(company)</span> </h1>
Toutes les autres balises sont qualifiées de « bloc », comme <p>, <h1>, <section>, etc. Visuellement elle s’affiche dans un rectangle qui prend toute la largeur de la page ce qui provoque un retour à la ligne avant et après. Ce principe sera amplement traité dans la leçon suivante.
Comment centrer horizontalement un contenu textuel ?
Il faut une balise conteneur par exemple un <p>
ou <h*>
qui a pour enfant du texte, des images et/ou des liens. Pour que tout ce beau contenu soit centré, le style text-align
est là avec text-align:center
appliqué à cette balise conteneur.
propriété | description | valeurs possibles | ||||||||
text-align |
détermine la position de tout le contenu en ligne d’un élément bloc | Les valeurs communes sont :
D’autres valeurs sont plus confidentielles et concernent le sens d’écriture donné par l’attribut direction (voir MDN). |
Comment aligner verticalement les éléments textuels ?
L’alignement vertical du texte, ou de tout élément en ligne comme une image, s’appuie sur différentes hauteurs remarquables représentées par ce schéma :
Notons aussi que la taille de police définie par font-size
correspond à une hauteur de caractère. En pixel (px) ou en taille relative (em), la taille correspond à la hauteur des plus haut caractères, en tenant des lettre haute comme « b » et basse comme « p ».
Les valeurs données à droite du schéma sont les valeurs possibles pour la propriété CSS vertical-align
. Cette propriété s’applique à un élément en ligne (et non au conteneur bloc comme pour text-align
!). Par défaut le texte est alignés au niveau de la ligne de base et les images au bas.
L’alignement doit se comprendre comme un placement de l’élément qui reçoit vertical-align
par rapport à tous le texte qui reste par défaut en baseline
. Plutôt que d’expliquer péniblement comment fonctionne l’alignement avec ces différentes valeurs, voyons les résultats possibles sur l’exemple précédent. La propriété vertical-align
est appliquée à l’image et au petit texte « (company) », donc il faut comparer l’image par rapport à « wXyz » et « (company) » par rapport à « wXyz » qui ne se reçoit pas d’alignement. Pour bien voir certaines subtilités, nous avons colorer le fond du texte « wXyz » (sa « boîte ») et ajouté deux caractères « plein » █ qui est le plus haut possible.
propriété | description |
baseline
valeur par défaut
|
wXyz█ (company)█ |
middle
|
wXyz█ (company)█ |
top
|
wXyz█ (company)█ |
bottom
|
wXyz█ (company)█ |
sub
|
wXyz█ (company)█ |
super
|
wXyz█ (company)█ |
text-top
|
wXyz█ (company)█ |
text-bottom
|
wXyz█ (company)█ |
Indenter et définir l’interligne
propriété | description | valeur par défaut |
text-indent |
indentation (espacement à gauche) de la première ligne | 0 |
line-height |
|
normal |
Styles de liste
Nous pouvons aussi changer l’aspect des listes en appliquant ces propriétés à un élément <ul> ou <ol> :
propriété | description | valeurs possibles | ||||||||||||||||||||||||||||||
list-style-type |
« Décoration » du texte | Pour une liste à puce <ul> :
Pour une liste ordonnée
|
||||||||||||||||||||||||||||||
list-style-image
|
image pour les puces, son adresse est donnée par l’une des trois syntaxes :
|
<ul style="list-style-image:url(/img/puce.png)"> </ul> <ul style="list-style-image:url(http://pixels.org/puce.jpg)"> </ul> |
||||||||||||||||||||||||||||||
list-style-position |
|
|
||||||||||||||||||||||||||||||
list-style |
|
list-style: none; list-style: circle inside; list-style: url(rond.jpg); list-style: url(rond.jpg) outside; list-style: square url(rond.jpg); /* etc, il y a plein de possibilités ! */
|
- site de référence pratique, facile à lire et permettant de tester le code, résumant l’essentiel mais n’étant pas exhaustif : w3schools avec une partie tutoriel et une partie référence (en anglais !)
- la référence pour tout savoir sur une balise, un attribut, une propriété CSS : MDN web docs