Positioning and visualization of page elements

Positioning and visualization of page elements

Styles include the way the element is positioned using the positioning method. This method is based on specifying the specific coordinates for each element. In cascading style sheets, positioning is described by the position property, which has the following values:

  • Absolute - the origin is the upper left corner.
  • Retative - relative positioning, where "zero" is assigned according to the HTML code.
  • Static - the location is invariant, relative to the values ​​of the HTML code.
  • Fixed - fixing an element on the page (the element is not dependent on the "elevator").

You can also change the position of an element in CSS by shifting it along the X axis (left property), along the Y axis (the top property), and the Z axis (the z-index property determines the purpose of the layers). It is not advisable to create such styles separately from the tag, because each item's position is unique on the page. Example: <DIV style = "position: absolute; top: 200px; left: 160px; z-index: -1"> a page element </ DIV>.

Styles also allow you to add visualization effects to elements, ie change their appearance and the way they are displayed on the screen. To change the transparency of the element, the visibility property is called and its visible value (the item is visible), the hidder (the element is not visible), and collapse (hides text or table elements). The code is written like this: style = "visibility: _value " .

Images that need to be cropped are processed by the clip style property. The value of the latter is named rect . Numbers are assigned to it, which indicate which side and how much to trim the image. The principle is as follows:

STYLE = "clip: rect ( _top_right_bottom_left) , where _top and others are the numbers in px of the image truncation from each side and their sequence is unchanged.

The overtlow style property is responsible for visualizing the element in the specified area. Values:

  • Auto - the appearance of scrolling, if the size of the element will be larger than the area.
  • Scroll - the appearance of scrolling, regardless of the size of the elements and area.
  • Hidder - the element is cropped around the border of the region.
  • Visible - the element will be stretched or compressed to the limits of the area.

The display on the screen of the elements adjusts the display property and its values:

  • None - the item is not displayed.
  • Block - an element is placed in a separate paragraph.
  • Inline - insert text into the current paragraph.
  • List-item is a list item.
  • Table - block table (applies only to the <TABLE> tag).
  • Inline-table - text table (applies only to the <TABLE> tag).
  • Table-cell - table cell (applies only to <TH> and <TD> tags ).
  • Table-column - the column of the table (applies only to the <COL> tag).
  • Table-row - the row of the table (applies only to the <TABLE> tag).
  • Table-caption - block table (applies only to the <CAPTION> tag).
  • Table-row-group - a group of table rows (applies only to the <TBODY> tag).
  • Table-column-group - column table group (applies only to the <COLGROUP> tag).
  • Table-footer-group - a group of table subheadings (applies only to the <THEAD> tag).
  • Table-header-group - group of table headers (applies only to the <THEAD> tag).

Through styles, you can wrap around elements. This is done using the float property, where the value left indicates flow from the left side, and right to the right. Similarly, the clear property (selecting the side of the element that can not be touched with the previous element) is applied. Example: IMG {clear: left} .

The task

Based on the above material, create a set of styles for the tables . At the same time, to begin, dial the code manually , so remember the name of the properties and their values. Then you can use your knowledge in HTML-editors , where there are built-in tools for compiling cascading sheets of CSS styles.