Меню

Контакты

+ 996 312 46 07 70
(прямой)
+ 996 555 55 03 11
Мы рады вашему звонку!

Авторизация




WML
WML - Язык разметки для мобильных телефонов(WAP)
WML (Wireless Markup Language) - язык разметки для работы в Интернет беспроводных устройств (WAP), основанный на XML. Назначение WML - описание контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.
WML специально "заточен" (и продолжает "затачиваться") с ориентацией на ограничения подобных устройств, а именно: малоформатный экран, узкую полосу пропускания канала связи, малую собственную память и ограничения на "вычислительные" способности. По этой причине, и из-за острой нужды в стандартизации, в языке "визуальной разметки" для WAP устройств свое законное место заняла идея хорошо структурированных данных - WML наследует синтаксис XML.
Трудно ожидать, что кто-то будет подключать к сотовому телефону мышь, поэтому модель " Point-and-click" для WAP не годится (по крайней мере, видимо так считает группа разработчиков языка), и большая роль в WML отводится другим механизмам событий. Доводы здесь те, что у пользователя должен быть шанс на управление голосом, либо еще какие-то варианты, кроме кнопочных. Экраны WAP устройств выглядят достаточно по-разному, встречаются вертикальные и горизонтальные, но объединяет их все то, что они предельно малоформатны.
Сам WML выглядит как " Html для бедных", но с чуть более жесткими требованиями к парности тегов, использованию регистра и обрамлению атрибутов кавычками. Используемые компоненты синтаксиса в WML - это символьные сущности, элементы, атрибуты, комментарии, переменные и секции CDATA.
WML скуп на возможности представления - набор поддерживаемых тегов невелик, и язык основан на нетипичной метафоре колоды карт, хотя сильных аргументов в защиту этого построения из просмотренных источников у меня не сложилось. Нельзя сказать, что особым успехом увенчались и попытки осознать до конца модель WML tasks/events. Но, похоже, я не одинок - имеющиеся в сети материалы страдают схожими проблемами.
 
Метафора игральных карт
Краеугольный камень WML-дизайна - колода игральных карт - набор показываемых по отдельности карточек (экранов), хранящихся в памяти. То есть, если для обычного сайта единицей является Web- Page, то единица WML - это т. н. deck, состоящая из одной или нескольких card, составляющих вместе WML-документ (wml-файл).
Как только wml-файл загружен в устройство с сервера, пользователь может листать экраны, переходить к следующему или возвращаться к предыдущему, не ожидая загрузки с сайта, что, конечно, выгодно по скорости.
 
Пример 1. WML-колода из одной карты
 
<wml>
 <card> 
 <p>Welcome</p> 
 </card> 
</wml>

 

Нетрудно заметить, что структура языка во многом родственна HTML: теги <wml>...</wml> начинают и завершают документ, а тело карт заключается в <card>...</card>.
Впрочем, пример выше еще не вполне завершен. WML - это ветвь XML, а любой XML-документ сначала должен пройти проверку на соответствие своему DTD (Document Type Definition). Следовательно, в любом wml-файле, как документе, необходимо указать полный путь к WML DTD.
В полном примере ниже DTD-ссылка указывает на сайт W@PForum, координирующий сегодня WAP-разработки, и это DTD описывает все обязательные элементы стандарта WML, интерпретируемые всеми микро-броузерами. Впрочем, если кому-то не так важно, что это такое, и не суть важны сторонние расширения, которыми тоже можно пользоваться на предмет правильности разметки, то можно просто копировать эту типовую декларацию, особо не задумываясь.
 
Пример 2. WML-колода из трех карт
 
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
      " HTTP://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card  ID="home" title="Welcome">
 <p align="center">Taler's HP<br/>
 <img src=" Logo.wbmp" alt="home"/><br/>
 <do type="accept" label="next"><go href="#card1"/></do></p>
</card>

<card id="card1" title="Page 1">
 <p>This is the first card.</p>
 <do type="accept" label="next"><go href="#card2"/></do>
 <do type="prev" label="back"><prev/></do>
</card>

<card id="card2" title="Page 2">
 <p>This is the second card.</p>
 <do type="accept" label="home"><go href="#home"/></do>
</card> 
</wml>

 

В Web есть программы-имитаторы, с помощью которых wml-файлы можно "видеть" даже без реального устройства, а просто на базе имеющегося броузера. Например здесь
Примечание: размер загружаемых в WAP-устройства файлов ограничен - не более что-то около 1.4k (1397, 1492, .. байт - граница зависит от устройства).
 
Переменные
В WML есть глобальные переменные, в которых можно запоминать информацию на уровне текущего сеанса. Их присутствие в языке вызвано уменьшением обмена с сервером, и это отличается от традиций HTML.
Если присвоить в одной карте переменной $myname значение Andy, а в другой карте есть текст "Welcome $myname", то он будет выведен как "Welcome Andy". Простенько и со вкусом!
 
Основные типы тегов WML
Строительные блоки и функциональные средства WML можно условно разделить на четыре категории: форматирование, навигация, ввод данных и управление действиями/событиями. Далее показан ряд конструкций языка с примерами - подчеркну, что здесь могут оказаться не все атрибуты. За дополнительной информацией нужно обращаться к документации.
 
Форматирование
Поскольку на экран выводится по одной карте, то в элементе card предусмотрен атрибут id - внутренний идентификатор для переходов, а также видимый на экране заголовок title. Для форматирования текста, почти аналогично HTML, используются такие элементы, как:
  • p - для параграфов, в <p> можно указывать атрибуты align и mode. align принимает значения right, center или left, а mode задает, будет ли текст на экране с авто-переносом (wrap) или нет (nowrap).
  • em и I - для выделения курсивом,
  • strong - для "полужирного" начертания,
  • U - для подчеркивания,
  • big - для текста большего размера,
  • small - для текста маленького размера,
  • table - для таблиц, с привычными <tr> и <td>,
  • br/ - для перехода на новую строку,
  • img/ - для графики.
 
Навигация
Для навигации и установки гиперссылок предусмотрены теги anchor и a.
Семантика a повторяет HTML, а в элементе anchor используется либо подэлемент go с атрибутом href, задающим адрес ссылки, либо prev - вернуться к предыдущему экрану.
Вызвав страницу, мы получаем первую карточку. Чтобы перейти к следующей, необходимо как-то адресоваться к картам, для чего служит id тега card - уникальный идентификатор карты. Обратите внимание также на title - название карточки, имеющее смысл, в частности, для закладок.
 
Пример 3
<anchor>List of Tales
  <go href="tales.wml"/></anchor>
<anchor>Previous page<prev/></anchor>
<a href="story.wml">goto Story</a><br/>

 

В примере 3 ссылки устанавливаются при помощи 'якоря' anchor и традиционного тега a. У anchor два атрибута: href определяет объект, на который мы ссылаемся, и title - экранная надпись, идентифицирующая связь, которую браузер может опционально показывать.
 
Элементы ввода
Безусловно, всю мощь идея переменных приобретает при возможности что-то получить от пользователя. Для этого предусмотрен комплект тегов ввода, достаточно близких к своим HTML аналогам:
  • input - для ввода данных пользователем,
  • select/option - поле выбора из заранее заданного списка,
  • postfield - аналог скрытых input в HTML-формах. На самом деле, это даже более мощная вещь, так как имея переменные, в postfield сейчас можно собирать и перегруппировывать информацию.
Атрибуты name тегов input и select хранятся, как переменные на всем пространстве колоды, и выступают параметрами в переходах по go и a. Посредством других атрибутов input типа type, format и maxlength, можно управлять форматным вводом. Пользуясь тегом fieldset, можно задавать некоторые стили оформления.
 
Пример 4. Использование input и select
 
<wml> 
<card id="search" title="search"> 
<p align="left"> 
CD: <input name="band" title="JazzBand:" size="18"
  value="Rolling Stones" emptyok="false"/><br/>
Type: <select name="type" value="double" title="Type:"> 
  <option value="single">Single CD</option> 
  <option value="double">Double CD</option> 
</select>
</p> 
</card> 

<card id="add" title="Add CD"> 
CD: <input name="CD" size="18" type="text" /><br/> 
Price: <input name="Price" size="8"/><br/> 
</card> 
</wml>

 

Здесь атрибут name - имя переменной, куда заносится значение, type - тип формы (текст или число), value - значение по умолчанию (до ввода), a emptyok показывает, допустима ли в качестве значения пустая строка.
 
Управление действиями
"Действия" (tasks, do) используются для структур типа меню и для описания отдельных действий, например, для выбора новой карты/ссылки. Типовые "исполнительные" теги действий - это go, prev, refresh (перечитать текущую карту) или noop (ничего не делать). Действия на уровне конкретной карты описываются в тегах do, а на уровне всей колоды - в элементе template.
При помощи тега timer и атрибута ontimer тега card можно, например, на время 'заморозить' страницу. На практике часто применяется ontimer=" URL", говорящий, что некое время карта должна отображаться, а затем должен загрузиться ресурс с адреса url. Время в value выражается в 0,1 сек.
 
Пример 5
 
<wml> 
<card id="variable" title="Variable" ontimer="WMLScript.wml"> 
 <timer value="5"/> 
 <p align="left"> Wait for 5 seconds ... </p> 
</card> 

<!-- Card and deck linking --> 
<card id="input1" title="Input"> 
<do type="Next input properties"> 
  <go href="#input2"/> </do> 
<do type="Task properties"> 
  <go href="Task.wml"/> </do> 
  ...
</card> 
</wml>

 

Согласно WML-спецификации, у элементов do должны быть уникальные name, но если какое-либо из имен опущено, то подразумевается, что оно берется из type. В таких случаях различные элементы do легко могут начать пересекаться по именам, что может стать источником трудно диагностируемых ошибок.
 
Пример 6
<do type="accept" name="yeah" label="Menu">
<go href="Menu. ASP#menu"/>
</do>
<do type="accept" name="blah" label="Back">
<prev/>
</do>
 
В WML есть также возможность назначать клавиши навигации.
Тег <onevent type="button">действие</onevent> позволяет приписать к одной из кнопок телефона (зависит от модели) пользовательское событие. В качестве действия обычно используется <go href="url"/>. Так, добавив к карте строку <onevent type="GO"><go href="#card2"/></onevent>, мы назначим кнопке GO переход непосредственно в меню.
Другой вариант переназначения стандартного меню телефона и способа передачи переменных в сервер-ориентированные скрипты:
 
<do type="accept" label="Search">
<go href="table.asp?srch=$varsearch"/></do>

 

Значение параметра type показывает, какая именно клавиша будет переопределена (в данном случае кнопка, соответствующая OK). Префикс $ перед именем переменной говорит о том, что будет использовано значение переменной, а не само слово "varsearch".
 
Графика
В настоящее время в WML поддерживается графический формат, называемый WBMP (Wireless BMP type 0) - монохромные (двуцветные) изображения. Формат WBMP type 0 имеет следующие характеристики :
  • No compression
  • One bit color (white=1, black=0)
  • One bit color deep (monochrome)
Для вставки в wml картинки предназначен тег <img/>, где, как в HTML, для ссылки на источник картинки используется атрибут src.
 
Типичные параметры img:
 
<img alt=  src="url"  localsrc=" Icon" 
  align=  height=  width=  vspace=  hspace= />.
 
Назначение атрибутов большей частью очевидно. Пояснения требует лишь localsrc, позволяя, как замену src, указать в качестве источника внутреннюю пиктограмму броузера. Атрибут align задает выравнивание картинки с опциями top, bottom и middle.
 
WBMP в качестве ссылки:
 
<anchor title="Home">
 <img alt="Home" src="url" localsrc="house" />Home
 <go href="default.wml"/>
</anchor><br/>
 
Для конвертирования в формат WBMP лучше всего выбирать маленькие контрастные изображения.
Максимальный размер картинки в байтах зависит от устройства, но не должен превышать ограничений на размер карты (как упоминалось выше, около 1,4k). Соответственно, предельный размер в пикселах для, скажем, Nokia 7110 составляет около 96 x 65 (width, height), хотя физический экран (без скроллинга) еще меньше и ограничен 96 x 44 (4 строки по 11 пикселов), а к примеру, для Ericsson R320 - 101x52 (строка в 13 пикселов). Следует учитывать, что пикселы отдельных устройств не всегда квадратные.
 
Список ресурсов для работы с WBMP можно найти, например, здесь.
  • Photoshop позволяет сохранять в виде WBMP рисунки или Paintshop Pro на платформе Windows (в команде меню Save As появится пункт "UnWired.wbmp").
  • Wapaint.dll(от Wapaint.com) - ActiveX Server module, предназначенный для работы в ASP-скриптах на сервере и удобный для генерации динамических картинок (типа статистических диаграмм и пр.).
  • Присмотритесь также к редактору изображений из Nokia SDK.
WML для вызова динамамических картинок через ASP и Wapaint.dll
 
<wml> 
<card id="home" title="example"> 
REM GRAPH.asp is the image to construct

<p align="center">example<br/> 
<img src="GRAPH.asp" alt="problem"/><br/></p> 

<do type="prev" label="prev"> <prev/> </do> 
</card> 
</wml>

 

Если вы пользуетесь имитатором, необходимо тщательно протестировать страницы на реальном телефоне, потому что многие имитаторы плохо поддерживают графические файлы. Желательно проверить все в реальных условиях - это единственный способ застраховаться от неприятностей.
 
Советы по разработки WML приложений
Устройства WAP ограничены по возможностям из-за памяти, процессора, скорости передачи т. д., однако кое-что все-таки можно делать, зная об этих ограничениях. А технологии совершенствуются, и появляются новые улучшенные решения.
  • Приложения необходимо проектировать, исходя из принципа 'колоды карт'. Так как она загружается целиком, это уменьшает обмен данными с сервером. Любой запрос на другую колоду инициирует новое соединение с сервером, что потребует дополнительного времени - так устроена WAP-технология.
  • Из-за малого размера экрана особое внимание нужно уделить читабельности текста. Размер "страницы" лучше ограничить 4- 5-ю экранами.
  • Для удобной навигации и быстрого управления предпочтительнее теги select/option (выбор из списка), чем какие-то другие средства.
  • Из-за маленькой памяти стоит избегать графики.
  • Не следует пренебрегать alt для изображений (альтернативный текст для случаев, когда броузер не поддерживает картинок) - если среди Internet-броузеров отсутствие такой поддержки является анахронизмом, то в WAP это распространенное явление.
  • WAP стандарты не фиксируют соглашений о навигации, типа back, forward и home, как это принято в Internet-броузерах. Проработка этих вопросов остается на усмотрение дизайнера.
 
Графика в HTML
Внимание! Работает только в Internet Explorer!
 
Список графических средств Html весьма внушителен.
Мы сейчас рассмотрим всего лишь одну из возможностей изображения некоторых графических фигур в HTML.
 
Система координат
Начало отсчета координат – это верхний левый угол экрана, т.е.
X (0..800)
Y (0..600)

 

Координаты можно задавать в различных единицах. Пока будем мерить в пунктах. Координаты по X – от 0 до 800. Координаты по Y – от 0 до 600.
Позиционирование графических элементов может быть абсолютным и относительным. В случае абсолютного позиционирования все координаты отсчитываются от левого верхнего угла. В случае относительного позиционирования координаты следующего графического элемента отсчитываются от координат предыдущего. Пока мы будем иметь дело с абсолютным позиционированием.
Чтобы подготовить броузер к восприятию графических элементов надо кое-что поместить в начало HTML-файла:
 
<html>
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta  HTTP-equiv=Content-Type content="text/html; charset=windows-1251">
<style>
v\:* {behavior: URL(#default#VML); position:absolute;}
</style>
</head>
<body lang=RU>
<div>
...Здесь наша графика...
</div>
</body>
</html>

 

Графические элементы
Линия
Задается тегом <V:LINE>. Имеет закрывающий тег.
 
Атрибуты

  • FROM. Координаты начала линии в пунктах.
  • TO. Координаты конца линии в пунктах.
  • STROKEWEIGTH. Ширина линии в пунктах. По умолчанию – тонкая линия.

STROKECOLOR. Цвет линии. По умолчанию – черный.

 
Пример

 

 

<v:line from="0,0" to="200,60"
	strokeweight="1.5pt" strokecolor="#00FF00">
</v:line>

 

 

 
Обратите внимание на то, что обозначение пунктов ( pt) необходимо в значении атрибута STROKEWEIGTH, но необязательно в FROM и TO.
 
Ломаная линия
Задается тегом <V:POLYLINE>. Имеет закрывающий тег.
 
Атрибуты

  • POINTS. Координаты точек линии в пунктах.
  • STROKEWEIGTH. Ширина линии в пунктах.
  • STROKECOLOR. Цвет линии.
  • FILLED. Заливка. Принимает значения "f" (нет заливки) или "t" (есть заливка). По умолчанию "t".

FILLCOLOR. Цвет заливки. По умолчанию – белый.

 
Пример

 

 

<v:polyline points="0,5,300,50,500,10,600,40"
	strokeweight="3pt" strokecolor="#FF0000"
	filled="f">
</v:polyline>
 
Прямоугольник
Задается тегом <V:RECT>. Имеет закрывающий тег.
 
Атрибуты

  • STYLE. Задает отступ слева (MARGIN-LEFT), отступ сверху (MARGIN-TOP) для левого верхнего угла прямоугольника, а также ширину (WIDTH) и высоту (HEIGHT).

STROKEWEIGTH, STROKECOLOR, FILLED, FILLCOLOR. Аналогичны одноименным атрибутам тега <V:POLYLINE>.

 
Пример

<v:rect style="margin-left:5;margin-top:5;width:350;height:40"
	fillcolor="yellow"strokeweight="1.5pt"
	strokecolor="fuchsia">
</v:rect>
 
Эллипс
Задается тегом <V:OVAL>. Имеет закрывающий тег.
 
Атрибуты

  • STYLE. Задает отступ слева (MARGIN-LEFT), отступ сверху (MARGIN-TOP) для левого верхнего угла прямоугольника, описанного вокруг эллипса, а также его ширину (WIDTH), и высоту (HEIGHT).

STROKEWEIGTH, STROKECOLOR, FILLED, FILLCOLOR. Аналогичны одноименным атрибутам тега <V:RECT>.

 
Пример

<v:oval style="margin-left:100;margin-top:2;width:100;height:50"
fillcolor="silver" strokeweight="1.5pt"
strokecolor="red">
</v:oval>
 
Виды линий
Задаются тегом <V:STROKE>. Помещается в контейнер <V:LINE></V:LINE>, <V:POLYLINE></V:POLYLINE> и т.д. Не имеет закрывающего тега, но обязательно перед закрывающей угловой скобкой ставится знак /.
 
Атрибуты

  • DASHSTYLE. Вид штриховой линии. Может принимать значения: "DASH" (штрих), "LONGDASH" (длинный штрих), "DASHDOT" (штрих-пунктир), "LONGDASHDOT" (длинный штрих-пунктир).
  • LINESTYLE. Вид двойной линии. Может принимать значения: "THINTHIN" (две тонкие линии), "THINTHICK" (тонкая линия над толстой), "THICKTHIN" (тонкая линия под толстой), "THICKBETWEENTHIN" (толстая линия между тонкими). Надо иметь в виду, что каждый из этих видов требует также задания определенной суммарной ширины линии.
  • STARTARROW. Вид стрелки в начале линии. Может принимать значения: "CLASSIC" (обычная стрелка), "OPEN"(тонкая стрелка), "BLOCK" (треугольная стрелка), "OVAL"(овальчик), "DIAMOND" (ромбик).
  • STARTARROWWIDTH. Ширина стрелки. Может принимать значения: "WIDE" (широкая), "NARROW" (узкая). По умолчанию – средняя ширина.
  • STARTARROWLENGTH. Длина стрелки. Может принимать значения: "LONG" (длинная), "SHORT" (короткая). По умолчанию – средняя длина.

ENDARROW, ENDARROWWIDTH, ENDARROWLENGTH. Вид, ширина и длина стрелки на конце линии. Аналогичны атрибутам STARTARROW, STARTARROWWIDTH,STARTARROWLENGTH.

 
Примеры

<!-- пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#0000FF">
<v:stroke dashstyle="Dash"/>
</v:line>

 

 

<!-- штрих-пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#00FF00">
<v:stroke dashstyle="DashDot"/>
</v:line>

 

 

<!-- длинная пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#00FFFF">
<v:stroke dashstyle="longDash"/>
</v:line>

 

 

<!-- длинная штрих-пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#FF00FF">
<v:stroke dashstyle="longDashDot"/>
</v:line>

 

 

<!-- двойная линия 1 -->
<v:line from="30,3" to="600,3" strokeweight="3pt">
<v:stroke linestyle="thinThin"/>
</v:line>

 

 

<!-- двойная линия 2 -->
<v:line from="30,3" to="600,3" strokeweight="3pt">
<v:stroke linestyle="thinThick"/>
</v:line>

 

 

<!-- тройная линия -->
<v:line from="30,3" to="600,3" strokeweight="4.5pt">
<v:stroke linestyle="thickBetweenThin"/>
</v:line>

 

 

<!-- стрелка в виде маленького треугольника -->
<v:line from="30,3" to="600,3">
<v:stroke endarrow="block"
endarrowwidth="narrow" endarrowlength="short"/>
</v:line>

 

 

<!-- классическая стрелка -->
<v:line from="30,3" to="600,3">
<v:stroke endarrow="classik"/>
</v:line>

 

 

<!-- тонкая длинная стрелка -->
<v:line from="30,3" to="600,3">
<v:stroke endarrow="open"
endarrowwidth="wide" endarrowlength="long"/>
</v:line>

 

 

 
Виды заливок
Задаются тегом <V:FILL>. Помещается в контейнеры <V:POLYLINE></V:POLYLINE>, <V:RECT></V:RECT> и т.д. Не имеет закрывающего тега, но обязательно перед закрывающей угловой скобкой ставится знак /.
 
Атрибуты

  • TYPE. Тип заливки. Может принимать значения: "PATTERN" (узор), "TILE" (текстура), "GRADIENT" (градиентная заливка).
  • SRC. Имя GIF-файла образца заливки. Для узора и текстуры.
  • COLOR2. Цвет фона.
  • FOCUS. Центр распространения заливки. Может принимать значения от "-100%" до "100%". Для градиентной заливки.

ANGLE. Угол наклона заливки. Может принимать значения от "-90" до "90". Для градиентной заливки.

 
Примеры

<!-- узор -->
<v:rect style="margin-left:5;margin-top:2;width:350;height:40"
fillcolor="#FF0000"strokeweight="1.5pt"strokecolor="#00FF00">
<v:fill src="fill1.gif" type="pattern" color2="#00FF00"/>

 

 

<!-- градиентная заливка -->
<v:rect style="margin-left:5;margin-top:2;width:350;height:40"
fillcolor="green">
<v:fill angle="45" focus="-50%" type="gradient"/>
</v:rect>

 

 

<!-- текстура -->
<v:rect style="margin-left:5;margin-top:2;width:350;height:40">
<v:fill src="fill2.gif" type="tile"/>
</v:rect>

 

 

 
Тег canvas набирает популярность, поскольку позволяет создавать 2-х мерную графику при помощи JavaScript. Однако отсутствие поддержки со стороны Internet Explorer значительно тормозит дальнейшее его продвижение. Существует готовый скрипт ExplorerCanvas, который добавляет поддержку этого тега в IE используя возможности Vector Markup Language (VML).
Подключать скрипт можно только для IE используя условное подключение:
 

 

 

<!--[if IE]>
< Script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

 

 
STYLE - Сводная таблица стилей CSS
Основные CSS стили.
Серым выделены стили, которые есть в стандарте, но пока не поддерживаются основными браузерами.
В описании указанно как обращаться к стилю из объектной модели JavaScript.

 

 
Font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {}
font-style Задает способ начертания шрифта: normal - Нормальный (по умолчанию),
Italic - Курсив,
oblique - Наклонный.
P {font-style: italic;} Пример
Объектная модель:
[window.]document.getElementById("elementID").style.fontStyle
[window.]document.all["elementID"].style.fontStyle='italic';
font-variant Задает варианты начертания шрифта: normal - Нормальный (по умолчанию),
small-caps - Все буквы заглавные).
P {font-variant: small-caps;}
font-weight Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}
 
Цвет и фон
 
color Определяет цвет элемента
I {color: green;}
Background Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.
background-color Устанавливает цвет фона для элемента - именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator - лишь ширину, занимаемую этим элементом.
H4 {background-color: yellow;}
В скриптовых языках используйте Object.style.backgroundColor [ = sColor ]
background-attachment Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
  • fixed - делает фоновое изображение элемента неподвижным
  • scroll - позволяет перемещаться фону вместе с содержимым.
background-attachment: fixed | scroll
background-image Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.
background-image: URL('bg. GIF');
background-position Задает начальное положение фонового изображения, установленного с помощью параметра background-image.
У этого параметра два значения, положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее. top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера
background-repeat Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
  • no-repeat - Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу).
  • repeat - Фоновое изображение повторяется по горизонтали и вертикали.
  • repeat-x - Фоновый рисунок повторяется только по горизонтали
  • repeat-y - Фоновый рисунок повторяется только по вертикали
opacity Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот - его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
width Ширина поля, предоставленного элементу. Возможные значения: 100pt, 5cm.
 
Текст
 
text-decoration Устанавливает эффекты оформления шрифта
  • blink - Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте.
  • line-through - Создает перечеркнутый текст.
  • overline - Линия проходит над текстом.
  • underline - Устанавливает подчеркнутый текст.
  • none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
text-transform Задает преобразование регистра текста при отображении.
  • capitalize - Каждое слово в предложении будет начинаться с заглавного символа.
  • lowercase - Все символы текста становятся строчными (нижний регистр).
  • uppercase - Все символы текста становятся прописными (верхний регистр).
  • none - Отменяет все эффекты.
text-align Определяет выравнивание элемента. Возможные значения: left, right, center, justify
P {text-align:justify}
H5 {text-align: center}
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
line-height Управляет интервалами между строками текста.
line-height: normal | множитель | значение | проценты
P {line-height: 50 %}
word-spacing Устанавливает интервалам между словами. Можно использовать отрицательные значения
P {word-spacing: 50 %}
white-space Параметр white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде Html показывается на веб-странице как один. Исключением является тег <PRE>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный.
  • normal - Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
  • nowrap - Переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега <BR> переносит текст на новую строку.
  • pre - Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
Браузер Internet Explorer 6 и младше не поддерживает аргумент pre. Internet Explorer 7 понимает значение pre только в "строгом" режиме (<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.01//EN" " HTTP://www.w3.org/TR/html4/strict.dtd">).
Браузер Opera 9 и Firefox 3 также работают со значением pre-wrap, при котором сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
letter-spacing Устанавливает интервалам между буквами
P {letter-spacing: 50 pt}
P {letter-spacing:-.4pt} интервал, уменьшенный на 0.4 пункта.
vertical-align Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom
P {vertical-align: 50 pt}
 
Поля и отступы
 
margin Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл.
Число аргументов Результат
1 Поля будут установлены для всех сторон содержимого элемента.
2 Первый аргумент устанавливает поле от верхнего и нижнего края содержимого, второй аргумент - от левого и правого.
3 Первый аргумент задает поле от верхнего края содержимого, второй - одновременно от левого и правого края, а третий - от нижнего края.
4 Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.
margin-bottom,
margin-left,
margin-right,
margin-top
Отступы соответственно снизу, слева, справа, сверху элемента. Возможные значения: 150pt, 0.5in.
Объектная модель: [window.]document.getElementById("elementID").style.marginRight
padding Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл.
Число аргументов Результат
1 Поля будут установлены для всех сторон содержимого элемента.
2 Первый аргумент устанавливает поле от верхнего и нижнего края содержимого, второй аргумент - от левого и правого.
3 Первый аргумент задает поле от верхнего края содержимого, второй - одновременно от левого и правого края, а третий - от нижнего края.
4 Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.
padding-bottom,
padding-left,
padding-right,
padding-top
Отступы от рамки соответственно снизу, слева, справа, сверху.
 
Границы
 
border,
border-width
Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая).
table {border-width: 2px;}
table {border:2px;}
border-color Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
table {border-color: green;}
border-style Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию),
hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
table {border-style: dashed;}
table {border-style: groove;}
Форматирование
visibility Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.
  • hidden Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
  • visible Отображает элемент как видимый.
  • collapse Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено стилевое свойство display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой.
Объектная модель:
[window.]document.getElementById("elementID").style.visibility
[window.]document.all["elementID"].style.visibility = "visible";
overflow Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
  • visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  • hidden Отображается только область внутри элемента, остальное будет обрезано.
  • scroll Всегда добавляются полосы прокрутки.
  • auto Полосы прокрутки добавляются только при необходимости.
Браузер Internet Explorer поддерживает также параметр overflow-x, который отображает полосу прокрутки по горизонтали и overflow-y, он отвечает за полосу прокрутки по вертикали. Аргументы те же, что и для overflow.
clear Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
  • both Отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
  • left Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
  • right Отменяет обтекание с правой стороны элемента.
  • none Отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.
clip Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области - прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов.
clip: rect(Y1, X1, Y2, X2) | auto
В качестве аргументов используется расстояние от края элемента до области вырезки, которое задается в единицах CSS - пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рисунке:
Рис. Значения параметра clip
<style type="text/css">
#layer {
 position: absolute; /* Абсолютное позиционирование */
 clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */
 width: 200px; /* Ширина блока */
 color: white; /* Цвет текста */
 background: #7f4c3e; /* Цвет фона */
 border: 1px solid black; /* Параметры рамки */
 padding: 10px; /* Поля вокруг текста */
}
</style>

<div  ID="layer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim  Ad minim veniam, 
quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>
</div>
float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое - одна строка обтекающего текста может быть на той же линии, что и сам элемент.
  • left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
  • right Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
  • none Обтекание элемента не задается.
Объектная модель:
[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat
height Устанавливает высоту блочных или заменяемых элементов. Высота не включает толщину границ вокруг элемента, значение отступов и полей.
значение | проценты | auto
width Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
значение | проценты | auto
max-width Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width.
min-width Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
Позиционирование
bottom Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

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

left Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, аргумент left отсчитывается от левого края исходного положения элемента.
position Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
  • absolute Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
  • fixed По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
  • relative Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
  • static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.
right Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента.
top Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, аргумент top отсчитывается от верхнего края исходного положения элемента.
z-index Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.
 
Таблицы
 
border-collapse Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
  • collapse Линия между ячейками отображается только одна.
  • separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
table-layout Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
  • auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
  • fixed Значение повышает производительность построения таблиц. Ширина колонок в этом случае определяется либо с помощью тега <COL>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого параметра содержимое, которое не помещается в ячейку указанной ширины, будет обрезано либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет.
border-spacing Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.
caption-side Определяет положение заголовка таблицы, который задается с помощью тега CAPTION, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.
  • top Располагает заголовок по верхнему краю таблицы.
  • bottom Заголовок располагается под таблицей.
  • right Заголовок размещается справа от таблицы. Это значение работает только в браузерах Firefox и Mozilla.
  • left Заголовок размещается слева от таблицы. Это значение работает только в браузерах Firefox и Mozilla.
Списки
list-style Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.
list-style-image Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.
list-style-image: none | url('путь к файлу')
list-style-position Определяет, как будет размещаться маркер относительно текста.
  • outside - маркер вынесен за границу элемента списка
  • inside - маркер обтекается текстом.
list-style-type Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none
 
Эффекты
 
cursor Может принимать значения (Наведите курсор на соответствующее описание!)
  • all-scroll. Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении
    I {cursor: all-scroll;}
  • auto.По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте.
  • col-resize. Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали.
  • crosshair. Курсор-крест.
  • default. Стандартный курсор, используемый системой.
  • hand. Рука с вытянутым указательным пальцем. Используется при гиперссылке
  • help. Стрелка с вопросительным знаком.
  • move. Курсор со 4 стрелками, показывающий возможность перемещения.
  • no-drop. Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора.
  • not-allowed. Перечеркнутый круг. Данная операция не поддерживается.
  • pointer. Идентична стилю hand.
  • progress. Песочные часы, показывающие на продолжение операции.
  • row-resize. Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали.
  • text. Текстовый курсор-каретка.
  • url(uri). Ваш собственный курсор. Поддерживаются файлы .cur и .ani
    {cursor:url(elogo.cur);}
  • vertical-text. Горизонтальная текстовая каретка для вертикального текста.
  • wait. Курсор, показывающий, что система занята и требуется подождать.
  • N-resize, NE-resize, NW-resize, S-resize, SE-resize, SW-resize, E-resize, W-resize. Курсоры-стрелки с определением направления стрелок
    {cursor: n-resize;}
scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки
body {scrollbar-3dlight-color: green;}
scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке со стрелками
body {scrollbar-arrow-color: red;}
scrollbar-base-color Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color
body {scrollbar-base-color: green;}
scrollbar-darkshadow-color Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками
body {scrollbar-darkshadow-color: red;}
scrollbar-face-color Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки
body {scrollbar-face-color: green;}
scrollbar-highlight-color Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол
body {scrollbar-highlight-color: green;}
scrollbar-shadow-color Схоже с scrollbar-darkshadow-color
body {scrollbar-shadow-color: green;}
scrollbar-track-color Устанавливает или получает цвет дорожки для ползунка
body {scrollbar-track-color: aqua;}
min-height Устанавливает или получает минимальную высоту элемента
TR {min-height: 10px;}
Данный атрибут применим к TR, TD, TH в таблице, у которой table-layout:fixed
display
  • block- Блочный элемент. Соответствует блочным элементам HTML, т. е. отображается как отдельный абзац. При его отображении генерируется главный прямоугольник блока, в котором располагаются объемлющие прямоугольники потомков данного элемента.
  • inline- Текстовый элемент. Соответствует текстовым элементам HTML, т. е. отображается как текстовые строки внутри текущего абзаца, точнее внутри главного прямоугольника соответствующего блока.
  • inline-block- Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный.
  • inline-table- Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
  • list-item- Элемент списка. Отображается как блочный элемент с добавлением к нему маркера элемента списка
  • none- Элемент и все его потомки игнорируются при отображении.
  • run-in- Устанавливает элемент как блочный или встроенный в зависимости от контекста.
  • table- Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>.
  • table-caption- Задает заголовок таблицы подобно применению тега <CAPTION>.
  • table-cell- Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>).
  • table-column- Назначает элемент колонкой таблицы, словно был добавлен тег <COL>.
  • table-column-group- Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>.
  • table-header-group- Группа надзаголовков таблицы. см.THEAD IE 5.0+
  • table-footer-group- Группа подзаголовков таблицы. см.TFOOT IE 5.0+
  • table-row- Элемент отображается как строка таблицы (тег <TR>).
  • table-row-group- Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>.
 
Таблицы стилей или CSS

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

Таблицы стилей (style sheets) представляют собой абстракцию, в которой стиль документа определяется отдельно от его содержания. Термин "таблицы стилей"прочно вошел в русскую речь, хотя в некоторых книгах вы можете встретить и более точный перевод - "листы стилей".

Сводная таблица стилей.
По методам добавления стилей в документ различают три вида стилей.
 
Внутренние стили
Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного Html. Внешний вид документа трудно изменить.
Пример
<!-- каждому параграфу – свой цвет -->
<html>
<head>
<meta  HTTP-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<P style="color:blue">LET US TALK</P>
<P style="color:red">LET US READ</P>
</html>
 
 
Глобальные стили
Определяются тэгом STYLE с атрибутом TYPE="text/css" в контейнере <HEAD>...</HEAD>, являются универсальным средством, позволяющим не только оперативно изменять внешний вид страницы, но и  и бороться с перегруженностью  документа оформительскими тэгами.
Пример

 

<!-- все параграфы лилового цвета -->
<html>
<head>
<style type="text/css">
<!--
P {color:#FF00FF}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<P>LET US READ AND LEARN</P>
<P>LET US READ AND LEARN</P>
</html>

 

 

Обратите внимание на то, что описание стиля заключено в тэги комментариев. Это сделано для того, чтобы броузеры, не понимающие, о чем идет речь, не вываливали описание стилей на страницу, как обычный текст.
 
Связанные стили
Определяются во внешнем файле. Позволяют всем страницам, принадлежащим одному серверу выглядеть единообразно. Для связи с файлом, на котором описана таблица стилей, используется тэг <LINK> с атрибутом REL="stylesheet".
 
Другие атрибуты

  • TITLE. Задает заголовок страницы, на которой с помощью тэга <STYLE>, определена таблица стилей.
  • HREF. Ссылка на страницу с таблицей стилей или имя файла.
  • TYPE. Тип файла, с которым нужно установить связь.
 
Пример

 

<LINK TITLE="mystyle" REL="stylesheet" HREF="style.htm" TYPE="text/css">

 

 

Каскадные таблицы стилей (CSS)
Каскадные таблицы стили CSS (Cascading Style Sheets) - первый стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тэгами от внешних.
CSS - это язык, содержащий набор свойств для определения внешнего вида документа. C++пецицификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. Здесь можно найти самые разнообразные свойства стилей. Однако, пока еще броузеры не поддерживают все возможности CSS. Можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.
 
Наиболее популярные свойства стилей
  • Background. Фон элемента. Задается одним или двумя цветами (т.е. их смесью) или именем графического файла. Возможные значения: red, black/white, fill2. GIF ( ).
  • BORDER. Рамка вокруг элемента. Возможные значения: solid 0.5mm (есть рамка шириной 0.5 миллиметра), none (нет рамки).
  • BORDER-COLOR. Цвет рамки. Возможные значения: blue, #993300.
  • COLOR. Цвет элемента.
  • CURSOR. Тип курсора. Возможные значения (их можно видеть, перемещая курсор по первому столбцу):
    auto Броузер определяет какой курсор показывать в зависимости от контекста
    default Курсор зависит от платформы. Обычно стрелка
    crosshair Обычно простой крестик
    hand Рука IE
    pointer Рука NS6/ IE6
    move Четырехсторонняя стрелка. Обычно используется при указании на перемещаемый объект
    text Изменяемый текст. Обычно I-вида
    help Стрелка с вопросом. Используется при указании на подсказку
    wait Курсор показывает, что программа busy и следует подождать. Обычно песочные часы
    progress Курсор показывает, что идет процесс обработки. Только IE6
    not-allowed Курсор показывает, что объект или действие недоступно. Только IE6
    n-resize Стрелка, указывающая в заданном направлении (north, north-west, west, south-west, ...)
    nw-resize
    w-resize
    sw-resize
    s-resize
    se-resize
    e-resize
    ne-resize

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

 

 

Примеры использования Style Cursor
Пример 1:

 

<style type="text/css">
body{
cursor:  URL(mycursor.cur)
}
</style>

 

В этом примере для всей WEB страницы задан курсор из файла с именем mycursor.cur.

Пример 2:
<div style="cursor: move; width: 200px; height: 200px"></div>
<a href="help.htm" style="cursor: help;">Help</a>

 

В этом примере внутри DIV форма курсова "move", а на ссылке форма курсора "help".

Пример 3:
<TD onmouseover="this.style.cursor='wait'">se-resize</TD>

 

В этом примере при наведении на ячейку таблицы изменяется стиль курсора на "wait".

Пример 4:
<body onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">

 

Пример запрета выделения на странице. Если вы начнете выделять, то Курсор изменится на запрещающий и выделения не будет производиться

 
Изменение стиля шрифта с помощью Style Font

  • FONT-FAMILY. Тип шрифта. Возможные значения: Arial (без засечек), CourierNew (моноширинный), Times New Roman (с засечками).
  • FONT-SIZE. Размер шрифта. Возможные значения: 14pt, 120%. Единицами измерения для этого и других размерных свойств могут быть: pt (пункты), px (пикселы), mm (миллиметры), cm (сантиметры), in (дюймы), % (проценты).
  • FONT-WEIGHT. Толщина шрифта. Возможные значения: light (легкий), medium (средний), bold (жирный).
  • FONT-STYLE. Стиль шрифта. Возможные значения: Italic (наклонный), normal (обычный).
  • FONT. Полная характеристика шрифта. Сочетание четырех предыдущих свойств.

LIST-STYLE-IMAGE. Символ маркера в маркированном списке. Задается как gif-файл. Может определяться как для всего списка, так и для его отдельных элементов.

 
Пример

 

 

<html>
<head>
<style type="text/css">
<!--
ul {list-style-image:URL(fill1.gif)}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<ul>DRINK
<li>milk</li>
<li>tea</li>
<li>juice</li>
<li>coffee</li>
</ul>
</html>

 

  • LETTER-SPACING. Межбуквенный интервал. Возможные значения: 2px (интервал в 2 пиксела), -.4pt (интервал, уменьшенный на 0.4 пункта).
  • LINE-HEIGHT. Межстрочный интервал. Возможные значения: 14pt, 50%.
  • MARGIN-BOTTOM, MARGIN-LEFT, MARGIN-RIGHT, MARGIN-TOP. Отступы соответственно снизу, слева, справа, сверху элемента. На многие элементы не действуют. Действуют на DIV. Возможные значения: 150pt, 0.5in.
  • MARGIN. Отступы вокруг элемента.
  • PADDING-BOTTOM, PADDING-LEFT, PADDING-RIGHT, PADDING-TOP. Отступы от рамки соответственно снизу, слева, справа, сверху.
  • PADDING. Все отступы от рамки до элемента.
  • TEXT-ALIGN. Выравнивание текста по горизонтали. Возможные значения: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине).
  • TEXT-DECORATION. Оформление текста. Возможные значения: underline (подчеркивание), line through (перечеркивание), none (без оформления).
  • TEXT-INDENT. Oтступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. Возможные значения: 50pt, 1cm.
  • WIDTH. Ширина поля, предоставленного элементу. Возможные значения: 100pt, 5cm.
 
Использование атрибутов CLASS и ID
Стиль в CSS может быть задан для определенного элемента, класса или идентификатора.
 
Пример
<html>
<head>
<style type="text/css">
<!--
H1 {color:red;text-align:center}
.myclass {font-style:italic}
#myid {background:yellow}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<H1>Seasons</H1>
<H2 class="myclass">Lesson Seventy-Nine</H2>
<EM id="myid">LET US LEARN</EM>
<P class="myclass">Learn to pronounce and use the new words.</P>
</html>

 

H1, .myclass, #myid  называются простыми селекторами.
Кроме того можно использовать и контекстуальные селекторы, определяющие иерархию контейнеров, с которыми должен быть связан стиль.
 
Примеры
<!-- все элементы EM внутри элемента P будут на желтом фоне -->
P EM {background:yellow}
<!-- все элементы класса pilot внутри элемента LI класса man,
которые находятся внутри элемента UL будут голубого цвета -->
UL LI.man .pilot {color:blue}
 
Если несколько элементов будут иметь общий стиль, то соответствующий им селекторы можно перечислить в таблице стилей через запятую.
 
Пример
<html>
<head>
<style type="text/css">
<!--
H1,H2,H3,H4 {color:red;text-align:center}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<H1>Seasons</H1>
<H2>Lesson Seventy-Nine</H2>
<H3>LET US LEARN</H3>
<H4>1. Learn to pronounce and use the new words.</H4>
</html>

 

Оформление ссылок (Псевдоклассы)
Псевдоклассами называются элементы одного типа, удовлетворяющие определенному критерию. Например, посещенные элементы A (ссылки) составляют псевдокласс visited. В настоящее время поддерживаются только псевдоклассы ссылок. Но и это уже кое-что. С помощью таблицы стилей, где псевдокласс следует отделять двоеточием ( : ), можно изменить оформление активной (active), посещенной (visited), непосещенной (link) ссылки, а также ссылки, на которую наведена мышь (hover).
 
Пример
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:underline}

 

Использование тэгов <SPAN> и <DIV>
Стиль можно установить почти для всех элементов HTML, но два тэга <SPAN> и <DIV> особенно удобны тем, что они не накладывают на стиль никакого собственного типа представления. При использовании атрибутов CLASS и ID эти тэги вместе с CSS практически неограничено расширяют HTML. <SPAN>...</SPAN> и <DIV>...</DIV> являются простыми контейнерами для HTML-элементов. Они позволяют применять атрибуты форматирования к конкретным частям документа. Друг от друга они отличаются лишь тем, что броузеры обычно помещают символ перевода строки до и после HTML-элементов, заключенных в контейнер <DIV>...</DIV>.
 
Пример
<html>
<head>
<style type="text/css">
<!--
.ital {font-size:120%;font-style:italic;color:blue}
.bold {font-size:120%;font-weight:bold;color:blue}
.end {font-weight:bold;color:blue}
-->
</style>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
</head>
<pre>
<span class=ital>Правильные</span> глаголы образуют прошедшее время
путем добавления окончания <span class=bold>-ed</span> или
<span class=bold>-d</span>,
которое читается как: 
[t](help<span class=end>ed</span>), [d](open<span class=end>ed</span>),
[id](want<span class=end>ed</span>).
</html>

 

В контейнер <DIV>...</DIV> можно включать другие тэги, исключая <HEAD>, <BODY> и тэги, связанные с фреймами (кроме <IFRAME>). Используя тэг <DIV>, Web-страницу можно разделить на части и каждой из них присвоить отдельный стиль.
 
Пример
<html>
<head>
<style type="text/css">
<!--
.title {text-align:center;font-size:150%;font-weight:bold;color:red}
.bold {font-size:120%;font-weight:bold;color:blue}
.end {font-weight:bold;color:blue}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<div class=title>
Наречие<br>(The Abverb)
</div>
<p> Наречия часто образуются от прилагательных добавлением окончания
<span class=bold>-ly</span>: 
slow - slow<span class=end>ly</span>,
quick - quick<span class=end>ly</span>.
<html>
 
DHTML (динамический HTML)
Dhtml (динамический Html) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешного вида и содержания страницы без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей ( CSS).
 
События динамиче C++кого HTML
 
На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.
Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.
Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.
 
Всплывание событий заключается в том, что на событие может быть получена реакция не только от элемента-источника события, но также и от всех его родительских элементов вплоть до тела документа и самого документа. Событие может быть обработано на любом уровне. В приведенном ниже примере обработчик щелчков мышью на ссылке будет также обрабатывать щелчки мышью на изображении.
 
<html>
<head>
<meta  HTTP-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<H2>Всплывание события</H2>
<b>Для получения информации можно щелкнуть мышкой как на изображении,
так и на тексте</b><br>
<a href="be.htm"><img src="be. GIF" align="left">Кто это?</a>
</body>
</html>
 
Действие по умолчанию обеспечивается встроенной в броузер обработкой событий. Например, действием по умолчанию на нажатие ссылки <A href="…"> является переход по указанному адресу и загрузка страницы. Многие события позволяют заменить встроенные действия по умолчанию на индивидуальную обработку.
 
Связывание событий
 
Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тэга Script.
Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.

 

<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<H2>Смена графических объектов, обтекаемых текстом</H2>
<b>Для смены графического объекта переместите на него мышку</b>
<p>Иоганн Себастьян Бах сменит Людвига ван Бетховена.
<a href="#"
OnMouseOver="B_B.src='/ba.gif'"
OnMouseOut="B_B.src='/be.gif'">
<img  ID=B_B src="/be.gif" border=0
align="left"></a>
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
</body>
</html>
 
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<H2>Изменение вида данного элемента</H2>
<b><p onmousedown="this.style.fontStyle=' Italic';
this.style.color='red'" onmouseup="this.style.fontStyle='';
this.style.color='blue'">
Для изменения цвета и стиля шрифта данного текста нажимайте и отпускайте
кнопку мыши</p></b>
</body>
</html>

 

Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.
Использование тэга SCRIPT является более общим механизмом связывания события со сценарием. При этом можно использовать новые атрибуты такие, как FOR и EVENT:
  • FOR указывает имя или идентификатор (ID) элемента, для которого описывается событие;
  • EVENT указывает событие и все параметры, которые ему могут быть переданы.
Пример 3 теперь примет следующий вид:
 
Пример 4
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<script language=" JavaScript" for="B"
event="onmousedown()">
<!--
this.style.fontStyle='italic'; this.style.color='red';
//-->
</script>
<script for="B"
event="onmouseup()">
<!--
this.style.fontStyle=''; this.style.color='blue';
//-->
</script>
</head>
<body lang=RU>
<H2>Изменение
вида данного элемента</H2>
<b><p id=B>Для изменения цвета и
шрифта данного текста нажимайте и
отпускайте
кнопку мыши<br></b>
</body>
</html>
 
Все события также представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:
 
Пример 5
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<H2>Изменение вида данного элемента</H2>
<b><p id=B>Для изменения цвета и шрифта данного текста
нажимайте и отпускайте кнопку мыши<br></b>
<script language="JavaScript">
<!--
B.onmousedown=new
Function("this.style.fontStyle='italic'; this.style.color='red';");
B.onmouseup=new
Function("this.style.fontStyle=''; this.style.color='blue';");
//-->
</script>
</body>
</html>
 
Не следует забывать, что все имена свойств надо вводить в нижнем регистре.
 
События мыши
  • OnMouseOver. Перемещение указателя мыши на элемент.
  • OnMouseOut. Перемещение указателя мыши за пределы элемента.
  • OnMouseDown. Нажатие любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.
  • OnMouseUp. Отпускание любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка отпущена: 1 = левая, 2 = правая, 4 = средняя.
  • OnMouseMove. Перемещение указателя мыши. Внутри обработчика event.x и event.y - текущие координаты "горячей" точки курсора на экране.
  • OnClick. Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при каком-то элементе в фокусе.
  • OnDblClick. Двойной щелчок левой кнопкой мыши на элементе.
  • OnDragStart. Запуск операции перетаскивания. Цель – запретить операцию перетаскивания путем возвращения значения false.
  • OnSelectStart. Запуск операции выделения элемента. Цель – запретить выделение области документа. Важно учесть, что отменяется лишь инициализация выделения, т.е. если выделение начато за пределами данной области, а на ней лишь продолжается, то помешать выделению нельзя. Событие OnSelectStart всплывающее, поэтому можно перехватить его и вернуть значение false. Это лишит посетителя возможности выделять текст на странице (см. Пример 10).
  • OnSelect. Выделение элемента. Следует за OnSelectStart и возникает много раз по мере того, как посетитель расширяет или сужает выделение. Событие OnSelect не всплывает. Оно возникает лишь в том разделе документа, где происходит выделение.
 
События клавиатуры
  • OnKeyPress. Нажатие и отпускание клавиши. Событие возникает много раз, если клавиша удерживается.
  • OnKeyDown. Нажатие клавиши. Событие возникает один раз, даже если клавиша продолжает удерживаться.
  • OnKeyUp. Отпускание клавиши.
 
Событие прокручивания
  • OnScroll. Использование полосы прокрутки или прокручивание элемента неявно посредством другого действия Не может отменить прокручивания, так как возникает после завершения прокручивания. Не всплывает.
 
События фокуса
  • OnFocus. Возникает, когда элемент активизируется после щелчка по нему мышью или с помощью клавиатуры. Фокус могут получить только элементы пользовательского ввода и тело документа, а не элементы содержания документа.
  • OnBlur. Возникает, когда элемент теряет фокус. Используется для контроля корректности ввода.
 
Пример 6
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<script language="JavaScript">
<!--
function verify()
{
   //Ввод строки
var str=document.inp.m.value;
   //Преобразование строки в число
var int=parseInt(str);
   //Проверка
if ( int == 1 || int == 2 || int == 12 ) 
   {alert("Зима");}  
else
if ( 3 <= int && int <= 5 ) 
   {alert("Весна");}  
else
if ( 6 <= int && int <= 8 ) 
   {alert("Лето");}  
else
if ( 9 <= int && int <= 11 ) 
   {alert("Осень");}  
else
   {alert("Неверно!");}  
}
//-->
</script>
</head>
<body lang=RU>
<H2>Контроль ввода</H2>
<p>Введите номер текущего месяца:
<form name="inp">
<input name="m" size="2"
OnBlur="verify()"><br>
</body>
</html>

 

События формы
  • OnChange. Возникает при любых изменениях в форме. Для текстового поля это ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur используется для контроля корректности ввода.
  • OnSubmit. Возникает перед отправкой содержимого формы на сервер. Основное назначение – проверка корректности введенных данных. Отмена передачи данных происходит при возвращении значения false. При выполнении примеров 6 и 7 обратите внимание на различия в окне "Адрес" при наборе неверного значения.
 
Пример 7
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<script language="JavaScript">
<!--
function verify()
{
   //Ввод строки
var
str=document.inp.m.value;
   //Преобразование строки в число
var
int=parseInt(str);
   //Проверка
if ( int == 1
|| int == 2 || int == 12 ) 
   {alert("Зима");
    return true;}  
else
if ( 3 <=
int && int <= 5 ) 
   {alert("Весна");
    return true;}  
else
if ( 6 <=
int && int <= 8 ) 
   {alert("Лето");
    return true;}  
else
if ( 9 <=
int && int <= 11 ) 
   {alert("Осень");
    return true;}  
else
   {alert("Неверно!");
    return false;}  
}
//-->
</script>
</head>
<body lang=RU>
<H2>Контроль ввода</H2>
<p>Введите номер текущего месяца:
<form name="inp" OnSubmit="return verify()">
<input name="m" size="2">
</form>
</body>
</html>

 

  • OnReset. Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.
 
События документа
  • OnLoad. Возникает после считывания, но до отображения страницы. Используется для отображения заставки, проверки права доступа и других однократных действий при инициализации страницы. Как надо не работает (см. пример 8).
 
Пример 8
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU OnLoad="alert(‘Начнем?’)">
<H2>Начали</H2>
</body>
</html>

 

  • OnUnload. Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений.
  • OnAbort. Возникает при срыве загрузки графического объекта.
  • OnError. Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.
 
Пример 9
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=Ru>
<H2>Перехват ошибок</H2>
<img src="m.gif" OnError="alert("Что-то не
так!");">
</body>
</html>
 
Событие помощи
  • OnHelp. Запрос файла справки с использованием клавиши <F1>. Не возникает при выборе пункта Help из меню Help. OnHelp возникает на элементе с фокусом и затем всплывает вверх по иерархии контейнеров. Действие по умолчанию для этого события заключается в отображении встроенного файла справки, но данное событие может быть отменено для отображения индивидуального файла справки.
Для получения информации о событии служит объект event.
 
Свойства объекта event
  • srcElement. Элемент, который первым сгенерировал событие. Имя тэга этого элемента можно определить с помощью свойства tagName (см. пример 12).
  • cancelBubble. Используется для прекращения всплывания события вверх по иерархии контейнеров. По умолчанию равно false и событие всплывает. Установка значения true останавливает всплывание текущего события.
  • returnValue. Используется для отмены действия по умолчанию. Для этого нужно установить значение false. Ключевое слово return в JavaScript обновляет значение event.returnValue при возвращении управления броузеру.
 
Пример 10
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=Ru OnSelectStart="event.returnValue=false;">
<H2>Запрет выделения</H2>
</html>

 

  • type. Определение события. Имя события возвращается в нижнем регистре без префикса on.
 
Пример 11
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<script language="JavaScript">
<!--
function S()
{
if (event.type=="mousedown")
 {B.style.fontStyle="italic";
B.style.color="red";}
if (event.type=="mouseup")
 {B.style. Font; B.style.color="blue";}
}
//-->
</script>
</head>
<body lang=RU>
<H2>Изменение вида данного элемента</H2>
<b><p id=B OnMouseDown="S()"
OnMouseUp="S()">
Для изменения цвета и шрифта данного текста нажимайте и
отпускайте кнопку мыши<br></b>
</body>
</html>

 

  • button. Состояния кнопок мыши во время события. Принимает значения:

 

0
Кнопки не нажаты
1
Нажатие левой кнопки
2
Нажатие правой кнопки
3
Нажатие левой и правой кнопок
4
Нажатие средней кнопки

 

  • clientX, clientY. Координаты указателя мыши относительно клиентской области окна.
  • offsetX, offsetY. Координаты указателя мыши относительно контекста воспроизведения.
  • screenX, screenY. Координаты указателя мыши относительно экрана.
 
Пример 12
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<script language="JavaScript" for="document"
event="onmousedown()">
alert("x:"+event.clientX+"\n"+
      "y:"+event.clientY+"\n"+
      " Тэг:"+event.srcElement.tagName);
</script>
</head>
<body lang=RU>
<H2>Определение координат указателя мыши</H2>
<b><p>Щелкните любой кнопкой мыши на любом месте
экрана</p></b>
</body>
</html>

 

  • altKey. Состояние клавиши <Alt>(true/false).
  • ctrlKey. Состояние клавиши <Ctrl>(true/false).
  • shiftKey. Состояние клавиши <Shift> (true/false).
  • keyCode. ASCII-код нажатой клавиши.
 
Динамическое содержание
Содержание HTML-документа можно менять после загрузки страницы.
 
Свойства динамического содержания
  • innerText. Содержащийся внутри элемента текст без тэгов. При установке нового значения все HTML-тэги выводятся как текст.
  • innerHTML. Содержащийся внутри элемента текст вместе с внутренними тэгами. При установке нового значения все HTML-тэги интерпретируются броузером.
  • outerText. Содержащийся внутри элемента текст без тэгов. При установке нового значения меняется весь элемент, включая внешние тэги.
  • outerHTML. Весь элемент, включая внешние тэги. При установке нового значения все HTML-тэги интерпретируются броузером.
 
Пример 13
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU>
<H2>Различия свойств innerText, innerHTML, outerText, outerHTML</H2>
<p>Для изменения текстов щелкните по ним мышкой</p>
<H2 onmousedown="this.innerText='Так работает
<em>innerText</em>'">Текст1</H2>
<H2 onmousedown="this.innerHTML='Так работает
<em>innerHTML</em>'">Текст2</H2>
<H2 onmousedown="this.outerText='Так работает
<em>outerText</em>'">Текст3</H2>
<H2 onmousedown="this.outerHTML='<p>Так работает
<em>outerHTML</em>'">Текст4</H2>
</body>
</html>

 

Данные свойства динамического содержания могут обращаться к элементу или его содержанию только как к целому. Если, например, требуется изменить лишь один символ в параграфе, то придется заново переписать весь параграф. Однако, можно напрямую манипулировать любой частью HTML-документа. Такую возможность предоставляет объект TextRange, который будет рассмотрен чуть позже.
 
Методы Adjacent
Кроме перечисленных четырех свойств динамического содержания имеются еще два метода для вставки содержания:
  • insertAdjacentText. Вставка текста.
  • insertAdjacentHTML. Вставка HTML.
Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:
 
beforeBegin
До открывающего внешнего тэга элемента
afterBegin
После открывающего тэга до содержимого элемента
beforeEnd
До закрывающего тэга после содержимого элемента
afterEnd
После закрывающего тэга элемента
 
Пример 14
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU>
<H2>Различия ключей beforeBegin, afterBegin, beforeEnd, afterEnd</H2>
<p>Для вставки в тексты щелкните по ним мышкой</p>
<H2 onmousedown="insertAdjacentHTML('beforeBegin',
'Вставка(<I>beforeBegin</I>)')">Tекст1</H2>
<H2 onmousedown="insertAdjacentHTML('afterBegin','Вставка
(<I>afterBegin</I>)') ">Текст2</H2>
<H2 onmousedown="insertAdjacentHTML('beforeEnd',
'Вставка(<I>beforeEnd</I>)') ">Текст3</H2>
<H2 onmousedown="insertAdjacentHTML('afterEnd',
'Вставка(<I>afterEnd</I>)')">Текст4</H2>
</body>
</html>

 

Методы Adjacent удобно использовать для вставки новых параграфов или элементов списков.

 

Объект TextRange
Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.
Объект TextRange создается путем вызова метода createTextRange элемента, который является так называемым владельцем редактирования текста. Это может быть Body, Input, Button и TextArea, причем понятно, что Body - владелец редактирования текста для всех воспроизводимых элементов, а Input, Button и TextArea - владельцы редактирования текста для своего содержания.
 
Свойства доступа к тексту
  • text. Текст документа без HTML-разметки. Это свойство доступно для чтения/записи. По представлению содержания сходно с outerText.
  • htmlText. Текст документа вместе с HTML-разметкой. По представлению содержания это свойство сходно с outerHTML, но доступно только для чтения.
 
Метод вставки HTML
  • pasteHTML. При вызове этого метода для определенного элемента вставляемый фрагмент будет находиться внутри области действия данного элемента и должен быть HTML-кодом внутри данной области действия. По представлению содержания сходно с outerHTML.
 
Методы позиционирования объекта TextRange
  • collapse([prm1]). Сворачивает объект TextRange к началу (prm1=true) или к концу элемента (prm1=false). Значение по умолчанию prm1=true.
  • expand(prm1). Расширяет объект TextRange для полного охвата определенного параметром фрагмента текста. Параметр prm1 может принимать значения:
    • character - Символ
    • word - Слово
    • sentence - Предложение
  • moveToElementText(prm1). Размещает объект TextRange для охвата текста элемента, указанного параметром prm1.
  • move(prm1, prm2). Перемещает начало объекта TextRange на расстояние, указанное параметрами, и сжимает объект до точки. Параметр prm1 для этого и двух следующих методов может принимать те же значения, что и для метода expand. Параметр prm2 может принимать как положительные, так и отрицательные значения; указывает расстояние перемещения.
  • moveStart(prm1, prm2). Перемещает начало объекта TextRange на расстояние, указанное параметрами.
  • moveEnd(prm1, prm2). Перемещает конец объекта TextRange на расстояние, указанное параметрами.
 
Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.
 
Пример 15
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<script language="JavaScript">
<!--
function ToAndFro(c)
{
var tr=document.body.createTextRange(); // Создание объекта TextRange
var o = eval(c);
tr.moveToElementText(o); // Содержимое элемента "o"
tr.moveStart("word",1); // Сдвиг начала на 1 вперед
var St = tr.text; // Сохранение содержимого
tr.moveToElementText(o); // Содержимое элемента "o"
tr.moveEnd("word",1); // Сдвиг конца на 1 вперед
var En = tr.text; // Сохранение содержимого
tr.moveToElementText(o); // Содержимое элемента "o"
tr.moveStart("word",-1); // Сдвиг начала на 1 назад
var St1 = tr.text; // Сохранение содержимого
tr.moveToElementText(o); // Содержимое элемента "o"
tr.moveEnd("word",-1); // Сдвиг конца на 1 назад
var En1 = tr.text; // Сохранение содержимого
// Вывод результатов
alert('tr.moveStart("word",1) = '+St+
'\ntr.moveEnd("word",1) = '+En+
'\ntr.moveStart("word",-1) = '+St1+
'\ntr.moveEnd("word",-1) = '+En1);
}
//-->
</script>
</head>
<body lang=RU>
<H2>Перемещения начала и конца объекта TextRange</H2>
<TextArea Id=a Rows=1 Cols=30 OnMouseOver="ToAndFro('a')">Наведите сюда
указатель мышки</TextArea>
</body>
</html>

 

  • moveToPoint(prm1, prm2). Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.
 
Пример 16
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<script language="JavaScript">
<!--
function WhatIsWord()
{
   // Создание объекта TextRange
var tr=document.body.createTextRange();
   // Свертка в точку, куда указывает мышка
tr.moveToPoint(event.clientX,
event.clientY);
   //  Расширение до слова, над которым указатель мышки
tr.expand("word");
   // Отображение содержимого
window.status = tr.text;
}
//-->
</script>
</head>
<body lang=RU onmousemove="WhatIsWord();">
<H2>Отображение в строке состояния слова, над которым находится
указатель мыши</H2>
</body>
</html>

 

  • findText(prm1, prm2, prm3). Поиск в документе подстроки, указанной в параметре prm1. Параметр prm2 определяет число символов для поиска (положительное - прямое направление, отрицательное - обратное). Параметр prm3 может принимать значения:

 

2
Полное совпадание
4
Учет регистра
6
Полное совпадание с учетом регистра
 
Методы управления объектом TextRange
  • duplicate. Создает копию объекта TextRange, из которого он был вызван ( var tr1=document.body.createTextRange();  var tr2=tr1.duplicate(); ).
  • inRange. Определяет нахождение указанной области внутри объекта TextRange, из которого был вызван данный метод (alert(tr2.inRange(tr1)); // true).
  • isEqual. Сравнивает два объекта TextRange для определения, охватывают ли они один и тот же текст ( alert(tr1.isEqual(tr2)); // true ). Метод необходим, так как прямое сравнение для разных объектов, представляющих одну и ту же текстовую область работать не будет ( alert(tr1==tr2); // false).
  • compareEndPoints(prm1, prm2).Сравнивает два объекта TextRange для определения, совпадают ли их начальные и конечные позиции. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод сравнивает:

 

StartToStart
Начало первого с началом второго
StartToEnd
Начало первого с концом второго
EndToStart
Конец первого с началом второго
EndToEnd
Конец первого с концом второго

  • setEndPoints(prm1, prm2). Устанавливает начальную и конечную позиции одного объекта TextRange в начальную и конечную позиции другого объекта TextRange. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод устанавливает:

 

StartToStart
Начало первого в начало второго
StartToEnd
Начало первого в конец второго
EndToStart
Конец первого в начало второго
EndToEnd
Конец первого в конец второго
 
Например, чтобы определить, будет ли продолжен объект trSecond после окончания объекта trOne, надо написать такую функцию:
function continue(trOne, trSecond)
{ return trOne.compareEndPoints("EndToStart", trSecond); }.
 
<< Первая < Предыдущая 1 2 3 Следующая > Последняя >>

Страница 1 из 3

Новости антивируса Dr. Web


Наши партнёры