IHM sur le web

Les bases du CSS (Cascading Style Sheet)

Mise en place

Les CSS ont vu le jour en 1996. Elles ont été constamment remaniées, aujourd'hui on est invité à utiliser les CSS3.

Il existe trois méthodes pour appliquer des CSS à une page web :

Dans le corps du code HTML :
```
<div style="color:blue;">…</div>
```
Dans l'entête de la page ou n'importe où dans la page:
```
<head>
  <style>
    div{
       color:blue;
       }
  </style>
</head>
```
Ce style sera appliqué à toutes les div contenues dans le document.
En utilisant un fichier dédié relié à la page, il s'agit de la méthode la plus répandue :
```
<link rel="stylesheet" href="css/style.css">
```

Le fichier CSS

Le fichier CSS se compose d'un ensemble de règles qui seront appliquées aux balises du fichier HTML :

Dans le fichier nous avons une succession de règles :
```
div{
   color:blue;
   }
p  {	
   color:blue;
   }
```
Dans le fichier HTML, on précise où est placé le fichier CSS :
```
<head>
  <link rel="stylesheet" href="css/style.css">
</head>
```

Méthodes d'utilisation des CSS

Règle :

selecteur {propriété1 : valeur;
           propriété2 : valeur;
           ...
          }

Les classes class et les identifiants id permettent d’identifier les balises sur lesquelles on souhaite agir.
Les classes ont des identificateurs qui peuvent être utilisés sur plusieurs balises d’une même page alors que les id (identifiant) définissent une balise unique au sein d’une page (elles sont principalement utilisées pour le traitement d’une page par le langage JavaScript).
L’id est prioritaire sur la classe quelque soit l’ordre.

Les `class`

Dans le fichier HTML on crée la classe :
```
<balise class="mon-style">…</balise>
```

Dans le fichier CSS, on définit une classe en mettant un « . » devant le sélecteur. Ex :

.mon-style {propriété1 : valeur;
            propriété2 : valeur;
            ...
           }

En cas de classes multiples, on les sépare par des espaces. En cas de redéfinition de style, c’est celui qui est le plus proche de la donnée qui sera appliqué.

Les `id`

Dans le fichier HTML on crée l'identifiant :
```
<balise id="mon-style">…</balise>
```
Dans le fichier CSS, on définit une classe en mettant un « # » devant le sélecteur. Ex :
```
#mon-style {propriété1 : valeur;
            propriété2 : valeur;
            ...
           }
```
Les sélecteurs avancés

balise1 balise2: sélecteur universel, permet de sélectionner toutes les balises balise1 "espace" balise2 : Une balise contenue dans une autre.
Exemple :
```
p a {propriété1 : valeur;
     propriété2 : valeur;
     ...
    }

/* toutes balises de lien contenues dans un paragraphe */
```
balise1,balise2 : sélectionne toutes les balises.
Exemple :
```
article,section {propriété1 : valeur;
                 propriété2 : valeur;
                 ...
                }

/* toutes balises article et section */
```
balise1 + balise2 : un enchainement de balises, sélectionne la balise2 situé juste après la balise1.
Exemple :
```
article+section {propriété1 : valeur;
                 propriété2 : valeur;
                 ...
                }

/* toutes balises section situées juste après une balise article */
```
Pour plus d'infos

Interactions avec la souris

balise:hover : se produit lors du passage de la souris sur la balise.
Exemple :
```
a:hover {propriété1 : valeur;
         propriété2 : valeur;
         ...
        }

/* changement de style lors du passage de la souris sur les liens */
```
balise:active : se produit au clic de la souris sur la balise.
Exemple :
```
a:active {propriété1 : valeur;
          propriété2 : valeur;
          ...
         }

/* changement de style lors du clic sur le lien */
```
balise:focus : se produit lorsque la balise a le focus.
Exemple :
```
input:focus {propriété1 : valeur;
             propriété2 : valeur;
             ...
            }

/* changement de style lorsque le curseur est sur la balse input */
```
balise:visited : se produit lorsque l’élément à déjà été visité. Principalement utilisé avec la balise <a>.
Exemple :
```
a:visited {propriété1 : valeur;
           propriété2 : valeur;
           ...
          }

/* changement de style lorsque le lien a déjà été visité */
```
Les transitions

Exemple :
```
Balise{
      transition-property: color, width, height;
      transition-duration: 3s;
      }
 
```
Par défaut, agissent sur toutes les propriétés, on peut donc préciser les propriétés sur lesquelles doivent agir les transitions (dans l’exemple : la couleur, la largeur, la hauteur). Le deuxième paramètre indique le temps que durera la transition (dans l’exemple 3s), il peut être précisé en seconde (s) ou en milliseconde (ms).
```
Balise{
      transition-property: color, width, height;
      transition-duration: 3s;
      transition-delay : 1s ;
      }
 
```
On définit avec le dernier paramètre le temps avant le démarrage de la transition en seconde (s) ou en milliseconde (ms)
Il est possible de jouer sur la nature de la transition :
```
Balise{
      transition-property: color, width, height;
      transition-duration: 3s;
      transition-delay : 1s ;
      transition-timing-function : nom ;
      }
 
```
Les fonctions possibles sont les suivantes :
- linear : la vitesse de transition linéaire ;
- ease : la transition suie une gaussienne lente, rapide, lente ;
- ease-in : la transition suie une accélération ;
- ease-out : la transition suie une décélération ;
- ease-in-out : identique à ease, mais l’effet est plus prononcé ;
- cubic-bezier(x,x,x,x) : la transition utilise la courbe de Bézier pour définir l'accélération de la transition. On remplace les x par des valeurs comprises entre 0 et 1.
Un exemple :
```
div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
```
Les médias queries

Les médias queries permettent d’appliquer une feuille de style en fonction du support matériel qui l’affiche. On parle souvent de site web responsive design dans ce contexte.

Pour plus d'infos

Les FlexBox

Les FlexBox permettent d’organiser les blocs de contenu au sein d’une page.

Les anciennes méthodes utilisaient :
- Les tableaux ;
- La propriété float ;
- La propriété inline-block.
Les deux dernières citées sont encore couramment utilisées pour la structuration visuelle d’une page Web.

Faire le TP sur les flexbox

Les bases du CSS (Cascading Style Sheet)

Mise en place

Le fichier CSS

Méthodes d'utilisation des CSS

Les class

Les id

Les sélecteurs avancés

Interactions avec la souris

Les transitions

Les médias queries

Les FlexBox

Les `class`

Les `id`