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
- Dépôt sur html-css sur gitlab
- Exos dans le dossier
exos
: un fichier htmlnutricio.html
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
- validator.w3.org respect des standards
- opquast.com pour la qualité du code, l’accessibilité
- Compatibilité navigateurs https://www.caniuse.com/
Documentation
- Spécifications standards HTML & CSS sur le W3C
- Documentation compréhensible developer.mozilla.org
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
etfantasy
, 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 écranpt
: points, pour les supports imprimés
Relatives
em
, relative à la taille de police de l’élément parentrem
(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
Modèle standard
Largeur totale = width + padding + border left et right
Hauteur totale = height + padding + border top et bottom
{
box-sizing: border-contet;
}
Modèle alternatif
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 largeurinline
ouinline-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;
}
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 disponiblecontains
: 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;
}
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 */
}
Réinitialiser les float
Pour que le bloc
h2 {
clear: both; /* left | right */
}
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
oulandscape
) 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
- organiser les éléments tels qu’ils doivent apparaître sur mobile, “Mobile first”
- disposer les éléments pour l’affichage page
- travailler sur les typographies (titres, paragraphes, listes) et couleurs
- logo, header ou bannière
- footer
- page d’accueil
- menu, sidebar
- pages intérieures
Bonus
D’autres directives CSS
Textes et images de test
Textes : Lorem Ipsum
Tout sur le Lorem Ipsum
- Générateur avancé LorIpsum
- d’autres plus drôles
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”
- un jeu sur les sélecteurs flukeout.github.io
- un jeu sur flexbox : flexboxfroggy
- un jeu sur grid : CSS grid garden