Vidéo: COURS COMPLET HTML ET CSS [19/71] - Sélecteurs et propriétés CSS 2025
Les propriétés des blocs contrôlent l'alignement et l'espacement des objets sur une page grâce à leurs balises et attributs. Les blocs comprennent du texte, du contenu à l'intérieur des balises (avec et sans les positions spécifiées), des balises utilisant le style d'affichage: bloc, et des images ou des paragraphes définis avec des positions absolues ou relatives.
espacement des mots: Pour ajuster l'espacement entre les mots individuels, utilisez n'importe quel nombre positif ou négatif en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage), tels que l'espacement des mots: 2px;.
p {espacement des mots: 2px;}
espacement des lettres: Avec cet attribut, vous pouvez uniformément augmenter ou diminuer l'espace entre les caractères en spécifiant une valeur positive ou négative en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage), tels que l'espacement des lettres: 1em;. Notez que la modification de l'attribut letter-spacing remplace toute justification de texte préexistante.
p {espacement des lettres: 1. 5em;}
alignement vertical: vous pouvez aligner verticalement le texte le long de la ligne de base du texte, sous (indice), super (exposant), haut, texte -top, middle, bottom, et text-bottom, ou par toute valeur, positive ou négative, en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs) ou% (pourcentage), tels que vertical-align: top;.
p {vertical-align: top;}
text-align: cette option ne peut être appliquée qu'au texte. Les options d'alignement incluent gauche, droite, centre ou justification.
p {text-align: center;}
text-indent: Cette règle de style crée également un retrait de première ligne qui peut être défini sur n'importe quel texte positif ou valeur négative en px (pixels), pc (picas), pt (points), en (pouces), mm (millimètres), cm (centimètres), em (ems), ex (exs), ou% (pourcentage), tels comme texte-tiret: 12px;.
Pour mettre en retrait des objets non-texte sur une page, il n'est plus recommandé d'utiliser la balise
, car cette balise a été abandonnée. Au lieu de cela, ajoutez un retrait en utilisant les attributs de marge et / ou de remplissage.p {text-indent: 10px;}white-space: L'espace blanc à l'intérieur ou autour du texte dans n'importe quel élément de niveau bloc peut être affiché de trois manières différentes: normal, pre et nowrap. Choisissez normal pour ignorer tout espace blanc, avant de laisser l'espace blanc avec le texte tel qu'il a été codé, ou nowrap pour forcer le texte à envelopper seulement si le code a des balises de saut de ligne ().
p {white-space: pre;}display: cet attribut contrôle la façon dont l'objet stylé s'affiche dans le navigateur. Les options de valeur sont les suivantes: block, compact, inline, list-item, marker, none, run-in et table.
p {display: none;}Choisissez l'un des paramètres suivants:
none: Utilisez cette option pour masquer l'affichage d'un élément stylé dans le navigateur. Cette option est extrêmement utile lors de la création de plusieurs feuilles de style afin que certains éléments puissent être masqués à la vue sur un périphérique mais pas sur un autre, comme avec un CSS secondaire pour le type de support d'impression.
inline: Utilisez cette option pour afficher l'objet en ligne avec d'autres éléments, souvent dans le même bloc, que pour afficher les éléments de la liste sur une seule ligne. Bloc
: Cela transforme n'importe quel élément stylé en un bloc, après quoi d'autres attributs de style de bloc peuvent être appliqués. Les éléments de niveau bloc occupent toute la largeur de l'espace disponible, y compris l'espace linéaire au-dessus et au-dessous de l'élément, de la même manière que les paragraphes ont de l'espace au-dessus et au-dessous.
list-item: Cette option convertit le texte stylé en une liste non annulée, similaire aux balises
et
. Rodage
: cette fonction est soit non prise en charge, soit partiellement prise en charge, soit entièrement prise en charge, selon le navigateur. Actuellement, les navigateurs qui offrent un support complet incluent Safari, Chrome, IE 8+ et Opera 5+. Ajoutez l'attribut run-in pour forcer une zone de blocage à la suite d'une zone d'exécution afin qu'elle devienne une zone inline de la zone de bloc.
Une utilisation intéressante consiste à faire en sorte que la ligne de base d'un en-tête partage la même ligne de base que la première ligne d'un bloc de texte de paragraphe suivant.
inline-block: Utilisez cette option pour faire en sorte qu'un bloc se comporte comme un bloc en ligne avec une largeur spécifiée.
compact: Cette option est encore assez buggée et n'est actuellement prise en charge qu'au hasard. En fait, il peut déjà être obsolète, mais cela ne peut pas être confirmé pour le moment. Lorsque spécifié, cet attribut force les autres blocs du code à l'afficher le long de son côté. Marqueur
: convertit le contenu d'un bloc d'affichage en un marqueur, en utilisant le pseudo-élément: before ou: after, à l'intérieur duquel vous pouvez personnaliser le contenu. Table
: utilisez cet attribut pour afficher les éléments d'une table sans avoir à utiliser les tables HTML. En théorie, tous les éléments imbriqués s'afficheront comme s'il s'agissait d'éléments de ligne de table et de cellule de table. Les valeurs de table d'affichage supplémentaires pour cette propriété sont inline-table, table-rangée-groupe, table-en-tête-groupe, table-footer-groupe, table-rangée, table-colonne-groupe, table-colonne, table-cellule et table -légende.
Cette propriété est désormais prise en charge dans tous les principaux navigateurs, y compris IE 9+ et IE 8, mais seulement dans IE 8 quand elle n'est pas présente.
inherit: lorsque vous spécifiez cette option, l'objet stylé hérite de la valeur d'affichage de son élément parent.
Les blocs sont l'une des catégories de propriétés qui ont beaucoup de capacités au-delà des fonctionnalités de base décrites ici. Toutes les propriétés ne sont pas systématiquement prises en charge par tous les navigateurs, mais en fonction du public cible, certaines d'entre elles peuvent parfaitement convenir à un projet Web particulier.Pour en savoir plus sur les propriétés d'affichage, consultez les pages d'informations sur les blocs sur le site Web du W3C.
