IFT 1005 - Design et développement Web

5. CSS

Sébastien Roy, Université de Montréal

IFT 1005 - Design et développement Web

5. CSS

Sébastien Roy, Université de Montréal
13 février 2023
 

Remerciements

Merci à Guy Lapalme et Louis Salvail pour avoir partager le matériel qu'ils ont monté pour IFT1005.

Le matériel de ce cours peut être réutilisé, sujet à la licence CC BY-SA 4.0.

Feuille de style

Les feuilles de style en cascade, nommées CSS, est un langage informatique simple qui décrit la présentation des documents HTML et XML.

Avantages

Où définir un style?

  1. Style par défault du navigateur web
  2. Fichier externe CSS (<link> dans la section <head>)
  3. Élément <style> dans le HTML
  4. Intégré à un élément par l'attribut style="..."

Ces styles s'appliquent dans l'ordre.... (sauf lorsque !important)

Un exemple: exemples/moncss1.html

1. Styles du navigateur

Rappel des styles originaux des premiers navigateurs web...

A noter:

Les styles par défauts peuvent changer d'un navigateur à l'autre, et selon les préférences de l'utilisateur...

Si on veut remettre tout à zéro... » css reset

2. Fichier externe CSS

Insérer dans la section <head>...</head>) une balise <link>.

<link rel="stylesheet" href="moncss.css"/>
pour intégrer les style du fichier moncss.css.

3. Élément <style>

Utile pour définir des styles directement dans le HTML.


<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
...
    
À noter: Cette balise va dans la section <head>...</head>

4. Attribut style=""

Permet d'ajuster les détails de présentation, au niveau d'un élément particulier. Prioritaire, mais déconseillé. Utiliser en dernier recours!

style="propriété:valeur;propriété:valeur;..."

Par exemple:


    <h1 style="color:red;>Introduction</h1>
    

Comment associer un style à un élément?

Ce utilise des sélecteurs. Les plus simples:

Avant de voir les sélecteurs en détail...
Comment assigner une classe ou un identificateur à un élément?

Attribut class="..."

Définit une categorie d'élément, qu'on peut attribuer à plusieurs éléments différents.


    <h1 class="enorme">Introduction</h1>
    

Attribut id="..."

Définit un identificateur d'élément, attribuable à un seul élément.


    <h1 id="monintro">Introduction</h1>
    

Syntaxe des styles

(un commentaire est de la forme /* ... */ )

Sélecteurs

Voici les trois plus simples: un élément, une classe, un identificateur...

<style>
  h1        { font-style: italic; }
  .enorme   { color:red; font-size:72px }
  #monintro { background-color:lightblue; }
</style>
    

Sélecteurs

Sélecteur Exemple Description
.class .intro Tous les éléments avec l'attribut class="intro"
#id #blub L'élément (unique) avec l'identification id="blub"
element p Tous le éléments <p>
...et qu'on peu combiner...
.class1.class2 .nom1.nom2 Tous le éléments avec les classes nom1 et nom2 présentes dans l'attribut class
.class1 .class2 .nom1 .nom2 Tous les éléments avec la classe nom2 qui sont déscendant d'un élément avec la classe nom1
element.class p.intro Tous les éléments <p> avec une classe class="intro"
element,element div, p Tous les éléments <div> et tous les éléments <p>
element element div p Tous les éléments <p> à l'intérieur d'un élément <div>
element>element div > p Tous les éléments <p> qui ont un <div> comme parent immédiat

Sélecteurs

Les pseudo-classes (:) sélectionnent en fonction d'un état...
:active a:active Le lien, lorsqu'il est actif (on clic dessus)
:first-child p:first-child Chaque élément <p> qui est le premier enfant de son parent
:last-child p:last-child Chaque élément <p> qui est le dernier enfant de son parent
:hover a:hover L'élément sous la souris
:link a:link Les liens qui n'ont pas été visités
:visited a:visited Les liens qui ont déjà été visités
:not(selector) :not(p) Tous les éléments qui ne sont pas <p>

Sélecteurs

Les pseudo-éléments (::) sélectionnent des parties d'éléments...
::after p::after Juste avant le contenu de chaque élément <p>
::before p::before Juste après le contenu de chaque élément <p>
::first-letter p::first-letter La première lettre de chaque élément <p>
::selection ::selection Selects the portion of an element that is selected by a user

Les propriétés

Les propriétés ont différentes utilités...

La taille d'une boîte


Propriétés: width, height, padding, border, margin
et aussi... min-width, max-width, box-sizing...

box-sizing: content-box


div {
  box-sizing: content-box;
  width:  400px;
  height: 100px;
  border: 10px solid red;
  padding: 20px;
  margin: 25px;
  background-color: lightblue;
}
    

box-sizing: border-box


div {
  box-sizing: border-box;
  width:  400px;
  height: 100px;
  border: 10px solid red;
  padding: 20px;
  margin: 25px;
  background-color: lightblue;
}
        

Position


Propriétés: display, float, position, z-index Il y a les layout systems... grid, flex, etc...

Couleur

Trois façon de nommer les couleurs... Tomate! Tomate! Tomate! Tomate!

<span style="color:tomato;">Tomate!</span>
<span style="color:rgb(255, 99, 71);">Tomate!</span>
<span style="color:#ff6347;">Tomate!</span>
<span style="color:hsl(9, 100%, 64%);">Tomate!</span>
    

Couleur

Et la transparence? Tomate! Tomate! Tomate! Tomate! Tomate!

<span style="color:tomato;">Tomate!</span>
<span style="opacity:0.8;color:tomato;">Tomate!</span>
<span style="color:rgba(255, 99, 71,0.6);">Tomate!</span>
<span style="color:#ff634766;">Tomate!</span>
<span style="color:hsla(9, 100%, 64%,0.2);">Tomate!</span>
    

Bonne pratique...

Ne JAMAIS répéter!!!
La couleur doit être définie à un seul endroit! Pourquoi?

    a  { color:tomato; }
         ...
    .intro h1 { color:tomato; }
         ...
    p.majeur { color:tomato; }
         ...
    

» (couplage) » Parce que c'est sûr qu'on va vouloir changer la couleur...

Solution 1 : Une seule définition

Dans le CSS:

    a, .intro h1, p.majeur  { color:tomato; }
    

Brise la cohésion!!!...

On peut faire mieux...

Solution 2 : Une classe!

Dans le code HTML:

    <a class="tomate">   .....   <p class="tomate">  .....
    
et dans le CSS:

    .tomate { color:tomato; }
    

Solution 3 : Une variable!

On ajoute une variable au début du CSS:

:root { --tomate: #ff6347; }

a  { color:var(--tomate); }
         ...
.intro h1 { color:var(--tomate); }
         ...
p.majeur { color:var(--tomate); }
         ...
On peut changer la couleur tomate très facilement!
Suggestion: choisissez un nom plus représentatif que --tomate

Texte

Des heures de plaisir: text et font.

Le texte doit être du texte, pas une image!!!

Grossir le texte (200%) ne doit par détruire la page!

Les icônes sont aussi disponibles sous la forme d'une police... (font awesome)

Autres

Et les unités?

Tout n'est pas toujours mesuré en pixel...
Absolu
pxpixels (96 pixels par pouce)***
cmcentimètre
inpouce
ptpoint (72 points par pouce)
*** attention, le pixel est relatif à la résolution de l'écran!
Relatif
emRelatif à la taille de la police (font-size)
%% de l'élément parent
vw, vh1% de la taille de l´écran

Mise en page

En html, on empile des blocs, et dans les blocs, il y a des lignes de texte.

Dans les deux cas, ils ne servent qu'à une chose: attacher des styles.

<div> et <span>

À part <div>, les éléments suivant forment des blocs:
<h1> - <h6>, <p>, <ul>, <ol>, <li>, <header>, <footer>, <section>, ...

À part <span>, les éléments suivants sont inline:
<strong>, <em>, <a>, <img>, <sub>, <sup>, ...

Voir ici pour les détails...

Mise en page

Comment placer tous ces blocs et éléments inline dans la page?
<display> détermine comment on affiche un élément.

display: noneL"élément est invisible
display: blockL'élément est un bloc
display: inlineL'élément est en-ligne
Oui, on peut transformer un bloc en inline, et vise-versa,
et aussi faire beaucoup plus....

Différence entre bloc et en-line

Les deux permettent des marges et des l'espacement (margin, padding).

Mise en page

display détermine le comportement des éléments à l'affichage:
display: inline-blockL'élément est en-ligne, mais avec une largeur et hauteur (vieux!!)
display: tableL'élément est affiché comme une table (!!!)
display: list-itemL'élément est affiché comme un li (!!!)
display: gridL'élément est un conteneur grid
display: inline-gridL'élément est un en-ligne grid
display: flexL'élément est un conteneur flex
display: inline-flexL'élément est un en-ligne flex
Oui, grid et flex sont là pour la mise en page sérieuse...

Le flot d'un document

Un document complet est consitué d'un flot d'éléments:

Positionnement

Chaque bloc existe à l'intérieur d'un autre bloc, le conteneur, qui est une référence pour sa position.

Les propriété importantes:

positionType de positionnement du bloc
topPosition par rapport au haut du conteneur
leftPosition par rapport à la gauche du conteneur

Requêtes média

@media not|only mediatype and (expressions) { ... }

Par exemple:
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
    
Fondement du Design web réactif (Responsive Web Design).

Par où commencer?

Procéder par étape... lentement mais sûrement...

Bon CSS!