На главную страницу
Форум txt.version   




Статья :: Визуальные эффекты

11  Визуальные эффекты


11.1 Переполнение и сжатие

Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например:

  • Строка не может быть разорвана, и строчный бокс оказывается шире, чем бокс блока.
  • Бокс уровня блока слишком широк для содержащего блока. Это случается, если свойство 'width' элемента имеет такое значение, которое вызывает растекание генерируемого бокса блока за пределы содержащего блока.
  • Высота элемента превосходит явно установленную высоту содержащего блока (т.е. высота содержащего блока определяется свойством 'height', а не высотой содержимого).
  • Бокс позиционирован абсолютно.
  • Бокс имеет отрицательные значения полей.

Когда возникает переполнение, свойство 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Свойство 'clip' специфицирует размер и форму сжимаемой области. Спецификация маленькой области для сжатия может вызвать сжатие другого видимого содержимого.


11.1.1 Переполнение: свойство 'overflow'

'overflow'
Значение:visible | hidden | scroll | auto | inherit
Начальное:visible
Применяется:  к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).
Значения имеют следующий смысл:

visible
Указывает, что содержимое не сжимается, т.е. может отображаться за пределами бокса блока.
hidden
Указывает, что содержимое сжимается и что механизм прокрутки не должен предоставляться для просмотра содержимого вне сжимаемой области; пользователь не получит доступа к сжатому содержимому. Размер и форма сжимаемой области специфицируются свойством 'clip'.
scroll
Означает, что содержимое сжимается и что если ПА использует механизм прокрутки, видимый на экране (такой как полоса прокрутки или паннер), этот механизм должен отображаться для бокса, независимо от того, сжимается его содержимое или нет. Это устраняет возможные проблемы с появлением и скрытием полосы прокрутки в динамическом окружении. Если это значение специфицировано и целевой носитель - 'print' или 'projection', переполняющее содержимое должно быть напечатано.
auto
Поведение значения 'auto' зависит от ПА, но должно вызывать предоставление механизма прокрутки для переполняемых боксов.

Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.

Пример(ы):

Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Это таблица стилей, управляющая размерами и стилем генерируемых боксов:

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

Начальное значение 'overflow' - 'visible', поэтому BLOCKQUOTE может быть сформатирован без сжатия примерно так:

Rendered overflow   [D]

Установка 'overflow' в 'hidden' для элемента DIV, с другой стороны, вызывает усечение BLOCKQUOTE содержащим блоком:

Clipped overflow   [D]

Значение 'scroll' сообщит ПАгенту, что поддерживается визуальный механизм прокрутки, чтобы вывести его для обеспечения доступа пользователя к усечённому содержимому.


11.1.2 Сжатие: свойство 'clip'

Сжимаемая область определяет, какая часть выводимого содержимого элемента видна. По умолчанию сжатая область имеет тот же размер и форму, что и бокс(ы) элемента. В то же время сжимаемая область может быть модифицирована свойством 'clip'.

'clip'
Значение:<shape> | auto | inherit
Начальное:auto
Применяется:  к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'clip' применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible'.
Значения имеют следующий смысл:

auto
Сжимаемая область имеет тот же размер и размещение, что и бокс(ы) элемента.
<shape>
В CSS2 верными значениями для <shape> являются: rect (<top> <right> <bottom> <left>) где <top>, <bottom> <right>, а <left> специфицирует смещение относительно соответствующих сторон бокса.

<top>, <right>, <bottom> и <left> могут иметь или значение <length>, или 'auto'. Отрицательные значения разрешены. Значение 'auto' указывает, что данный край сжимаемой области будет тем же, что и край генерируемого бокса элемента (т.е. 'auto' означает то же, что '0'.)

Если координаты округляются до пикселных значений, необходимо следить, чтобы не осталось видимых пикселов, когда <left> + <right> равно ширине элемента (или <top> + <bottom> равно высоте элемента), и наоборот, чтобы не оставалось невидимых пикселов, когда эти значения равны 0.

Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.

Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.

Пример(ы):

Эти два правила:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

Two clipping regions   [D]

Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие.


11.2 Видимость: свойство 'visibility'

'visibility'
Значение:visible | hidden | collapse | inherit
Начальное:inherit
Применяется:  ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'visibility' специфицирует, отображаются ли боксы, генерируемые элементом. Невидимые боксы всё ещё влияют на структуру (см. свойство 'display' - 'none', чтобы полностью подавить генерацию бокса).
Значения имеют следующий смысл:

visible
Генерируемый бокс виден.
hidden
Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру.
collapse
См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, 'collapse' имеет то же значение, что и 'hidden'.

Это свойство может использоваться вместе со скриптами для создания динамических эффектов.

В следующем примере нажатие любой кнопки в форме вызывает функцию скрипта, которая делает соответствующий бокс видимым, а другой скрывается. Поскольку эти боксы имеют одинаковые размеры и позицию, эффект заключается в том, что они сменяют друг друга. (Сценарий написан на гипотетическом языке сценариев. Он может иметь или не иметь какого-либо эффекта в ПА CSS.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.jpg">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.jpg">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

Визуальные эффекты

страницы в данном разделе 
 О спецификации CSS2  Полное описание анонимного бокса блока
 Звуковые таблицы стилей  Полное описание первого примера форматирования Bach/XML
 Полное описание второго примера форматирования Bach/XML  Полное описание моделей фона
 Модель бокса  Полное описание иллюстрации областей бокса
 Полное описание примера бокса-списка, показывающего поля,заполнения и рамки  Установка значений свойств, Каскадирование и Наследование
 Полное описание примера вычисления рядав таблицы и вертикального выравнивания ячеек  Пример баннера
 Приложение B: Изменения по сравнению с CSS1  Полное описание примера сжатия областей
 Цвета и фон  Соответствие: требования и рекомендации
 Полное описание примера, иллюстрирующего скрытые внутренние рамки  Индекс дескрипторов
 Полное описание диаграммы примера дерева документа  Полное описание примера оттенения текста
 Полное описание примера зависающей заглавной буквы.  Полное описание примера пунктуации и зависающей заглавной буквы
 Полное описание примера перекрывания поплавком элементов с нормальным расположением  Полное описание примера того, как поплавки перекрывают боксы с нормальным расположением
 Полное описание примера поплавка и обтекания текста  Полное описание примера, иллюстрирующего позиционирование относительно позионированного предка
 Полное описание примера, иллюстрирующего абсолютное позиционирование  Полное описание примера, иллюстрирующего всплывание без 'clear'
 Полное описание примера всплывания с 'clear'  Полное описание примера всплывания
 Полное описание примера нормального расположения  Полное описание примера относительного позиционирования
 Полное описание примера абсолютного позиционирования относительно начального содержащего блока  Шрифты
 Полное описание примера фрэймоподобной структуры  Генерируемое содержимое, автоматическая нумерация и списки
 Приложение D: Грамматика CSS2  Каскадные Таблицы Стилей, Уровень 2
 Индекс  Полное описание поведения полей/рамок в разделённом инлайн-боксе
 CSS2 Введение  Полное описание форм шрифта italic
 Полное описание кернинга  Полное описание примера расположения заголовка слева от таблицы
 Полное описание примера маркёров inside относительно outside  Типы носителя
 Приложение С: Замечания по реализации и выполнению для шрифтов  Полное описание примера несжимаемого 'overflow'
 Полное описание примера сжимаемого 'overflow'  Полное описание примера соотношений между страничным боксом и листом (бумаги)
 Страничные носители  Полное описание изображения GUI Windows 95 с описанием шрифтов
 Полное описание иллюстрации к определению пиксела  Полное описание соотношений с пикселом выводного устройства
 Индекс свойств  Ссылки
 Приложение А: Образец таблицы стилей для HTML 4.0  Селекторы
 Синтаксис CSS2 и базовые типы данных  table-overlap-desc.html
 Полное описание таблицы расходов на путешествие  Таблицы
 Полное описание примера приоритетов модели сжимающихся рамок  Полное описание примера вычисления фона
 Полное описание примера расчёта фона ячеек  Полное описание примера рядов, разделённых горизонтальными линиями рамки
 Полное описание примера модели раздельных рамок  Полное описание примера, иллюстрирующего модель сжимающихся рамок
 Текст  Полное описание примера заголовка над таблицей
 Интерфейс пользователя  Модель визуального форматирования. Детали.
 Визуальные эффекты  Модель визуального форматирования


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста