Атрибуты событий
Для страницы могут быть определены программы, выполняемые только при определенных действиях пользователя. Для этого момент запуска программы привязывается к определенным событиям. События, связанные с мышью:
· onclick -щелчок мышью на элементе;
· ondblclick -двойной щелчок мышью на элементе;
· onmousedown -кнопка мыши нажата;
· onmouseup -кнопка мыши отпущена;
· onmousemove -указатель мыши перемещен в область элемента;
· onmouseover -указатель мыши расположен на элементе;
· onmouseout -указатель мыши перемещен за границы области элемента.
События, связанные с выбором элементов и редактированием форм:
· onfocus -элемент выбран (фокусирован);
· onselect -часть текста внутри элемента выделена;
· onchange -данные в элементе были изменены;
· onblur -элемент перестал быть выбран (потерял фокус).
События, связанные с клавиатурой:
· onkeydown -клавиша нажата;
· onkeyup -клавиша отпущена;
· onkeypress -клавиша нажата и отпущена.
--------------------------------------------------------------------------------
Свойства таблиц стилей
Это свойства, которые можно использовать в таблицах стилей. Этот перечень называется CSS2 -каскадные таблицы стилей второго уровня.
Все свойства могут иметь стандартное занчение inherit - наследование свойств родительского элемента.
--------------------------------------------------------------------------------
Единицы измерения
Если используются числовые значения, то они могут принимать следующие значения:
Единицы длины:
· cm -сантиметр;
· in -дюйм (2,54 см);
· mm -миллиметр;
· pc -пика (1/6 дюйма);
· pt -пункт (1/72 дюйма);
· px -пиксел;
Единицы времени:
· ms -миллисекунда;
· s -секунда;
Величины, указанные в процентах, обозначаются знаком %.
--------------------------------------------------------------------------------
Шрифты
font-family
Значения: названия шрифтов, которые могут быть использованы на Web-странице.
Пример:
BODY {font-family: Times New Roman, Verdana, Tahoma}
--------------------------------------------------------------------------------
font-style
Стиль шрифта
Значения:
· normal -обычный;
· italic, oblique -курсив.
--------------------------------------------------------------------------------
font-variant
Это еще один стиль шрифта
Значения:
· normal -обычный;
· small-caps -малые прописные.
Пример:
P {font-variant:small-caps}
--------------------------------------------------------------------------------
font-weight
Это толщина символов.
Значения:
· normal -обычный (400);
· bold -жирные (600-700);
· bolder -жирнее;
· lighter -менее жирнее;
· 100, 200, 300, 400, 500, 600, 700, 800, 900 -допустимые числовые значения.
--------------------------------------------------------------------------------
font-size
Это размер шрифта.
Значения:
· xx-small, x-small, small, medium, large, x-large, xx-large -абсолютные значения;
· Npt -значение в пунктах;
· N% -процентное значение;
· larger, smaller -относительные значения.
Пример:
P {font-size:10pt}
--------------------------------------------------------------------------------
font
Это выбор определенного шрифта, применяемого к конкретным элементам.
Значения:
· caption -полужирный шрифт для элементов управления;
· icon -шрифт для пиктограмм;
· menu -шрифт для меню;
· messagebox -шрифт для окон диалога;
· smallcups -шрифт для небольших элементов управления;
· statusbar -шрифт для строки состояния.
Пример:
P.iconka {font:icon}
--------------------------------------------------------------------------------
Форматирование текста
text-indent
Это величина отступа первой строки абзаца.
Значения: числовые.
--------------------------------------------------------------------------------
text-align
Выравнивание текста.
Значения:
· left -по левому краю;
· right -по правому краю;
· center -по центру;
· justify -по ширине.
--------------------------------------------------------------------------------
text-decoration
Это оформление текста.
Значения:
· none -без оформления;
· underline -подчеркивание;
· overline -черта сверху;
· line-though -перечеркивание;
· blink -мигание (не для всех броузеров).
--------------------------------------------------------------------------------
text-shadow
Не поддерживается большинством знаменитых броузеров. Вы можете создавать тени к тексту.
Значения - список величин, определяющих характеристики тени.
Пример:
P {text-shadow: 3pt 3pt 4pt white} - создание тени белого цвета справа и снизу с 4-м радиусом размытия
--------------------------------------------------------------------------------
letter-spacing
Задает межбуквенный интервал.
Значения:
· normal -определяется броузером;
· числовые;
· auto - интервал меняется так, что текст строки умещается в одну строку. Не поддерживается рядом броузеров.
Пример:
P {letter-spacing: 15pt}
--------------------------------------------------------------------------------
line-height
Высота строк.
Значения:
· normal -определяется броузером (1..0 - 1.2);
· числовые.
· число -размер шрифта (значение свойства font-size) умножается на эту величину;
· процентное -по отношению к значению font-size.
--------------------------------------------------------------------------------
word-spacing
Выбор расстояния между словами.
Значения:
· normal -определяется броузером;
· числовые.
--------------------------------------------------------------------------------
text-transform
Изменение вида букв.
Значения:
· none -без изменения;
· capitalize -первая буква каждого слова прописная;
· uppercase -все буквы прописные;
· lowercase -все буквы строчные.
--------------------------------------------------------------------------------
white-space
Определяет вид пробелов.
Значения:
· normal -автоматическое форматирование текста;
· pre -текст остается без изменений (сходно с PRE);
· nowrap -запрет на автоматический разрыв строк.
Пример:
<P style="white-space: normal">
--------------------------------------------------------------------------------
direction
Направление текста (сходно с dir).
Значения:
· ltr -слева направо;
· rtl -справа налево.
--------------------------------------------------------------------------------
Свойства списков
list-style-type
Определение видов маркеров в списке.
Значения:
· none -без маркеров;
· disc -круги;
· circle -окружности;
· square -квадраты;
· demical -арабские цифры;
· lower-roman -римские цифры на основе строчных латинских букв (i, v, x...);
· upper-roman -римские цифры на основе прописных латинских букв (I, V, X...);
· lower-alpha -строчные латинские буквы (a, b, c...);
· upper-alpha -прописные латинские буквы (A, B, C...).
Пример:
li {list-style-type: square}
--------------------------------------------------------------------------------
list-style-image
Определение рисунка, который будет использован в качестве маркеров.
Значения:
· none;
· адрес графического файла.
--------------------------------------------------------------------------------
list-style-position
Положение маркера относительно списка.
Значения:
· inside -маркер внутри списка;
· outside -маркер вне списка.
--------------------------------------------------------------------------------
list-style
Определяет вид маркеров. В качестве значения может использоваться несколько величин свойств: list-style-type, list-style-image, list-style-position.
Пример:
UL {list-style: circle outside}
--------------------------------------------------------------------------------
Свойства таблиц
display
.
Значения:
· table -таблица (аналог элемента TABLE);
· table-caption -заголовок таблицы (аналог элемента CAPTION);
· table-column -колонка таблицы (аналог элемента COL);
· table-colunm-group -группа колонок (аналог элемента COLGROUP);
· table-row -строка таблицы (аналог элемента TR);
· table-row-group -группа строк (аналог элемента TBODY);
· table-header-group -группа строк в начале таблицы (аналог элемента THEAD);
· table-footer-group -группа строк в конце таблицы (аналог элемента TFOOT);
· table-cell -ячейка таблицы (аналог элемента TD).
--------------------------------------------------------------------------------
row-span
Количество строк, которое займет ячейка.
column-span
Количество столбцов, которые займет ячейка.
border-collapse
Способ прорисовки рамки.
Значения:
· separate -трехмерная рамка;
· collapse -плоская рамка.
--------------------------------------------------------------------------------
border
Свойства рамки (толщина, цвет, тип).
Значения:
· none или hidden -нет рамки;
· dotted -точечная рамка;
· dashed -пунктирная рамка;
· solid -сплошная рамка;
· double -двойная рамка;
· groove -двугранная рамка;
· ridge -такая же, как groove, но темная и светлая грани расположены иначе;
· inset -грань наклонена внутрь;
· outset -такая же, как inset, но свет грани другой.
--------------------------------------------------------------------------------
vertical-align
Способ вертикального выравнивания.
Значения:
· процентное;
· top -по верхнему краю;
· middle -по центру;
· bottom -по нижнему краю;
· baseline -по первой строке текста в ячейке.
--------------------------------------------------------------------------------
table-layout
Способ формирования таблицы.
Значения:
· auto -по умолчанию;
· fixed -ускоренный.
--------------------------------------------------------------------------------
Свойства границ элементов
width
Ширина.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
--------------------------------------------------------------------------------
min-width и max-width
Минимально и максимально допустимая ширина объекта.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
--------------------------------------------------------------------------------
height
Высота.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
--------------------------------------------------------------------------------
min-height и max-height
Минимально и максимально допустимая высота объекта.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
--------------------------------------------------------------------------------
position
Алгоритм вычисления координат границ объекта.
Значения:
· normal -по умолчанию;
· relative -вычисляется положение объекта, a потом смещение объекта;
· absolute -координаты вычисляются относительно границ контейнера;
· fixed -то же, что и absolute, но с запрещенной прокруткой.
--------------------------------------------------------------------------------
top, bottom, right, left
Координаты верхней, нижней, правой, левой границ элемента.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
--------------------------------------------------------------------------------
margin-top, margin-right, margin-bottom, margin-left
Размер пустого пространства рядом с определенной стороной элемента.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
margin
Отступы вокруг элемента.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
Пример:
P {margin: 10pt 10pt 10pt 10pt}
--------------------------------------------------------------------------------
padding-top, padding-right, padding-bottom, padding-left
Отступы между определенной границей элемента и его содержимым.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
--------------------------------------------------------------------------------
padding
Отступы между границами элемента и его содержимым.
Значения:
· auto -по умолчанию;
· числовые;
· процентные.
Пример:
P {padding: 10pt 10pt 10pt 10pt}
--------------------------------------------------------------------------------
border-top-width, border-right-width, border-bottom-width, border-left-width
Ширина рамки.
Значения:
· thin -тонкая;
· medium -средняя;
· thick -широкая;
· числовое.
--------------------------------------------------------------------------------
border-width
Толщина рамки.
Значения:
· thin -тонкая;
· medium -средняя;
· thick -широкая;
· числовое.
--------------------------------------------------------------------------------
border-top-color, border-right-color, border-bottom-color, border-left-color
Цвет элементов рамки.
--------------------------------------------------------------------------------
border-color
Цвет рамки.
--------------------------------------------------------------------------------
border-top-style, border-right-style, border-bottom-style, border-left-style
Вид элементов рамки.
Значения:
· none или hidden -нет рамки;
· dotted -точечная рамка;
· dashed -пунктирная рамка;
· solid -сплошная рамка;
· double -двойная рамка;
· groove -двугранная рамка;
· ridge -такая же, как groove, но темная и светлая грани расположены иначе;
· inset -грань наклонена внутрь;
· outset -такая же, как inset, но свет грани другой.
