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

LA PROPRIETE CSS DISPLAY

La propriété CSS display

Par défaut, les éléments HTML vont s’afficher soit sous forme de « bloc », soit « en ligne ». C’est la différence majeure entre les éléments de type block et inline.

La propriété display est une propriété CSS très puissante, puisqu’elle va nous permettre de maîtriser la façon dont un élément va être affiché, et ainsi de gérer la mise en page de nos éléments.

La propriété display peut prendre de nombreuses valeurs nous permettant de gérer précisément la façon dont chaque élément va être affiché. Nous allons voir ensemble les valeurs les plus utilisées.

Display : inline

Lorsque l’on donne la valeur inline à la propriété display, l’élément ciblé va se comporter comme un élément de type inline et donc n’occuper que la largeur qui lui est strictement nécessaire.

Par exemple, en appliquant un display:inline à des éléments HTML p, ceux-ci vont venir se coller les uns à côté des autres selon la place disponible.

Création de page HTML pour tester la propriété display et sa valeur inline

On transforme le comportement des éléments HTML p afin qu’ils s’affichent inline

Nos paragraphes se comportent comme des éléments HTML inline

Essayer ce code

Display : block

En attribuant la valeur block à la propriété display, les éléments ciblés vont se comporter comme des éléments HTML de type block et ainsi prendre toute la largeur disponible.

On peut par exemple appliquer un display:block à un élément HTML span (qui est par défaut de type inline) afin d’observer la modification du comportement de celui-ci.

Test de la valeur block de la propriété display

On applique un display block à notre deuxième élément HTML span

Notre élément HTML span se comporte comme une élément de type block grâce à la propriété CSS display

Essayer ce code

Ici, nous avons appliqué une bordure à nos deux éléments HTML span afin de bien voir la modification du comportement. Ensuite, nous n’avons appliqué un display:block qu’à notre deuxième élément span. Celui-ci se comporte alors comme un élément de type block et occupe toute la largeur disponible.

Display : inline-block

En HTML, les éléments sont soit de type inline, soit de type block. La propriété display va nous permettre de créer des éléments d’un troisième type qui est une combinaison des deux premiers grâce à sa valeur inline-block.

La valeur inline-block va nous permettre d’emprunter certaines propriétés des éléments de type block et certaines propriétés des éléments de type inline. Ainsi, l’élément en soi va être de type inline tandis que ce qu’il contient (« l’intérieur de la boîte ») va être considéré comme étant de type block.

Cela va nous permettre entre autres d’afficher plusieurs éléments côte–à-côte tout en maîtrisant précisément la taille de chacun d’entre eux.

Test de la valeur inline-block de la propriété display

On utilise display : inline-block sur nos éléments HTML p

Nos paragraphes en HTML sont maintenant de type inline-block

Essayer ce code

Display : none

Finalement, la valeur none va nous permettre tout simplement de ne pas afficher un élément. Cela peut se révéler très pratique dans de nombreux cas, notamment lorsqu’on veut modifier l’affichage de nos pages selon l’appareil utilisé par nos visiteurs (ordinateur de bureau, téléphone portable, tablette, etc.).

Utilisation de la valeur none de la propriété CSS display

Avec display :none, on peut faire disparaître un élément HTML

Notre deuxième paragraphe a disparu grâce à display : none

Essayer ce code

Chapitre précédent

Chapitre suivant