Le positionnement et la visualisation des éléments de page

Le positionnement et la visualisation des éléments de page

Les styles incluent un procédé d'installation de la méthode élément de positionnement. Cette méthode est basée sur la tâche coordonnées pour chaque élément spécifique. La feuille de positionnement de style en cascade décrit la propriété de position, qui a les valeurs de substance énumérés:

  • absolue - le sommet d'origine coin gauche.
  • retative - positionnement relatif, où «zéro» est attribué en fonction du code de HTML.
  • statique - emplacement constamment, les valeurs relatives du code HTML.
  • fixe - élément de fixation sur la page (non soumis élément "ascenseur").

Changer la position dans l'élément de CSS et peut être compensé par lui sur l'axe X (propriété de gauche), l'axe Y (en haut de la propriété) et l'axe Z (la nomination de couches détermine la propriété z-index). Créer ces styles séparément de la balise est pas souhaitable, parce que la position de chaque élément est unique dans la page. Exemple: <DIV style = "position: absolute; top: 200px; gauche: 160px; z-index: -1"> </ DIV> élément de la page.

Styles vous permettent également d'ajouter des éléments d'effets de visualisation, à savoir, de changer leur apparence et la façon d'afficher sur l'écran. Changer l'élément de transparence est destiné propriété de visibilité et sa valeur visible (voir point), hidder (aucun élément est visible) et l' effondrement (texte de peau ou des cellules de tableau). Le code est écrit sous cette forme: style = "visibility: _znachenie".

Les images qui doivent être coupés, transformés propriété de clip de style. La valeur de ce dernier est appelé rect il a assigné des nombres qui indiquent de quel côté et combien de couper l'image. Le principe est le suivant:

STYLE = "clip: rect (_top_right_bottom_left ), où _top, etc. - dans le nombre de coupes px images de chacune des parties et leur séquence reste inchangé ..

propriété de style Overtlow est responsable de l'élément de visualisation dans ce domaine donné. valeurs:

  • auto - faire défiler l'apparence, si la taille de l' élément est plus grande que la région.
  • faire défiler - faire défiler l' événement, quelle que soit la taille des éléments et le terrain.
  • hidder - élément est découpé à la limite.
  • visible - l'article sera étiré ou compressé par les limites du champ.

Afficher les éléments sur l'écran ajuste la propriété d'affichage et sa valeur:

  • none - L'article est pas affiché.
  • bloquer - élément est placé dans un paragraphe distinct.
  • inline - coller du texte dans le paragraphe courant.
  • list-item - item.
  • Table - un bloc de table (uniquement pour la balise <TABLE>).
  • inline table - table de texte (uniquement pour la balise <TABLE>).
  • table-cell - la table des cellules (uniquement pour les balises <TH> et <TD>).
  • table-column - colonne du tableau (uniquement pour balise <COL>).
  • table-row - ligne de la table (uniquement pour la balise <TABLE>).
  • table-caption - table de blocs (uniquement pour balise <CAPTION>).
  • table-row-groupe - un groupe de lignes de la table (uniquement pour la balise <TBODY>).
  • table-column-groupe - un groupe de colonnes dans un tableau (uniquement pour balise <COLGROUP>).
  • Table-footer-groupe - un groupe de sous-rubriques de la table (uniquement pour marquer <THEAD>).
  • Table-header-groupe - une table d' en- tête de groupe (uniquement pour balise <THEAD>).

En faisant des styles peut envelopper des éléments. Ceci est accompli en utilisant les propriétés de flotteur, où la valeur d'enveloppe de gauche indique le côté gauche et la droite avec la droite. De même, la propriété claire est utilisée (le choix du côté de l' élément, qui ne peut pas entrer en contact avec le point précédent). Exemple: IMG {clear: left}.

emploi

Sur la base de la matière ci - dessus pour faire un ensemble de feuilles de style. Dans le même temps pour démarrer le code de numérotation à la main, il est donc préférable de rappeler le nom des propriétés et leurs valeurs. Vous pouvez ensuite utiliser leurs connaissances en HTML-rédacteur en chef, qui a intégré des outils pour le dessin des feuilles de style en cascade CSS.