Справочник HTML.

• Тэги HTML
• Таблицы стилей

Тэги HTML

Здесь упорядочены по категориям наиболее часто употребляемые тэги.

Структура документа

Заголовки и названия

Абзацы и строки

Стили текста

Списки

Таблицы

Перечисленные ниже тэги определяют:

Ссылки

Следующие тэги определяют:

Графика, объекты, мультимедиа и сценарий

Формы

Фреймы

<frame> Определяет конкретный фрейм внутри набора фреймов
<frameset> Определяет набор фреймов, который содержит фреймы или подчиненные наборы
<iframe> Используется для создания встроенных «плавающих» фреймов на странице
<noframes> Определяет, что именно будет показывать браузер, не поддерживающий фреймы

Таблицы стилей

Существует более 70-и свойств, предназначенных для применения в каскадных таблицах стилей Dynamic HTML. Их можно условно разделить на несколько групп. Начнем со сводной информации о единицах измерения, используемых для определения значений свойств.

Едeницы измерения

Есть две основные категории единиц: относительные и абсолютные (плюс процентные). Лучше использовать относительные единицы, поскольку определение абсолютных требует знания конкретной системы отображения: на какой принтер, монитор или другое устройство будет выводиться информация. Относительные единицы. Значения em, en и ex являются типографскими терминами и соотносятся с размерами других символов, рх обозначает пикселы — элементы экрана, размер которых зависит от установок монитора и видеокарты пользователя. В Internet Explorer, начиная с версии 4, em и ех заменены на pt, en — на рх. Абсолютные единицы. Значения in, cm, mm, pt, pc in дает значение в дюймах, cm — в сантиметрах, mm — в миллиметрах, pt -в пунктах (72 пт на дюйм) и рс - в пиках (1 пика равна 12 пт). Эти единицы стоит использовать только в том случае, если вы знаете, каким будет размер рабочей области устройства вывода, т. к. браузеры будут пытаться показать все в натуральную величину.

Проценты

Эти цифровые значения задаются как числа (с десятичной точкой или без нее), показывающие отношение к единице длины (обычно размер шрифта текущего элемента).

Свойства Dynamic HTML

Свойства шрифта

font

Это свойство позволяет устанавливать сразу несколько свойств шрифта в одном месте, с начальными значениями, определенными для используемых свойств (т. е. значение, определенное по умолчанию для <font-size>, отличается от значения по умолчанию <font-family>). Данное свойство может быть использовано с соответствующими значениями, разделенными пробелами или запятыми, если устанавливается несколько шрифтов.

fontFamily

Вы можете установить несколько возможных значений в порядке предпочтения (на тот случай, когда в браузере нет нужного шрифта). Для этого просто разделите их запятыми. Вы должны закончить родовым названием шрифта (допустимые значения serif, sans-serif, cursive, fantasy или monospace). Если имя шрифта состоит из нескольких слов, вы должны заключить эти слова в кавычки.

font-size

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

• абсолютным размером, допустимые значения хх-small, x-small, small, medium, large, x -large, xx-large;
• относительным размером, допустимые значения larger, smaller;
• длиной в любых из описанных в начале раздела единицах измерения;
• процентным отношением: значения представлены в процентах от родительского размера шрифта.

font-style

Это свойство используется для определения стиля вашего шрифта. Если существует уже готовый вариант шрифта (например, New York Oblique), то он будет применен, в противном случае изменение шрифта будет произведено программно.

font-variant

Normal — это стандартный вид, установленный по умолчанию, small-caps использует прописные буквы того же размера, что и обычные строчные.

font-weight

Определяет жирность шрифта текста, которая зависит от толщины линии. Если используется числовое выражение, то число обязательно должно быть кратным 100: 400 — то же, что и normal, 700 — то же, что и bold.

Свойства цвета и фона

color

Устанавливает цвет текста элемента страницы. Цвет может быть задан названием (например, green) или номером в соответствии со шкалой RGB. Это значение может быть задано несколькими способами: в шестнадцатеричной системе, например "#FFFFFF", процентами -"80% ,20% ,0%" или в десятичной системе - "245, 0, 20".

Background

Определяет параметры фона документа. Transparent означает отсутствие фона. Вы можете использовать для фона либо цвет, либо картинку с заданным адресом URL. Адрес может быть абсолютным или относительным, но обязательно должен быть заключен в скобки и располагаться непосредственно за словом url: BODY { background: url (http://mumu.com/image/picture.gif) } Можно использовать и цвет фона, и картинку. В таком случае картинка будет лежать поверх цветного фона. Цвет может быть либо чистым, либо смешанным из двух. Картинка имеет несколько настроек: <repeat> может иметь значения repeat, repeat -х, repeat-у и no-repeat; если эти значения не указаны, значением по умолчанию является repeat; <scroll> определяет при прокручивании страницы, будет ли картинка оставаться на месте или прокручиваться вместе с ней; возможные значения: fixed, scroll; <position> определяет расположение картинки на странице; значения могут быть процентными (горизонтальное, вертикальное), абсолютным расстоянием (горизонтальное, вертикальное) или определенными с помощью ключевых слои (допустимые значения: top, middle, bottom, left, center, right). Также есть возможность определить свойства фона по частям:

background-attachment

Определяет, будет или нет фоновая картинка прокручиваться при прокрутке страницы.

background-color

Определяет цвет фона. Может быть один цвет или два смешанных цвета. Цвет задается названием (например, green) или номером по шкале RGB. Это значение может быть задано несколькими способами: в шестнадцатеричной системе например "#FFFFFF", процентами - "80%, 20%, 0%" или в десятичной системе "255,0,0". Синтаксис для использования двух смешанных цветов такой: BODY { background-color: red/blue }

background-image

С помощью этого свойства можно определить URL-адрес фоновой картинки. Адрес можно задавать абсолютным или относительным, но обязательно он должен быть заключен в скобки и идти непосредственно за словом url.

background-position

Указывает начальное положение фоновой картинки с помощью двух значений, определяющих занимаемую часть страницы (по горизонтали, по вертикали), абсолютное расстояние (в соответствующих единицах измерения, сначала по горизонтали, потом по вертикали) или используя два ключевых слова из возможных.

background-repeat

Определяет, повторяется ли фоновая картинка для заполнения страницы или элемента. Если используются значения repeat -x, repeat-у, то картинка повторяется лишь вдоль одного направления. По умолчанию устанавливается повторение по обоим направлениям.

Свойства текста

letter-spacing

Определяет расстояние между буквами, length обозначает добавочное расстояние между буквами. Оно должно быть выражено с указанием единиц измерения.

line-height

Опрелеляет высоту текущей строки. Числовые значения интерпретируются как размер шрифта текущего элемента, умноженный на соответствующий коэффициент (например 1,2). Если используется length, должны указываться единицы измерения. Процентное соотношение используется в сравнении с текущим размером шрифта и должно быть больше 100%.

list-style

Определяет, как должны изображаться элементы списка. Может быть использовано для установки всех свойств. Их можно также установить по частям, пользуясь следующими свойствами.

list-style-image

Определяет адрес картинки, используемой в качестве маркера или пиктограммы для каждого элемента списка.

list-style-position

Указывает, внутри или вне тела списка должен находиться маркер.

list-style-type

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

text-align

Определяет, как текст будет выровнен относительно содержащего его элемента. По существу, делает то же, что и тэг <DIV AUGN= ...>.

text-decoration

Позволяет добиться специального вида текста. Открыт для расширений, неопознанные расширения интерпретируются как подчеркивание. Это свойство не наследуется, но обычно распространяется на дочерние элементы, лежащие внутри родительских.

text-indent

Устанавливает величину отступа в единицах измерения или в процентах от ширины родительского элемента.

text-transform

• capitalize делает заглавной первую букву каждого слова в элементе;
• uppercase делает все буквы в словах элемента заглавными;
• lowercase делает все буквы в словах элемента строчными;
• nonе снимает все установки, приобретенные в результате наследования

vertical-align

Определяет расположение текущего элемента по вертикали:

• baseline устанавливает выравнивание по образцу родительского элемента;
• middle устанавливает вертикальную среднюю линию элемента на основе родительского элемента плюс половина строки последнего;
• super переводит элемент в верхний регистр;
• sub переводит элемент в нижний регистр;
• text-top выравнивает элемент по верху текста, набранного шрифтом родительского элемента;
• text-bottom выравнивает элемент по низу текста, набранного шрифтом родительского элемента;
• top выравнивает верх элемента по верху самого высокого элемента текущей строки;
• bottom выравнивает по низу самого низкого элемента текущей строки.

Свойства, связанные с размером и рамкой

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

border-top-color, border-right-color, border-left-color, border-bottom-color, border-color

Определяет цвет четырех сторон рамок. Подставив вместо цвета URL картинки, вы сделаете так, что картинка будет повторяться, создавая рамку.

border-top-style, border-right-style, border-left-style, border-bottom-style, border-style

Определяет стиль четырех сторон рамок.

border-top, border-right, border-left, border-bottom, border

Определяет свойства четырех сторон рамок. Работает так же, как свойства отступов, за исключением того, что рамка видна:

• <border-width> (ширина рамки) может быть medium, thin, thick или задана в единицах измерения;
• <border-style> (стиль рамки) может быть nonе или solid.

Аргумент color используется для определения цвета заполнения фона элемента, пока он загружается, а также позади прозрачных частей элемента. Если передать вместо него адрес картинки, картинка будет повторяться, заполняя контур рамки.

border-top-width, border-right-width, border-left-width, border-bottom-width, border-width

Определяет ширину рамки вокруг элемента. Каждая сторона может быть задана соответствующим свойством. Мы можем также заменить установку четырех индивидуальных свойств установкой одного свойства border-width так же, как и для свойств отступа margin.

clear

Указывает, что следующие элементы должны быть показаны ниже элемента, выровненного по левому или правому краю. По умолчанию текст обтекает такие элементы.

clip

Определяет, какая часть элемента видна. Все, что находится за пределами области, указанной этим свойством, увидеть нельзя.

display

Это свойство указывает, будет ли показан элемент.

float

Определяет обтекание элемента другими элементами слева или справа вместо помещения их под ним.

height

Устанавливает высоту элемента и измеряет ее, если это необходимо. Значение возвращается в виде строки, включающей единицы измерения (рх, % и т. д.). Для получения числового значения используется свойство posHeight.

left

Задает горизонтальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (рх, % и т. д.). Для получения значения в виде числа используется свойство posLeft.

margin-top, margin-right, margin-left, margin-bottom, margin

Определяет размер отступов вокруг данного элемента. Свойство margin служит для задания четырех отступов. Если используется несколько значений, но меньше, чем четыре, оставшиеся противоположные стороны будут равными. Эти значения устанавливают минимальное расстояние между текущим элементом и остальными.

overflow

Это свойство управляет тем, что произойдет, если содержимое элемента выйдет за его границы:

• none - если элемент выйдет за пределы своего фрагмента, то он все равно будет изображен (например, часть текста, для которой не хватило места в отведенной полосе);
• clip — выступающие части элемента будут обрезаны;
• scroll — пользователь сможет увидеть выходящие за пределы элемента части с помощью прокрутки.

padding-top, padding-right, padding-left, padding-bottom, padding

Определяет расстояние между содержимым и рамкой элемента. Свойство padding используется для задания четырех таких расстояний. Если имеется несколько значений, но меньше четырех, оставшиеся противоположные стороны будут равными.

position

Устанавливает, каким образом вычисляется положение элемента в плоскости экрана:

• absolute — элемент будет поставлен в некоторое положение относительно фона и будет двигаться вместе с ним;
• static— элемент будет поставлен в некоторое положение относительно фона, но не будет двигаться при прокручивании страницы;
• relative — элемент будет помешен в обычное положение относительно других, в соответствии с положением в исходном коде (это значение установлено по умолчанию).

top

Устанавливает или возвращает вертикальную координату элемента, позволяя корректно устанавливать и передвигать элементы. Значение возвращается как строка, включающая единицы измерения (рх, % и т. д.). Для получения значения в виде числа используется свойство posTop.

visibility

Позволяет элементу быть видимым или невидимым на странице. Невидимые (hidden) элементы занимают то же место и так же влияют на расположение других элементов, как и видимые (visible), но становятся прозрачными. Это свойство может быть использовано для отображения лишь одного из элементов, занимающих одно и то же место:

• visible - элемент виден на экране;
• hidden - элемент не виден;
• inherit — элемент виден, если его родительский элемент является видимым.

width

Устанавливает ширину элемента и измеряет ее, если это необходимо. Значение возвращается как строка, включающая тип единиц измерения (рх, % и т. д.). Для получения значения в виде числа используется свойство posWidth.

z-index

Свойство z-lndex указывает, в каком порядке элементы будут перекрывать друг друга. Элементы с более высоким z-индексом появятся поверх элементов с более низким z-индексом. При положительных значениях элемент ставится перед обычным текстом, при отрицательных - позади него. Таким образом, на страницах создается набор плоских слоев, для которых задается порядок перекрывания.

Свойства печати

page-break-after

Управляет началом и концом страницы, разрывом страницы и тем, где на странице содержание продолжится, т. е. слева или справа.

page-break-before

Управляет началом и концом страницы, разрывом страницы и тем, где на странице содержание продолжится, т. е. слева или справа.

Свойства фильтров

Все фильтры вызываются с помощью ключевого слова filter. Есть два вида фильтров: статические и динамические. Динамические фильтры разделены на две группы: управляющие переходом (переходные) и управляющие появлением объекта на экране. Фильтры первой группы предназначены для того, чтобы объект накладывался на другие объекты или уходил с соседних объектов. Фильтры второй группы заставляют объекты появляться или исчезать одним из 23-х возможных способов. Все фильтры вызываются одинаково из каскадной таблицы стилей:

filter: имя фильтра(параметр1, параметр2, и т. д.}

Есть 14 типов статических фильтров и 2 типа динамических.

Visual filters

Управляет внешним видом объектов при помощи набора встроенных фильтров. Приведем список доступных фильтров и укажем их функции:

revealtrans

Позволяет открывать или закрывать одни элементы другими, используя 23 встроенных шаблона.

• <длительность> — время, за которое превращение с помощью фильтра произойдет полностью (в миллисекундах);
• <тип перехода> — целое число, соответствующее номеру применяемого фильтра.

blendtrans

Позволяет управлять появлением и исчезновением выбранных видимых объектов. Здесь <длительность> — время, за которое действие фильтра произойдет полностью (в миллисекундах).

Другие свойства

cursor

Определяет вид курсора мыши.

События Dinamic HTML

>>>На верх