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 CLASSES CSS

Définition des pseudo classes CSS

Les pseudo classes vont nous permettre de changer le style d’un élément HTML selon son état, c’est-à-dire de façon quasi dynamique.

Par exemple, nous allons pouvoir afficher un paragraphe en gras lorsque l’utilisateur passe sa souris dessus ou changer la couleur d’un lien une fois celui-ci cliqué.

Les pseudo classes sont reconnaissables au fait qu’elles commencent tous par le symbole « : » (deux-points).

Les pseudo classes CSS :link, :visited, :hover et :active

Les pseudo classes :link, :visited, :hover et :active vont être très souvent utilisées sur des liens HTML. Cependant, rien ne nous empêche d’utiliser :hover sur des paragraphes par exemple.

Généralement, la pseudo classe

  • :link va nous permettre de styliser un lien non visité;
  • :visited va nous permettre de styliser un lien une fois celui-ci visité. Cependant, comme cet état a souvent été utilisé dans le passé par des utilisateurs malveillants pour exploiter des failles, les navigateurs modernes vont ignorer la plupart des règles données en CSS ;
  • :hover va nous permettre de changer l’aspect d’un élément lorsque vos visiteurs poseront leur curseur dessus ;
  • :active va nous permettre de modifier l’aspect d’un lien lors du clic.

Attention : si vous utilisez plusieurs des pseudo classes ci-dessus sur un même élément, il faut impérativement les utiliser dans l’ordre que je vous ai donné.

On utilise les pseudo formats :hover, :link et :visited

On modifie l’aspect de nos liens selon leur état en CSS grâce aux pseudo formats

Notre titre change de couleur lorsqu’on passe la souris dessus

Essayer ce code

Dans l’exemple ci-dessus, le curseur de notre souris se trouve sur notre titre h1; celui-ci change donc de couleur et de police. De plus, nous avons déjà visité notre deuxième lien mais nous n’avons pas encore cliqué sur le premier.

Les pseudo classes :first-child et :last-child

Les pseudo classes CSS :first-child et :last-child vont nous permettre respectivement de sélectionner le premier élément et le dernier élément enfant HTML d’un certain type par rapport à un élément parent.

Par exemple, dans mon fichier HTML ci-dessous, le paragraphe contenant le texte « un premier paragraphe » est le premier élément enfant de mon élément div class="test". Le troisième paragraphe est son dernier enfant.

De même, le paragraphe hors div est le dernier enfant de l’élément body.

On crée différents paragraphes pour nos pseudo classes CSS

Utilisation des pseudo classes CSS first-child et last-child

On utilise first-child et last-child en CSS pour modifier l’aspect de nos paragraphes

Essayer ce code

La pseudo classe CSS :nth-child()

La pseudo classe CSS :nth-child() va nous permettre de cibler certains enfants d'un élément HTML.

Nous allons pouvoir indiquer entre les parenthèses de cette pseudo classe soit un nombre, soit un mot clef.

Cette pseudo classe CSS n'est pas forcément la plus évidente à comprendre. Nous allons voir son fonctionnement à travers différents exemples.

Présentation de la pseudo classe CSS :nth-child

Utilisation de la pseudo classe CSS :nth-child

Démonstration de la pseudo classe CSS :nth-child

Essayer ce code

Ce que vous devez bien comprendre, lorsque vous utilisez la pseudo classe :nth-child(), est que vous ne devez pas faire de distinction entre les éléments HTML dans votre comptage.

Par exemple, dans mon exemple précédent, l'élément body possède en tout cinq enfants : un titre h1, un titre h2, deux éléments p et un élément div.

Notre élément div possède à son tour trois enfants : un titre h2 et deux éléments p.

Je commence par utiliser ma pseudo classe pour mettre en violet tous mes paragraphes qui sont des enfants pairs d'un certain élément HTML, quel qu'il soit (grâce au mot clef "even" qui signifie "pair" en anglais).

Mon premier paragraphe est le troisième enfant de l'élément body, il ne sera donc pas ciblé. Mon deuxième paragraphe, en revanche, est le quatrième enfant. Il sera donc ciblé.

De même, mon troisième paragraphe est le deuxième enfant de mon élément div, il s'affichera donc également en violet.

Ensuite, je veux que tous mes éléments h2 qui sont le deuxième enfant d'un élément HTML s'affichent en vert. Ce n'est le cas que de mon premier titre h2.

Autres pseudo classes CSS

Il existe de nombreuses autres classes CSS, beaucoup moins utilisées que celles présentées ci-dessous.

La majorité d’entre elles vont servir à cibler des types d’éléments présents dans les formulaires HTML, et ne sont donc pas intéressantes à connaître pour le moment.

Chapitre précédent

Chapitre suivant