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

SELECTEURS CSS AVANCES

Les sélecteurs CSS « avancés »

Ce qui fait la grande force du CSS, c’est avant tout sa capacité à cibler précisément du contenu HTML pour lui appliquer des styles.

Dans cette partie, nous allons découvrir ensemble de nouveaux sélecteurs CSS dits « sélecteurs avancés ».

Grâce à eux, nous allons par exemple pouvoir sélectionner tous les éléments d’une page HTML, sélectionner un élément par rapport à son parent ou encore sélectionner un élément selon la valeur de son attribut.

Note : il existe de très nombreux sélecteurs avancés en CSS, nous n’allons voir que les plus utilisés ensemble.

Le sélecteur CSS universel « * »

Le sélecteur « * » (étoile) permet de sélectionner tous les éléments HTML d’une page d’un coup ; c’est pourquoi il est appelé sélecteur CSS universel.

Grâce à ce sélecteur, on va par exemple pouvoir appliquer une bordure et des marges identiques à tous les éléments HTML de notre page :

Sélecteur CSS universel *

Utilisation du sélecteur universel étoile

Tous les éléments de notre page possèdent les mêmes marges

Essayer ce code

Grouper les sélecteurs

Cette partie n’est qu’un rappel, car nous avons déjà souvent groupé des sélecteurs à l’aide du symbole « , » (virgule).

Grouper les sélecteurs nous permet d’appliquer un même style à différents éléments.

Grouper les sélecteurs

On utilise la virgule pour grouper les sélecteurs en CSS

Nous avons appliqué le même style CSS à différents éléments HTML

Essayer ce code

Sélectionner un élément par rapport à un autre

Le CSS va également nous permettre de sélectionner un élément relativement à un autre.

Tout d’abord, le sélecteur « A B » (remplacez « A » et « B » par n’importe quel élément) va nous permettre de sélectionner un élément B contenu dans un élément A.

Par exemple, nous allons pouvoir sélectionner tous les paragraphes contenus dans un élément div.

On sélectionne les paragraphes contenus dans notre div

On change la couleur de nos paragraphes

Nos paragraphes sont maintenant bleus

Essayer ce code

Ensuite, le sélecteur « A + B » va lui nous permettre de sélectionner tous les éléments B de même niveau et suivant immédiatement les éléments A.

On peut sélectionner les paragraphes suivant nos éléments HTML div

En CSS, on change l’aspect de ns paragraphes suivant nos div

Notre dernier paragraphe a bien été changé

Essayer ce code

Ici, seul notre dernier paragraphe possède une couleur de fond car c’est bien le seul élément p de même niveau qu’un élément div et suivant directement un élément div (les autres paragraphes sont des éléments enfants de nos éléments div).

Finalement, le sélecteur « A > B » va sélectionner tous les éléments B qui sont des éléments enfants directs de A.

Test de sélecteur avancé enfant

On cible le div enfant direct de body

Notre div container possède des bordures créées en CSS

Essayer ce code

Ici, seul notre élément div class="page-container" est un enfant direct de l’élément body, ce sera donc le seul à posséder une bordure. Notez bien qu’ici l’attribut class ne sert à rien, je ne l’ai précisé que pour bien savoir de quel div on parle dans les explications du code.

Les sélecteurs CSS d’attributs

Le CSS va encore nous permettre de sélectionner un élément HTML selon le fait qu’il possède ou non un attribut et selon la valeur de l’attribut.

Ici encore, nous n’allons voir que les sélecteurs assez courants.

Le sélecteur « A[attribut] » (remplacez "A" par n'importe quel élément HTML et "attribut" par le nom d'un attribut HTML), tout d’abord, va sélectionner tous les éléments A possédant un attribut en particulier.

Modification de lien avec les sélecteurs avancés CSS

On sélectionne les liens possédant un attribut target

Seul notre lien avec target a été modifié en CSS

Essayer ce code

Le sélecteur CSS « A[attribut="valeur"] » va lui sélectionner tous les éléments A possédant un attribut en particulier avec une valeur précise.

Sélection d’élément HTML avec un attribut et une valeur précise

On sélectionne l’élément a avec un attribut et une valeur précise

Nos éléments a ont des styles CSS différentes

Essayer ce code

Chapitre précédent

Chapitre suivant