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 espaces internes et externes à partir de ses bordures, l'attribution de la couleur et l'apparence des lignes individuelles (bordures) et de l'arrière-plan général.

Les dimensions de bloc dans les styles sont spécifiées dans les propriétés width et height , alors que, comme partout ailleurs, les valeurs négatives ne peuvent pas être spécifiées dans de tels cas. Dans certains cas, pour la conception des pages doivent recourir à des dimensions variables du bloc. 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).

Les décalages externes du bloc dictent les paramètres: margin (les retraits sont identiques), margin-left (retrait seulement à gauche), margin-right (retrait à droite), margin-top (retrait à partir du haut) et margin-bottom (retrait à partir du bas). De même, la propriété padding est utilisée (indent dans un bloc).

Lors de la définition de l'arrière-plan d'un 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 en tant qu'arrière-plan, utilisez la propriété background-image et spécifiez l'adresse et le nom de fichier de l'image souhaitée dans la valeur. Vous pouvez limiter la répétition d'une image dans l'arrière-plan d'un bloc avec la propriété background-repeat et ses valeurs: repeat-x (répétition sur l'axe des abscisses), repeat-y (sur l'axe des ordonnées ) et no-repeat (aucune répétition). Si vous devez verrouiller l' image d'arrière - plan, utilisez la valeur fixe dans la propriété background-attachment pour la conserver immobile lors du défilement.

Pour modifier les paramètres du bloc, appliquez les propriétés qui commencent par le mot BORDER. Ainsi, à l'aide de border-width, vous pouvez définir les mêmes valeurs pour les quatre bordures du bloc. Une bordure spécifique est décrite dans les valeurs border-left-width , border-right-width , border-top-width et border-bottom-width-width . Pour une présentation similaire, appliquez: border-color (la couleur des lignes du cadre de bordure du bloc) et border-style (l'apparence des lignes). A propos de la dernière propriété que vous devez ajouter, comme ils ont plusieurs valeurs inexplorées, nous avons:

  • Les lignes pleines, rainurées, faîtières et doubles sont respectivement pleines, indentées, convexes et doubles.
  • encart - le bloc est complètement déprimé.
  • outset - vue du volume du bloc.
  • aucune - pas de lignes.

À partir de ce qui précède, on peut supposer que le style de 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 normal.
  • 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 passez la souris dessus.
  • a: focus - propriété de lien avec focus
  • first-child - 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 sont appliquées que pour le texte brut. Lors de la description d'autres pseudo-classes en CSS, le symbole ">" est indiqué avant 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 du 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.