Лінійні розміри блоку
Лінійні розміри блоку задаються двома параметрами: шириною (width) і висотою (height) блоку. У браузерах ширина і висота блоку інтерпретується по-різному.
У Netscape Navigator ширина і висота блоку - параметри, що рекомендуються. Якщо текст виходить за ці обмеження, то блок збільшується до необхідних розмірів, а якщо тексту немає взагалі, то блок стискується до маленького квадрата:
<P STYLE="width:200px;height:100px;background-color:black;color:white;">
...
</P>
Наведеного в прикладі опису досить для одержання результату, але в Netscape Navigator для такого блоку потрібно застосувати деякі додаткові атрибути:
<P STYLE="width:200px;height:100px;background-color:black;
color:white;border-width:1px;border-color:white;">
<SPAN STYLE="color:white;">
...
</SPAN>
</P>
Без границі блок не буде залитий чорним кольором, а без span текст буде відображатися кольором даної сторінки по замовчуванні.
Керування видимістю
Одним з найбільш цікавих атрибутів CSS-P є visibility. Він дозволяє "з’являти" або заховати інформацію на HTML-сторінці. Наприклад, сторінка містить набір кадрів, які можна перегортати. Для цього просто потрібно натискати на слово "далі" наприкінці сторінки. Перелистування реалізовано як зміна атрибуту visibility у JavaScript-функції:
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list", current).visibility="hidden";
window.document.all.item("list", next).visibility="visible";
current=next; }
Послідовність "list" - це значення атрибута ID розділу. Виклик функції при цьому поміщений у гіпертекстове посилання зі схемою URL "javascript":
<A HREF="javascript:change();void(0);">
далі...
</A>
На прикладі попередніх фрагментів ми розглянули програмування visibility, але ні словом не згадали про те, як даний атрибут записується в CSS. Тут ми наводимо опис невидимого розділу:
<DIV ID=test
STYLE="position:absolute;top:230px;left:55px;width:550px; visibility:hidden;">
...
</DIV>
При програмуванні атрибуту visibility варто взяти до уваги тип браузера. Дана сторінка написана для Microsoft Internet Explorer. Це випливає і з програмного коду, що підтримує об'єктну модель документа DHTML, і з використання атрибута ID у розділу.
Порядок накладення й область видимості
Абсолютне і відносне позиціонування блоків дозволяє додати сторінці третій вимір. Координати блоку, а точніше, лівого верхнього кута прямокутника блоку, і його лінійні розміри визначають місце розташування блоку на площині. Оскільки блок не є абстрактною точкою, прямокутники блоків перекриваються. Причому у визначеному порядку, що дозволяє говорити про їхнє розміщення в просторі. Порядок накладення (перекриття) блоків визначається атрибутом z-index.
Узагалі, при позиціонуванні блоків і їхньому накладенні один на одного виникають видимі і невидимі області блоків. CSS дозволяє керувати видимістю прямокутної частини блоку. За це в специфікації CSS-P відповідає атрибут clip.
Порядок накладення блоков. z-index
Якщо бути більш точним, то блоки - це прямокутні картки, що лежать на поверхні, перекриваючи один одного. Відстань між ними задати не можна, тобто повноцінного третього виміру немає:
Порядок
накладення блоков. z-index
Порядок перекриття блоків (шарів, у термінах Netscape) визначається атрибутом z-index. Чим більше значення z-index, тим ближче до спостерігача знаходиться шар:
Порядок
накладення блоков. z-index
Як ми бачимо, z-index може приймати і від’ємні значення.
При роботі з цим атрибутом варто мати на увазі, що Netscape Navigator і Internet Explorer застосовують різні моделі опису "шарування". У Internet Explorer це просто числовий параметр, що закріплений за блоком і не впливає на значення даного параметра в інших блоків. У Netscape Navigator зміна параметра z-index одного блоку впливає на значення цього параметра в інших блоків. Вони, немов картки на столі, перекладаються й одержують нові номери.
Область видимості блоку. clip
Зовсім необов'язково показувати весь блок цілком. Можна показати лише частина блоку. Керується таке відображення параметром clip опису CSS:
<DIV STYLE="position:absolute;top:0;left:0;width:300;height:50;
clip:rect(0,100,20,0);">
...
</DIV>
При вирізанні області видимості в Internet Explorer варто враховувати, що працює clip лише при абсолютному позиціонуванні. У Netscape Navigator підтримується як абсолютне позиціонування, так і відносне.