Атрибут visibility позволяет полностью скрыть элемент документа. С помощью атрибутов overflow и clip можно отобразить только часть элемента. Атрибут over_ flow определяет, что происходит, когда содержимое документа превышает раз_ мер, указанный для элемента (например, в атрибутах стиля width и height). Далее перечислены допустимые значения этого атрибута и указано их назначение:
visible
Содержимое может выходить за пределы и по необходимости прорисовывать_ ся вне прямоугольника элемента. Это значение по умолчанию.
hidden
Содержимое, вышедшее за пределы элемента, обрезается и скрывается, так что никакая часть содержимого никогда не прорисовывается вне области, оп_ ределяемой атрибутами размера и позиционирования.
scroll
Область элемента имеет постоянные горизонтальную и вертикальную полосы прокрутки. Если содержимое превышает размеры области, полосы прокрутки позволяют увидеть остальное содержимое. Это значение учитывается, только когда документ отображается на экране компьютера; когда документ выво_ дится, например, на бумагу, полосы прокрутки, очевидно, не имеют смысла.
384 Глава 16. CSS и DHTML
auto
Полосы прокрутки отображаются не постоянно, а только когда содержимое превышает размер элемента.
В то время как свойство overflow определяет, что должно происходить, если со_ держимое элемента превысит область элемента, то с помощью свойства clip можно точно указать, какая часть элемента должна отображаться независимо от того, выходит ли содержимое за пределы элемента. Этот атрибут особенно поле_ зен для создания DHTML_эффектов, когда элемент открывается или проявляет_ ся постепенно.
Значение свойства clip задает область отсечения элемента. В CSS2 области отсе_ чения прямоугольные, но синтаксис атрибута clip обеспечивает возможность в следующих версиях стандарта задавать области отсечения, отличные от пря_ моугольных. Синтаксис атрибута clip:
rect(top right bottom left)
Значения top, right, bottom и left задают границы прямоугольника отсечения от_ носительно левого верхнего угла области элемента. Чтобы, например, вывести только часть элемента в области 100Ч100 пикселов, можно задать для этого эле_ мента следующий атрибут style:
style="clip: rect(0px 100px 100px 0px);"
Обратите внимание, что четыре значения в скобках представляют собой значе_ ния длины и должны включать спецификацию единиц измерения, например px для пикселов. Проценты здесь не допускаются. Значения могут быть отрица_ тельными – это будет означать, что область отсечения выходит за переделы об_ ласти, определенной для элемента. Для любого из четырех значений ключевое слово auto указывает, что этот край области отсечения совпадает с соответствую_ щим краем самого элемента. Например, можно вывести только левые 100 пиксе_ лов элемента с помощью следующего атрибута style:
style="clip: rect(auto 100px auto auto);"
Обратите внимание, что между значениями нет запятых, и края области отсече_ ния задаются по часовой стрелке, начиная с верхнего края.
Пример: перекрытие полупрозрачных окон
Данный раздел завершается примером, который демонстрирует порядок работы с большинством обсуждавшихся CSS_атрибутов. В примере 16.3 CSS_стили ис_ пользуются для создания визуального эффекта наложения полупрозрачного ок_ на на другое окно, обладающее полосой прокрутки. Результат приводится на рис. 16.4. Пример не содержит JavaScript_код и в нем нет никаких обработчиков событий, поэтому возможность взаимодействия с окнами отсутствует (иначе как через полосу прокрутки), но это очень интересная демонстрация эффектов, кото_ рые можно получить средствами CSS.
Пример 16.3. Отображение окон с использованием CSS'стилей
<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.0//EN"> <head>
<style type="text/css">
16.2. CSS для DHTML
Рис. 16.4. Окна, созданные с помощью CSS
/**
* Эта таблица CSS_стилей определяет три правила стилей, которые служат в теле документа
* для создания визуального эффекта "окна". В правилах использованы атрибуты
* позиционирования для установки общего размера окна и расположения его компонентов.
* Изменение размеров окна требует аккуратного изменения атрибутов позиционирования
* во всех трех правилах.
**/
div.window {
/*
Определяет размер и границу окна */
position: absolute;
/*
Положение задается в другом месте */
width: 300px; height: 200px;
/*
Размер окна без учета границ */
border: 3px outset gray;
/*
Обратите внимание на 3D_эффект рамки */
}
div.titlebar {
/*
Задает положение, размер и стиль заголовка */
position: absolute;
/*
Это – позиционируемый элемент */
top: 0px; height: 18px;
/*
Высота заголовка 18px + отступ и рамка */
width: 290px;
/*
290 + 5px отступы слева и справа = 300 */
background_color: #aaa;
/*
Цвет заголовка */
border_bottom: groove gray 2px;
/* Заголовок имеет границу только снизу */
padding: 3px 5px 2px 5px;
/*
Значения по часовой стрелке:
/*
сверху, справа, снизу, слева */
font: bold 11pt sans_serif;
/*
Шрифт заголовка */
}
div.content { /* Задает размер, положение и прокрутку содержимого окна */
position: absolute;
/*
Это – позиционируемый элемент */
top: 25px;
/*
18px заголовок+2px рамка+3px+2px отступ */
height: 165px;
/*
200px всего _ 25px заголовок _ 10px отступ */
width: 290px;
/*
300px ширина _ 10px отступ */
padding: 5px;
/*
Отступы со всех четырех сторон */
overflow: auto;
/*
Разрешить появление полос прокрутки */
/*
в случае необходимости */
background_color: #ffffff;/*
По
умолчанию фон белый */
Глава 16. CSS и DHTML
}
div.translucent {
/* Этот класс делает окно частично прозрачным */
opacity: .75;
/*
Стандартный стиль прозрачности */
_moz_opacity: .75;
/*
Прозрачность для ранних версий Mozilla */
filter: alpha(opacity=75);/* Прозрачность для IE */
}
</style>
</head>
<body>
<!__ Порядок определения окна: элемент div "окна" с заголовком и элемент div __> <!__ с содержимым, вложенный между ними. Обратите внимание, как задается __>
<!__ позиционирование с помощью атрибута style, дополняющего стили из таблицы стилей __> <div class="window" style="left: 10px; top: 10px; z_index: 10;">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!__ Множество строк для __> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!__ демонстрации прокрутки __> </div>
</div>
<!__ Это еще одно окно с другими позицией, цветом и шрифтом __> <div class="window" style="left: 75px; top: 110px; z_index: 20;"> <div class="titlebar">Еще одно окно</div>
Это еще одно окно. Значение атрибута <tt>z_index</tt> этого окна заставляет его расположиться поверх другого. За счет CSS_стилей содержимое этого окна
будет выглядеть полупрозрачным в броузерах, поддерживающих такую возможность. </div>
</div>
</body>
Основной недостаток этого примера в том, что таблица стилей задает фиксиро_ ванный размер всех окон. Так как заголовок и содержимое окна должны точно позиционироваться внутри окна, изменение размера окна требует изменения зна_ чений различных атрибутов позиционирования во всех трех правилах, опреде_ ленных в таблице стилей. Это трудно сделать в статическом HTML_документе, но это будет не так трудно, если мы сможем установить все необходимые атрибуты при помощи сценария. Эта возможность рассматривается в следующем разделе.
