CATALOGUE Code & Data Formation XHTML/CSS Apprendre XHTML & CSS Introduction à la mise en page avec les feuilles de style

Introduction à la mise en page avec les feuilles de style

Éléments de type bloc et éléments de type en-ligne
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre XHTML & CSS
Revoir le teaser Je m'abonne
3,0
Transcription
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
3,0
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Différence entre les éléments de type bloc et en ligne

Objectifs

Les objectifs de cette vidéo sont les suivants :

  • Comprendre la différence entre éléments de type bloc et éléments de type en ligne.
  • Savoir manipuler ces éléments en utilisant des propriétés CSS.
  • Appliquer la propriété display pour alterner entre les types de rendu.

Résumé

Apprenez à distinguer les éléments de type bloc et les éléments de type en ligne en HTML et découvrez comment les manipuler avec des feuilles de style.

Description

Dans cette leçon, nous abordons les concepts fondamentaux de la mise en page en HTML à l'aide des feuilles de style (CSS). Nous expliquons d'abord la différence entre les éléments de type bloc et les éléments de type en ligne. Un élément de type bloc occupe toute la largeur disponible et commence toujours sur une nouvelle ligne, comme les paragraphes (<p>) et les divisions (<div>). En revanche, un élément de type en ligne n’occupe que l’espace nécessaire à son contenu et peut s'insérer au sein d’un paragraphe, comme les balises <span> ou <a>.

Nous explorons ensuite comment utiliser les propriétés CSS pour manipuler ces éléments, notamment la largeur, les bordures, les marges, et les espacements internes. Nous illustrons également l'utilisation de la propriété display pour alterner entre les types de rendu bloc et en ligne en CSS. Finalement, un exercice pratique est inclus afin de consolider ces connaissances par une application directe sur un projet HTML.

Voir plus

Questions fréquentes

Quelle est la principale différence entre un élément de type bloc et un élément de type en ligne en HTML ?
Un élément de type bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible, tandis qu'un élément de type en ligne occupe seulement l'espace nécessaire à son contenu et peut se trouver à l'intérieur d'un paragraphe sans démarrer une nouvelle ligne.
Comment appliquer une largeur spécifique à un élément de type en ligne en CSS ?
Pour appliquer une largeur spécifique à un élément de type en ligne en CSS, il faut d'abord changer son mode de rendu en élément de type bloc ou inline-block en utilisant la propriété display, par exemple display: inline-block; pour lui attribuer une largeur.
Pourquoi utiliser la propriété 'display: inline' sur un élément de type bloc ?
Utiliser la propriété 'display: inline' sur un élément de type bloc permet de le faire apparaître sur la même ligne que le contenu adjoint, sans qu'il ne prenne toute la largeur disponible. Cela peut être utile pour des ajustements de mise en page spécifiques.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Azraël
Il y a 3 ans
Dans l'ensemble bon cours, toutefois pas adapté au débutant car très touffu.
Je me perds toujours dans les marges, les paddings et les positionnements!
Beaucoup de petites astuces, bienvenues.
Gros défaut: tous les écrans sont flous, et le son est exécrable.