Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES PROPRIETES CSS DE TYPE FONT

Les propriétés de type font

Les propriétés CSS de type font- vont nous permettre de modifier l’apparence de notre police d’écriture, et donc de nos textes.

Nous allons par exemple pouvoir transformer la taille, le poids ou le style de notre police d’écriture.

Dans cette partie, nous allons voir les propriétés de type font- les plus utilisées :

  • font-size pour modifier la taille de nos textes ;
  • font-style pour modifier le style de nos textes ;
  • font-weight pour modifier le poids de nos textes.

La propriété CSS font-size

La propriété CSS font-size va nous permettre de modifier la taille de notre police d’écriture.

Cette propriété va accepter deux grands types de valeurs : des tailles de polices absolues ou fixes et des tailles relatives ou variables.

Les valeurs de type absolu vont souvent être exprimées en px (pixels) ou éventuellement en pt (points).

Une taille absolue est fixée : elle ne bougera jamais.

Les valeurs de type relatif vont être exprimées soit en % (pourcentage), en em ou en ex.

L’intérêt des valeurs relatives est qu’elles vont s’adapter relativement à certains paramètres : soit par rapport aux préférences enregistrées dans le navigateur par un visiteur, soit par rapport à la taille d’un élément parent.

Ainsi, même les personnes possédant une vision faible pourront à priori lire vos textes sans problème.

Les tailles relatives vont cependant être moins faciles à gérer dans la mise en forme globale d’une page (car si on ne prend pas de précautions, un texte peut dépasser d’une partie de la page par exemple).

La propriété font-size peut également prendre la valeur « inherit », ce qui veut dire que l’élément ciblé héritera de la valeur de son parent. Cette valeur fonctionne avec beaucoup de propriétés CSS et peut être utile pour annuler un comportement par défaut ou en cas de conflit de styles. Nous y reviendrons plus tard.

Voici quelques exemples utilisant font-size et ses différents types de valeurs :

Exemple d’utilisation de font-size

Font-size peut prendre des valeurs absolues ou relatives

Nos élément possèdent bien des tailles différentes

Essayer ce code

Faites bien attention : lorsque l’on code, nous utilisons les notations anglo-saxonnes. Pensez donc bien à utiliser un point pour les chiffres décimaux à la place de notre virgule.

La propriété CSS font-style

La propriété CSS font-style va nous permettre de forcer le style de notre police.

Nous allons par exemple pouvoir mettre nos textes en italique.

La propriété font-style accepte quatre valeurs différentes :

  • normal (par défaut) ;
  • italic (italique) ;
  • oblique (penché) ;
  • inherit (l’élément ciblé hérite du style de son élément parent).

Exemple d’utilisation de font-style

Font-style peut incliner un texte

Nos paragraphes s’affichent en italique

Essayer ce code

Les valeurs italic et oblique produisent souvent un résultat très similaire. Sachez pour votre propre culture que toutes les polices ne supportent pas l’état italique (certaines n’ont pas été conçues pour pouvoir être mises en italique). Dans ces cas là, la valeur oblique va forcer l’inclinaison de la police en question.

La propriété CSS font-weight

La propriété CSS font-weight va nous permettre de définir le poids d’une police, c’est-à-dire son épaisseur.

Cette propriété peut prendre différentes valeurs :

  • normal (valeur par défaut) ;
  • lighter (la police sera plus fine) ;
  • bold (la police sera plus épaisse) ;
  • bolder (la police sera très épaisse) ;
  • une centaine entre 100 (police très fine) et 900 (police très épaisse). 400 correspond à la valeur « normal » et 700 à « bold » ;
  • inherit (l’élément hérite du style de son parent) ;
  • initial (définit la propriété sur sa valeur d’origine).

Exemple d’utilisation de font-weight

Font-weight permet de modifier le poids d’une police

Nos paragraphes s’affichent en gras ou en fin

Essayer ce code

Une nouvelle fois, faites bien attention : certaines polices ne supportent pas certains poids et donc ne supportent pas certaines valeurs.

Chapitre précédent

Chapitre suivant