Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 73 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Например, страница содержит набор кадров, которые можно перелистывать. Для этого просто нужно нажимать на сло-
во "далее" в конце страницы.
Перелистывание реализовано как изменение атрибута 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>
Данный атрибут записывается в CSS следующим образом:
<DIV STYLE="position:absolute; top:230px;left:55px;width:550px; visibility:hidden;">...</DIV>
При программировании атрибута visibility следует принимать в расчет тип браузера.
3.13.4. Порядок наложения и область видимости
Абсолютное и относительное позиционирование блоков позволяет придать странице третье измерение. Координаты блока, а
точнее левого верхнего угла прямоугольника блока, и его линейные размеры определяют местоположение блока на плоскости.
Поскольку блок не является абстрактной точкой, прямоугольники блоков перекрываются, причем в определенном порядке, что
позволяет говорить об их размещении в пространстве. Порядок наложения (перекрытия) блоков определяется атрибутом z-index.
Вообще, при позиционировании блоков и их наложении друг на друга возникают видимые и невидимые области бло-
ков. CSS позволяет управлять видимостью прямоугольной части блока. За это в спецификации CSS-P отвечает атрибут clip.
Если быть более точным, то блоки – это прямоугольные карточки, которые лежат на поверхности, перекрывая друг дру-
га. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет.
Порядок перекрытия блоков (или слоев) определяется атрибутом z-index (рис. 64). Чем больше значение z-index, тем
ближе к наблюдателю находится слой.
Рис. 64
Как мы видим, z-index может принимать и отрицательные значения.
При работе с этим атрибутом следует иметь в виду, что Netscape Navigator и Internet Explorer применяют разные модели
описания наложения. В Internet Explorer это просто числовой параметр, который закреплен за блоком и не влияет на значе-
ния данного параметра у других блоков. В Netscape Navigator изменение параметра z-index одного блока влияет на значения
этого параметра у других блоков. Они, словно карточки на столе, перекладываются и получают новые номера.
Совершенно необязательно показывать весь блок целиком. Можно показать только часть блока. Управляется такое ото-
бражение параметром 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 поддерживается как абсолютное позиционирование, так и относительное.
Контрольные вопросы
1. Назовите основные компоненты страницы.
2. Что позволяет определить каскадные таблицы стилей?
3. Назовите способы применения CSS.
4. Каким образом происходит переопределение стиля внутри элемента разметки?

Страницы