Le modèle de boîte CSS et le texte

CSS : le modèle de boite

CSS est souvent illustré par un modèle de boîte :

padding (marge interne) est transparent : il s'agit de l'espace adjacent au contenu et laisse voir la couleur d'arrière-plan ou l'image d'arrière-plan de l'élément auquel il appartient.

margin (marge externe) est transparent : il laisse voir la couleur d'arrière-plan ou l'image d'arrière-plan de l'élément parent sous-jacent, et non pas de l'élément auquel il appartient.

border (bordure) se situe entre le padding et le margin.

Comment calculer la largeur d'un élément?

Par exemple, considérons les valeurs suivantes pour width, padding, border et margin :

Code

          div {
            width: 130px; 
            padding: 10px;
            border: 10px;
            margin: 10px;
            box-sizing: content-box;
          }
          

Et voyons le résultat :

Résultat

La largeur totale affichée est donc de 10+10+10+130+10+10+10 = 190 px

Lorsque la valeur de box-sizing passe à border-box, les mêmes valeurs donnent une largeur différente :

Code

          div {
            width: 130px; 
            padding: 10px;
            border: 10px;
            margin: 10px;
            box-sizing: border-box;
          }
          

Résultat

La largeur totale affichée est donc de 10+130+10 = 150 px

C'est-à-dire que la valeur donnée à width inclut maintenant les valeurs de padding et de border.

CSS : héritage, cascade et spécificité

Héritage

L'héritage dans les CSS signifie la transmission des valeurs des propriétés CSS des ancêtres vers les descendants.

Nous avons vu que l'élément html est l'ancêtre de tous les ancêtres. Considérez la règle suivante pour l'élément html :

            html {
              font-family: Segoe, "Trebuchet MS", Verdana, sans-serif;
              color: blue;
            }
          

Le texte de tous les éléments descendants de html dans le document hérite de ces valeurs, peu importe la profondeur de la descendance.

L'héritage ne s'applique pas à toutes les propriétés.

Par exemple, cela n'aurait pas de pertinence que l'ajout d'une bordure à un élément article se répercute à tous ses enfants et descendants (tels des p, h1, h2, etc.). La propriété bordure ne peut donc être transmise aux descendants d'un conteneur.

Cascade

Le mot cascade de l'expression « feuille de style en cascade » ou cascading style sheet (CSS) signifie le passage d'un niveau de mise en forme à un autre, dans un ordre contrôlé, dans le meilleur des cas.

Sa fonction est de permettre au navigateur de décider parmi les différentes options quelle source doit être utilisée pour décrire une propriété particulière.

Sources des règles de style

Les styles proviennent de plusieurs sources.

1) D'abord, le navigateur possède sa propre feuille de style. C'est pourquoi h1 possède une taille propre par défaut et que les paragraphes ont d'emblée une certaine marge entre eux.

2) Ensuite, il y a les règles de style de l'auteur, soit celles écrites par vous-même en tant qu'auteur d'une page Web.

Comme on l'a vu, celles-ci peuvent-être de trois types:

• feuille de style liée;
• feuille de style insérée;
• règles de style en ligne (à même les éléments de balisage).

Voici l'ordre dans lequel le navigateur passe en revue les localisations des règles de style:

La cascade détermine l'ordre de lecture des règles de style et, en même temps, l'ordre dans lequel ces règles de style sont mises à jour au fur et à mesure que la cascade progresse.

La mise à jour des règles à appliquer suit l'ordre de la cascade, mais cela, en fonction d'un certains nombre de règles.

Les règles de la cascade

Règle 1: Trouver toutes les déclarations s'appliquant à chaque élément

Avec le chargement de chaque page, le navigateur scrute tous les éléments de la page et voit si une règle de style s'applique à l'un de ces éléments.

Règle 2: Trier par ordre

Le navigateur passe à travers chacune des cinq sources de règles de style potentielles, en mettant à jour les propriétés qui sont redéfinies plus bas dans la cascade. La dernière mise à jour sera celle qui prévaudra à l'affichage.

Par exemple, supposons que, dans l'exemple illustré par le tableau, deux des paragraphes du document passé en revue ont des règles de styles en ligne définissant la couleur du texte comme étant rouge. Dans ce cas, tous les éléments p auront un texte bleu sauf ceux ayant une règle de style en ligne redéfinissant le texte comme étant rouge.

Règle 3: Trier par spécificité

Un sélecteur d'identifiant est plus spécifique qu'un sélecteur de classe.

Un sélecteur de classe est plus spécifique qu'un sélecteur de type (élément HTML).

La spécificité est plus puissante que l'ordre: c'est-à-dire qu'une règle plus spécifique rencontrée plus haut dans la cascade l'emporte sur une règle moins spécifique rencontrée plus bas dans la cascade.

Si deux règles ont le même poids, celle qui se trouve plus bas dans la cascade l'emporte.

La spécificité (ou le poids) se calcule par A-B-C, c'est-à-dire:

• Ajoutez 1 à A pour chaque identifiant dans le sélecteur.
• Ajoutez 1 à B pour chaque classe (ou pseudo-classe) dans le sélecteur.
• Ajoutez 1 à C pour chaque élément (ou pseudo-élément) dans le sélecteur.

Lisez le résultat un peu comme un nombre normal à trois chiffres: par exemple, 0-2-0 (20) est plus spécifique que 0-0-9 (9) et 0-0-9 (9) est plus spécifique que 0-0-3 (3).

Nous n'utilisons ni identifiant ni classe pour le moment, mais voici tout de même une comparaison des sélecteurs d'éléments HTML (ou sélecteur de type) avec les sélecteurs de classe (.item-de-liste) et d'identifiant (#item-de-liste):

Le texte sur le Web

Le web présente un défi sur le plan de la typographie.

Pour commencer, il faut accepter de ne pas avoir le plein contrôle de la typographie sur le Web.

Par ailleurs, la typographie donne le ton en ce qui concerne la qualité visuelle d'un site.

Voici les principales propriétés CSS associées au texte :

Proprétés CSS associées aux polices de caractères et au texte

color

Couleur du texte
Essayez-le sur W3School !
Noms des couleurs
Color Picker

direction

Sens d'écriture

font

Ensemble des propriétés concernant les caractères

font-family

Police de caractères

font-size

Taille des caractères

font-size-adjust

Hauteur des lignes de texte

font-stretch

Étirement ou compression des caractères

font-style

Mise en italique

font-variant

Mise en petites capitales

font-weight

Mise en gras ou extra-gras

letter-spacing

Espacement des lettres

line-height

Hauteur de ligne

text-align

Détermine l'alignement horizontal du texte à l'intérieur d'un élément

text-decoration

Soulignement ou rayure du texte

text-indent

Indentation du texte

text-justify

Justification du texte

text-overflow

Détermine s'il faut afficher le contenu débordant d'un cadre plein sous forme de points de suspension (...) à la fin de la ligne

text-shadow

Définit les effets d'ombre à appliquer au texte de l'élément

text-transform

Contrôle la capitalisation (majuscules/minuscules) du texte d'un élément

vertical-align

Définit l'alignement vertical de l'élément par rapport à la ligne (et non la page)

word-spacing

Définit l'espacement entre les mots

white-space

Gère les espaces multiples et les bris de ligne
Essayez-le sur W3School

Les polices de caractères sur le web

À la base, ce sont les polices de caractères installées sur l'appareil de l'utilisateur qui déterminent les possibilités des navigateurs quant à l'affichage du texte dans les pages web.

Même si une police de caractères est spécifiée par le concepteur web par l'intermédiaire des règles de style, celle-ci sera affichée en autant qu'elle soit installée sur l'appareil de l'utilisateur. Si elle n'y figure pas, c'est la police par défaut du navigateur qui sera affichée.

Un autre facteur qui rend difficile le choix d'une police de caractères est l'inconsistance de leurs noms d'une plate-forme à l'autre: Times New Roman peut aussi se nommer TimesNR ou Times Roman, par exemple.

Le problème de la taille des caractères

En matière de typographie, la taille présente un autre défi, car la résolution des écrans varie et la taille par défaut des polices changent d'un navigateur à l'autre et d'une plate-forme à l'autre.

Les collections de polices

Valeurs: serif, sans-serif, monospace, fantasy, cursive.

Pour spécifier une fonte générique, à partir d'une collection de polices, vous pouvez écrire ceci :

            p {
              font-family: sans-serif; 
            }

Le navigateur affiche la fonte par défaut de cette collection (Helvetica ou Arial, dans la plupart des cas).

Le Pen suivant présente les différentes valeurs de collections de polices, telles qu'elles sont affichées par défaut dans Firefox :

Les familles de polices

Les familles de polices ne font pas partie du navigateur, mais résident plutôt dans le système d'exploitation de l'ordinateur de l'utilisateur. Voici les familles les plus courantes telles qu'elles s'affichent dans les navigateurs courants  :

Ces familles de polices permettent d'être plus spécifique que l'exemple ci-haut où le choix de la police s'arrêtait à la collection.

Par exemple:

            p { 
              font-family:"Trebuchet MS", Helvetica, Arial, sans-serif; 
            }
          

Cette déclaration indique au navigateur :

• d'afficher en priorité la police Trebuchet MS;
• d'afficher en deuxième lieu la police Helvetica ou en troisième lieu la police Arial dans le cas où Trebuchet MS n'est pas installé sur l'appareil de l'utilisateur;
• d'utiliser la fonte sans-serif par défaut du système dans l'éventualité où aucune des polices proposées n'est installée sur l'appareil de l'utilisateur.

Autre exemple utilisant cette fois une police serif:

            p { 
              font-family:"Hoefler Text", Times, serif; 
            }
          

Cette déclaration indique au navigateur que :

• Hoefler Text étant mentionné en premier, c'est cette police qui doit être affichée en priorité ;
• Windows ne disposant pas de Hoefler Text, c'est Times qui est affiché dans ce contexte ;
• si aucune de ces polices n'est disponible, c'est la fonte serif par défaut du système d'exploitation de l'utilisateur qui sera affichée.

Les unités de taille des polices de caractère

La taille des polices sur le web peut-être déterminée de trois manières:

1. absolue
2. relative
3. par des mots-clés

1_ Unités de taille absolues

Une taille absolue a une signification prédéfinie ou un équivalent dans le monde réel.

Pour les périphériques ayant un faible nombre de points par pouce, l’unité px représente le pixel de référence physique et les autres unités sont définies de façon relative à lui. Ainsi, 1in est définit comme 96px, ce qui équivaut à 72pt. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (in), centimètres (cm) et millimètres (mm) ne correspondent pas forcément à la longueur de l’unité physique du même nom.

Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (in), centimètres (cm) et millimètres (mm) sont définis comme leur équivalent physique. Par conséquent, l’unité px est définie comme étant relative à eux (1/96 de pouce).

px

Pixel. Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspondant à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.

mm

Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.

cm

Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.

in

Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.

pt

Un point pica (soit 1/72e de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.

pc

Un pica (soit 12 points, soit 1/6e de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.

mozmm

Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais cela peut être utile, en particulier pour les terminaux mobiles.

2_ Unités de taille relatives

Unités de taille reliées à la police

%

Pourcentage. Il ne s'agit pas d'une unité à proprement parler, mais on peut l'employer pour plusieurs propriétés CSS. «100%» est la valeur par défaut des polices dans les navigateurs (cela correspond à 1em ou 16px dans la plupart des navigateurs). Le pourcentage utilisé est en relation avec la taille spécifiée pour le conteneur parent ou le premier conteneur ancêtre, le cas échéant.

em

Traditionnellement, em correspond à la dimension de la lettre M dans la police utilisée; dans les CSS, cette unité de mesure correspond en pratique à la hauteur d'une ligne, sans l'espace interligne; par défaut, les navigateurs donnent la taille de 1em aux caractères, soit une hauteur équivalente à 16 pixels. La taille de em utilisée est en relation avec la taille spécifiée pour le conteneur parent ou le premier conteneur ancêtre, le cas échéant.

rem

Le rem, ou "root em", est la même chose que le em, mais cependant toujours en relation avec la taille de caractère spécifiée à la racine du document HTML (l'élément <html>) et non au premier ancêtre dont la taille est spécifiée.

ex

ex représente la hauteur de la lettre x dans la police utilisée (ou plus généralement la hauteur des lettres de bas de casse de la police). 1ex = 0.5em dans de nombreuses polices.

ch

ch représente la largeur du caractère « 0 » dans la police utilisée.

Unités de taille reliées au « viewport »

vh

1vh = 1/100e de la hauteur du viewport.

vw

1vw = 1/100e de la largeur du viewport.

vmin

1vmin = 1/100e de la valeur minimale entre la hauteur et la largeur du viewport.

vmax

1vmax = 1/100e de la valeur maximale entre la hauteur et la largeur du viewport.

Les mots-clés suivants sont aussi des unités de mesure relatives

smaller

Indique une diminution d'un intervalle par rapport à la valeur spécifiée pour un conteneur parent ou ancêtre dans les feuilles de style de l'auteur ou du navigateur.

larger

Indique une augmentation d'un intervalle par rapport à la valeur spécifiée pour un conteneur parent ou ancêtre dans les feuilles de style de l'auteur ou du navigateur.

3_ La taille par mots-clés

La taille peut aussi être exprimée avec des mots clés:

• xx-small
• x-small
• small
• medium (taille par défaut dans les navigateurs; correspond à 1em ou 16px)
• large
• x-large
• xx-large

Ces mots ne représentent pas une dimension particulière, mais ils ont un rapport constant les uns aux autres. La taille par défaut est medium dans les navigateurs conformes aux standards.

Unités relatives vs absolues

Les unités relatives confèrent aux page web un plus grand degré d'accessibilité, puisqu'elles donnent à l'utilisateur plus de contrôle sur la taille du texte affichée.

Niveau de précision des unités

Les unités em et % permettent de préciser plus finement la taille du texte que les sept mots-clés. On peut utiliser par exemple « 0.93em » ou « 93% ».

Par ailleurs, l'unité em accepte jusqu'à trois décimales (par exemple: 0.931em).

em vs %

L'utilisation des em et des des % est comparable: la valeur par défaut est de 1 dans le premier cas et de 100 dans le second.

Pour augmenter la taille de 20% par rapport à la valeur par défaut on écrit donc 1.2em ou 120%, selon l'unité utilisée.

Les propriétés des fontes et du texte

Les propriétés des fontes

font-style

Fonction : permet de passer de la fonte normale à l'italique.

Valeurs : normal, italic, oblique.

Exemple :

font-variant

Fonction : permet de passer aux petites capitales.

Valeurs : small-caps (petites capitales), normal.

Exemple :

font-weight

Fonction : ajuste l'épaisseur du trait de la fonte.

Valeurs : 100, 200, 300... 900, lighter, normal, bold, bolder.

Ces valeurs sont interprétées de manière variable selon les navigateurs et ne sont pas toujours reconnues.

Exemple :

font-size

Fonction : ajuste la taille de la fonte.

Valeurs : nombres et unités de taille variées; mots-clés.
(Voir plus bas pour une discussion plus détaillée sur les unités et les mots-clés.)

Cette propriété permet d'ajuster la taille du texte.

Exemple :

line-height

Fonction : ajuste la hauteur de la ligne.

Valeurs: normal (par défaut); toute valeur numérique avec ou sans unité (lorsque sans unité, il s'agit d'une valeur proportionnelle à la taille de la police).

Exemple :

font-family

Fonction : spécifie la police de caractère à afficher.

Valeurs: noms des polices de caractères.
(Voir plus bas pour une discussion plus complète à ce propos.)

Exemple :

font: une « super-propriété »

Le terme font est un raccourci pour regrouper les propriétés qui précèdent. C'est ce qu'on appelle une « super-propriété ».

Exemple :

              p { 
                font: 0.8em Verdana; 
              }
            

                h3 { 
                  font-weight: bold; 
                  font: 1.6em Verdana, sans-serif; 
                }
            

Les propriétés du texte

Les propriétés suivantes s'appliquent au texte.

text-indent

Fonction : ajuste l'alinéa (le retrait de la première ligne d'un paragraphe).

Valeurs : unités de taille diverses, positives ou négatives.

Exemple :

letter-spacing

Fonction : ajuste la distance entre les lettres.

Valeurs : unités de taille diverses, positives ou négatives.

Exemple :

Cette propriété peut être utilisée pour équilibrer un titre (éléments h1-h6), par exemple, ou encore pour ajuster une courte chaîne de caractères transformée en majuscules ou en petites capitales. Ce sont communément les majuscules ou les polices compactes qui vont bénéficier de ce traitement.

word-spacing

Fonction : ajuste la distance entre les mots.

Valeurs : unités de taille diverses, positives ou négatives.

Exemple :

Cette propriété peut être utilisée pour équilibrer un titre (éléments h1-h6), par exemple.

text-decoration

Fonction : ajuste l'ornementation du texte.

Valeurs: underline, overline, line-through, none.

Exemple :

text-align

Fonction : ajuste l'alignement du texte par rapport à son conteneur parent.

Valeurs : left, right, center, justify.

Les valeurs left, right, center et justify sont illustrées dans l'ordre dans l'exemple suivant :

text-transform

Fonction : ajuste la casse du texte.

Valeurs : uppercase (majuscules), lowercase (minuscules), capitalize (la première lettre chaque mot sera écrite en majuscule), none.

Exemple :

vertical-align

Fonction : ajuste l'alignement vertical d'un élément de type inline ou inline-block par rapport à la hauteur de la ligne.

Valeurs : toutes valeurs numériques (positives et négatives), pourcentage (%) et aussi les mots baseline (défaut), sub, super, top, text-top, middle, bottom, text-bottom.

Exemple :

Activités d'évaluation

EX4 - CSS : mettre en forme un document html

L'exercice 4 a pour objectif de vous familiariser avec les proprétés CSS parmi les plus courantes.

Plus spécifiquement, vous effectuerez la mise en forme d'une page en rédigeant vous-mêmes les règles de style.

Sources

Téléchargez le dossier grx_nomprenom_ex4.zip.

Référez-vous au tableau de sélecteurs pour faire votre travail: Sélecteurs du DOM

Documents à remettre sur Teams/Devoirs

Un dossier rigoureusement nommé comme suit (minuscules et sans espace ni caractères spéciaux):

• groupe du mercredi 9h : gr1_nomprenom_ex4
• groupes du vendredi 8h : gr2_nomprenom_ex4

contenant le fichier index.html, le dossier images contenant les images, le dossier css contenant le fichier styles.css et le dossier document contenant le fichier pdf.

Structure de fichiers :

ou

Échéancier

Remettez le dossier complet, zippé, sur Teams/Devoirs, dans l'espace prévu à cette fin, au plus tard:

• le lundi suivant le cours, 9h le matin (groupes 1 - lundi)
• le mercredi suivant le cours, 9h le matin (groupe 2 - vendredi)

Travail à faire

Vous devez mettre en forme la page index.html.

Toutes les règles de style doivent être rédigées dans la feuille de style externe, c'est-à-dire dans le document styles.css.

En vous inspirant des deux images suivantes, rédigez des règles de style dans le document styles.css qui permettent d'obtenir un résultat pas nécessairement identique, mais équivalent.

L'image suivante présente les différentes mises en forme à prévoir. Pour chacune de ces mises en forme, il aura une ou plusieurs règles de style à rédiger.