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

LE MODELE DES BOITES EN CSS

Importance et définition

Le modèle des boîtes est un concept essentiel et central pour la mise en page d’une page web.

Vous devez absolument comprendre le modèle des boîtes pour ensuite pouvoir positionner les différents éléments de votre page où vous le souhaitez et créer de belles pages web.

Le modèle des boîtes nous dit que « tout élément HTML peut être considéré comme une boîte rectangulaire », qu’il soit de type block ou inline.

Autour de la « boîte » contenant l’élément en soi, on va pouvoir dessiner d'autres boîtes contenant la marge intérieure (padding), les bordures et finalement la marge extérieure de l'élément.

Grâce au modèle des boîtes, nous allons comprendre comment définir des marges intérieures et extérieures et des bordures autour du contenu de l’élément. Nous allons également pouvoir positionner les éléments les uns par rapport aux autres de manière efficace.

Explication et illustrations du modèle des boîtes

Voici une première illustration théorique du modèle des boîtes :

Illustration du modèle des boîtes

La première boîte (la boîte centrale) représente le contenu de l’élément ou l'élément en soi.

Ensuite, autour du contenu, la deuxième boîte contient en plus la marge intérieure de l’élément qu'on appelle en CSS le "padding".

La troisième boîte va contenir en plus la bordure de l’élément.

Enfin, la dernière boîte va également contenir la marge extérieure de l’élément.

Vous pouvez déjà voir ci-dessous un exemple plus pratique avec un élément HTML div. Ne vous préoccupez pas trop des différentes propriétés CSS utilisées pour le moment : nous allons les voir une par une dans la suite de cette partie.

Pour l’instant, contentez vous de bien distinguer les différentes boîtes autour de notre élément div.

Le modèle des boîtes illustré avec un div

On utilise les propriétés CSS pour régler la taille de nos boîtes

On distingue bien les différentes boîtes autour du div

Essayer ce code

Chapitre précédent

Chapitre suivant