Справочник предназначается для людей, уже освоивших азы работы с HTML и CSS.

Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.

В связи с тем, что данный ресурс постоянно пополняется новой информацией, скачать обновленную версию справочника можно из раздела Download

Дата выхода данной версии справочника: 09:00, 26 марта 2007.

Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.

Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов и следующего вида:

Это синий текст

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега

и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

Это синий текст

Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

Вы можете переназначить цвета текста для всех тегов

. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

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

Это синий цвет

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

Этот текст будет синим

А этот - не будет!

Более того, вы можете встроить определение стиля прямо в тег:

Это синий текст

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

Это заголовок документа

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги :

Тег

Этот текст останется красным.

Здесь установки, сделанные для текстового абзаца

, не будут перекрыты в дальнейшем.

Поддерживается IE начиная с 4.0

Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.

Синтаксис:

"filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"

Некоторые фильтры могут быть без параметров.

Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.

Далее будут мною описаны 18 статических и 19 динамических фильтра.

Фильтры применяют через параметр STYLE:

Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:

- имеем ту же картинку, но полупрозрачную.

Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.

JavaScript:

...

Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.

VBScript:

...

Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.

Alpha

Задает уровень прозрачности элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

AlphaImageLoaded

Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.

При настройке этого фильтра можно использовать следующие параметры:

BasicImage

Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.

Отдельно можно задавать угол поворота, стерень "просвеченности".

При настройке этого фильтра можно использовать следующие параметры:

Blur

Делает элемент страницы размытым.

При настройке этого фильтра можно использовать следующие параметры:

Chroma

Делает прозрачным отдельный цвет элемента.

При настройке этого фильтра можно использовать следующие параметры:

Compositor

Объеденяет два цвета элемента страницы и выводит что получилось.

При настройке этого фильтра можно использовать следующие параметры:

DropShadow

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

При настройке этого фильтра можно использовать следующие параметры:

Emboss

Делает элемент страницы выпуклым.

При настройке этого фильтра можно использовать следующие параметры:

Engrave

Делает элемент страницы вдавленным.

При настройке этого фильтра можно использовать следующие параметры:

Glow

Создает эффект "тления" элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Gradient

Эффект градиентной закраски элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Light

Создет эффект освещенности элемента страницы.

Методы, применяемые к этому фильтру:

MaskFilter

Отображает прозрачный цвет элемента страницы заданным цветом.

При настройке этого фильтра можно использовать следующие параметры:

Matrix

Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.

При настройке этого фильтра можно использовать следующие параметры:

"bilinear" (по умолчанию)

MotiobBlur

Создает эффект быстрого движения (размытости).

При настройке этого фильтра можно использовать следующие параметры:

Pixelate

Отображает элемент страницы отдельными пикселами.

При настройке этого фильтра можно использовать следующие параметры:

Shadow

Создает эффект отбрасывания тени у элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Wave

Создает волнистое искажение элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Barn()

Создает эффект "открывающейся и закрывающейся двери".

Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

Задает или возвращает направление движения: от центра к границам или наоборот.

Задает или возвращает направление преобразования: по вертикали или по горизонтали.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 1:

Toggle Transition

Пример 2:

This is DIV #2

Toggle Transition

Barn()

Создает эффект "открывающейся и закрывающейся двери".

Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

Задает или возвращает направление движения: от центра к границам или наоборот.

Задает или возвращает направление преобразования: по вертикали или по горизонтали.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 1:

Toggle Transition

Пример 2:

This is DIV #2

Toggle Transition

Blinds()

Создает эффект "открывающихся и закрывающихся жалюзи"

Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

Атрибуты

Свойства

Задает или возвращает направление, в которое происходит открытие полосок.

Задает или возвращает признак разрешения применения фильтра.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 1:

Toggle Transition

Пример 2:

This is DIV #2

Toggle Transition

Fade()

Создает эффект наплыва, т.е. старое содержимое элемента странцы плавно пропадает, а новое одновременно плавно появляется

Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

Атрибуты

Свойства

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

Задает или возвращает признак разрешения применения фильтра.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 1:

Toggle Transition

Пример 2:

This is DIV #2

Toggle Transition