Cours 9 | CSS¶

Dégradé de couleur¶

Il est possible de générer un dégradé de couleur à titre d’image d’arrière-plan en utilisant les fonctions CSS linear-gradient() et radial-gradient().

Les valeurs possibles sont les couleurs Web.

Dégradé linéaire¶

div{
  background: linear-gradient(#FF0000, #000000);
  /* ou */
  background: linear-gradient(to bottom, red, black);
}

Orientations possibles : to bottom (par défaut), to top, to right, to left, degré (ex. : 45deg).

Multicolore

On peut ajouter autant de couleurs que désiré.

div{
  background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
}

See the Pen &lt;a href="https://codepen.io/tim-momo/pen/KwVoKyo"&gt; Web1 - gradient&lt;/a&gt; by TIM Montmorency (&lt;a href="https://codepen.io/tim-momo"&gt;@tim-momo&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

Dégradé circulaire¶

div{
  background: radial-gradient(red, black);
  /* ou */
  background: radial-gradient(ellipse, red, black);
}

Formes : ellipse (par défaut), circle

Outil
Gestionnaire de dégradé CSS

Typographie¶

`letter-spacing`¶

p {
  letter-spacing: 10px;
}

`word-spacing`¶

p {
  word-spacing: 10px;
}

font-family¶

body {
  font-family: Arial;
}

Polices Web‑safe: polices par défaut du Web. Tous les navigateurs peuvent afficher ces fontes: Arial, Times, Tahoma, Verdana, Trebuchet MS, monospace, serif, sans‑serif.

Il est également possible d'ajouter d'autres fontes. Pour cela, soit la police est déjà installée sur l'ordinateur de l'utilisateur, soit on lui fait télécharger une police au chargement de la page.

Google Fonts¶

La méthode simple d'installer une fonte externe est d'y aller avec Google Fonts.

Installer une police Google

🧑‍🏫 Démo du prof, prenez des notes ;)

Substitution¶

On peut aussi ajouter des fontes de substitution (aussi appelées "fallbacks") si la fonte choisie n'est pas disponible chez l'utilisateur.

body {
  font-family: Helvetica, Arial, sans-serif;
}

font-size¶

h1 {
  font-size: 32px;
}

Par défaut, si aucune taille n'est spécifiée, les navigateurs attribuent la taille de 16px aux textes.

font-weight¶

a {
  font-weight: bold;
}

Quelques valeurs possibles :

100, 200, 300, 400, 500, 600, 700, 800 et 900
bold, normal

Toutes les polices ne sont pas égales

Les différentes épaisseurs de police (font-weight) sont configurables si la police elle même a des variantes d'épaisseurs.

Interlignage¶

Espacement entre les lignes.

p {
  line-height: 1.5;
}

Peut être une valeur fixe (11px) ou ratio (ex.: 2)

color¶

p {
  color: #ff0000;
}

Les valeurs possibles sont les couleurs Web.

font-style¶

p {
  font-style: italic;
}

Valeur possible :

normal (par défaut)
italic

Alignement¶

p {
  text-align: center;
}

Les valeurs possibles sont : left, right et center.

Il y a aussi justify, mais cette mise en forme est généralement déconseillée en Web.

transformation¶

h1 {
  text-transform: uppercase;
}

Quelques valeurs possibles sont : none, uppercase, lowercase et capitalize.

décoration¶

a {
  text-decoration: underline;
}

Quelques valeurs possibles : none, underline et line-through

Ce style est appliqué par défaut sur les liens pour spécifier qu'il en est un.

text-stroke¶

La propriété -webkit-text-stroke, bien que non standard (d'où son préfixe -webkit-), est prise en charge par les principaux navigateurs.

h1 {
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red; /* pour le futur */
}

text-shadow¶

p {
  text-shadow: 2px 2px red;
  /* ou */
  text-shadow: 3px 3px 10px red;
}

Multicouches

Il est possible d'ajouter plusieurs ombres à un même texte si désiré en séparant chaque ombre par une virgule.

See the Pen &lt;a href="https://codepen.io/tim-momo/pen/vELRWrL"&gt; Web 1 - CSS text-decoration&lt;/a&gt; by TIM Montmorency (&lt;a href="https://codepen.io/tim-momo"&gt;@tim-momo&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

p {
  text-shadow: 2px 2px red, 4px 4px blue;
}

Couleurs et contrastes¶

Le contraste des couleurs est important pour l'accessibilité et l'efficacité de votre design.

Outil
Valideur de contraste

Accessibilité Web¶

L’accessibilité Web consiste à concevoir des sites utilisables par toutes les personnes, y compris celles ayant des limitations physiques ou cognitives, afin de garantir une expérience équitable et inclusive pour tous les utilisateurs.

Unités CSS¶

En CSS, il existe deux grandes familles d’unités de mesure pour définir les dimensions (largeur, hauteur, marges, etc.) ou la taille du texte :

les unités absolues (fixes)
les unités relatives (variables selon leur contexte)

Unités absolues¶

Une unité absolue représente une taille fixe et indépendante du contexte d’affichage. Elle ne s’adapte ni à la taille de l’écran, ni à la taille du texte par défaut du navigateur.

Ces unités sont surtout utilisées pour l’impression ou des éléments qui doivent garder une taille précise (ex. : un logo dans un document PDF).

Unité	Nom complet	Équivalence approximative
px	pixel	1 px = 1 point de l’écran
cm	centimètre	1 cm = 37.8 px
in	pouce	1 in = 96 px
pt	point	1 pt = 1.33 px

Unités relatives¶

Les unités relatives varient selon un contexte : la taille de la police, la largeur du parent, ou la taille de la fenêtre du navigateur.

Elles permettent de créer des mises en page souples et adaptatives, essentielles pour le design responsive.

Unité	Signification	Référence
em	Taille relative à la police de l’élément courant	Exemple : 2em = 2 × la taille de police actuelle
rem	Taille relative à la police du root (html)	Si on change le font-size de html, tout se modifie. Super pratique.
%	Pourcentage de la taille du parent	Exemple : width: 50% prend la moitié du conteneur
vw	1% de la largeur de la fenêtre (viewport width)	Exemple : 50vw = moitié de la largeur de l’écran
vh	1% de la hauteur de la fenêtre (viewport height)	Exemple : 100vh = hauteur complète de la fenêtre

Outil
Visualisation des unités

États interactifs CSS¶

Les pseudo-classes permettent de styliser un élément selon un état temporaire ou une interaction de l’utilisateur (survol, clic, sélection, etc.).

Elles commencent toujours par le caractère : et s’ajoutent au sélecteur de l’élément.

:hover¶

Quand la souris survole un élément.

a:hover {
  color: orange;
  text-decoration: underline;
}

:active¶

Quand l’utilisateur clique ou maintient le bouton de la souris sur l’élément.

a:active {
  color: violet;
}

:focus¶

Quand un élément reçoit le focus du clavier (ex. : champ de formulaire actif, lien sélectionné via Tab).

input:focus {
  outline: 5px solid deeppink;
}

Autres pseudo-classes utiles¶

Pseudo-classe	Déclencheur	Exemple d’usage
`:visited`	Lien déjà visité	Changer la couleur d’un lien déjà cliqué
`:disabled`	Élément inactif (ex. : bouton désactivé)	Griser un bouton de formulaire
`:checked`	Élément coché (case à cocher ou bouton radio)	Afficher une option active

Width et height¶

Les propriétés width et height permettent de définir la largeur et la hauteur d’un élément.

div {
  width: 75%;
  height: 40px;
}

minimum et maximum¶

Les propriétés min-width et max-width permettent de fixer une largeur minimale et maximale à un élément.

div {
  width: 75%;
  min-width: 250px;
}

L’équivalent existe aussi pour la hauteur : min-height et max-height.

Listes¶

list-style¶

La propriété list-style permet de définir le type de puce ou de numérotation utilisé dans une liste.

ul {
  list-style: square;
}

ol {
  list-style: upper-roman;
}

Type	Description	Exemple
`disc`	Puce pleine (valeur par défaut)	•
`circle`	Cercle vide	○
`square`	Carré plein	■
`decimal`	Chiffres	1, 2, 3
`none`	Supprime les puces

list-style-position¶

La propriété list-style-position contrôle la position des puces par rapport au texte.

ul {
  list-style-position: inside;
}

Les valeurs possibles sont inside et outside.

Astuce

Pour supprimer complètement les puces d’une liste et la styliser manuellement (souvent pour les menus) :

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

See the Pen &lt;a href="https://codepen.io/tim-momo/pen/YPwaREz"&gt; Web 1 - CSS text-shadow&lt;/a&gt; by TIM Montmorency (&lt;a href="https://codepen.io/tim-momo"&gt;@tim-momo&lt;/a&gt;) on &lt;a href="https://codepen.io"&gt;CodePen&lt;/a&gt;.

Métadonnées¶

Les balises <meta> se placent dans la section <head> d’un document HTML.

Elles servent à fournir des informations sur la page : encodage, auteur, description, langue, comportement mobile, etc.

Elles ne s’affichent pas à l’écran, mais sont utilisées par les navigateurs, les moteurs de recherche et les réseaux sociaux.

Encodage (charset)¶

Définit l’encodage des caractères utilisés dans la page. UTF-8 est la norme universelle (elle gère les accents, caractères spéciaux, emojis, etc.).

<meta charset="utf-8">

Affichage mobile (viewport)¶

Balise essentielle pour un site responsive, elle permet d’adapter la mise en page aux écrans des appareils mobiles.

<meta name="viewport" content="width=device-width, initial-scale=1">

Description¶

Ajoute un court texte (environ 155 caractères) utilisé par Google dans les résultats de recherche.

<meta name="description" content="Programme de Techniques d’intégration multimédia du Collège Montmorency.">

Autres balises meta utiles¶

Nom	Rôle
`author`	Auteur ou entreprise du site
`copyright`	Droits d’auteur du contenu
`keywords`	Liste de mots-clés (désuet)
`language`	Langue du contenu (souvent remplacé par l’attribut `lang` dans `<html>`)

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Cours d’introduction au développement Web au Collège Montmorency.">

  <meta name="author" content="Collège Montmorency">
  <meta name="copyright" content="Collège Montmorency">
  <meta name="keywords" content="Animation, Web, Vidéo">
  <meta name="language" content="fr">
  <!-- ... -->
</head>

Exercices¶

Exercice - CSS
Hey, focus !

Exercice - CSS
Kawaii

Devoir¶

Devoir - Formatif
La connexion