Позиціонування та візуалізація елементів сторінок

Позиціонування та візуалізація елементів сторінок

Стилі включають в себе спосіб установки елемента методом позиціонування. Даний метод заснований на завданні конкретних координат для кожного елемента. У каскадних аркушах стилів позиціонування описаний властивістю position, який має наведені нижче значення:

  • absolute - початок координат лівий верхній кут.
  • retative - відносне позиціонування, де "нуль" призначається згідно HTML-коду.
  • static - місце розташування незмінно, щодо значень HTML-коду.
  • fixed - фіксація елемента на сторінці (елемент непідвладний "ліфта").

Змінити становище елемента в CSS можна і шляхом зміщення його з осі X (властивість left), по осі Y (властивість top) і осі Z (призначення шарів визначає властивість z-index). Створювати такі стилі окремо від тега не доцільно, тому що кожна позиція у елемента унікальна на сторінці. Приклад: <DIV style = "position: absolute; top: 200px; left: 160px; z-index: -1"> елемент сторінки </ DIV>.

Стилі також дозволяють додавати елементам ефекти візуалізації, тобто міняти їх вигляд і спосіб відображення на екрані. Міняти прозорість елемента покликане властивість visibility і його значення visible (елемент бачимо), hidder (елемент непомітний) і collapse (приховує текст або елементи таблиць). Код записується в такому вигляді: style = "visibility: _значеніе".

Зображення, які треба обрізати, обробляються властивістю стилю clip. Значення останнього носить назву rect йому присвоєно числа, які вказують з якого боку і скільки потрібно урізати зображення. Принцип такий:

STYLE = "clip: rect (_top_right_bottom_left), де _top і ін. - Числа в px урізання зображення з кожної зі сторін і послідовність їх незмінна.

Властивість стилю overtlow відповідає за візуалізацію елемента в заданій йому області. значення:

  • auto - поява прокрутки, якщо розмір елемента буде більше області.
  • scroll - поява прокрутки незалежно від розмірів елементів і області.
  • hidder - елемент обрізається по межі області.
  • visible - елемент буде розтягується або стискається по межах області.

Відображення на екрані елементів регулює властивість display і його значення:

  • none - елемент не відображається.
  • block - елемент поміщається в окремий абзац.
  • inline - вставка тексту в поточний абзац.
  • list-item - елемент списку.
  • table - блокова таблиця (застосовується тільки до Тегу <TABLE>).
  • inline-table - текстова таблиця (застосовується тільки до Тегу <TABLE>).
  • table-cell - осередок таблиці (застосовується тільки до тегам <TH> і <TD>).
  • table-column - стовпець таблиці (застосовується тільки до Тегу <COL>).
  • table-row - рядок таблиці (застосовується тільки до Тегу <TABLE>).
  • table-caption - блокова таблиця (застосовується тільки до Тегу <CAPTION>).
  • table-row-group - група рядків таблиці (застосовується тільки до Тегу <TBODY>).
  • table-column-group - група стовпців таблиці (застосовується тільки до Тегу <COLGROUP>).
  • table-footer-group - група підзаголовків таблиці (застосовується тільки до Тегу <THEAD>).
  • table-header-group - група заголовків таблиці (застосовується тільки до Тегу <THEAD>).

За допомогою стилів можна робити обтікання елементів. Здійснюється це за допомогою властивості float, де значення left вказує на обтікання з лівого боку, а right з правого. Аналогічно застосовується властивість clear (вибір сторони елемента, якій не можна стикатися з попередньому елементом). Приклад: IMG {clear: left}.

завдання

Спираючись на вищевикладений матеріал складіть набір стилів для таблиць. При цьому для початку набирайте код вручну, так краще запам'ятовуються назву властивостей і їх значення. Потім можете використовувати свої знання на HTML-редакторах, де є вбудовані засоби по складанню каскадних листів стилів CSS.