Навігація
Головна
 
Головна arrow Інформатика arrow Проектування і розробка web-додатків
< Попередня   ЗМІСТ   Наступна >

ВИКОРИСТАННЯ КОНТЕЙНЕРІВ ДЛЯ ЗАВДАННЯ СТИЛІВ ВІДОБРАЖЕННЯ

Елементи-контейнери дозволяють застосовувати CSS-правила до вмісту HTML-сторінки. Приклад такого використання каскадної таблиці стилів показаний нижче:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"

"W3.org/TR/xhtml1/DTD/xhtml 1 -transitional.dtd">

<Html>

<Head>

<Style style = "text / css">

body {font-family: Verdana; font-size: 9pt; text-align: right;}

div {font-family: Georgia;}

.important {background-color: #ffffde; border: thin black ridge;}

</ Style> </ head>

<Body> Тут починається текст тіла сторінки.

<Div> A тут йде текст div-контейнера. Цей текст пишеться іншим шрифтом. </ Div> Текст тіла сторінки триває <span> в span-контейнері </ span> і тут закінчується.

<Div class = "important ''> Це дуже важлива інформація в іншому div- контейнері! </ Div> А тут текст тіла сторінки закінчується.

</ Body>

</ Html>

Браузер відображає дану сторінку так, як показано на рис. 1.8.

Відображення HTML-сторінки з використанням описаної в ній таблиці стилів

Мал. 1.8. Відображення HTML-сторінки з використанням описаної в ній таблиці стилів

ПОЗИЦІОНУВАННЯ ЕЛЕМЕНТІВ СТОРІНКИ

Коли браузер отримує дані від сервера, він виводить їх на сторінку в тому порядку, в якому вони записані. Цей порядок називається нормальним потоком, т. Е. Браузер отримує якийсь елемент, обчислює його розміри і має в своєму розпорядженні слідом за попереднім елементом. При обробці даних з нормального потоку браузер виводить дані рядок за рядком, додаючи новий рядок при появі структурного блоку. У зв'язку з цим, зокрема, за допомогою стандартного HTML- коду можна організувати висновок, наприклад, кількох колонок тексту. Спочатку для завдання взаємного розташування частин web-сторінки на екрані використовувалися таблиці (елементи table), що мають нульову товщину кордону (т. Е. Таблиці на екрані не з'являлися). В осередках таблиці розміщуються розділи HTML-сторінки.

Однак за допомогою каскадних таблиць стилів CSS стало можливим задавати не тільки оформлення елементів HTML-документа, але і взаємне розташування (позиціювання) окремих його частин (блоків). Позиціонування задається за допомогою властивості position. Є два способи позиціонування блоку в нормальному потоці: relative і static. Спосіб static використовується за умовчанням і виконує стандартне форматування, залишаючи блок в нормальному потоці. Спосіб relative дозволяє зрушити становище блоку щодо того положення, яке він займав би в нормальному потоці. Наприклад, якщо задано position: relative; left: 20рх; color: green; то положення лівого краю блоку зсувається на 20 пікселів щодо попереднього елемента в нормальному потоці, в результаті чого сам блок зміщується вправо. Якщо вказати негативний зсув, то блок зрушиться вліво. Аналогічно можна зрушувати блок по вертикалі - для цього використовується властивість top.

Крім цього, є інший спосіб позиціонування - абсолютне позиціонування, що дозволяє точно вказати розташування блоку на сторінці. У цьому випадку блок вилучається з нормального потоку розміщення і поміщається браузером в заданий місце екрана. Використовувати абсолютне позиціонування досить зручно в строгих сайтах з фіксованим розміром сторінки. Найбільш типовою є ситуація, коли сторінка розбивається на кілька абсолютно позиціонуються блоків, усередині яких використовується відносне позиціонування (а т. К. Вкладені блоки позиціонуються щодо батька, то структура сторінки зберігається).

Ще одним способом позиціонування є "плаваюче позиціонування": float. Плаваючі блоки ведуть себе дуже схоже на картинки із зазначеним тегом align: вони притискаються до зазначеного краю контейнера, змушуючи "нормальний потік" їх обтікати. Такі блоки досить зручно використовувати для організації так званої гумової верстки, коли задані кілька плаваючих блоків, які розташовуються один за іншим по горизонталі (якщо їх сумарна ширина нс перевищує ширини сторінки). Для того щоб змусити відображати блок нижче плаваючого блоку, потрібно використовувати атрибут clear зі значенням both.

При використанні плаваючих блоків треба обов'язково ставити їх ширину (інакше вони будуть розтягуватися до ширини контейнера) і, крім того, бажано визначити поля для елемента body, інакше в деяких браузерах можуть з'являтися великі поля навколо плаваючого блоку.

 
Якщо Ви помітили помилку в тексті позначте слово та натисніть Shift + Enter
< Попередня   ЗМІСТ   Наступна >
 
Дисципліни
Агропромисловість
Аудит та Бухоблік
Банківська справа
БЖД
Географія
Документознавство
Екологія
Економіка
Етика та Естетика
Журналістика
Інвестування
Інформатика
Історія
Культурологія
Література
Логіка
Логістика
Маркетинг
Медицина
Нерухомість
Менеджмент
Педагогіка
Політологія
Політекономія
Право
Природознавство
Психологія
Релігієзнавство
Риторика
Соціологія
Статистика
Техніка
Страхова справа
Товарознавство
Туризм
Філософія
Фінанси
Пошук