Interaction Homme-Machine sur le Web (partie 3) : CSS.¶

1. Introduction.¶

Le HTML n'est pas conçu pour gérer la mise en page il s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect "décoratif" (on parle du "style" de la page), on utilise le CSS (Cascading Style Sheets) : C'est CSS qui permet de choisir la couleur du texte, la police utilisée, le fond de page, de placer un menu, etc.

CSS est apparu en 1996 donc au début du Web (au début des années 90), CSS n'existait pas, il n'y avait que le langage HTML. On utilisait alors des balises HTML dédiées à la mise en forme. Rapidement les pages HTML ont commencé à devenir complexes et il y avait de plus en plus de balises mélangeant ainsi le fond et la forme ce qui rendait la mise à jour des pages web de plus en plus complexe. CSS n'a pas tout de suite été répandu et au début des années 2000, Internet Explorer (IE6) gérait très mal le CSS. Avec la monté en puissance des autres navigateurs, Microsoft a (tardivement) réagi avec IE7, IE8… mais du coup si on utilise un vieux navigateur (de Microsoft en particulier), il risque de ne pas connaître un grand nombre de fonctionnalités (plus ou moins récentes) de CSS et donc ne pas être capable d'afficher correctement un site web (mais le site ne plantera pas, il sera simplement "moins beau").

CSS est en évolution constante, avec de nouvelles fonctionnalités disponibles au fur et à mesure de son développement et tout comme HTML, il est développé par un groupe au sein du W3C.

Remarque : Comme pour toutes les parties de ce chapitre, le but de ce cours n'est pas de faire de vous des "développeurs Web front-end" en 1 mois de nsi, il permet de faire de nombreuses choses en CSS mais pas de tout faire, certaines fonctionnalités ne sont donc pas présentées (et ne sont pas au programme de la nsi).

2. Mise en place du CSS.¶

Pour afficher une page web, un navigateur doit associer le contenu du document HTML et les informations de mise en forme.

Pour commencer, le navigateur charge le HTML (reçu par le serveur). Il traduit le HTML en un DOM (Document Object Model) qui est une représentation du document HTML stockable en mémoire sous la forme d'un arbre dont chaque noeud représente une partie du document. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML : les images, les vidéos, etc. et la feuille de style CSS. Le navigateur "parse"* le CSS et classe les différentes règles par types de sélecteur. En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'arbre de rendu (render tree). Le visuel ainsi produit est alors affiché à l'écran (cette étape s'appelle painting).

(*)Parser = Parcourir le contenu d'un texte ou d'un fichier en l'analysant pour vérifier sa syntaxe ou en extraire des éléments.

Pour récupérer les ressources dont le navigateur a besoin, il parse les informations contenues dans les balises <head></head>. C’est donc entre ces balises que se place le lien de la feuille de style attachée au document HTML, grâce à un élément link comme dans l'exemple ci-dessous :

In [ ]:
<link rel="stylesheet" type="text/css" href="feuillestyle.css"/>

Remarque : En fait, il existe plusieurs façons pour écrire du CSS mais nous utiliserons uniquement la méthode qui consiste à écrire le code dans un fichier texte avec l'extension .css (méthode recommandée).

3. Syntaxe du CSS.¶

Un fichier CSS est un fichier texte qui contient des règles qui définissent la façon dont les éléments HTML d'une page web doivent s'afficher.

Chaque règle contient :

  • un sélecteur qui définit sur quel élément HTML s'applique la déclaration CSS

  • une déclaration formée de propriétés CSS à appliquer au sélecteur et d'une valeur pour chaque propriété.

Une règle CSS doit respecter la syntaxe suivante : La règle commence par un sélecteur, l'élément HTML mis en forme puis le nom de l'élément doit être suivi d'accolades, à l'intérieur des quelles, on place les propriétés CSS suivies d'un ":" pour indiquer leur valeur et séparées de ";".

Par exemple : "Je veux que le titre principal de ma page s'affiche en bleu en gros caractères." va se traduire par le code CSS :

In [ ]:
h1 {
  color: blue;
  font-size: 3em;
}

Ici, le style s'applique aux titres h1 (normalement il doit y en avoir 1 seul par page). Entre les accolades, on trouve 2 propriétés CSS : la propriété color qui peut prendre différentes valeurs pour représenter une couleur (soit en toute lettre soit sous la forme d'une chaîne de caractères hexadécimaux) et la propriété font-size qui accepte différentes tailles comme valeurs (et exprimées dans différentes unités).

Une feuille de style CSS est un fichier constitué d'une succession de telles règles.

Par exemple :

In [ ]:
h1 {
  color: blue;
  font-size: 3em;
}

p {
    color : blue;
    font-style: italic;
}

Remarque : En CSS le début des commentaires est signalé par /* et la fin par */.

4. Différentes façons d'appliquer un style à un élément.¶

Si deux éléments doivent avoir le même style, il suffit de combiner la déclaration des 2 éléments en les séparant par une virgule.

Par exemple :

In [ ]:
p, li {
    color: red;
}

Avec les exemples précédents, on a constaté qu'appliquer et définir un style est donc assez simple mais il y a un gros défaut : on applique le même style à TOUS les éléments donc par exemple tous les paragraphes possèdent la même présentation (tous écrits en rouge dans l'exemple précédent).

Pour résoudre le problème, on peut utiliser des attributs globaux qui fonctionnent sur toutes les balises et dont on a déjà parlé dans la partie HTML : l'attribut class et l'attribut id.

On utilise des attributs class pour définir des styles généraux et communs à plusieurs éléments dans une même page et un attribut id pour définir le style d'un élément unique.

Dans le fichier CSS, on utilisera le point "." pour désigner l'attribut class et le # pour l'attribut id.

Exemple :

On peut, aussi, cibler un élément imbriqué dans un autre élément d'un document HTML avec un "combinateur descendant" formé par deux sélecteurs séparés par un espace. Par exemple :

Dans cet exemple, le style s'appliquera uniquement aux éléments li de l'élément ul donc seul le texte de la liste non ordonnée va être affiché en rouge.

La dernière façon que nous allons voir permet d'appliquer un style sur un élément en fonction de son état (survolé par la souris ou cliqué par exemple), c'est particulièrement utile pour les liens donc les éléments a. Cet élément a différents états selon que le lien a ou n'a pas été visité (visited), est survolé par le curseur (hover), a le focus clavier (focus), ou si l'utilisateur est en train de cliquer sur ce lien (active). CSS permet de cibler ces différents états et donc de modifier le style de cet élément en fonction de son état.

Exemple :

Ici, on affiche en rouge le lien, on supprime le soulignement quand le lien est survolé et on l'affiche en noir une fois qu'il a été visité.

Il existe de très nombreuses propriétés CSS et il ne sera pas possible de toutes les décrire dans ce cours où nous allons nous contenter de voir les plus communes. Les curieux peuvent consulter le site : https://developer.mozilla.org/fr/docs/Web/CSS/Reference.

5. Mise en forme de texte.¶

En CSS, il y a une série de propriétés "classiques" de mise en forme du texte. Ces propriétés peuvent se classer en 2 grandes catégories : les styles de la police de caractères (police, taille, italique, etc.) et les styles de composition du texte (disposition du texte, espacement, etc.).

Les principales propriétés :

  • color : modifie la couleur du texte. On peut indiquer la couleur souhaitée en tapant son nom (en anglais) ou bien en utilisant la notation hexadécimale qui permet d'obtenir 16 millions de couleurs (code couleur qui indique le mélange de Rouge-Vert-Bleu). Il est noté avec un # suivit de 6 caractères en hexadécimal. Le blanc correspond à #000000 et le noir à #FFFFFF. On peut utiliser un site comme https://htmlcolorcodes.com/fr/ pour obtenir les codes couleurs en hexadécimal.

Exemple :

color: #02fd17; /* vert clair */

  • font-family : permet de modifier la police utilisée. On peut indiquer plusieurs polices séparées par des virgules pour éviter les problèmes si un internaute n'a pas la police choisie par le créateur du site qu'il visite. La liste des polices qui fonctionnent sur tous les navigateurs est : Arial, Courier New, Georgia, Times New Roman, Trebuchet MS et Verdana. Attention donc à ne pas utiliser une police qui risque de ne pas être installée. On verra en TP qu'on peut utiliser les "googlefonts" pour avoir des polices originales et qui n'ont pas besoin d'être installées sur une machine pour fonctionner. On peut indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, dans ce cas, si la 1ère police n'est pas disponible, il va essayer avec la suivante et ainsi de suite.

Exemple :

font-family: "Times New Roman", Georgia, "Courier New"

  • font-size : permet de modifier la taille du texte. On peut utiliser une taille absolue (en px, en cm, en mm) ou une taille relative (en "em", par exemple 1.3em va multiplier par 1,3 la taille normale du texte).

Exemples :

font-size : 1cm; /* caractères de 1 cm */

font-size: 3em; /* multiplie par 3 la taille normale */

  • font-style : permet la mise en italique (ou pas) du texte. Elle prend 3 valeurs : italic, oblique et normal.

Exemple :

font-style: italic; /* pour mettre un texte en italique */

font-style: normal; /* pour annuler une mise en italique */

  • font-weight : permet de mettre en gras un texte. Elle prend plusieurs valeurs possibles, mais les 2 plus courantes sont normal et bold (pour gras).

Exemple :

font-weight: bold; /* pour mettre un texte en gras */

font-weight: normal; /* pour annuler la mise en gras */

  • text-transform : permet de définir les transformations de la police. Les principales valeurs sont : none, uppercase (tout le texte en majuscules), lowercase (tout le texte en minuscules) et capitalize (première lettre de tous les mots en majuscule).

Exemple :

text-transform: capitalize;

text-transform: lowercase;

  • text-decoration : permet d'activer (ou désactiver) les décorations (soulignements) de texte sur les polices. Les valeurs possibles sont : none, underline (pour souligner), overline (ligne au-dessus du texte et line-through (texte barré).

Exemple :

text-decoration: underline;

text-decoration: underline overline red; /* souligné au-dessus et en-dessous et en rouge */

  • text-align : permet de contrôler la disposition du texte. Les principales valeurs possibles sont : left (alignement à gauche), right (alignement à droite), centrer (centré) et justify (texte justifié).

Exemple :

text-align: right;

text-align: left;

6. Arrière plan d'un élément.¶

  • background-color: permet de définir la couleur utilisée pour l'arrière-plan d'un élément. Elle s'utilise comme color.

Exemple :

background-color: #02fd17; /* fond vert clair */

  • background-image : permet de définir une ou plusieurs images pour l'arrière-plan d'un élément.

Exemple :

background-image: url("exemple.png"); /* url de l'image à préciser */

On peu même afficher plusieurs images en les séparant par une virgule. L'adresse peut, bien-sûr, être notée avec un chemin absolu ou un chemin relatif. Sans rentrer dans les détails, on peut "jouer" finement sur l'affichage d'une image de fond. Par défaut l'image de fond est répétée pour recouvrir toute la fenêtre mais on peut l'empêcher d'être répétée (background-repeat), on peut aussi fixer cette image pour donner l'impression que le texte glisse par-dessus (background-attachment) ou encore indiquer où doit se trouver l'image de fond dans la fenêtre (background-position).

Vous pouvez consulter : https://developer.mozilla.org/fr/docs/Web/CSS/background-repeat, https://developer.mozilla.org/fr/docs/Web/CSS/background-attachment et https://developer.mozilla.org/fr/docs/Web/CSS/background-position.

7. Le modèle de boîtes.¶

Les boîtes constituent la structure de base de l’affichage d’une page HTML. Tous les éléments HTML sont représentées par un empilement de boîtes rectangulaires dans le navigateur. On appelle cette organisation le modèle de boîtes.

Une boîte est caractérisée par quatre éléments :

  • La marge extérieure (margin), l’espace entre cette boîte et les boîtes qui l’entourent.

  • La bordure (border), par défaut, cette dernière a une épaisseur de 0 pixel et n’est donc pas visible.

  • La marge intérieure (padding), l’espace entre la bordure et le contenu de la boîte.

  • Le contenu (content), ne dépendant pas du CSS mais du code HTML.

Le CSS fournit différentes propriétés qui permettent de spécifier la taille des différents éléments composants les différentes boites : Les propriétés width et height permettent de définir la largeur et la hauteur de la boite "contenu", la propriété padding permet de définir la taille des marges internes, la propriété border permet de définir des bordures et la propriété margin permet de définir la taille des marges externes.

Les éléments HTML peuvent être affichées de deux grandes façons différentes : soit sous forme de bloc, soit en ligne. En CSS, il y a donc 2 types de boîtes : les boîtes de bloc (block) et les boîtes en ligne (inline).

Une boîte block commence toujours sur une nouvelle ligne et prendra toute la largeur disponible dans dans son conteneur, ce qui signifie que la boîte deviendra aussi large que son conteneur, remplissant 100% de l'espace disponible. La largeur et la hauteur de ce contenu vont être représentées respectivement par les propriétés CSS width (largeur) et height (hauteur) et on pourra éloigner ou rapprocher d'autres éléments de la boîte avec la marge ou les bordures.

Certains éléments HTML, tels que h1, p ou encore div, utilisent block comme type d'affichage par défaut.

Les éléments de type inline n’occupent que la largeur nécessaire à leur contenu. Ainsi, on ne pourra pas modifier la taille de l’espace pris par le contenu des éléments de type inline avec les propriétés width et height : les valeurs qu’on va pouvoir définir seront ignorées. Le modèle de boîte CSS dans son ensemble s'applique aux boîtes de blocs, les boîtes en ligne n'utilisent qu'une partie du comportement défini dans le modèle de boîte.

Certains éléments HTML, tels que a, span, ou encore img utilisent inline comme type d'affichage par défaut.

Exemple : Avec le code HTML/CSS suivant :

On obtient :

En général, les boîtes inline se placent dans des boîtes block afin d’avoir un maximum de contrôle sur l’apparence d’une page web.

On peut changer le mode d'affichage par défaut d'une boîte avec la propriété display de l'élément.

Exemple : Avec le code HTML/CSS suivant :

On obtient :

Remarque : Il existe d'autres types de boîte dont la boîte "inline-block". Ces dernières mélangent les caractéristiques de boîtes block et inline. Elles peuvent être utiles pour placer plusieurs éléments de type block sur la même ligne horizontale (sans les flotter) ou pour permettre à un élément de type inline d'avoir une hauteur et une largeur (et des marges et des paddings) tout en conservant sa nature inline.

Exemple : Copier le code HTML/CSS suivant et observer le résultat.

8. Mise en forme des images.¶

Si on une image à l'intérieur d'une boîte qui est plus petite ou plus grande que les dimensions du fichier image, elle apparaîtra soit plus petite que la boîte, soit débordera de la boîte. Il faudra donc décider ce qu'on fait dans ce cas.

Une technique courante consiste à utiliser la propriété width (ou max-width) d'une image en la mettant à 100%. Cela permettra à l'image d'avoir la taille de la boîte (ou d'avoir au maximum la taille de la boîte) sans pouvoir être plus grande. Cette méthode fonctionne également avec d'autres éléments tels que video ou iframe.

Exemple :

On peut aussi faire d'autres choix concernant les images à l'intérieur des conteneurs. Par exemple, si on souhaite redimensionner une image de manière à ce qu'elle recouvre complètement une boîte. La propriété CSS object-fit définit la façon dont le contenu d'un élément img doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur. Selon la valeur utilisée pour object-fit, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient :

  • contain : L'image est dimensionnée pour maintenir ses proportions tout en étant ajusté à la boîte de contenu

  • cover : L'image est dimensionnée pour maintenir son rapport d'affichage (largeur/hauteur) tout en remplissant toute la boîte de contenu, elle peut donc être rognée.

  • fill : L'image est dimensionnée pour remplir la boîte de contenu, l'image est éventuellement déformée.

  • none : L'image n'est pas redimensionnée à l'intérieur de la boîte.

Exemple : Pour qu'une image s'adapte à une boîte de 300x300px en la remplissant :

In [ ]:
#image{
    display: block;
    width: 300px;
    height: 300px;
    max-width: 100%;
    object-fit: cover;
}

On peut centrer horizontalement des images en utilisant la propriété margin: auto. Mais la propriété margin: auto ne fonctionne pas pour les images car elle n'a aucun effet sur les éléments de type inline (comme l'élément img). Pour éviter ce problème, il faut utiliser en plus la propriété display: block.

Par exemple :

In [ ]:
img {
  margin: auto;
  display: block;
}

9. Des colonnes.¶

Les colonnes permettent de structurer le contenu du corps d'une page web. Créer des colonnes consiste à placer côte à côte des éléments HTML.

Nous allons voir 2 méthodes pour créer des colonnes :

Première méthode : On place les éléments les uns à côté des autres horizontalement en utilisant la propriété float.

Exemple : On veut créer une page web avec 2 colonnes comme, par exemple, sur la page principale d'Atrium (une fois connecté). On décide que chaque colonne doit avoir une largeur fixe de 450 pixels.

  • La première colonne aura la propriété "float : left".

  • Pour la deuxième colonne, on doit donner la propriété "margin-left : 460px ;" (pour avoir un espace de 10 pixels entre les 2 colonnes)

Ce qui donne le code suivant :

In [ ]:
En HTML :
<div class="col1"> 
    <p>Un premier paragraphe avec du texte.</p>
</div>
<div class="col2>
    <p> Une second paragraphe avec du texte aussi.</p>
</div> 

En CSS :
.col1{
    float : left ;
    width : 450px;
    margin-left: 0px;
    margin-right: 0px;
}
.col2{
    width : 450px;
    margin-left: 460px;
}

Au lieu de travailler avec des tailles fixes (comme ici avec les 450 pixels), on peut travailler avec des tailles relatives en exprimées en pourcentage (avec le symbole %). L'avantage c'est que les colonnes seront redimensionnées à la taille de la fenêtre ouverte par le navigateur.

Par exemple :

In [ ]:
.col1{
    float : left ;
    width : 45%;
    margin-left: 0px;
    margin-right: 0px;
}
.col2{
    width : 45%;
    margin-left: 47%;
}

2ème méthode : on utilise le modèle de disposition en grille (display:grid) qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par les éléments HTML.

La propriété grid-template-columns définit les noms des lignes et les fonctions de taille pour les colonnes de la grille. C'est cette fonction qui permet de "fabriquer" la grille. Elle peut prendre une valeur entière en pixel (taille fixe), ou bien en pourcentage ou encore en "flex" (unité fr) qui permet d'occuper une partie de l'espace restant en fonction de ce facteur.

Exemple : Pour définir 2 colonnes de tailles 60 pixels :

In [ ]:
display: grid;
grid-template-columns: 60px 60px;

Pour définir 2 colonnes telle que la 2ème ait une largeur qui sera le double de la 1ère :

In [ ]:
display: grid;
grid-template-columns: 1fr 2fr;

Pour définir 3 colonnes (2 larges et une plus étroite), on peut avoir le code :

Ce qui donne :