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

Visibility. Видимость элемента

С помощью свойства visibility определяется видимость элемента при просмотре страницы. Если этому свойству присвоено значение hidden, то элемент не виден на экране, но занимает в документе определенное место. На экране область, занимаемая таким элементом, выглядит пустой.

Свойство visibility может содержать следующие свойства:

hidden	Элемент становится невидимым, хотя первоначально отображался.
visible	Элемент виден на экране.
collapse	Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

visibility:hidden;

CLIP. Определение видимой части элемента

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

На данный момент единственно доступная форма области — прямоугольник.

Если край области нужно оставить без изменений, следует установить auto.

Форма записи для свойства clip следующая:

clip: rect(Y1, X1, Y2, X2)

! Clip работает только для абсолютно позиционированных элементов.

position:absolute;

clip: rect(40px, auto, auto, 40px);

!

Internet Explorer до версии 7.0 включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px).

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

Иногда не все содержимое элемента отображается на экране. Это происходит в том случае, когда выделяется видимая область элемента, у которой ширина и/или высота меньше, чем необходимая для элемента область, а так же когда часть элемента скрыта с помощью свойства clip. С помощью свойства overflow можно определить, каким образом будет работать браузер с этой не поместившейся на экране частью элемента.

scroll	Рядом с видимой областью элемента помещается полоса прокрутки.
hidden	Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется.
visible	Оставшаяся часть элемента отображается на экране.
auto	Полосы прокрутки добавляются только при необходимости.

position:absolute;

clip: rect(40px, auto, auto, 40px);

overflow:scroll;

OVERFLOW-Х. Управление невидимой частью по вертикали.

Управляет отображением содержания блочного элемента по горизонтали

scroll	Рядом с видимой областью элемента помещается полоса прокрутки.
hidden	Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется.
visible	Оставшаяся часть элемента отображается на экране.
auto	Полосы прокрутки добавляются только при необходимости.

position:absolute;

clip: rect(40px, auto, auto, 40px);

overflow-x:scroll;

OVERFLOW-Y. Управление невидимой частью по горизонтали.

Управляет отображением содержания блочного элемента по вертикали

scroll	Рядом с видимой областью элемента помещается полоса прокрутки.
hidden	Оставшаяся часть элемента скрывается, а полоса прокрутки не появляется.
visible	Оставшаяся часть элемента отображается на экране.
auto	Полосы прокрутки добавляются только при необходимости.

position:absolute;

clip: rect(40px, auto, auto, 40px);

overflow-y:scroll;

OPACITY. Эффект прозрачности

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

В качестве значения выступает число из диапазона от 0.0 до 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности.

!

Internet Explorer для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

filter: (opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

Задание 6.1 Определение видимости элемента

Создайте html файл добавьте в него параграф и изображение. Задайте обтекание изображения текстом.

Укажите значение свойства visibility видимость элемента:

<style type="text/css">

.hide

{

position: relative;

visibility: hidden;

float: left;

}

</style>

После того как свойство видимости установлено, примените созданный класс .hide к изображению.

Задание 6.2 Определение видимой части элемента

Создайте html файл добавьте в него параграф и изображение назначьте размеры изображению width 379, height 480.

Укажите значение свойства clip. Чтобы определить форму видимой области, напишите rect (прямоугольник), откройте круглые скобки, укажите четыре значения, разделенных пробелами, и закройте скобки.

<style type="text/css">

.clipInHalf

{

position: absolute;

clip: rect(15px 350px 195px 50px);

top:0px;

left:0px;

}

</style>

Задание 6.3 Управление невидимой частью элемента

Создайте html файл добавьте в него параграф с большим количеством текста.

Примените стиль к изображению:

<style type="text/css">

.pScroll

{

position: absolute;

clip: rect(15px 350px 195px 50px) ;

top:0px;

left:0px;

overflow: scroll;

width:200px;

height:200px;

}

</style>

Задание 6.4 Масштабируемая навигация

Создаем разметку навигации с помощью маркированного списка:

<body id="intro">

<ul id="nav">

<li id='t-intro'><a href="/">Главная</a></li>

<li id="t-about"><a href="/">Компании</a></li>

<li id="t-news"><a href="/">Новости</a></li>

<li id="t-sponsors"><a href="/">Спонсоры</a></li>

</ul>

</body>

/*настройка навигационного списка*/

#nav

{

width: 100%;/*Устанавливаем высоту для блока списка*/

float:left; /*Устанавливаем выравнивание блока списка слева */

margin: 0; /*Устанавливаем внешний отступ для блока списка */

padding: 10px 0 0 46px; /*Устанавливаем внутренние отступы для блока списка*/

list-style: none; /*Отказываемся от маркеров*/

background: #FFCB2D; /*Задаем цвет фона*/

background-image:url(../images/navBottLine.gif); /*Задаем нижнюю линию с помощью изображения*/

background-repeat:repeat-x; /*Разрешаем копировать фон по горизонтали*/

background-position:bottom left; /*Размещаем фон внизу и слева в блоке списка*/

}

/*настройка элемента списка*/

#nav li

{

float:left; /*Задаем размещение элемента списка слева, что позволяет создать горизонтальный

список*/

margin: 0; /*Устанавливаем внешний отступ для блока списка */

padding: 0; /*Устанавливаем внутренние отступы для блока списка */

font-family:"Lucida Console", sans-serif; /*Устанавливаем тип шрифта*/

font-size: 100%;/* Устанавливаем размер шрифта */

}

/*настройка вида ссылки*/

#nav a

{

float:left; /* Задаем размещение элемента списка слева, что позволяет создать горизонтальный

список */

display: block; /*Создаем блок из ссылки чтобы сделать всю вкладку активной*/

margin: 0 1px 0 0; /*Устанавливаем внешний правый отступ 1рх*/

padding: 4px 8px; /*Устанавливаем внутренние отступы для блока списка*/

color: #333; /*Задаем цвет шрифта*/

text-decoration: none; /*Отменяем подчеркивание ссылки*/

border: 1px solid #9B8748; /*Создаем бордюр вокруг ссылки*/

border-bottom: none; /*Отменяем отображение бордюра с низу*/

background: #F9E9A9; /*Задаем цвет фона*/

background-image:url(../images/ bottOff.gif); /*Фон для не активной кнопки*/

background-repeat:repeat-x; /* Разрешаем копировать фон по горизонтали */

background-position:bottom left; /*Размещаем фон внизу и слева в блоке элемента */

}

/*настройка вида ссылки при наведение */

#nav a:hover, body#intro #t-intro a

{

color: #333; /*Задаем цвет шрифта*/

padding-bottom: 5px; /*Устанавливаем нижний внутренний отступы для блока списка, что закрывает

нижний бордюр для активной ссылки*/

border: #727377; /*Задаем цвет для бордюра*/

background: #fff; /* Задаем цвет фона */

background-image:url(../images/on_bg.gif); /*Фон для активной кнопки*/

background-repeat:repeat-x; /* Разрешаем копировать фон по горизонтали */

background-position:top left; /*Размещаем фон вверху и слева в блоке элемента */

}

----------------------------------------------------------------------------------------------------------------------------