Специальные эффекты
Визуальные фильтры
Визуальные фильтры могут быть добавлены только к элементам HTML, которые рассматриваются как управляющие. Это любые элементы, создающие прямоугольное место на Web-странице. Вот некоторые из управляющих элементов:
BODY, DIV, IMG, TABLE, TD, TR, INPUT.
Все фильтры следуют одному и тому же образцу. За свойством стиля filter ставится двоеточие, затем имя фильтра, а затем в круглых скобках перечисляются атрибуты фильтра, разделенные запятыми.
Фильтр тени (drop-shadow) придаст тексту трехмерный вид.
Пример.
<TABLE border=0 width=500
style="filter:DropShadow(color=gray, offx=3, offy=3, positive=1)">
<TR>
<TD >
<H1>Тень в действии</H1>
</TD>
</TR>
</TABLE>
offx – управляет горизонтальным смещением;
offy – управляет вертикальным смещением;
positive – имеет значения 1 или 0.
Сияющий фильтр (glow)
Пример.
<Table border=0 width=500 >
<TR>
<TD style="filter:glow(color=green,strength=10)">
<H2> Сияние придаст тексту загадочность</H2>
</TD>
</TR>
</TABLE>
color – цвет сияния;
strength – размер сияния.
Фильтр горизонтальное отражение (fliph)
Пример.
<TABLE border=0 width=300 style="filter:fliph">
<TR>
<TD>
<H2> Взгляните на рисунок в зеркало</H2>
</TD>
</TR>
</TABLE>
Фильтр вертикальное отражение (flipv)
Пример.
<TABLE border=0 width=300 style="filter:flipv">
<TR>
<TD>
<H2> Взгляните на рисунок в зеркало</H2>
</TD>
</TR>
</TABLE>
Фильтр перехода (Reveal)
Чтобы увидеть эффект, добавить фильтр к любой HTML-странице, имеющей хотя бы одну ссылку. Тогда при загрузке страницы вы сможете наблюдать входной эффект, а при выходе из нее по ссылке –эффект выхода.
В примере для установки фильтра перехода используется дескриптор META.
Пример.
<HEAD>
<TITLE> New Document </TITLE>
<META http-equiv="Page-Enter"
CONTENT="RevealTrans(Duration=6.000,Transition=2)">
<META http-equiv="Page-Exit" CONTENT="RevealTrans(Duration=6.000,Transition=11)">
</HEAD>
Transition – номер эффекта перехода (см. таблицу ниже).
| в поле | |
| из поля | |
| в круг | |
| из круга | |
| стирание вверх | |
| стирание вниз | |
| стирание справа | |
| стирание слева | |
| вертикальные жалюзи | |
| горизонтальные жалюзи | |
| шахматный порядок поперечный | |
| шахматный порядок вниз | |
| случайный наплыв | |
| вертикальная разбивка внутрь | |
| вертикальная разбивка наружу | |
| горизонтальная разбивка внутрь | |
| горизонтальная разбивка наружу | |
| полосы налево вниз | |
| полосы налево вверх | |
| полосы направо вниз | |
| полосы направо вверх | |
| случайные горизонтальные линии | |
| случайные вертикальные линии | |
| случайный |
Каскадные листы стилей
Типы листов стилей
Существует три способа применения листов стилей в документе HTML
§ Встраивание, при котором дескрипторы фрагментов документа дополняются короткими объявлениями формата. Встраивание предоставляет полный контроль над фрагментом, к которому оно применяется. Присовокупите атрибут Style=”x” к дескриптору абзаца, и броузер будет выводить абзац с применением параметров соответствующего стиля.
§ Внедрение, обеспечивающее контроль над страницей HTML. Использование дескриптора <Style> в пределах раздела <Head> страницы позволяет детально описать атрибуты применяемого ко всей странице стиля.
§ Связывание, известное также как применение внешнего листа стилей. В этом случае связанный документ использует эталонный лист стилей, применяемый для всего узла и хранящийся в файле с расширением.css.
Пример встраиваемого стиля
<P style=”font: 13pt verdana”> Для вывода текста применяется встроенный стиль. </P>
Пример внедренного стиля
<HTML>
<HEAD>
<TITLE>Пример внедрения стиля</TITLE>
<STYLE>
<!--
BODY {
background: #FFFFFF;
color: #000000;
}
H1 {
font: 14pt verdana; color: #CCCCCC;
}
P {
font: 13pt times;
}
A {
color: #FF0000; text-decoration: none;
}
-->
</STYLE>
</HEAD>
При использовании связанного стиля все описания хранятся в отдельном файле с расширением.css. Сам файл либо располагается в корневом каталоге узла, либо определяют вязь с ним в HTML-документах.
Пример листа стиля, предназначенного для связывания. Пусть он имеет имя mystyle.css.
BODY {
background: #000000;
color: #FFFFCC;
}
H1 {
font: 14pt Garamond; color: #CCCCCC;
}
P {
font: 13pt arial;
}
A {
color: #FF0000; text-decoration: none;
}
Чтобы связать HTML страницу с этим листом надо в раздел <HEAD> добавить следующую строку:
<HEAD>
<TITLE> Пример связывания стиля</TITLE>
<link rel=stylesheet href=”mystyle.css” type=”text/css”>
</HEAD>
Синтаксис листов стилей
Независимо от того, какой из способов применения листов стилей использован, синтаксис их схож. Он состоит из трех частей.
§ Селектора, обладающего свойствами, которые, в свою очередь имеют значения. Селектор обычно представляет собой стандартный элемент HTML-страницы, такой как, например, заголовок (H1) или абзац (P).
§ Свойств селектора.
§ Значений свойств селектора
Свойства и значения образуют объявление. Селектор и объявление образуют правило со следующим порядком записи:
H1 {
type-family: Garamond, times, serif;
}
При объявлении встроенного стиля не используются селекторы, так как стиль применяется только к дескриптору, в котором он определен:
<H1 style=”garamond, times, serif;”> text </H1>
Классы
Классом называется разбиение одного правила стиля на несколько частей. Если есть необходимость оформить один фрагмент текста иначе, чем другой, можно создать несколько наборов. Каждый набор вновь созданных стилей называется классом стиля.
Пример классов стиля применительно к заголовку:
<HEAD>
<STYLE>
<!--
H1.left {
font: 14pt arial;
color: #FF0033;
text-align: left;
}
H1.right {
font: 13pt arial;
color: #FF6633;
text-align: right;
}
-->
</STYLE>
</HEAD>
<BODY>
<H1 class=”left”> Заголовок выводится слева</H1>
<BR>
<H1 class=”right”> Заголовок выводится справа </H1>
</BODY>
Псевдоклассы
Чтобы управлять элементами, которые нельзя описать в виде обычных дескрипторов определены несколько псевдоклассов:
§:first-child – первый дочерний элемент другого элемента;
§:link – еще не посещенные ссылки;
§:visited – посещенные ссылки;
§:hover – элемент, над которым в настоящее время находится курсор;
§:active – активный в данный момент элемент;
§:focus – элемент, имеющий фокус ввода;
§:first-line – первая форматированная строка абзаца;
§:first-letter – первая буква абзаца;
В начале каждого псевдокласса стоят двоеточия. Псевдоклассы указывают после селектора.
Пример. Первая строка абзаца.
P:first-line {color: red}
Свойства
Свойства текста
text-indent – Определяет длину отступа в первой строке.
Пример: P{text-indent: 40px}
text-align - Определяет выравнивание текста в элементе.
Значения: left, center, right, justify.
Пример: P {text-align: right}
text-decoration – Определяет оформление текста.
Значения:
none – отсутствует оформление;
underline – подчеркивание;
overline – линия над текстом;
line-through – перечеркивание;
blink – мерцание;
Пример: {text-decoration: underline}
text-transform – Определяет в тексте элемента перевод в верхний (нижний) регистр.
Значения:
none – отсутствие изменения;
capitalize – переводит первую букву каждого слова в верхний регистр;
uppercase – переводит все буквы в верхний регистр;
lowercase – переводит все буквы в нижний регистр.
Пример: H3{text-transform: uppercase}
letter-spacing – Определяет интервал между символами текста
Пример: P {letter-spacing: 2px}
word-spasing – Определяет интервалы между словами
Пример: P {word-spacing: 1.3em}
Цвет и фон
color – определяет цвет текста
Пример: P {color: green}
background-color – определяет цвет фона элемента.
Пример: DIV {background-color: blue}
background-image: определяет фоновое изображение элемента
Пример: H1 {background-image: url(“texture2.gif”)}
background: Удобное свойство для установки сразу всех параметров фона. Если параметры пропущены, то их значения берутся по умолчанию.
Пример: P {background: blue url(texture2.gif) }
Шрифты
font-family – определяет семейство шрифта.
Пример: BODY {font-family: “Times Roman”, courier, serif}
font-style – определяет начертание шрифта
Значения:
italic – курсив;
oblique – наклонное начертание;
Пример: SPAN {font-style: italic}
font-variant – определяет, будет ли шрифт выведен в виде малых прописных букв.
Значения:
normal – обычное начертание;
small-caps – вывод шрифта в виде малых прописных букв
Пример: H4 {font-variant: small-caps}
font-weight – определяет толщину выводимого шрифта
Значения:
normal – обычная толщина;
bold – полужирный шрифт;
bolder – жирный шрифт;
lighter – светлый шрифт
100-900 – число, указывающее толщину шрифта (400-normal)
font-size – определяет высоту шрифта
Пример: BODY {font-size: 16pt}
font – Удобное свойство для установки сразу всех параметров шрифта. Если какие-либо параметры пропущены, то их значения берутся по умолчанию.
Значения:
font-style – начертание;
font-variant – вывод шрифта в виде малых прописных букв;
font-weight – толщина;
font-size – кегль;
line-height – высота между строк;
font-family – семейство шрифтов.
Пример: BODY {font: italic bold 16pt 110% arial Garamond sans-serif}
Блочная модель (такие элементы, как например, BODY, DIV, P)
margin-top, margin-right, margin-bottom, margin-left – устанавливает ширину поля для определенной стороны элемента.
Пример: P{margin-top: 20px}
margin – Удобное свойство для установки ширины полей сразу для всех сторон элемента. У этого свойства может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу всем полям. Если два значения, то первое из них присваивается верхнему и нижнему полю, а второе – левому и правому. Если же три, то первое значение присваивается верхнему полю, второе – левому и правому, а третье – нижнему.
Значения: ширина верхнего поля;
ширина правого поля;
ширина нижнего поля;
ширина левого поля.
Пример: DIV {margin: 20px 30px 5px}
padding-top, padding-right, padding-bottom, padding-left – устанавливает ширину промежутка между содержимым элемента и определенным участком его границы
Пример: P {padding-top: 20px}
padding – Удобное свойство для установки ширины промежутка между содержимым элемента и его границей сразу для всех сторон элемента. Значения присваиваются аналогично элементу margin.
Пример: DIV {padding: 20px 30px 5px}
border-top-width, border-right-width, border-bottom-width, border-left-width - устанавливает ширину рамки для определенной стороны
Значения:
thin - рамка в виде тонкой линии;
medium – рамка в виде линии средней толщины;
thick – рамка в виде толстой линии;
числовое значение (px, %)
Пример: P {border-top-width: 10px}
border-width – Удобное свойство для установки ширины рамки сразу для всех сторон элемента.
Пример: DIV {border-width: 5px 8px 7px}
border-top-color, border-right-color, border-bottom-color, border-left-color - устанавливает цвет для определенной стороны
Пример: P{border-top-color: pink}
border-color – Удобное свойство для установки цвета рамки сразу для всех сторон элемента.
Значения задаются в следующей последовательности:
цвет верхней стороны;
цвет правой стороны;
цвет нижней стороны;
цвет левой стороны.
border-top-style, border-right-style, border-bottom-style, border-left-style – устанавливает стиль рамки для определенной стороны.
Значения:
none – линия отсутствует;
hidden – линия отсутствует, но для таблиц это значение действует по другому;
dotted – пунктирная линия;
dashed – штрих-пунктирная линия;
solid – сплошная непрерывная линия;
double –двойная непрерывная линия;
groove – трехмерная борозда;
ridge – трехмерный гребень;
inset – трехмерная врезка;
outset – трехмерный орнамент.
Пример: P{border-top-style: double}
border-style: удобное свойство для установки стиля рамки сразу для всех сторон. Может иметь от одного до четырех значений. Если одно значение, то оно присваивается сразу всем сторонам, если два, то первое значение - верхней и нижней стороне, второе левой и правой, если три, то первое присваивается верхней стороне, второе – левой и правой, третье – нижней.
Пример: DIV {border-style: double solid}
border-top, border-right, border-bottom, border-left – удобное свойство для установки нескольких свойств рамки для определенной стороны.
Значения задаются в следующем порядке:
ширина рамки;
стиль рамки;
цвет рамки.
Пример: P {border-top: thin double blue}
border – удобное свойство для определения рамки сразу со всех сторон элемента. Значения устанавливаются одинаковыми для всех его сторон.
Значения:
ширина рамки;
стиль рамки;
цвет рамки.
Пример: P {border: 4px solid red}
Позиционирование с помощью листов стилей
Одно из самых полезных новшеств – это возможность точно контролировать размещение текста и изображений на странице. Листы стилей позволяют управлять областью, устанавливая ее положение на странице с использованием абсолютных или относительных значений позиционирования.
Ниже приведены наиболее часто встречающиеся свойства позиционирования.
position – определяет используемый метод позиционирования.
Значения:
absolute - в качестве точки отсчета используется верхний левый угол окна броузера, и все параметры местоположения отмеряются от него.
relative -точкой отсчета является то место, в котором разместился бы элемент страницы, если бы не было предоставлено никакой информации о местоположении.
fixed – аналогично absolute, но сам элемент фиксируется в окне броузера и при прокрутке не перемещается.
Пример: P {position: absolute}
top, right, bottom, left – определяет величину смещения от определенного края (соответственно верхнего, правого, левого и нижнего)
Пример: UL {top:20px; right: 40px}
width – определяет ширину элемента.
Пример: P{width: 300px}
height – Определяет высоту элемента.
Пример: BLOCKQUOTE {height: 300px}
line-height – определяет расстояние между базовыми линиями двух соседних строк.
Пример: BLOCKQUOTE {line-height: 2.2}
vertical-align – Определяет выравнивание текста по вертикали внутри элемента.
Значения:
middle – выравнивание средней линии элемента по базовой линии его родительского элемента;
top – выравнивание верхней части элемента по верхнему краю его текста;
bottom – выравнивание нижней части элемента по базовой линии его родительского элемента;
sub – выравнивание текста элемента, чтобы он стал подстрочным по отношению к базовой линии родительского элемента;
super – выравнивание текста элемента, чтобы он стал надстрочным по отношению к базовой линии родительского элемента;
text-top – выравнивание верхней части элемента по верхней части текста родительского элемента;
text-bottom - выравнивание верхней части элемента по верхней части текста родительского элемента.
float – Определяет обтекание элемента слева или справа.
Значения:
left – элемент передвинут влево, а остальные элементы обтекают его справа;
right – элемент передвинут вправо, а остальные элементы обтекают его слева.
clear – Определяет, как данный элемент обтекается по сторонам другими элементами.
Значения:
left – элементов не должно быть слева от данного элемента;
right – элементов не должно быть справа от данного элемента;
both – элементов не должно быть справа и слева от данного элемента.
visibility – Определяет, является ли объект видимым.
Значения:
visible – элемент видим;
hidden – элемент не видим.
z-index – Определяет порядок элементов в стеке.
Значение: любое целое число – порядковый номер элемента в стеке.
cursor – Определяет, как выглядит указатель мыши при прохождении по элементу.
Значения:
crosshair – принимает форму указателя «графическое выделение»;
pointer – принимает форму указателя «выбор ссылки»;
move – принимает форму указателя «перемещение»;
text – принимает форму указателя выделения текста;
wait – принимает форму указателя «система недоступна»;
help – принимает форму указателя «выбор справки».
Пример использования позиционирования.
<P style="position:absolute; top: 150px; left: 200;width: 200px;
height: 200px; color:blue; z-index:2;" >ТЕКСТ ТЕКСТ ТЕКСТ </P>
<P style="position:absolute; top: 155px; left: 205; width: 200px; height: 200px; color:red; z-index:1; ">ТЕКСТ ТЕКСТ ТЕКСТ </P>
Построение форм