Выпуск №12. Управление видимостью элементов в CSS

Дата публикации: 2009-07-15

управление над видимостью объекта

Доброго времени суток, уважаемые подписчики!

На связи Андрей.

Этот выпуск рассылки хотелось бы посвятить управлению видимости элементов в CSS.

Но прежде даю Вам ссылку на видео-версию данного урока:

В html существуют возможность делать объект видимым или невидимым, причем есть различные варианты, и они по-разному отображают содержимое.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, начнем.

Представим ситуацию: нам нужно в блок размером 200 на 300 пикселей вместить достаточно большой фрагмент текста (в принципе это может быть что угодно).

Если мы зададим блоку с помощью стилей ширину равную 200 и высоту равную 300 пикселей, то по высоте он растянется на столько, сколько будет содержимого в блоке. Но нам нужно строго 300 пикселей по высоте! В этом случае делаем следующее:

Для нашего блока задаем свойство overflow со значением scroll. Блок становится с нужными нам размерами, все содержимое поместилось в нем, и появились полосы прокрутки.

Значения свойства overflow приведены ниже:

overflow – управление размерами объекта, если его содержимое не может быть показано целиком.

Значения:

auto – определяется браузером.

visible – размер растягивается до такой степени, что бы все содержимое было видимым.

hidden – то, что выходит за границы элемента просто не отображается.

scroll – все содержимое отображается, и появляются полосы прокрутки.

Для нашего конкретного случая пример:

<style type="text/css">
#st1{
overflow: scroll;
width:200px;
height:300px;
}
</style>
<div id="st1"> Достаточно большой фрагмент текста </div>

#st1{

overflow: scroll;

width:200px;

height:300px;

}

</style>

<div id="st1"> Достаточно большой фрагмент текста </div>

Есть свойство, которое позволяет управлять видимостью содержимого элемента.

visibility — управляет в CSS, видимостью содержимого элемента.

Значения:

Visible – содержимое отображается.

hidden — содержимое не отображается.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Пример:

<h2 style="visibility:hidden;">содержимое этого заголовка не отобразится</h2>

1	<h2 style="visibility:hidden;">содержимое этого заголовка не отобразится</h2>

Следующее свойство, которое позволяет управлять видимостью блока – это display.

display — определяет, как будет отображаться элемент

Значения:

none — элемент не отображается

block - разбивает строку до и после элемента (т.е. элемент не может находится на одной линии с другими элементами)

inline - не разбивает строку

Как этим свойством пользоваться?

Допустим у нас идет текст, среди этого текста есть тэг <strong> или это может быть ссылка, и нам нужно, что бы содержимое этого тэга или ссылки отображались на отдельной строке, то для них мы зададим свойство display cо значением <strong>block. И наоборот, если нужно, допустим, чтобы тег <h2> был не на отдельной сроке, а в той же что и текст, то ему задаем свойство display cо значением inline.

Примеры:

<h2 style="display: inline;">будет на одной строке с текстом </h2>
<strong style="display:block;">отобразиться на отдельной строке</strong>

1 2	<h2 style="display: inline;">будет на одной строке с текстом </h2> <strong style="display:block;">отобразиться на отдельной строке</strong>

Особого внимания заслуживает значение none. Если мы зададим какому-либо элементу, свойство display со значением none, то этот элемент не отобразиться. Причем, в отличие от свойства visibility со значением hidden, этот элемент не отобразится полностью (свойства visibility со значением hidden не отобразит содержимое элемента, а сам элемент будет занимать свое место на странице).

Пример:

<h2 style="display: none;">элемент не отобразится на странице</h2>

1	<h2 style="display: none;">элемент не отобразится на странице</h2>

Чем хочу завершить данный выпуск?

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

Идея здесь заключается в том, что мы скриптом меняем значения none на display при наведении курсора мыши на ссылку.

О таких меню будет подробно рассказано на диске, который уже совсем скоро выйдет в свет.

Повторная ссылка на видео-версию урока:

Видео версия 12 урока

На этом, выпуск посвящённый управлению видимости в CSS, завершаю.

До скорой встречи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки: управление над видимостью объекта

Выпуск №12. Управление видимостью элементов в CSS

PSD to HTML

Похожие статьи:

Комментарии Вконтакте:

Комментарии (16)

Обучающие материалы

Мы в соц. сетях

Связь

Информация