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

Positionnement et visualisation des éléments de la page

Positionnement et visualisation des éléments de la page

Les styles incluent une méthode de positionnement d'élément. Cette méthode est basée sur la spécification de coordonnées spécifiques pour chaque élément. Dans les feuilles de style en cascade, le positionnement est décrit par la propriété position, qui a les valeurs suivantes:

  • absolute - l'origine du coin supérieur gauche.
  • rétatif - positionnement relatif, où "zéro" est attribué en fonction du code HTML.
  • static - location est constant, par rapport aux valeurs du code HTML.
  • fixed - fixant un élément sur la page (l'élément n'est pas soumis à "ascenseur").

Vous pouvez modifier la position d'un élément en CSS en le déplaçant le long de l'axe X (propriété de gauche), le long de l'axe Y (propriété du haut) et de l'axe Z (l'attribution de calques détermine la propriété de l'indice z). Il est déconseillé de créer de tels styles séparément de la balise, car chaque position de l'élément est unique sur la page. Exemple: <DIV style = "position: absolute; haut: 200px; gauche: 160px; z-index: -1"> élément de page </ DIV>.

Les styles vous permettent également d’ajouter des effets de visualisation aux éléments, c’est-à-dire de changer leur apparence et leur affichage à l’écran. La propriété de visibilité et ses valeurs visible (l'élément est visible), masqué (l'élément n'est pas visible) et collapse (masque le texte ou les éléments des tableaux) sont destinées à modifier la transparence de l' élément. Le code est écrit sous la forme: style = "visibilité: _value " .

Les images à recadrer sont traitées par la propriété de style de clip. La valeur de ce dernier est appelée rect; des numéros lui sont attribués, lesquels indiquent de quel côté et combien l’image doit être rognée. Le principe est:

STYLE = "clip: rect ( _top_right_bottom_left) , où _top et autres sont les nombres en px pour les coupes d'image de chaque côté et leur séquence est identique.

La propriété de style OVERLOW est responsable du rendu de l'élément dans la zone qui lui est affectée. Valeurs:

  • auto - l'apparence du parchemin si la taille de l'élément sera plus grande que la surface.
  • scroll - l'apparence du défilement, quelle que soit la taille des éléments et de la zone.
  • hidder - l'élément est clipsé sur le bord de la zone.
  • visible - l'élément sera étiré ou comprimé le long des limites de la zone.

L’affichage à l’écran contrôle la propriété d’affichage et ses valeurs:

  • none - l'élément n'est pas affiché.
  • block - l'élément est placé dans un paragraphe séparé.
  • inline - insère du texte dans le paragraphe actuel.
  • list-item est un élément de liste.
  • table - block table (s'applique uniquement à la balise <TABLE> ).
  • inline-table - une table de texte (s'applique uniquement à la balise <TABLE> ).
  • table-cell est une cellule de table (s'applique uniquement aux balises <TH> et <TD> ).
  • table-column est une colonne de table (s'applique uniquement à la balise <COL> ).
  • table-row est une ligne de table (s'applique uniquement à la balise <TABLE> ).
  • table-caption est une table de blocs (s'applique uniquement à la balise <CAPTION> ).
  • table-row-group est un groupe de lignes de table (s'applique uniquement à la balise <TBODY> ).
  • table-column-group - groupe de colonnes de la table (s'applique uniquement à la balise <COLGROUP> ).
  • table-footer-group - le groupe de sous-positions de la table (s'applique uniquement à la balise <THEAD> ).
  • table-header-group est un groupe d'en-têtes de table (s'applique uniquement à la balise <THEAD> ).

À travers les styles, vous pouvez envelopper des éléments. Cette opération est effectuée à l'aide de la propriété float , où la valeur left indique un bouclage à gauche et un à droite avec un repli à droite. La propriété clear est utilisée de la même manière (sélection du côté de l'élément qui ne peut pas être en contact avec l'élément précédent). Exemple: IMG {clear: left} .

Tâche

Sur la base du matériau ci-dessus, créez un ensemble de styles pour les tableaux . En même temps, commencez par composer le code manuellement , pour que le nom des propriétés et leurs valeurs soient mieux mémorisés. Vous pouvez ensuite utiliser vos connaissances sur les éditeurs HTML , où des outils intégrés permettent de dessiner des feuilles de styles CSS en cascade .