Propriétés de bloc de feuilles de style en cascade (CSS)

Propriétés de bloc de contrôle de l'alignement et l'espacement des objets sur une page grâce à leurs balises et les attributs. Blocs comprennent du texte, contenu à l'intérieur

tags (avec et sans positions spécifiées), étiquettes en utilisant le display: block style, et des images ou des paragraphes fixés avec des positions absolues ou relatives.

word-spacing: Pour ajuster l'espacement entre les mots individuels, utiliser un nombre positif ou négatif dans px (pixels), ordinateur personnel (pica), pt (points), dans (pouces), mm (millimètres), cm (centimètres) em (EMS), ex (EX), ou % (en pourcentage), tel que word-spacing: 2px;.

p {word-spacing: 2px; }

l'espacement des lettres: Avec cet attribut, vous pouvez augmenter ou diminuer de manière uniforme l'espace entre les caractères en spécifiant une valeur positive ou négative px (pixels), ordinateur personnel (pica), pt (points), dans (pouces), mm (millimètres), cm (centimètres) em (EMS), ex (EX), ou % (en pourcentage), tel que letter-spacing: 1em-. On notera que la modification du l'espacement des lettres attribut remplace toute justification du texte préexistant.

p {letter-spacing: 1.5em-}

vertical-align: Vous pouvez aligner le texte verticalement le long de la ligne de base de texte, sous (indice), super- (exposant), haut, text-top, milieu, bas, et text-bas, ou par une valeur positive ou négative, en px (pixels), ordinateur personnel (pica), pt (points), dans (pouces), mm (millimètres), cm (centimètres) em (EMS), ex (EX), ou % (en pourcentage), tel que vertical-align: top-.

p {vertical-align: top-}

text-align: Cette option peut être appliquée uniquement au texte. Les options d'alignement comprennent gauche, droit, centre, ou justifier.

p {text-align: Center-}

text-indent: Également être utilisé uniquement avec le texte, cette règle de style crée un retrait de première ligne qui peut être réglé sur une valeur positive ou négative dans px (pixels), ordinateur personnel (pica), pt (points), dans (pouces), mm (millimètres), cm (centimètres) em (EMS), ex (EX), ou % (en pourcentage), tel que text-indent: 12px;.

Pour mettre en retrait des objets non textuels sur une page, il est plus recommandé que vous utilisez le

tag, parce que cette étiquette a été désapprouvée. Au lieu de cela, ajouter un tiret à l'aide de marge et / ou le style de rembourrage attributs.

p {text-indent: 10px; }

white-space: L'espace blanc autour du texte à l'intérieur ou dans tout élément de niveau bloc peuvent être affichés de trois manières différentes: normal, pré, et nowrap. Choisir normal d'ignorer tout espace blanc, pré de laisser l'espace blanc avec le texte tel qu'il a été codé, ou nowrap pour forcer tout texte de conclure que si le code a saut de ligne (
) Balises.

p {white-space: pré}

afficher: Cet attribut contrôle la façon dont les écrans d'objets de style dans le navigateur. Les options de valeur sont bloc, compact, en ligne, élément de liste, marqueur, aucun, run-in, et table.

p {display: none; }

Choisissez parmi l'un des paramètres suivants:

• aucun: Utilisez cette option pour masquer un élément de style de l'affichage dans le navigateur. Cette option est très utile lors de la création de multiples feuilles de style de sorte que certains éléments peuvent être cachés de la vue sur un appareil, mais pas l'autre, comme avec un CSS secondaire pour le type de support d'impression.

• en ligne: Utilisez cette option pour afficher l'objet de style en ligne avec d'autres éléments, souvent dans le même bloc, comme faire des éléments de liste afficher en une seule rangée.

• bloc: Cela transforme tout élément stylisé dans un bloc, après quoi d'autres attributs bloc de coiffure peuvent être appliquées. Eléments de niveau bloc prennent toute la largeur de l'espace disponible, y compris l'espace de ligne au-dessus et en dessous de l'élément, semblable à la façon dont les paragraphes ont l'espace au-dessus et en dessous d'eux.

• élément de liste: Cette option convertit texte stylé dans une liste dissocié de la liste, semblable à

et
balises.

• run-in: Cette fonction est non pris en charge, incomplètement pris en charge ou entièrement pris en charge, en fonction du navigateur. Actuellement, les navigateurs qui fournissent un soutien complet comprennent Safari, Chrome, IE 8+ et Opera 5+. Ajouter le run-in attribuer à forcer une boîte de bloc suite à une boîte de run-in pour devenir une boîte en-ligne de la boîte de bloc.

  Une utilisation intéressante est de rendre la base d'un en-tête partagent la même base que la première ligne d'un bloc suivant de texte d'un paragraphe.

• inline-block: Utilisez cette option pour faire un bloc se comportent comme un bloc en ligne avec une largeur spécifiée.

• compact: Cette option est un encore assez bogué et est actuellement seulement pris en charge hasard. En fait, il peut déjà être obsolète, mais qui ne peut pas être confirmée à ce moment. Lorsque spécifié, cet attribut force les autres blocs dans le code après pour afficher le long de son côté.

• marqueur: Ce convertit le contenu dans un bloc d'affichage dans une boîte de marqueur, en utilisant le : avant ou : après pseudo-élément, à l'intérieur duquel vous pouvez encore le style du contenu.

• table: Utiliser cet attribut pour afficher les éléments à l'intérieur d'une table sans avoir à utiliser des tables HTML. En théorie, tous les éléments imbriqués afficherait comme si elles étaient table-row et table-cell éléments. Valeurs de la table d'affichage supplémentaires pour cette propriété sont inline table, table-row-group, Table-header-groupe, Table-footer-groupe, table-row, table-column-groupe, table-column, table-cell, et table-caption.

  Cette propriété est désormais pris en charge dans tous les navigateurs principaux, y compris IE 9+ et IE 8, mais seulement dans IE 8 lorsque est absent.

• hériter: Lorsque vous spécifiez cette option, l'objet style hérite de la valeur d'affichage de son élément parent.

Les blocs sont l'une des catégories de propriété qui ont beaucoup de capacités au-delà de ceux de base décrites ici. Toutes les propriétés sont toujours pris en charge par tous les navigateurs, mais en fonction de l'auditoire cible, certains d'entre eux pourraient être parfaitement adapté pour un projet web en particulier. Pour en savoir plus sur les propriétés d'affichage, consultez les pages d'information de bloc sur le site Web du W3C.