Рейтинг@Mail.ru

Видимость
отдельных элементов страницы.
Введение в события CSS

Этот урок будет одним из последних при изучении XHTML+CSS. Далее мы изучим DHTML+JavaScript. Одно из главных свойств DHTML - dynamic HTML - динамического HTML(XHTML) - является управление видимостью элемента. Однако базисом здесь является CSS - именно он управляет видимостью элемента и через него (CSS) может динамически эту видимость изменять. Кроме того, в CSS встроены так называемые события, позволяющие проводить на лету простые, но эффективные динамические изменения стиля текста. А наибольшие возможности дает использование вложенных элементов (определенных как классов). Используя такие способности, можно создать потрясающие эффекты. Например, даже без JavaScript, можно сделать так, что при наведении на ссылку она будет отображаться по другому.

Видимость

Эта часть урока будет посвящена большей частью одному CSS свойству - visibility. С его помощью можно динамически изменять видимость XHTML элементов, как статически, так и динамически, например при наведении мыши. Это свойство работает только с классами и селекторами(предпочтительно с селекторами). Если Вы допускаете, чтобы событие JavaScript и CSS происходило при воздействии с несколькими элементами, им можно присвоить даже одинаковый селектор.

Visibility принимает 3 возможных значения: visible(видимый), hidden(скрытый) и inherit(наследует значение родительского элемента). Если нужно регулировать только один объект, используйте селектор вместо класса.

У свойства display также есть значения, позволяющие отображать или не отображать элемент. Однако свойство visibility просто делает объект невидимым, а display, если задано значение none, вообще не загружает элемент на страницу.

Определение видимой области

Это не совсем то, что мы уже рассмотрели. Если visibility позволяет либо полностью отобразить, либо полностью скрыть блок, то свойство clip обрезает видимую часть блока, невидимую не загружает, как свойство display.

Clip принимает 2 значения - rect и auto. rect отображает прямоугольную часть блока, ограниченную заданными координатами.

Т.о. формат команды:   clip:rect(top left bottom right)

Auto отображает блок по умолчанию.

Действие с невидимой частью

Браузер может не только скрывать часть блока, но и производить действия над невидимой частью. Допустим, Вы загрузили картинку формата 500*600, но поставили высоту и ширину равную 250*300. Изображение будет уменьшено. Но, вместо этого, можно обрезать часть картинки, не попадающую в рамки 250*300, либо сделать полосу прокрутки прямо в блоке.

Значения:

  1. auto - автоматически
  2. hidden - скрыть лишнюю часть
  3. scroll - загрузить элемент в том размере, в котором он есть, ограничить видимую область и сделать полосу прокрутки.
  4. visible - отобразить элемент в настоящем размере, пренебрегая границами.

События CSS

CSS поддерживает события - т.е. при определенных условиях, например, при наведении мыши над объектом над ним применяется специальный стиль. Сейчас мы изучим только основные события, применяемые в ссылках.

Формат написания событий:

тег: событие{набор форматирований}

Некоторые css-события, с которых начинается их изучение:

Например, так:

a{text-decoration:none; font-color:#000000}

a:hover{text-decoration:none; font-color:#efefef}

a:visited{text-decoration:underline overline; font-color:#ff0000}

На следующем уроке будут подробно разобраны остальные события CSS. Мы закончим курс XHTML и начнем JavaScript+DHTML.

 

 

uroki.webservis.ru        Рейтинг@Mail.ru