2. Требования к выполнению задания:
2.1 Сделать заголовок в цвете;
2.2 Задействовать разные виды селекторов;
2.3 Выполнить подчеркивания, курсивный и полужирный текст с использованием селекторов из п.2.2.
3. Отчет должен содержать:
3.1 Решение задачи в соответствии с требованиями п. 2.2.
3.2 Ответы на вопросы:
3.2.1 Назначение CSS; 3.2.2 Синтаксис (структура HTML документа); 3.2.3 Отступы(margin); 3.2.4 Границы(border); 3.2.5 Цвет текста(color); 3.2.6 Цвет фона текста(background-color).
Практическая работа №6: "Фильтры. Создание интерактивной страницы".
Цель работы:
Научится применять фильтры для создания интерактивных страниц.
1. Теоретические сведения:
Фильтр - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после того он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр ещё называют переходом из одного состояния отображения в другое.
Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являются окнами, как, например элемент <FRAME>. В таблице перечислены все элементы HTML, к которым могут применяться фильтры.
Таблица 1. Элементы к которым применяются фильтры
Фильтры не применяются к следующим элементам HTML-страницы: апплеты, Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т.д.
Применить фильтр к элементу просто: достаточно задать значение его свойства filter, следуя правилам задания свойств каскадных таблиц стилей filter: значение. Каждый фильтр, как отмечалось выше, реализует определённый алгоритм преобразования видимого отображения элемента, поэтому значение свойства filter задаётся в форме функции:
filter: имя_фильтра([параметры]);
а параметры фильтра, если они присутствуют, задаются с использованием синтаксиса именованных параметров функции:
имя_параметра=значение_параметра
Некоторым фильтрам требуется несколько параметров, задаваемых через запятую, а некоторым фильтрам параметры вообще не нужны, но круглые скобки должны присутствовать обязательно.
К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя:
<IMG ID=img1 SRC="пример1.gif" STYLE="filter: blur(strength=50) fliph()>
В данном примере к графическому изображению применяются два фильтра: первый (blur) размазывает изображение на глубину в 50 пикселов, а второй (fliph) просто зеркально его отображает в горизонтальном направлении.
В таблице 2 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.
Таблица 2. Фильтры и их краткие описания
Доступ к фильтрам и их параметрам в программируемых сценариях осуществляется, как обычно, с помощью объектной модели, предоставляемой браузером. В этой модели любой фильтр представляется в виде обычного объекта со своими свойствами и методами. Большинство свойств и методов соответствует параметрам фильтра в параметре STYLE. Некоторые свойства и методы доступны только из программируемого сценария.
alpha
Фильтр Alpha устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента
Синтаксис:
STYLE="filter:alpha(Opacity, FinishOpacity, Style, StartX, StartY, FinishX, FinishY)"
Параметры
Opacity - Значение прозрачности. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно
FinishOpacity - Необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style
Style - 0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент
StartX - Начальные координаты градиента по горизонтали
StartY - Начальные координаты градиента по вертикали
FinishX - Конечные координаты градиента по горизонтали
FinishY - Конечные координаты градиента по вертикали
Код для примера
<IMG SRC="063.jpg" STYLE=filter:alpha(Opacity=50)> |
blur
Фильтр Blur размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра
Синтаксис:
STYLE="filter:blur(Add, Direction, Strength)"
Параметры
Add - Объект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец
Direction - Направление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов)
Strength - Степень размытия
Код для примера
<IMG SRC="063.jpg" STYLE=filter:blur(Add=1, Direction=1, Strength=15)> |
chroma
Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным
Синтаксис: STYLE="filter:chroma(Color)"
Параметры
Color - Цвет, который будет прозрачным
Код для примера
<IMG SRC="063.jpg" STYLE=filter:chroma(color=#c5438d)> |
DropShadow
Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень
Синтаксис:
STYLE="filter:dropshadow(Color=значение, OffX=значение,OffY=значение,positive=эначение)"
Параметры
Color - Цвет тени
OffX - Смещение тени относительно текста по оси X
OffY - Смещеение тени относительно текста по оси Y
Positive - Характер освещения (0 или 1)
Код для примера
<TABLE BORDER=1> <TR> <TD STYLE=filter:dropshadow(color=silver,offx=3, offy=3,positive=0)> Пример фильтра shadow </TABLE> |
Shadow
Фильтр Shadow создает эффект тени
Синтаксис: STYLE="filter:shadow(Color=значение, Direction=значение)"
Параметры
Color - Цвет тени
Direction - Направление тени в градусах
Код для примера
<TABLE BORDER=1> <TR> <TD STYLE=filter:shadow(color=green,direction=45)> Пример фильтра shadow </TABLE> |
flipH
Фильтр FlipH переворачивает объект горизонтально
Синтаксис: STYLE="filter:FlipH" Код для примера
<IMG SRC="063.jpg" STYLE=filter:fliph()> |
flipV
Фильтр FlipV переворачивает объект вертикально
Синтаксис: STYLE="filter:FlipV" Код для примера
<IMG SRC="063.jpg" STYLE=filter:flipv()> |
glow
Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта
Синтаксис: STYLE="filter:Glow(Strength=значение,Color=значение)"
Параметры
Stregth - Сила свечения в диапазоне 0-100
Color - Цвет свечения
Код для примера
<TABLE BORDER=1> <TR> <TD STYLE=filter:glow(strength=5,color=red)> Пример фильтра glow </TABLE> |
Gray
Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах
Синтаксис: STYLE="filter:gray"
Код для примера
<IMG SRC="063.jpg" STYLE=filter:gray()> |
Invert
Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные
Синтаксис: STYLE="filter:invert"
Код для примера
<IMG SRC="063.jpg" STYLE=filter:invert()> |