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 de page ou de son volume complet placé dans les conteneurs <P> et <DIV> , ainsi que <BODY> (si la page est en général). Le formatage d'un bloc modifie ses paramètres, tels que: la largeur et la hauteur d'un bloc, les retraits internes et externes de ses limites, l'attribution de la couleur et l'apparence des lignes individuelles (limites) et de 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 ailleurs dans ce cas, vous ne pouvez pas spécifier de valeurs négatives. 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 suivants: margin (les retraits sont identiques), margin-left (retrait seulement à gauche), margin-right (retrait à droite), margin-top (retrait d'en haut) et margin-bottom (retrait d'en 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 ne peut pas être distingué 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 en place 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. Les valeurs border-left-width , border-right-width , border-top-width et border-bottom-width décrivent une bordure spécifique. Pour une présentation similaire, appliquez: border-color (la couleur des lignes de la bordure du cadre) 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:

  • solid, groove, crête, double - les lignes du cadre sont pleines, indentées, convexes et doubles, respectivement.
  • encart - le bloc est complètement déprimé.
  • outset - vue du volume du bloc.
  • aucun - 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 du formatage 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.