2.6.2 Управление видимостью
Одним из наиболее интересных атрибутов CSS-P является visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице. Данное свойство может использоваться при динамическом отображении элементов посредством JavaScript-сценариев. В примере 2.11 и на рис. 2.11 показано, как можно скрывать или выводить на экран информацию. При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Microsoft Internet Explorer.
|
Пример 2.11. Изменение видимости слоя |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Управление видимостью</TITLE> </HEAD> <BODY> <Р id=ht style="Z-INDEX:2; CОLOR:black; TEXT-ALIGN:cеnter; BACKGROUND-COLOR:#d8d8d8; PОSITION:relative; TOP:10px; LEFT:0px; VISIBILITY:hidden;"> Этот текст был невидим. <P style="COLOR:black; TEXT-ALIGN:center"> <А onclick="window.document.all.ht.style.visibility='visible';" href="javascript:void(0);">Проявить текст</A> <A onclick="window.document.all.ht.style.visibility='hidden';" href="javascript:void(0);">Скрыть текст</А> </BODY> </HTML>
|
Абсолютное и относительное позиционирование блоков позволяет придать странице третье измерение. Координаты блока, а точнее, левого верхнего угла прямоугольника блока, и его линейные размеры определяют местоположение блока на плоскости. Поскольку блок не является абстрактной точкой, прямоугольники блоков перекрываются. Причем в определенном порядке, что позволяет говорить об их размещении в пространстве. Порядок наложения (перекрытия) блоков (слоев, в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой (рис.2.12). Атрибут z-index может принимать и отрицательные значения.
При работе с этим атрибутом следует иметь в виду, что Netscape Navigator и Internet Explorer применяют разные модели описания "слойки". В Internet Explorer это просто числовой параметр, который закреплен за блоком и не влияет на значения данного параметра у других блоков. В Netscape Navigator изменение параметра z-index одного блока влиет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и получают новые номера.
В примере 2.12 и на рис. 2.13 показано, как можно посредством JavaScript-сценария изменять порядок наложения слоев.
|
Пример 2.12. Изменение порядка наложения слоев |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Изменение порядка слоев</TITLE> </HEAD> <BODY> <Р id=first style="FONT-SIZE:15px; WIDTH:300px; CОLOR:whitе; BACKGROUND-COLОR:black; РОSITION:relative; TOP:10px; LEFT:10px;"> Первый слой, на который "наедем" другим слоем. </P> <DIV id=second style="PADDING:10px; FONT-SIZE:15px; LEFT:100px; WIDTH:280px; COLOR:black; POSIТION:relative; TOP:-28px; HEIGHT:21px; BACKGROUND-COLOR:#d8d8d8"> Второй слой, который "наезжает" на первый. </DIV> <SCRIРТ> window.document.all.first.style.zIndex=0; window.document.all.second.style.zIndex=1; function overlay() {if(window.document.all.first.style.zIndex<window.document.all.second.style.zIndex) {window.document.all.first.style.zIndex=1; window.document.all.second.style.zIndex=0;} else{window.document.all.first.style.zIndex=0;window.document.all.second.style.zIndex=1;}} </SCRIPT> <DIV style="COLOR:darkred; TEXT-ALIGN:center"> <A onclick="javascript:overlay();return false;" hrеf="http://www.intuit.ru/department/internet/css/5/"> Переложить слои </A> </DIV> </BODY> </HTML>
|
Задание:
-
выполнить все примеры из лабораторной работы, сохраняя каждый пример в отдельном файле;
-
проверить правильность работы каждого примера;
-
показать преподавателю на компьютере все сделанные примеры, объясняя их работу;
-
оформить отчет о проделанной работе;
-
защитить лабораторную работу, ответив на вопросы преподавателя.
Содержание отчета:
-
титульный лист;
-
цель работы;
-
задание;
-
исходные тексты;
-
результаты работы;
-
выводы по работе.
Контрольные вопросы
-
В чем назначение стилей? Приведите примеры.
-
Какие стили называются внешними?
-
Какие стили называются глобальными?
-
Какие стили называются встроенными?
-
Расставьте виды стилей в порядке их приоритета.
-
Какие свойства стилей позволяют управлять шрифтами?
-
Какие свойства стилей позволяют изменять цвет переднего плана, цвет фона и фоновые изображения для разделов текста?
-
Какие свойства стилей применяются для форматирования текста (выравнивания, оформления, разрежения и т.д.)?
-
Какие средства CSS позволяют управлять размерами, расположением и цветом блочных элементов?
-
Какие средства CSS позволяют управлять формой и изображением маркера для элементов списка?
-
Что такое абсолютное позиционирование блоков?
-
Что такое относительное позиционирование блоков?
-
Какие средства CSS позволяют управлять видимостью элементов?
-
Какие средства CSS позволяют задавать и изменять порядок наложения слоев?