Вставка элементов ActiveX в броузер IE.

<OBJECT
CODEBASE="URL ActiveX элемента для его установки в системе"
CLASSID="clsid:Идентификатор ActiveX элемента в реестре Windows"
WIDTH="значение" HEIGHT="значение" ALIGN="значение"...>
<PARAM NAME="параметр 1" VALUE="значение 1">
...
<PARAM NAME="параметр N" VALUE="значение N">
<!- альтернативный раздел, обрабатывается при невозможности выполнить элемент ActiveX -->
<H1>Сожалею, но ActiveX элемент выполняется у пользователей IE</H1>
</OBJECT>

Например, вот так на Web-странице размещается стандартный календарь Windows:

<object classid="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
id=msCalendar width=300 height=200 align=left >
<param name=Year value=2001>
<param name=Month value=3>
<param name=Day value=10>
<param name=GridCellEffect value= 1>
<param name=ShowDays value=-1>
<param name=ShowHorizontalGrid value=-1>
<param name=ShowTitle value=-1>
<param name=ShowVerticalGrid value=-1>
</object>

В этой главе придется нарушить традицию и не закреплять полученные знания на примере, т.к. все что касается объектов сильно зависит от используемого пользователями программно-аппартатного комплекса.

В заключении следует упомянуть о интересном MSIE расширении HTML - <BGSOUND> теге, задающим фоновый звук документа. Тег <BGSOUND> должен располагаться в заголовке документа и иметь следующий формат:

<BGSOUND SRC="URL звукового файла" LOOP="N повторов">

Форматирование с использованием CSS

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

С момента разработки CSS, было принято две его спецификации: CSS 1 и CSS 2 (в настоящее время W3C ведет работы над проектом CSS 3). Мы не будем здесь подробно рассматривать язык CSS (для этого у меня нет ни времени, ни полноты знаний), а рассмотрим лишь его основные и часто применяемые элементы. Для детального изучения языка описания каскадных стилей вам необходимо ознакомиться с переводом материалов консорциума W3C, подготовленным на WEBCLUB.RU - Спецификация CSS level 2.

Итак переходим к предмету. Первоначально рассмотрим основные свойства CSS, используемые для управления стилями элементов HTML документов.

Свойства CSS

CSS позволяет манипулировать следующими свойствами элементов:

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

• font-family - определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя;
• font-style - стиль шрифта (normal, italic);
• font-variant - варианты отображения шрифта (normal, small-caps);
• font-weight - жирность шрифта (normal, bold, bolder, lighter, значение от 100 до 900);
• font-size - размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger);
• font - обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

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

• word-spacing - расстояние между словами (значение, normal);
• text-decoration - декорация текста (none, underline, overline, line-through, blink);
• letter-spacing - расстояние между буквами (значение, normal);
• vertical-align - позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %);
• text-transform - изменение текста (none, Capitalize, UPPERCASE, lowercase);
• text-align - положение текста (left, right, center, justify);
• text-indent - отступ (значение, %);
• line-height - отступ сверху (normal, значение, %);

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

• color - цвет элемента (значение);
• backgroung-color - цвет фона элемента (значение);
• background-image - изображение фон (none, URL);
• background-repeat - варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat);
• background-attachment - возможность прокрутки фонового изображения (scroll, fixed);
• background-position - положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right);
• background -обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

Свойства блока

• margin-top - определяет отступ сверху (значение, %, auto);
• margin-right - определяет отступ справа (значение, %, auto);
• margin-bottom - определяет отступ снизу (значение, %, auto);
• margin-left - определяет отступ слева (значение, %, auto);
• margin - обобщает все вышеперечисленные свойства;
• padding-top - отступ от верхнего border'а (значение, %);
• padding-right - отступ от правого border'а (значение, %);
• padding-bottom - отступ от нижнего border'а (значение, %);
• padding-left - отступ от левого border'а (значение, %);
• padding - обобщает все вышеперечисленные свойства;
• border-top-width - толщина верхнего border'а (значение, thin, medium, thick);
• border-right-width - толщина правого border'а (значение, thin, medium, thick);
• border-bottom-width - толщина нижнего border'а (значение, thin, medium, thick);
• border-left-width - толщина левого border'а (значение, thin, medium, thick);
• border-width - обобщает все вышеперечисленные свойства;
• border-color - Цвет border'а. (значение);
• border-style - стиль border'ов (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
• border-top - обобщает вышеперечисленные свойства для верхнего border'а;
• border-right -обобщает вышеперечисленные свойства для правого border'а;
• border-left - обобщает вышеперечисленные свойства для левого border'а;
• border-bottom - обобщает вышеперечисленные свойства для нижнего border'а;
• border - обобщает все вышеперечисленные свойства;
• width - ширина элемента (значение, %);
• height - высота элемента (значение, %);
• float - расположение элемента (left, right, none);
• clear - расположение других элементов вокруг данного (left, right, both, none);

Классификационные свойства

• display - определяет, как будет отображаться элемент (none, block, inline, list-item);
• white-space - определяет, как будут отображаться пробелы между элементами (normal, pre, nowrap);
• list-style-type - определяет вид list-item маркера в списках (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none);
• list-style-image - задает вид list-item маркера из картинки (none, URL);
• list-style-position - определяет положение маркера в зависимости от list item элемента (inside, outside);
• list-style - обобщает вышеперечисленные свойства;

Свойства элемента

• position - определяет, как будет отображаться элемент по отношению к другим элементам документа (relative, absolute);
• top - определяет позицию элемента TOP относительно элемента родителя (значение, %);
• left - определяет позицию элемента LEFT относительно элемента родителя (значение,%);
• width - определяет ширину элемента (значение, %, auto);
• height - определяет высоту элемента (значение, %, auto);
• overflow - режим отображения содержимого элемента, при несоответствии размера элемента, размеру содержимого (non, clip, scroll);
• visibility - управление видимостью элемента в документе (hidden, " ");

Правила CSS

Лист стилей представляет собой набор правил CSS. Правила задаются в форме простых и групповых селекторов, ID селекторов, правил наследования и правил определения классов элементов, псевдоклассов и псевдоэлементов.

Селекторы

Простейшее правило CSS задается следующим образом:

Селектор { свойство CSS: значение }

Селектор это любой из рассмотренных нами ранее тегов HTML (например BODY, P, H1, LI). Далее в фигурных скобках декларируется значение свойств CSS определяющих стиль данного элемента в документе. Например:

H1 { color:red } - задает стиль заголовкам первого уровня.

Для удобства применения можно декларировать в одном правиле несколько свойств CSS для нескольких селекторов. Например:

BODY { background-color:white; color:black; font-family:Times New Roman; font-style:normal; font-size:10pt } - данное правило задет стиль всему телу документа (вместо атрибутов тега BODY).

H1, H2, H3, H4, H5, H6 { color:black; font-style:italic } - данное правило задает стиль заголовкам всех уровней в документе.

Правила наследования

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

Основной_селектор Вложенный_селектор { свойство CSS: значение }

Например:

P STRONG { color:red; font-weight:bold } - задает стиль для элементов STRONG заключенных в контейнере абзаца.

Кроме этого следует помнить о внутреннем наследовании стилей в документе. Например стиль элемента BODY (в части тех свойств CSS, значения которых не переопределены в персональных правилах вложенных элементов) распространяется на все дочерние элементы и без их перечисления в контекстных селекторах.

Классы элементов

В правилах CSS используется понятие класса. Класс элемента задается следующим образом:

Селектор.Класс { свойство CSS: значение }

Например:

H1.normal { color:black; font-style:normal; font-family:serif } - класс строгого стиля заголовка;

H1.funny { color:blue;font-style:italic; font-family:fantasy } - класс легкомысленного стиля заголовка;

Для использования в HTML документе элемента конкретного класса применяется атрибут CLASS:

<H1 CLASS=normal>Технические параметры устройства DJP67575</H1>

<H1 CLASS=funny>Свежие анекдоты про программистов</H1>

В CSS можно определять классы не связанные с конкретными элементами:

.Класс { свойство CSS: значение }

Например:

.red { color:red } - класс красного стиля элементов;

В HTML документе использование данного стиля выглядит так:

<p>Ничего не получается сказал он и набрал команду <kbd class=red>FORMAT C:</kbd></p>