Блоки – прямокутні області, які використовуються в CSS для формування і відображення документів. Це спрощено, дуже сильно спрощено, але на першому етапі цілком може і вистачити.
З появою нового Netscape можна забути всі шари і зайнятися впритул блоками.
Якщо ви знайомі з CSS, то знаєте як описуються стилі й що для цього потрібно. Тегу DIV ми теж можемо поставити деякі необхідні для нас параметри. Прописати їх можна як у самому тегу, так і в описі стилю сторінки або зовнішньому файлі css.
<DIV ID="bb" STYLE="опис стилю"> Вміст тега </DIV>
або
<STYLE TYPE="text/css"> <!-- #bb --> </STYLE>
Зверніть увагу – блоку присвоюється своє індивідуальне ім’я – ID = "bb" і #bb.
Тепер розглянемо, які властивості можна призначити нашому блоку.
position – «relative» і «absolute«. У першому випадку шар записується в потік, у другому – виділяється з нього. Практично це виглядає так: при «relative» наш шар знаходиться там, де ми його прописали, наприклад, в комірці таблиці й може використовуватися як простий текстовий блок (призначений за замовчуванням і в багатьох редакторах як текстовий блок і використовується). Це нас не особливо займає. У другому випадку – «absolute» – шар поміщається над площиною листа і позиціонується відносно верхнього лівого кута екрану. Якщо точніше, то позиціонування в даному варіанті не впливає на всі наступні блоки, але може впливати на дочірні елементи. У цьому випадку можна розмістити шар як над текстом, так і під ним. Все залежить від заданих параметрів.
Позиціонування докладніше
- Нормальний потік. У CSS2 модель нормального потоку включає форматування блоку структурного рівня, строкове форматування строкових блоків, відносне позиціонування структурних чи строкових блоків, а також позиціонування компактних й ініціальних блоків.
- Переміщувані об’єкти. Відповідно до цієї моделі блок спочатку розміщується відповідно до нормального потоку, а потім вилучається з нього і переміщується максимально вліво або вправо наскільки це можливо. Короткий вміст може розташовуватися по сторонах переміщуваного елемента.
- Абсолютне позиціонування. У моделі абсолютного позиціонування блок повністю видаляється з нормального потоку (і не впливає на наступні сестринські елементи), а потім йому призначається положення відносно контейнера.
- static
- Даний блок є звичайним блоком, позиціонується відповідно з нормальним потоком. Властивості ‘
left‘ і ‘top‘ не застосовуються. - relative
- Положення блоку розраховується відповідно до нормального потоку (воно називається нормальним становищем). Потім блок зміщується відносно свого нормального стану. Коли для розташування блоку B використовується модель відносного позиціонування, тоді положення наступного блоку розраховується так, як ніби блок B не був зміщений.
- absolute
- Положення блоку (можливо і розмір) вказується за допомогою властивостей ‘
left‘, ‘right‘, ‘top‘ і ‘bottom‘. Вони вказують величину зміщення відносно контейнера блоку. Блоки, які абсолютно позиціонуються, вилучаються з нормального потоку. Це означає, що вони не впливають на розміщення наступних сестринських елементів. Слід зауважити, що поля блоків, які абсолютно позиціонуються, не перекриваються ні з якими іншими полями. - fixed
- Положення блоку розраховується відповідно до моделі абсолютного позиціонування, а потім він фіксується відносно деякого об’єкту. При використанні пристроїв без розбивки блок фіксується відносно області перегляду (і не переміщається при прокручуванні).
Опис блоків
- left – при абсолютному позиціонуванні задає відстань від лівого краю екрана.
- top – при абсолютному позиціонуванні задає відстань від верхнього краю екрана.
- width – ширина
- height – висота
- visibility – видимість шару. «
visible» – видимий, «hidden» – невидимий. За замовчуванням всі шари видимі. - z-index – положення шару відносно площини аркуша. Шар з індексом «3″ буде поміщений над шаром з індексом «2″. Можна задати і негативний індекс, тоді шар буде поміщений під таблиці з текстом. При негативному значенні шар розташовується під площиною сторінки, але над фоном. Дуже цікава властивість, особливо якщо її використовувати разом з рухом об’єкта. Виходить ефект рухомого або змінного фону. При завданні різних позитивних значень для різних верств, ми можемо розміщувати шари один над одним – як у Фотошопі.
- background-color – фоновий колір шару. Заливка, як у таблиць.
- background-image – фоновий малюнок, як у таблиці.
<STYLE TYPE="text/css"> <!-- #bb {position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; visiblity: visible; z-index: 2; background-color:#FF0000; background-image:URL(filename.gif);} --> </STYLE>
В описі у нас шар, що знаходиться в 50 пікселах від лівого краю, в 100 пікселах від верхнього і шириною та висотою в 200 і 100 пікселів, шар бачимо, зет-індекс 2, і має фоновий колір і малюнок.
Переміщуваний об’єкт – це блок, який зміщується за рядком у ліву або праву сторону. Найцікавішою властивістю переміщуваного об’єкта є те, що вміст може пересуватися уздовж однієї з його сторін (або не робити цього, якщо існує заборона, яка встановлена властивістю ‘clear‘). Вміст може пересуватися уздовж правого боку лівостороннього переміщуваного блоку і вздовж лівого боку правостороннього переміщуваного блоку.
приклад:
#bb {
float: left;
margin-left: 10;
}
У даному прикладі ми отримуємо блок, розташований на 10 пікселів правіше лівого краю.
Даний опис відноситься до CSS2, так що не всі браузери розуміють подібну схему, але п’яті версії Explorer, Netscape і Opera все відображають нормально.
Коротко – все. Все інше буде приводитись по мірі необхідності.
***
Це переклад статті.