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

Mise en forme d'un bloc de pseudo-classes et de pseudo-éléments

Bloquer le formatage

Un bloc en cascade de feuilles de styles est considéré comme un fragment de la page ou son volume entier, placé dans les conteneurs <P> et <DIV> , et <BODY> (si la page dans son ensemble). Le formatage du bloc consiste à modifier ses paramètres, tels que: la largeur et la hauteur du bloc, les retraits externes et internes à partir de ses bordures, l'attribution des couleurs et des apparences en tant que lignes séparées (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 la conception des pages, il est nécessaire de recourir à des dimensions de blocs variables. Pour cela, CSS fournit les propriétés min-width , min-height (largeur et hauteur minimales du bloc) et max-widht / max-height (valeurs maximales).

Les indentations externes du bloc dictent les paramètres: marge , marge gauche , marge droite , marge supérieure et marge inférieure . De même, la propriété de remplissage est trouvée.

Lorsque vous spécifiez l'arrière-plan du bloc div , vous devez appliquer la propriété background-color , le choix de la valeur ne pouvant être distingué de l'application générale des couleurs. Dans le cas où vous souhaitez utiliser une image en arrière-plan, appliquez la propriété background-image , tandis que dans la valeur spécifiez l'adresse et le nom de fichier de l'image souhaitée. Limitez la répétition de l'image en arrière-plan du bloc avec la propriété background-repeat et ses valeurs: repeat-x (répétition sur l'axe X), repeat-y (sur l'axe Y) et no-repeat (sans répétitions). Si nécessaire, corrigez l' image d'arrière - plan, afin qu'elle reste fixe pendant le défilement, utilisez la valeur fixée dans la propriété background-attachment .

Pour modifier les paramètres du bloc de blocs, les propriétés commençant par le mot BORDER sont utilisées. Donc, avec l'aide de width-width, il est possible de définir les mêmes valeurs pour les quatre frontières du bloc, et dans les valeurs border-left-width , border-right-largeur , border-top-width et border-bottom-width . Dans une vue similaire, appliquez: border-color (la couleur de la bordure du bloc) et border-style (l'apparence des lignes). À propos de la dernière propriété, il est nécessaire d'ajouter qu'ils ont plusieurs valeurs que nous n'avons pas encore apprises:

  • solide, rainure, crête, double - les lignes de cadre seront solides, bosselées, convexes et doubles, respectivement.
  • Encart - le bloc est complètement enfoncé.
  • début - une vue de bloc volumétrique.
  • none - pas de lignes.

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

.box {largeur: 200px; hauteur: 100px; marge gauche: 5px; marge-droite: 5px; marge supérieure: 10px; marge inférieure: 15px; rembourrage: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; border-color: # 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, qui sont difficiles à attribuer aux éléments ordinaires. Les pseudo-classes sont des liens , premier-enfant et lang (langage). Dans la spécification CSS 2.0, ils sont décrits comme:

  • a: link - propriétés du lien normal.
  • a: active - propriétés du lien actif.
  • a: visited - les propriétés du lien visité.
  • a: hover - les propriétés du lien lorsque vous passez la souris dessus.
  • a: focus - lie la propriété au focus
  • first-child - sélectionne le premier élément parmi les suivants.
  • lang - formatage des éléments en fonction de l'utilisation des langues sur la page.

Dans les feuilles de style en cascade, lors du formatage des liens, les mêmes valeurs s'appliquent que pour le texte normal. 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 les propriétés:

  • première lettre - met en forme le premier caractère de la première ligne.
  • première ligne - un formatage séparé de la première ligne du bloc de texte est affecté.
  • after - assigne l'emplacement de l'objet après l'élément en cours.
  • before - assigne l'emplacement de l'objet à l'élément en cours.