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 comentaires
  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 PSEUDO ELEMENTS CSS

Présentation des pseudo éléments CSS

Les pseudo éléments CSS vont nous permettre de modifier l’apparence d’une partie seulement d’un ou de plusieurs éléments HTML, ou encore d’ajouter du contenu au début ou à la fin d'un certain élément HTML.

Les pseudo éléments sont reconnaissables en CSS à leur écriture : tous commencent par « :: » (un double deux-points).

Il est possible que vous croisiez encore des pseudo éléments CSS écrits avec seulement « : » (un deux-points). Ceci est une ancienne syntaxe, vouée à disparaître.

Il n’existe que cinq pseudo éléments en CSS, que nous allons étudier dans l’ordre :

  • ::first-letter va nous permettre de ne sélectionner que la première lettre d’un texte contenu dans un élément ;
  • ::first-line va nous permettre de ne sélectionner que la première ligne d’un texte contenu dans un élément ;
  • ::selection va nous permettre de sélectionner la partie d’un élément sélectionnée (par un double clic) par l’utilisateur ;
  • ::before va nous permettre d’insérer du contenu au début d'un élément HTML ;
  • ::after va nous permettre d’insérer du contenu à la fin d'un élément HTML.

Le pseudo élément CSS ::first-letter

Le pseudo élément CSS ::first-letter va donc nous permettre de modifier l’apparence de la première lettre du texte d’un élément.

On peut par exemple agrandir et changer la couleur de la première lettre de tous nos paragraphes :

Le pseudo élément CSS ::first-letter

Utilisation du pseudo élément CSS ::first-letter

On utilise CSS ::first-letter pour changer le style de nos éléments HTML p

Essayer ce code

A noter que le pseudo élément ::first-letter ne peut être appliqué qu’à des éléments HTML de type block.

De plus, ce pseudo élément ne supporte pas toutes les propriétés CSS mais peut être utilisé avec les suivantes (liste non exhaustive) :

  • Les propriétés liées à la police (font) ;
  • Les propriétés liées à la couleur ;
  • Les propriétés liées au fond (background) ;
  • La propriété border ;
  • La propriété margin ;
  • La propriété padding ;
  • Les propriétés text-decoration et text-transform ;
  • La propriété vertical-align ;
  • La propriété line-height ;
  • Les propriétés float et clear.

Le pseudo élément CSS ::first-line

Le pseudo élément CSS ::first-line va nous permettre de cibler et de modifier le style de la première ligne de texte d’un élément.

Le pseudo élément CSS ::first-line

Utilisation du pseudo élément CSS ::first-line

On a utilisé ::first-line pour modifier l’aspect de nos éléments HTML p

Essayer ce code

Ce pseudo élément ne s’applique une nouvelle fois qu’aux éléments HTML de type block.

Ce pseudo élément ne peut pas être utilisé avec toutes les propriétés CSS. Il peut cependant être utilisé entre autres avec les propriétés suivantes :

  • Les propriétés liées à la couleur ;
  • Les propriétés liées au fond (background) ;
  • La propriété border ;
  • Les propriétés letter-spacing et word-spacing ;
  • Les propriétés text-decoration et text-transform ;
  • La propriété vertical-align ;
  • La propriété line-height ;
  • La propriété clear.

Le pseudo élément CSS ::selection

Le pseudo élément CSS ::selection va nous permettre de cibler et de mettre en forme la partie d’un élément actuellement sélectionnée (double cliquée ou sélectionnée directement avec le pointeur de la souris) par un utilisateur.

Ce pseudo élément supporte les propriétés CSS color et background ainsi que cursor et outline.

Le pseudo élément CSS ::selection

On utilise ::selection pour mettre en relief une zone sélectionnée

Grâce à CSS ::selection, on peut surligner une partie d’élément HTML sélectionnée

Essayer ce code

Dans l'exemple précédent, évidemment, j'ai sélectionné les mots "zone sélectionnée" avec ma souris au moment de prendre la capture d'écran.

Les pseudo éléments CSS ::before et ::after

Les pseudo éléments CSS ::before et ::after vont nous permettre respectivement d’ajouter du contenu HTML au début et à la fin d'un certain élément HTML.

Ces pseudo éléments ne vont peut être pas vous sembler très utile pour le moment, mais lorsque vous aurez emmagasiné de nouvelles connaissances en HTML, CSS et JavaScript, vous comprendrez toute la puissance de ceux-ci.

Ces pseudo éléments vont devoir être utilisés avec la propriété CSS content qui va nous permettre d’ajouter toute sorte de contenu (du texte, des images, etc.).

Les pseudo éléments CSS ::before et ::after

Utilisation des pseudo éléments CSS ::before et ::after

On a ajouté du texte avant notre div grâce à ::before et une image après avec ::after

Essayer ce code

Dans l’exemple ci-dessus, nous avons pu ajouter du texte au début de notre div class="div-un" et une image à la fin de celui-ci grâce à ::before et ::after.

Chapitre précédent

Chapitre suivant