This page has been robot translated, sorry for typos if any. Original content here.

Formater un bloc de pseudo-classes et de pseudo-éléments

Bloquer le formatage

Un bloc dans les feuilles de style en cascade est considéré comme un fragment d'une page ou de son volume complet, placé dans les conteneurs <P> et <DIV> , ainsi que <BODY> (si la page dans son ensemble). Le formatage d'un bloc modifie ses paramètres, tels que: la largeur et la hauteur du bloc, les retraits internes et externes de ses bordures, l'attribution de la couleur et de l'aspect aux lignes individuelles (bordures) et à l'arrière-plan général.

Les dimensions du bloc dans les styles sont spécifiées dans les propriétés width et height , alors que, comme partout dans ce cas, les valeurs négatives ne peuvent pas être spécifiées. Dans certains cas, pour concevoir des pages, vous devez recourir à des tailles de bloc variables. Pour ce faire, CSS fournit les propriétés min-width , min-height (largeur minimale et hauteur du bloc) et max-widht / max-height (leurs valeurs maximales).

L'indentation externe du bloc dicte les paramètres: margin (l'indentation est identique), margin-left (indentation uniquement à gauche), margin-right (indentation à droite), margin-top (indentation en haut) et margin-bottom (indentation en bas). De même, la propriété padding (padding à l'intérieur d'un bloc) est utilisée.

Lors de la définition de l'arrière-plan du bloc div , vous devez appliquer la propriété background-color , dont le choix de la valeur est indiscernable de l'utilisation générale des couleurs. Si vous souhaitez utiliser une image comme arrière-plan, utilisez la propriété background-image et spécifiez l'adresse et le nom du fichier de l'image souhaitée dans la valeur. Vous pouvez limiter la répétition de l'image dans l'arrière-plan du bloc avec la propriété background-repeat et ses valeurs: repeat-x (répétition suivant l'axe des abscisses), repeat-y (suivant l'axe des ordonnées ) et no-repeat (sans répétition). Si nécessaire, corrigez l' image d'arrière - plan afin qu'elle reste immobile lors du défilement, utilisez la valeur fixe de la propriété background-attachment .

Pour modifier les paramètres d'un bloc d' image, les propriétés commençant par le mot BORDER sont utilisées. Donc, en utilisant border-width, vous pouvez définir les mêmes valeurs pour les quatre bordures du bloc, et les valeurs de border-left-width , border-right-width , border-top-width et border-bottom-width décrivent une bordure spécifique. Selon une représentation similaire, on utilise la couleur de bordure (la couleur des lignes du bloc) et le style de bordure (l'apparence des lignes). A propos de la dernière propriété, vous devez ajouter qu’elles ont plusieurs valeurs que nous n’avons pas explorées:

  • solid, groove, crête, double - les lignes du cadre sont respectivement pleines, déprimées, convexes et doubles.
  • encart - le bloc est complètement déprimé.
  • outset - vue volumétrique du bloc.
  • aucune - pas de lignes.

À partir de ce qui précède, nous pouvons supposer que le style du bloc peut avoir la forme suivante:

.box {width: 200px; hauteur: 100px; marge gauche: 5px; marge droite: 5px; marge supérieure: 10 px; marge inférieure: 15 px; rembourrage: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; couleur de bordure: # 202020; style de bordure: solide}

Mise en forme de pseudo-classes et de pseudo-éléments

Cette catégorie comprend des éléments de pages Web difficiles à attribuer à des éléments ordinaires. Les pseudo-classes sont des liens , premier enfant et lang (langue). Dans la spécification CSS 2.0, ils sont décrits comme suit:

  • a: link - propriétés d'un lien régulier.
  • a: actif - propriétés du lien actif.
  • a: visité - propriétés du lien visité.
  • a: hover - propriétés du lien lorsque vous la survolez.
  • a: focus - propriété de lien avec focus
  • premier-enfant - sélectionne le premier élément parmi les suivants.
  • lang - éléments de formatage en fonction de l'utilisation des langues sur la page.

Dans les feuilles de style en cascade, lors de la mise en forme des liens, les mêmes valeurs s'appliquent que pour le texte brut. Lors de la description d'autres pseudo-classes en CSS, le symbole ">" est précédé de leurs valeurs.

Les pseudo-éléments dans les styles incluent des propriétés:

  • first-letter - formate le premier caractère de la première ligne.
  • première ligne - un formatage séparé de la première ligne d'un bloc de texte est attribué.
  • after - assigne l'emplacement de l'objet après l'élément en cours.
  • before - assigne l'emplacement de l'objet à l'élément actuel.