Позиціонування та візуалізація елементів сторінок
Позиціонування та візуалізація елементів сторінок
Стилі включають в себе спосіб установки елемента методом позиціонування. Даний метод заснований на завданні конкретних координат для кожного елемента. У каскадних аркушах стилів позиціонування описаний властивістю 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.
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.