CSS

CSS : habiller le web (partie 1)

N7 Fullstack

23-24 octobre 2019

Emmanuelle Helly

Développeuse web et formatrice chez Makina Corpus

(entre autres choses)

Note:

entre autres choses → Le PIC, Framasoft, Alternatiba, les communs

Pendant ces deux jours, vous pouvez

  • poser des questions
  • essayer les exemples

Le plan

  • Introduction
  • Bases : propriétés, valeurs, sélecteurs, unités
  • Formater du texte
  • TP → mise en forme
  • Style des blocs et modèle de boîte
  • TP → mise en forme des blocs
  • Positionnement par rapport au flux HTML
  • Mise en page
  • TP → mise en page, menu
  • Responsive
  • Méthodologie
  • Bonus

Les supports et les exos

Fil blanc

Fil blanc


Introduction

Historique

  • 1989 : début des travaux de Tim Berners Lee, chercheur au CERN, et son équipe. Le principe, l’hypertexte
  • 1991 : Tim Berners Lee rend le projet WorldWideWeb public
  • 1993 : création du navigateur Mosaic
  • 1994 : création du W3C par Tim Berners Lee
  • 1996 : implémentation de CSS1.0 par IE
  • 1998 : Premières directives sur l’accessibilité WCAG1 (Web Content Accessibility Guidelines)
  • 1998 : publication des spécifications CSS 2.0
  • 1999 : spécifications HTML4.01, et début des travaux sur CSS3
  • 2000 : publication des spécifications pour XHTML1
  • 2006 : publication des recommandations de XHTML2.0

Scission au sein du W3C : le WHATWG (Web Hypertext Application Technology Working Group) travaille sur un autre standard pour le HTML

  • 2008 : “First Public Working Draft” du HTML5 présentée par le WHATWG
  • 2008 : Avancée sur l’accessibilité, WCAG2.0, Web Content Accessibility Guidelines
  • 2012 : HTML5 passe en “Candidate Recommandation”
  • fin 2014 : HTML5 est un standard du W3C
  • Depuis 2012 : différentes parties de CSS3 passent en “candidate recommandation (CR)”, puis en recommandation officielle (REC)
  • 2018 : version 2.1 des WCAG

Pourquoi les CSS ?

Séparer le fond (contenu) et la forme (habillage)

CSS Zen Garden, par Dave Shea : HTML unique et des thèmes multiples

Les standards du Web et le W3C

  • Le W3C : organisme qui élabore les standards des technologies liées au Web
  • Constitué de membres de plusieurs organisations (Mozilla, Google, Microsoft, Intel…)
  • Organisé en groupes de travail et d’intérêt (HTML, CSS, Accessibilité…)
  • Processus d’élaboration des standards bien défini

En un mot : produit les spécifications qui seront implémentées par les navigateurs et autres outils


Les outils

Outils de développement

  • Éditeur de code : VS Code
  • Navigateur : Firefox ou Chrome / l’inspecteur de code
  • Test et validation
  • Compatibilité navigateurs https://www.caniuse.com/

Documentation

Sites web généraux


Les bases en CSS

La syntaxe

selecteur {
    propriété: valeur[unité];
}

/* Commentaires
sur plusieurs lignes
*/

Exemple

h1 {
    color: green;
    font-size: 48px;
    border-bottom: 1px solid;
}

Ajouter du style

  • fichier lié `

    <link rel="stylesheet" href="fichier" />`
  • entre les balises <style> dans la partie <head>
  • dans la balise directement avec l’attribut style (déconseillé)

Le navigateur applique également des styles par défaut

En pratique

Créez un fichier html index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Plateforme</title>
  </head>

  <body>
    <h1>Titre 1</h1>
    <p>Bienvenue dans ce cours de CSS</p>
  </body>
</html>

Ouvrez-le dans le navigateur, et ouvrez le debugger (ctrl + F12)

Entre les balises <style>

<!doctype html>
<html>
    <head>
        <style>
        h1 { color: red; }
        </style>
    </head>
    <body>
        <h1>Les CSS</h1>
    </body>
</html>

Fichier lié

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <h1>Les CSS</h1>
    </body>
</html>

Fichier styles.css

h1 { color: green; }

Dans la balise directement

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <h1 style="color: blue;">Les CSS</h1>
    </body>
</html>

En pratique

  • Appliquer les trois styles à la fois : de quelle couleur sera le titre ?

  • Visualiser dans l’inspecteur de code

Note:

Si vous inversez la place du <link …> et de <style>, la couleur du titre sera différente.

Hiérarchie des styles

Du plus proche au plus éloigné de la balise


Propriétés et valeurs

Valeurs numériques

{
    width: 300px;
    height: 2em;
    font-size: 200%;
    line-height: 1.2;
}

Chemin ou URL

{
    background-image: url('chemin/vers/image');
    background-image: url('https://exemple.com/lien/vers/image');
}

Mots-clé

Spécifiques à la propriété

{
    border-style: solid;
    position: absolute;
    text-decoration: none; /* annule une propriété */
}

Série de valeurs

{
    border: 1px solid red;
}

Équivaut à

{
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

La couleur

Texte, fond, bordure

{
    color: #446655;
    background-color: #F0F7F3;
    border-color: red;
}

Notation des couleurs

Nom ou code RGB (Red, Green, Blue) en hexadécimal

{
    color: purple;
    color: #800080;
    color: #CCCCCC;
    color: #CCC; /* Forme simplifiée */
}

Code RGB et HSL (Hue, Saturation, Luminosity) en décimal, de 0 à 255

{
    color: rgb(128, 0, 128);
    color: hsl(300, 100%, 25%);
}

Transparence possible → CSS avancées


Les sélecteurs

Les usuels

<h1 class="title" id="main">Les CSS</h1>
<h2 class="title article">Les sélecteurs</h1>
  • Plusieurs classes possibles
  • Un seul id possible, unique dans la page

Sélecteurs de balise

h1 { color: red; }

Sélecteurs de classe

.title { color: blue; }

Cible tous les éléments ayant pour classe title

h1.title { color: blue; }

Cible les élément de type h1 ayant pour classe title

Sélecteurs d’id

#main { color: green; }
  • Ne doit apparaître qu’une fois dans le code HTML
  • À réserver pour identifier un contenu (#header, #main-title)

Hiérarchie des sélecteurs

Sélecteur de classe > Sélecteur de balise > Sélecteur d’id

Combinaisons de sélecteurs

Plusieurs sélecteurs

h1, h2 { color: red; }
p, .para, #chapo { color: grey; }

Sélecteurs en cascade

.header h1 { color: blue; }

Cible h1 situé dans un élément de classe header

Autres sélecteurs

Sélecteur universel

* {  }
.header * {   }

Sélecteurs suivant

h1 + p {
    font-size: 150%;
}

Sélecteurs enfant direct

Sélectionner uniquement les éléments directs

ul > li {
    
}

Pseudo-classe

Exemple, un lien au survol

a:hover {
    text-decoration: overline;
}

S’applique à n’importe quel élément.

D’autres pseudo-classes existent → CSS avancées

Sélecteurs d’attribut

input[attribut="valeur"]

Sélectionner tous les input de type checkbox

input[type="checkbox"]

D’autres sélecteurs par attributs → CSS avancés


Formater du texte

Polices de caractère

Famille de police, taille, style et niveau de gras

{
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: italic; /* normal | italic | oblique */
    font-weight: bold; /* light | normal | medium | bold | 100-900 */
}

Familles de police

  • serif
  • sans-serif
  • monospace
  • cursive et fantasy, peu utilisées

Polices valides pour le web

Famille de police du web valides pour le web :

  • Arial, Verdana pour les sans-serif
  • Georgie et Times New Roman pour les serif
  • Courrier New pour monospace

Préciser la famille de police à appliquer si la police n’est pas disponible

{
    font-family: Arial, Lucida, Verdana, sans-serif;
}

Ajouter nos propres polices → CSS avancées

Casse et décoration du texte

N’écrivez pas en majuscules… tranformez en CSS !

{
    text-transform: uppercase /* capitalize | lowercase | none */;
    text-decoration: underline /* overling | line-through | none */;
}

Alignement et hauteur du texte

{
    text-align: justify /* left | center | right */;
    line-height: 1.25 /* 125% | 1.25em | 20px */;
}

Les unités

Unités les plus courantes

Absolues

  • px : pixels, pour les supports écran
  • pt : points, pour les supports imprimés

Relatives

  • em, relative à la taille de police de l’élément parent
  • rem (root em), relative à la taille de police de l’élément racine (<html>)
  • %, relative à l’élément parent, sa taille de police ou ses dimensions

D’autres unités existent → CSS avancées

Différence entre em et %

  • em, relative à la taille de police de l’élément parent
  • %
    • si s’applique à la taille de police, pourcentage de la taille de police de l’élément parent
    • sinon, pourcentage des dimensions de l’élément parent

Bonne pratique

Définir la taille de référence pour le <body>, puis définir les autres tailles en em ou rem

Les liens

Particularité : accès aux comportements de survol, focus ou visité par des pseudo-classes

a:hover {
    text-decoration: none;
}
a:focus {
    border: 1px solid red;
}
a:visited {
    color: #666;
}

On peut appliquer ces pseudo-classes sur d’autres éléments que les liens


TP → mise en forme du texte

Ajouter les bons styles pour :

  • la police de base
  • les titres
  • les liens

Styles des blocs

Modèle de boîte

Les éléments

Box model

Box model

Modèle standard

Box model

Box model

Largeur totale = width + padding + border left et right

Hauteur totale = height + padding + border top et bottom

{
    box-sizing: border-contet;
}

Modèle alternatif

Box model

Box model

Largeur / hauteur totale = largeur / hauteur définie (padding inclus)

{
    box-sizing: border-box;
}

Comportements

  • block → les uns sous les autres, occupe tout l’espace en largeur
  • inline ou inline-block → dans le flux du texte en ligne

inline-block ? on peut définir des marges et les dimensions, alors que sont sans effet pour inline

Balises génériques

  • <div> → block
  • <span> → inline

Spécifiques aux tableaux

  • table : <table>
  • table-row : <tr> ou <th>
  • table-cell : <td>

Introduits en CSS3

  • flex
  • grid

Redéfinir le comportement

{
    display: block; /* | inline | inline-block … */
}

Exemple

a {
    display: block;
}
p {
    display: inline;
}

Largeur et hauteur

{
    width: 300px;
    height: 150px;
}

En pourcentage, relative à la largeur ou la hauteur de l’élément parent

{
    width: 40%;
    height: 80%;
}

Marges et espacement

{
    margin: 10px;
    padding: 10px;
}

Les marges sont sans effet sur les éléments inline (strong ou a par exemple)

Par côté

{
    margin-bottom: 10px;
    padding-left: 10px;
}

Combiné

{
    margin: <top> <right> <bottom> <left>;
    margin: <haut et bas> <côtés>;
}

Exemple

{
    margin: 20px 5px 10px 5px;
    padding: 20px 0;
}

Bordures

{
    border: 1px solid red;
    border: <width> <style> <couleur>;
}

Un seul côté

{
    border-bottom: 1px solid red;
}

Largeur, style et couleur

{
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

Annuler une bordure

{
    border: none;
    border-right: none;
}

Block arrondi

{
    border-radius: 20px;
}
Block arrondi

Block arrondi

Définir un fond

{
    background-color: #CCC;
    background-image: url('lien/vers/image/');
    background-repeat: repeat; /* no-repeat */
    background-position: top left; /* center | <value px> | <%>*/
    background-size: 200px 100%; /* cover | contains… */
}

En une ligne

Ou presque

{
    background: #CCC url('image') no-repeat top left;
}

Position de l’image de fond

{
    background-position: <haut du block> <gauche du block>;
    background-position-x: <gauche du block>;
    background-position-y: <haut du block>;
}

Taille de l’image de fond

{
    background-size: <largeur> <hauteur>;
}

Mots-clé

  • cover : l’image occupe, “couvre” tout l’espace disponible
  • contains: l’image est entièrement visible, “contenue” dans l’espace disponible

TP → mise en forme

Ajouter les bordures pour :

  • les titres
  • le blockquote

Faire le style de la bannière


Positionnement / flux HTML

Par défaut : static

L’élément reste dans le flux HTML

Absolute

{
    position: absolute;
}
Positionnement absolu

Positionnement absolu

L’élément sort du flux

Définir la position

{
    position: absolute;
    top: 30px;
    left: 50%;
}

Position relatif à l’élément parent le plus proche positionné en relatif, ou au document par défaut

Aucun parent avec un positionnement relatif

Le bloc gris a un positionnement relatif

Relative

{
    position: relative;
    top: 10%;
    left: 50px;
}
  • L’élément reste du flux
  • Position relatif au document ou à l’élément parent le plus proche positionné en relatif

Fixed

{
    position: fixed;
    top: 10%;
    right: 20px;
}
  • L’élément sort du flux
  • Positionnement fixé par rapport à la partie visible du navigateur

Mise en page

Disposition des éléments dans la page

Élément flottant

<img class="illustration-left"
    src="images/illu.png" />
<p>Lorem ipsum…</p>
.illustration-left {
    float: left; /* right | none */
}
Float left

Float left

Réinitialiser les float

Pour que le bloc

h2 {
    clear: both; /* left | right */
}
Clear both

Clear both

Float pour la disposition de la barre latérale

<div id="sidebar">
</div>
<div id="main">
</div>
#sidebar {
    width: 33%;
    float: right;
}
#main {
    width: 76%;
    float: left;
}

Flexbox

Disponible dans CSS3, compatible tous navigateurs à jour

Disposition de la barre latérale

<div class="flex-wrapper">
    <div id="sidebar">
    </div>
    <div id="content">
    </div>
</div>
.flex-wrapper {
    display: flex;
}
#sidebar {
    flex-basis: 33%;
}
#content {
    flex-basis: 76%;
}

En détail : Toutes les directives flex

Plus de CSS Flexbox et CSS Grids → CSS avancées


TP → mise en page

Disposez les section main et aside côté à côte

TP → menu (bonus)

Un menu n’est qu’une liste.

Agencez le menu (utilisation de display, background-color, padding…)

Pour aller plus loin : styler la pagination (même fonctionnement)


Responsive

Media-queries

@media screen and (min-width: 768px) and (orientation: portrait) {
    /* les styles pour cette configuration */
}
  • Orientation (portrait ou landscape) et Localisation
  • Device api (screen, print, tv…)

Importance de définir des points d’arrêt pertinents en fonction des terminaux les plus utilisés.

Organisation et contenu responsive

  • Organisation responsive : disposition varie en fonction de la définition d’écran
  • Contenu responsive : certains contenus peuvent être affichés ou non selon la définition d’écran

Approche mobile first

sidebar {
    padding: 15px;
}
@media (min-width: 700px) {
    sidebar {
        flex-basis: 33%;
    }
}
@media (min-width: 1040px) {
    sidebar {
        flex-basis: 25%;
    }
}

Un peu de méthodologie

Procéder par étape

  1. organiser les éléments tels qu’ils doivent apparaître sur mobile, “Mobile first”
  2. disposer les éléments pour l’affichage page
  3. travailler sur les typographies (titres, paragraphes, listes) et couleurs
  4. logo, header ou bannière
  5. footer
  6. page d’accueil
  7. menu, sidebar
  8. pages intérieures

Bonus

D’autres directives CSS

css3generator.com

Textes et images de test

Textes : Lorem Ipsum

Tout sur le Lorem Ipsum

Images de test

Ressources graphiques libres

Polices de caractères

  • https://www.fontsquirrel.com

Images

  • Wikimedia Commons
  • Flikr → filtre sur les licences droit de modification et réutilisation commerciale

Logiciels de graphisme

  • Gimp : très bon en retouche photo
  • Inkscape : le meilleur logiciel de dessin vectoriel du monde
  • Krita : ouvre bien les fichiers photoshop, permet de meler vectoriel et raster

Des jeux pour chez vous

À faire devant une série “no brain”


Merci