CSS¶

Cascading Style Sheets

Cascading Style Sheets

Qu'est-ce que c'est ?¶

  • Un système de règles pour
  • Décrire comment les éléments HTML doivent être affichés à l'écran, à l'impression ou tout autre média
  • Ces règles sont stockées dans des fichiers textes au format .css

Cascading Style Sheets > Qu'est-ce que c'est ?

Cascading (en cascade)¶

  • plusieurs règles appliquées en cascade sur des éléments
  • plusieurs fichiers possibles pour organiser les règles (mise en forme général commune à toutes les pages, mise en forme spécifique pour les petits écrans, mise en forme du menu déroulant etc.)
  • facilite l'harmonisation du rendu d'un site : plusieurs pages HTML peuvent partager certaines feuilles de style
  • facilite la maintenance et la mise à jour : pour changer de style il suffit de changer les fichiers css, on ne redéveloppe pas tout le site

Cascading Style Sheets

Comment se fait le lien ?¶

Supposons que index.html veut utiliser style.css qui se trouve dans le dossier css :

...
<head>
    <link rel="stylesheet" href="css/style.css">
    ...
</head>

Cascading Style Sheets

Un exemple de règle¶

p {
    color: blue;
    font-size: 12px;
}

Cascading Style Sheets > Un exemple de règle

h3 {
  font-style: italic; 
  color: blue; 
}

Cascading Style Sheets

Syntaxe¶

  • la règle commence par un sélecteur qui permet de dire sur quel(s) élément(s) va porter la règle ;
  • puis on ouvre une accolade pour commencer le corps de la règle qui va contenir :
  • un ensemble de propriété / valeur appelée déclaration
  • chaque déclaration est sur une ligne qui se termine par un ";"
  • la propriété et la valeur associée sont séparés par un ":"

Cascading Style Sheets

Sélecteurs, première partie¶

  • sélecteurs simples basés sur le nom d'un élément, sur les attributs id ou class

Dans une deuxième partie (plus tard) nous verrons :

  • les sélecteurs combinés
  • les sélecteurs de type pseudo-classes
  • les sélecteurs de type pseudo-éléments
  • les sélecteurs basés sur les attributs

Cascading Style Sheets > Sélecteurs, première partie

p {
    text-align: justify;
}

p.small {
    font-size: 0.8rem;
}

h2.small {
    border: 1px solid red;
}

.small {
    color: green;
}

#menu {
    display: none;
}

Cascading Style Sheets

Catégories de déclarations¶

  • Texte et police de caractères
  • Couleurs et bordures
  • Espacements
  • Listes
  • Tables
  • Affichage et Positionnement

Cascading Style Sheets

Valeurs par défaut et héritage¶

  • Une propriété possède en général une valeur par défaut (qui dépend du navigateur)
  • Une valeur peut se transmettre d'un élément à un élément descendant (héritage)

Cascading Style Sheets > Texte et police de caractères

nom de la propriété rôle valeur possible
font-family choix de la police de caractères le nom d'une ou plusieurs polices
font-size taille de la police de caractères une dimension avec son unité
font-weight poids de la police de caractères un nom comme bold ou un entier: 100, 200 ... jusquà 900
font-style style de la police de caractères normal, italique etc.
text-align alignement horizontal du texte le nom d'un alignement
text-decoration décoration genre souligné, barré etc. le nom d'une décoration

Cascading Style Sheets > Texte et police de caractères

font-family¶

La police de cartactères est une propriété importante de votre site web : c'est un peu son identité. Elle doit être lisible. Elle sont classées par grandes familles génériques :

  1. Serif : les polices dont certaines lettres possèdent un empattement (petite extension aux extrémités) ; plutôt utilisées pour l'impression papier
  2. Sans-serif : lettres droites, sans empattement. Se visualise mieux à l'écran.
  3. Monospace : toutes les lettres ont la même largeur. Utile pour écrire du code.
  4. Cursive : imitation d'une écriture humaine, à la main
  5. Fantasy : décorative

Cascading Style Sheets > Texte et police de caractères > font-family

Différence entre serif et sans-serif¶

serif vs sans-serif

Cascading Style Sheets > Texte et police de caractères > font-family

Famille de police générique Exemple de noms de police
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Cascading Style Sheets > Texte et police de caractères > font-family

Plusieurs valeurs pour assurer le coup¶

  • Les polices de caractères ne sont pas toutes disponibles ; cela dépend surtout du système
  • Mettre plusieurs polices (de la même famille) séparées par des virgules pour donner le choix au navigateur
  • Toujours terminer par le nom de la famille générique à laquelle appartiennent les polices.
body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

La première police n'est en général pas disponible sur les systèmes windows, la seconde sera alors choisie. Et si jamais Helvetica n'est pas disponible non plus, le navigateur choisira la police sans-serif par défaut.

Cascading Style Sheets > Texte et police de caractères

font-size¶

La taille de la police de caractères, peut être absolue (déconseillé) ou relative (bonne pratique). La valeur peut être un nombre et une unité ou alors un nom :

p {
    font-size: 12px; /* absolue */
}

h1 {
    font-size: 2em; /* relative */
}

h2 {
    font-size: x-small; /* absolue */
}

h3 {
    font-size: larger; /* relative */
}

Cascading Style Sheets > Texte et police de caractères > font-size

Attention aux valeurs relatives et imbrications d'éléments :

<article>
    <p>Bla bla bla</p>
</article>

article {
    font-size: 0.8em; 
}

p {
    font-size: 0.8em; 
}

Au final la police du paragraphe fait 0.8 x 0.8 = 0.64 x taille par défaut. Utiliser rem pour éviter cela.

Cascading Style Sheets > Texte et police de caractères > font-size

rem une unité relative à privilégier¶

Relative à la taille de la police de l'élément html. En général, cette taille est calée sur celle par défaut du navigateur. Pour assurer la compatibilité avec d'anciennes versions de IE on pourra préciser :

html {
    font-size: 100%; /* 100% = la taille par défaut choisie par l'utilisateur */
}

p {
    font-size: 1.2rem;
}

Cascading Style Sheets > Texte et police de caractères

font-weight¶

Le poids d'une police de caractères correspond à son épaisseur à l'écran. Les valeurs sont au choix :

  • lighter, normal, bold, bolder
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 : du plus fin au plus épais
  • normal = 400, bold = 700
  • Attention tous les poids ne sont pas forcément disponibles

Cascading Style Sheets > Texte et police de caractères

font-style¶

Le style d'une police de caractères correspond à son caractère plus ou moins penché les valeurs usuelles sont :

  • normal
  • italic
  • oblique
  • Attention tous les styles ne sont pas forcément disponibles

Cascading Style Sheets > Texte et police de caractères

text-decoration¶

Les valeurs usuelles sont :

  • none : aucune
  • underline : souligné
  • line-through : barré
  • overline : surligné

Cascading Style Sheets > Couleurs et bordures

Les couleurs¶

Les couleurs sont codés suivant 3 composantes : rouge, vert et bleu. Pour avoir une couleur il suffit donc de donner une valeur entière entre 0 et 255 à chacune des 3 composantes.

code couleur en hexadécimal¶

  • rappel : 0, 1, 2 ... 9, A, B, C, D, E, F les chiffres en héxa
  • en décimal, la valeur de ses chiffres sont : 0, 1, .. 9, 10, 11, 12, 13, 14, 15
  • le code est alors : #RRGGBB où RR, GG et BB sont 3 nombres en héxadécimal entre (00 et FF)
  • 00 c'est 0 en décimal et FF c'est : $15 \times 16^1 + 15 \times 16^0$ = 255

Cascading Style Sheets > Couleurs et bordures > Les couleurs

fonctions rgb et rgba¶

  • rgb(rr, gg, bb) où rr, gg et bb sont 3 valeurs décimales entre 0 et 255
  • rgba(rr, gg, bb, alpha) où rr, gg et bb sont 3 valeurs décimales entre 0 et 255 et alpha est une valeur flottante entre 0 et 1 (1 = opaque, 0 = transparent)

Cascading Style Sheets > Couleurs et bordures > Les couleurs

Exemples¶

  • #55AF88
  • #333 le raccourci pour #333333
  • #FFFFFF : est-ce du blanc ou du noir ?
  • rgb(80, 80, 80)
  • rgba(120, 77, 220, 0.7)

Cascading Style Sheets > Couleurs et bordures > Les couleurs

Outils¶

Harmoniser les couleurs de son site est fondamental : équilibre = confort, identité

  • sous mac osx : l'application colorimètre (installée par défaut) offre une pipette pour récupérer la couleur de n'importe quelle zone de l'écran
  • sous windows : l'application paint offre aussi une pipette mais utilisable uniquement dans l'application
  • en ligne : les utilitaires de couleurs sont nombreux...
    • https://htmlcolorcodes.com/fr/selecteur-de-couleur/
    • https://color.adobe.com/fr/create/color-wheel

Cascading Style Sheets > Couleurs et bordures

Les bordures¶

La propriété border permet de rajouter un cadre autour d'un élément. Il s'agit d'une propriété raccourcie qui est en fait la combinaison de 3 propriétés :

  • border-style : pour le style du trait (solid, dotted, dashed... )
  • border-size : pour l'épaisseur du trait
  • border-color : pour la couleur du trait

border regroupe les 3 valeurs, séparées par des espaces :

.important {
    border: 1px dotted red;
}

Cascading Style Sheets

Dimensions et espacements¶

On peut régler la dimension d'un élément de type block :

  • width : la largeur
  • height : la hauteur

Ainsi que l'espacement dans et autour d'un élément de type block et inline :

  • à l'extérieur du container : margin
  • à l'intérieur du container : padding

Cascading Style Sheets > Dimensions et espacements

width et height¶

  • width : valeur absolue ou relative... la taille relative l'est par rapport à celle du container parent
  • height : idem, mais avec une difficulté supplémentaire : la hauteur, contrairement à la largeur n'est pas égale par défaut à 100% mais à la hauteur du contenu.

On peut ajouter les préfixes min- et max- (voir les exemples)

Cascading Style Sheets > Dimensions et espacements

margin et padding¶

Propriété raccourcie pour 4 propriétés : margin-top, margin-right, margin-bottom et margin-left. Les valeurs sont séparées par des espaces, 3 possibilités (4, 2 ou 3 valeurs) :

  • margin : top right bottom left
  • margin : top-bottom right-left
  • margin : top right-left bottom

Les mêmes règles existent avec padding à la place de margin. La valeur auto permet de laisser le navigateur gérer la valeur au mieux.

Cascading Style Sheets > Dimensions et espacements

margin et width¶

Ces deux propriétés combinées permettent de centrer aisément un container dans un autre. Exemple avec main dont le container est body le plus souvent :

main {
    width: 70%;
    margin: auto;
}

Cascading Style Sheets

Les listes¶

Les propriétés ci-dessous permettent de changer le style des listes. Pour passer à des listes horizontales, voire la section Affichage et positionnement.

  • list-style-type : permet de choisir le type de marqueur qu'on souhaite ; il y a de nombreuses possibilités. disc (puce classique) est la valeur par défaut pour une liste non ordonnée on trouve aussi square, circle ; pour les listes ordonnées la valeur par défaut est decimal... on trouve aussi lower-latin, lower-roman, upper-latin etc. La valeur particulière none permet de ne pas mettre de marqueur du tout.
  • list-style-image : pour mettre une image personnalisée comme marqueur (attention à la taille)... list-style-image: url("chemin_vers_fichier");
  • list-style-position : pour le positionnement du marqueur (outside est la valeur par défaut ; l'autre est inside)

La propriété raccourcie est list-style prenant les 3 valeurs séparées par des espaces.

Cascading Style Sheets

Les tables¶

  • Bien que de type block, l'élément table ne prend pas toute la largeur disponible. On doit le spécifier avec width: 100%
  • border permet de mettre une bordure sur le contour du tableau (propriété à mettre sur l'élément table) ou sur chaque ligne ou cellule.
  • Par défaut les cellule d'un tableau sont séparées ; il faut utiliser border-collapse: collapse pour les coller

Cascading Style Sheets

Affichage et positionnement¶

Les éléments sont affichés de haut en bas et de gauche à droite dans ce qu'on appelle le flux. Deux propriétés sont impliquées dans la modification de ce flux :

  • position : pour déclarer le positionnement d'un élément par rapport à son environnement
  • display : pour déclarer l'affichage ou le non affichage d'un élément

Cascading Style Sheets > Affichage et positionnement

position¶

  • position: relative; : laisse l'élément dans le flux normal mais autorise les décalages dans toutes les directions
  • position: absolute; : sort l'élément du flux (les autres éléments ignorent alors celui-là) et le positionne de façon absolue par rapport au premier parent positionné ou à la fenêtre.
  • position: fixed; : l'élément est positionné une fois pour toute par rapport à la fenêtre ; sorti du flux normal

Dans ces manipulations, les éléments peuvent éventuellement se chevaucher.

Cascading Style Sheets > Affichage et positionnement

display¶

  • display: none; : masque complètement l'élément ; comme s'il n'existait pas (pas d'espace vide laissé)
  • display: block; : affiche l'élément comme un élément de type block
  • display: inline-block; : affiche l'élément comme un élément de type inline mais en autorisant le changement de dimensions
  • display: flex; : affiche les éléments avec souplesse, autorisant pas mal de manipulations horizontales et verticales
  • display: grid; : crée une grille très souple à manipuler