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 TEXT

Les propriétés CSS de type « text- »

Les propriétés CSS de type text- vont nous permettre de changer la mise en forme de nos textes et leur apparence.

A la différence des propriétés de type font-, les propriétés de type text- ne sont pas dépendantes de la police utilisée.

Dans cette partie, nous allons étudier les propriétés CSS de type text- suivantes :

  • La propriété text-align (gère l'alignement) ;
  • La propriété text-transform (gère la mise en majuscules / minuscules) ;
  • La propriété text-decoration (gère la décoration) ;
  • La propriété text-indent (gère l'indentation) ;
  • La propriété text-shadow (gère les ombres).

La propriété CSS text-align

La propriété CSS text-align va nous permettre de définir l’alignement de notre texte.

Nous pouvons choisir l’alignement de notre texte parmi cinq valeurs :

  • Left : Le texte sera aligné à gauche (par défaut) ;
  • Right : Le texte sera aligné à droite ;
  • Center : Le texte est centré ;
  • Justify : Le texte est justifié ;
  • Inherit : Hérite de la valeur de l’élément parent.

Notez que le texte est aligné par rapport aux bords de son élément parent par défaut. Nous verrons cela plus en détail lorsque nous aborderons le modèle des boîtes.

Comme d’habitude, nous allons illustrer l’utilisation de cette nouvelle propriété par des exemples.

Présentation de la propriété CSS text-align

Text align nous permet d’aligner notre texte dans notre page

Utilisation de la propriété text-align

Essayer ce code

La propriété CSS text-transform

La propriété CSS text-transform va nous permettre de transformer un texte ou une partie d’un texte en majuscules ou en minuscules.

Cette propriété nous permet de choisir parmi cinq valeurs :

  • Lowercase : Met tout le texte en minuscules ;
  • Uppercase : Met tout le texte en majuscules ;
  • Capitalize : Met la première lettre de chaque mot en majuscule ;
  • Inherit : Hérite de la valeur de l’élément parent ;
  • None : Pas de transformation du texte. Utile pour annuler une transformation par défaut donnée par héritage.

Test propriété CSS text-transform

On peut mettre notre texte en majuscule grâce à text-transform

Utilisation de la propriété CSS text-transform

Essayer ce code

La propriété CSS text-decoration

La propriété CSS text-decoration va nous permettre d’ajouter ou d’enlever des décorations à nos textes.

Cette propriété accepte six valeurs différentes :

  • Underline : Le texte sera souligné ;
  • Overline : Une ligne apparaît au dessus du texte ;
  • Line-through : Le texte sera barré ;
  • Inherit : Hérite de la valeur de l’élément parent ;
  • Initial : Utilise la valeur par défaut de la propriété ;
  • None : Pas de décoration.

Cette propriété va par exemple nous permettre d’enlever le soulignement automatique qui apparaît dès que l’on crée un lien.

Exemple d’utilisation de la propriété CSS text-decoration

Grâce à text-decoration, on va pouvoir enlever le soulignement de nos liens

Text-decoration permet de souligner du texte par exemple

Essayer ce code

La propriété CSS text-indent

La propriété CSS text-indent va nous permettre de gérer l’indentation d’un texte. Pour rappel, indenter un texte, c’est le décaler vers la droite.

La propriété text-indent accepte aussi bien des valeurs absolues (en px par exemple) que des valeurs relatives (en % ou em par exemple). On peut également lui attribuer des valeurs négatives afin de décaler un texte vers la gauche.

On prépare l’utilisation de la propriété text-indent

On peut donner des valeurs relatives ou absolues à la propriété text-indent

Notre texte a été indenté par la propriété text-indent

Essayer ce code

La propriété CSS text-shadow

La propriété CSS text-shadow va nous permettre de créer des ombres autour de nos textes, afin que ceux-ci se détachent de l’arrière plan.

On va devoir indiquer quatre valeurs dans un ordre précis à la propriété text-shadow afin que celle-ci fonctionne correctement :

  1. La projection horizontale de l’ombre (en px) ;
  2. La projection verticale de l’ombre (en px) ;
  3. Le rayon de propagation de l’ombre (le « radius », en px) ;
  4. La couleur de l’ombre. Accepte les mêmes valeurs que la propriété color.

Si l’on indique des valeurs positives pour les projections horizontales et verticales de l’ombre, l'ombre sera projetée en bas à droite du texte. En indiquant des valeurs négatives, on peut modifier l’orientation de notre ombre.

On peut créer des ombres avec la propriété CSS text-shadow

Text-shadow nous permet de choisir l’orientation et la couleur de nos ombres

Nous avons créé des ombres autour de nos textes grâce à text-shadow en CSS

Essayer ce code

Chapitre précédent

Chapitre suivant