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 la façon dont l'élément est positionné en utilisant la méthode de positionnement. Cette méthode est basée sur la spécification des 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:

  • absolu est l'origine du coin supérieur gauche.
  • positionnement relatif - où "zéro" est attribué selon le code HTML.
  • statique - l'emplacement est invariable par rapport aux valeurs du code HTML.
  • Fixe - Fixe l'élément sur la page (l'élément n'est pas soumis à "l'ascenseur").

Vous pouvez également modifier la position d'un élément dans CSS en le déplaçant sur l'axe X (propriété left), le long de l'axe Y (propriété top) et l'axe Z (la propriété z-index détermine l'objectif des couches). Il est déconseillé de créer de tels styles séparément du tag, car la position de chaque élément est unique sur la page. Exemple: position <DIV style = ": absolue, en haut: 200 px, gauche: 160 px, z-index: -1"> un é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 la façon dont ils sont affichés à l'écran. Pour modifier la transparence de l' élément, la propriété visibility est appelée et sa valeur visible (l'élément est visible), hidder (l'élément n'est pas visible) et s'effondrer (masque les éléments de texte ou de tableau). Le code est écrit comme ceci: style = "visibility: _value " .

Les images devant être rognées sont traitées avec la propriété de style de clip. La valeur de ce dernier est appelée rect.Les numéros lui sont assignés, qui indiquent de quel côté et de combien de couper l'image. Le principe est le suivant:

STYLE = "clip: rect ( _top_right_bottom_left) , où _top et autres sont les nombres en pixels de l'image coupés de chaque côté et leur séquence est inchangée.

La propriété de style overtlow est responsable de la visualisation de l'élément dans la zone spécifiée. Valeurs:

  • auto - l'apparence du défilement, si la taille de l'élément est plus grande que la surface.
  • scroll - l'apparence du défilement, indépendamment de la taille des éléments et de la zone.
  • Hidder - l'élément est cultivé autour de la frontière de la région.
  • visible - l'élément sera étiré ou compressé aux limites de la région.

L'affichage sur l'écran des éléments ajuste la propriété d'affichage et ses valeurs:

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

Grâce aux styles, vous pouvez faire le flux autour des éléments. Ceci est accompli en utilisant la propriété float , où la valeur left indique le flux du côté gauche, et droit du côté droit. De même, la propriété clear (sélection du côté d'un élément qui ne peut pas être touché par l'élément précédent) est appliquée. Exemple: IMG {clear: left} .

Tâche

Sur la base du matériel ci-dessus, créez un ensemble de styles pour les tables . En même temps, pour commencer, composez le code manuellement , donc rappelez-vous le nom des propriétés et leurs valeurs. Ensuite, vous pouvez utiliser vos connaissances dans les éditeurs HTML , où il existe des outils intégrés pour compiler des feuilles de styles CSS en cascade .