як шари, організувавши управління ними за допомогою їх властивостей.
Застосування шарів дозволяє створити на сторінці деяку подобу тривимірного простору, хоча насправді це лише плоскі шари з заданим порядком перекриття, як в колоді карт. За допомогою таблиць стилів CSS ми можемо задавати різні властивості верствам і позиціонувати їх. Це відкриває перед web-майстер масу можливостей, дозволяє створювати сторінки більш схожими на друкарські і дозволяє, в більшості випадків, відмовитися від небажаного використання таблиць для позиціонування вмісту.
- абсолютне позиціонування
- горизонтальне позиціонування
- вертикальне позиціонування
- Завдання висоти шару
- Завдання ширини шару
- Позиціонування в глибину
- Ви можете налаштовувати видимість
- Поняття прозорості шару
- накладення шарів
- Приклади роботи з шарами
абсолютне позиціонування
Як і будь-яке інше властивість, властивість Position задається за допомогою таблиць стилів CSS.
Синтаксис: absolute>
Воно може набувати таких значень:
- position: absolute означає, що позиціонування шару буде відбуватися щодо лівого верхнього кута сторінки.
- position: relative означає, що позиціонування шару буде відбуватися щодо того місця, де в початковому тексті він знаходиться, тобто щодо попереднього елемента.
- position: static означає, що позиціонування шару буде відбуватися щодо фону.
горизонтальне позиціонування
Позиціонування по горизонталі задається властивістю left. шляхом завдання відступу по осі X лівого верхнього кута шару щодо точки відліку, яка визначається властивістю Position
Синтаксис: значення>
задається:
вертикальне позиціонування
Позиціонування по вертикалі задається властивістю top. атрибут дозволяє задати Y -коордінату лівого верхнього кута шару щодо точки відліку, яка визначається властивістю Position
Синтаксис: значення>
задається:
Завдання висоти шару
height. це властивість дозволяє задати висоту шару у вікні браузера:
Синтаксис: значення>
задається:
Завдання ширини шару
width. це властивість дозволяє задати ширину шару у вікні браузера:
Синтаксис: значення>
задається:
Позиціонування в глибину
z-index. це властивість дозволяє задати порядок перекриття шарами один одного, при цьому шар з більш високим індексом буде розташовуватися над шаром з низьким індексом. У разі, якщо атрибут не заданий спеціально, браузер привласнює вищий індекс шару, який у вихідному коді описаний пізніше:
Синтаксис: 2>
Ви можете налаштовувати видимість
visibility. це властивість дозволяє задати видимість шару, присвоївши йому одне зі значень:
Синтаксис: inherit>
display. це властивість дозволяє задати видимість шару, візуально відрізняється від visibility тим, що зрушує попередній і наступний шари разом:
Синтаксис: none>
При уявній схожості властивостей шару visibility і display працюють вони по різному.
Приклад: | прибрати | поставити | або | приховати | показати | шар
overflow. це властивість дозволяє задати, як виглядає текст, переповнені кордону шару, присвоївши йому одне зі значень:
Синтаксис: none>
Поняття прозорості шару
Оскільки шар насправді являє собою блок вмісту, укладений в тегах або . то за допомогою таблиць стилів CSS можна відформатувати його будь-яким з доступних способів: накласти фільтр, задати фоновий колір чи малюнок, задати стилі включеним тегами. Тоді, якщо шар не матиме фоновий колір чи малюнок ми зможемо побачити крізь нього вміст того шару, над яким він позиціонується, подібного можна досягти, вставивши малюнок .gif. у якого один з кольорів прозорий. Використовуючи дане властивість легко можна домогтися цікавих ефектів, недоступних іншими способами, що в цілому покращує зовнішній вигляд і естетичне сприйняття вмісту.
накладення шарів
Одне з найцікавіших способів застосувань властивостей шару, є одночасне оперування позиціонуванням відразу для двох шарів і більш. Задавши в кожному шарі властивостями Position значення absolute і варіюючи значення властивостей left. top. height. width і z-index ми отримаємо цікавий ефект накладення шарів один на одного, часткового або повного перекриття вмісту.
Приклади роботи з шарами
Накладення прозорого шару, ефект тіні
Позиціонування без таблиці
Декоративне оформлення сторінки
HTML
Підручник
даний підручник HTML і CSS допоможе починаючому користувачеві, крок за кроком, від початку і до кінця створити свою власну сторінку в інтернеті, WEB-вузол або їх локальну версію на CD, а також може послужити on-line довідником для більш просунутих користувачів.
Не варто чекати від сайту абсолютно вичерпного обсягу інформації, проте
він буде регулярно оновлюватися і поповнюватися матеріалами.