Управление видимостью

Свойство visibility позволяет задать видимость слоя, присвоив ему одно из значений:

Синтаксис:

{visibility: inherit}

• visible - Отображает элемент как видимый.

• Hidden - Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

• Inherit - Наследует значение родителя.

Еще одно свойство по управлению видимостью display, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:

Синтаксис:

{display: none}

• inline - содержимое начинается с того места, где окончился предыдущий элемент.

• list-item - элемент выводится как блочный и добавляется маркер списка.

• none - Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

• block - происходит перенос строк в начале и в конце содержимого

Свойство overflow указывает как будет выглядеть текст, переполнивший границы слоя, присвоив ему одно из значений:

Синтаксис:

{overflow: none}

• hidden - Отображается только область внутри элемента, остальное будет скрыто.

• auto - Полосы прокрутки добавляются только при необходимости

• scroll - Всегда добавляются полосы прокрутки.

Понятие прозрачности слоя

Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок, мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован. Подобного можно достичь, вставив рисунок .gif, у которого один из цветов прозрачный. Используя данное свойство, легко можно добиться интересных эффектов, недоступных другими способами, что в целом улучшает внешний вид и эстетическое восприятие содержимого.

Блочные и строковые элементы

В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. Формально они определены в DTD (Document Type Definition) SGML-описания (Stadard Generalised Markup Language) языка HTML. Проще всего объяснить различие между блоком и строковым элементом можно на примере:

параграф - это блочный элемент разметки. выделение курсивом - это строковый элемент разметки.

Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с другом. Строковые элементы можно как вкладывать, так и пересекать (согласно DTD и практике старых версий браузеров), но последнее делать не рекомендуется.

Совершенно естественно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.

Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно. Элемент DIV нами уже был рассмотрен, еще часто называют блоком, как уже упоминалось.