Cours HTML CSS

FONTS : Donner du style aux polices !

font-family : nom de la police
En général, on en choisit plusieurs séparés par une virgule pour éviter des problèmes si l’internaute ne possède pas les mêmes polices que vous.
Ex : font-family : "police 01", sans-serif;
Si la typo choisie pour le site ne se charge pas ou n'existe pas sur la machine utilisateur,
elle sera remplacée par une famille de police par défaut,
exemple : "serif" qui sera du Times new roman, sur PC; Times sur Mac.
Cette dernière peu adaptée aux textes de petite taille, gènera la lecture.

Il existe donc des familles de polices génériques de secours : Le fallback et les polices alternatives
serif (avec empatement et proportionnelle) : Times new roman, Baskerville, Georgia et Modern
sans-serif(sans empatement et proportionnelle) : Arial, Abadi, Helvetica, Verdana.
cursive (manuscrite et proportionnelle) : Comic Sans MS.
monospace (non-proportionnelle, machine à écrire) : Courrier New
fantasy (tout le reste) : rendu aléatoire selon navigateur.

Voici une liste de polices qui fonctionnent sur la plupart des navigateurs :
Arial ;
Comic Sans MS ;
Courier New ;
Georgia ;
Impact ;
Times New Roman ;
Trebuchet MS ;
Verdana.

  /* déclaration de la font-fammily */
  font-family : Arial, Verdana, sans-serif;

Si le nom de la police possède des espaces, il est conseillé de l’entourer par des guillemets(quote).

font-family: 'Trebuchet MS', sans-serif

Fonts modernes : Google Font

Une image de texte "exotique" est affichée par tous les navigateurs, mais un vrai texte peut être référencé et sélectionné.
Il existe des services qui fournissent des polices à intégrer directement dans son CSS depuis une URL distante :
Le service charge la police chez l’utilisateur (économie entre 50ko et 300ko !)
Google Font : Service gratuit, constitué de la Google Font API et du Google Font Directory.
L’API de Google Font est très facile à manipuler.
Il suffit soit d’ajouter une feuille de style avec <link> pour charger la police chez l’utilisateur
soit d'importer le fichier de la feuille de style avec @import

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 1.6rem;
      }
    </style>
  </head>
  <body>
    <h1>Super TYPO</h1>
  </body>
</html>

L’utilisation de l’API se résume donc à :
- Charger la police
- L’appliquer à une classe CSS avec font-family
L'URL du CSS de l'API Google Font à inclure est basée sur les règles suivantes :
L'URL commence par : http://fonts.googleapis.com/css?family=
S'y ajoute ensuite les noms des polices à inclure, en utilisant le symbole "+" à la place des espaces, et en séparant chaque police par un "|" :
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Si une police est en italique ou en gras, elle est suivie par le caractère ":".
Italique :"italic" ou "i"
Gras :"bold", "b" ou le poids de la lettre, 700 par exemple
Gras italique : "bolditalic" ou "bi"
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

Cantarell

Droid Serif

span.cantarellFont {
  font-family:Cantarell;
}

span.droidFont {
  font-family:"Droid Serif";
}

Google webfonts

Font icons

1. Charger la feuille de style "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"

2. <span style="font-family: 'Material Symbols Outlined';">face</span> face

Fonts exotiques en CSS3 : @font-face

Voyons le cas simplifié qui fonctionnera correctement sur tous les navigateurs modernes : Firefox, Chrome, Safari et Opera.
1/ Chargement de la police dans le navigateur du client : @font-face
2/ application de la police personnalisée.

@font-face {
  font-family: 'NomDeMaFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face sert à déclarer une police.
L'attribut "font-family" correspond au nom que l'on va assigner à cette police
L'attribut "src" indique tout simplement le chemin vers le fichier de police (.ttf ou .woff).
Une fois la police déclarée, elle est utilisable comme n'importe quelle autre police.

body {
  font-family: 'NomDeMaFont';
}

Approfondir avec css tricks

Il existe un site pour générer des polices spécifiques :
fontsquirrel.com
Il suffit d'uploader une police (attention à bien respecter les droits d'auteur liés aux polices que vous utilisez),
et Font Squirrel se charge de vous fournir un "kit" contenant tous les formats convertis de votre police ainsi que des fichiers HTML et CSS de démo pour que vous n'ayez plus qu'à faire un copier-coller vers votre site !

Font Awesome

Font awesome met à disposition 1500 icônes vectorielles.
Ce qui veut dire qu'elles seront toujours de bonne qualité quelle que soit la taille.
Une feuille de style et les fichiers de polices.

Site Font Awesome

<i class="fas fa-camera-retro fa-4x"></i>
<i class="fas fa-camera-retro fa-4x"></i>
<i class="fass fa-home fa-4x"></i>
<i class="fa fa-spinner fa-spin fa-4x"></i>
<a class="btn btn-primary" href="#navigation-main">
<i class="fas fa-bars fa-4x"></i>
</a>
<div class="input-group margin-bottom-sm">
<i class="fas fa-envelope fa-fw" aria-hidden="true"></i>
<input class="form-control" type="mail" placeholder="Email">
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta numquam inventore rerum ipsam veniam, reiciendis? Nulla sed eaque esse, recusandae commodi dolorum vero, quas fugit maiores quidem optio blanditiis ad?

FONTS : font-size

font-size : taille de la police : px, %, em, rem(« root em »)
1em = 100% de la taille de l’ élément parent
1.2em = 120%
0.8em = 80%
Par défaut : 1em = 16px

Dimensionnement avec em

    body { font-size: 62.5%; } /* (10px*100%)/16px */
    h1 { font-size: 2.4em; } /* =24px */
    p  { font-size: 1.4em; } /* =14px */
    li { font-size: 1.4em; } /* =14px? */

Cette technique modifie la taille du texte de base du body grâce à des pourcentages. L'ensemble est ajusté de telle sorte qu'1em est égal à 10px, au lieu des 16px par défaut.

Le problème avec le dimensionnement par em est que les tailles agissent en cascade : une liste dans une liste ne fait pas 14px, elle fait 20px. Un niveau plus loin, et elle fera 27px !
Ce problème peut être contourné en définissant une taille de 1em pour chacun des éléments enfants, annulant ainsi l'effet de cascade.

    body { font-size: 62.5%; }
    h1 { font-size: 2.4em; } /* =24px */
    p  { font-size: 1.4em; } /* =14px */
    li { font-size: 1.4em; } /* =14px? */
    li li, li p /* etc */ { font-size: 1em; }

La nature combinatoire du dimensionnement par em peut être parfois compliquée.

Dimensionnement avec rem

CSS3 introduit une nouvelle unité, le rem, qui signifie « root em ».
L'unité em est relative à la taille de la fonte du parent, ce qui crée un effet de cascade problématique.
L'unité rem est relative à l'élément racine : la balise html.
Cela signifie que nous pouvons ne définir qu'une seule taille de police sur l'élément html, puis composer toutes les tailles en rem comme pourcentages de cette valeur initiale.

	html { font-size: 62.5%; } 
	body { font-size: 1.4rem; } /* =14px */
	h1   { font-size: 2.4rem; } /* =24px */

FONTS : du texte stylé

La graisse et les italiques :

font-weight : épaisseur de la police (normal, bold, bolder, lighter)
font-style : inclinaison de la police (normal, italic)

Souligné, surligné, barré, clignotant :

text-decoration : (underline, line-through, overline, blink [ne fonctionne pas sur tous les navigateurs], none)

Alignement du texte

text-align : 4 valeurs
left
center
right
justify
Ne s'applique que sur les balises de type block : p, h, div

La casse : minuscules et majuscules

text-transform : 4 valeurs
capitalize : la 1ère lettre de chaque mot sera en majuscule
lowercase : tout le texte en minuscule
uppercase : tout le texte en majuscule
none : le texte ne sera pas modifié

font-variant

Cette propriété permet de transformer du texte écrit en minuscule de passer en majuscule
mais en conservant la taille du texte en minuscule.

font-variant: small-caps;

Styles et effets sur les mots et paragraphes

Interlignage de texte :

line-height : 2rem; /* 20px */

L'interlignage est l'espace séparant deux lignes consécutives d'un paragraphe.
Par défaut et selon les navigateurs elle est d'environ 120% soit 1.2
Possibilité de déclarer en proportion de la taille du texte de l'élémént :
En général 1.5 fois la hauteur du texte ou 2 maxi pour un texte aéré.
Les titres sur plusieurs lignes peuvent avoir un line-height inférieur à 1 selon la typo utilisée.

body {
	font-size:1.6rem
	line-height: 1.5; /* soit 2.3rem / 23px */
}

p {
    line-height: 1;
    background-color: green;
    text-align: center;
}

Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus vel dapibus elit.

Super propriété : font

Elle permet de déclarer plusieurs styles sur une seule ligne.

font-style
font-variant
font-weight
font-size/line-height
font-family

q {
  font: italic small-caps 600 1.6rem/1.5 lobster, serif;
}

Le crénage :
letter-spacing : 0.4rem / -3px
c'est la distance entre deux caractères, une valeur négative ayant pour effet de resserer les caractères.

p {
letter-spacing: 1rem;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus elit.

L'espace entre les mots :
word-spacing : 0.4rem / -3px
c'est la distance entre deux mots, une valeur négative ayant pour effet de resserer les caractères.

p {
word-spacing: 1rem;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus elit.

Orientation du texte :
writing-mode : writing-mode: vertical-rl;
La propriété CSS writing-mode spécifie si les lignes de texte sont disposées horizontalement ou verticalement.

p {
writing-mode: horizontal-tb;
}

Lorem ipsum dolor sit amet

CSS3 | Les Ombres : enfin du volume !

text-shadow
préfixes propres à chaque navigateur
-moz-propriete-css3: valeur;
-webkit-propriete-css3:valeur;
-o-propriete-css3:valeur
propriete-css3:valeur;
text-shadow : 10px 10px 5px red;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel dapibus elit, ut ullamcorper quam. Sed suscipit rhoncus dui, vitae fermentum mauris aliquam vel. Pellentesque lacinia, libero et accumsan blandit, arcu enim tristique justo, et molestie lacus ligula non libero. Maecenas sit amet rhoncus urna, ut pellentesque eros.

EXOS

Exos : Formatage du texte
1/ Créez une page html type (header/nav/sections/articles/paragraphes/footer)
2/ Mettre une liste de polices et une taille de police pour l'ensemble du site
3/ Insérez des balises "strong" dans le texte et faites en sorte que leurs tailles de police soit 2 fois plus grande que pour les paragraphes
4/ Insérez des balises "em" et augmentez le gras de la police pour la balise
5/ Souligner et mettez en majuscules les titres h2

Exercice 2 : Alignement
1/ Centrer le texte du footer
2/ Centrer le texte des titres h1
3/ Justifier les paragraphes

Exercice 3 : Typo
1/ Choisir une font sur google webfont
2/ Intégrez la font (lien google + déclaration de la font dans la feuille de style)
3/ Appliquez la typo aux titres h1
4/ Téléchargez un kit @font-face sur fontsquirrel.com
5/ Intégrez le kit et appliquez la typo aux liens

Exercice 5 : Ombres
1/ Mettre une ombre pour les titres

Exercice 6 : Projet
1/ Reprendre votre projet.
2/ Modifier le fichier css aves les propriétés vues en cours.

Corrections