Этот пример HTML представляет денежный расчёт расходов на питание, гостиницу и транспорт в двух местах (San Jose и Seattle) на несколько дней. Концептуально Вы можете представлять таблицу в терминах n-размерного пространства. Заголовками этого пространства являются: место, день, категория и итог. Некоторые ячейки определяют метки вдоль оси, а другие дают подсчёт денег в точке данного пространства. Вот разметка для этой таблицы:
<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
<TH></TH>
<TH>Meals</TH>
<TH>Hotels</TH>
<TH>Transport</TH>
<TH>subtotal</TH>
</TR>
<TR>
<TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
<TH headers="san-jose">25-Aug-97</TH>
<TD>37.74</TD>
<TD>112.00</TD>
<TD>45.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="san-jose">26-Aug-97</TH>
<TD>27.28</TD>
<TD>112.00</TD>
<TD>45.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="san-jose">subtotal</TH>
<TD>65.02</TD>
<TD>224.00</TD>
<TD>90.00</TD>
<TD>379.02</TD>
</TR>
<TR>
<TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
<TH headers="seattle">27-Aug-97</TH>
<TD>96.25</TD>
<TD>109.00</TD>
<TD>36.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="seattle">28-Aug-97</TH>
<TD>35.00</TD>
<TD>109.00</TD>
<TD>36.00</TD>
<TD></TD>
</TR>
<TR>
<TH headers="seattle">subtotal</TH>
<TD>131.25</TD>
<TD>218.00</TD>
<TD>72.00</TD>
<TD>421.25</TD>
</TR>
<TR>
<TH>Totals</TH>
<TD>196.27</TD>
<TD>442.00</TD>
<TD>162.00</TD>
<TD>800.27</TD>
</TR>
</TABLE>
Представляя модель данных таким образом, авторы дают возможность браузерам с синтезом речи работать с таблицей различными способами, например, каждая ячейка может проговариваться как список с повторением соответствующих заголовков перед каждой ячейкой данных:
San Jose, 25-Aug-97, Meals: 37.74
San Jose, 25-Aug-97, Hotels: 112.00
San Jose, 25-Aug-97, Transport: 45.00
...
Браузер может также проговаривать ячейки, только если они изменяются:
San Jose, 25-Aug-97, Meals: 37.74
Hotels: 112.00
Transport: 45.00
26-Aug-97, Meals: 27.28
Hotels: 112.00
...
Лекция 18. Интерфейс пользователя
'cursor'
Значение: [ [<uri< ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Начальное: auto
Применяется: ко всем элементам
Наследуется: да
Процентное: N/A
Носитель: визуальный, интерактивный
Это свойство специфицирует тип курсора указательного устройства. Значения имеют следующий смысл:
auto
пользовательский агент (ПА) определяет курсор на базе текущего контекста.
crosshair
простой крест (например, увеличение знака "+" с помощью коротких отрезков).
default
курсор по умолчанию, зависящий от платформы. Часто отображается стрелкой.
pointer
курсор - указатель на ссылку.
move
обозначает то, что перемещается.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
обозначают перемещение какого-либо края. Например, курсор 'se-resize' используется, если передвижение начинается в юго-восточном углу бокса.
text
обозначает текст, который может быть выделен. Часто отображается как вертикальная черта I.
wait
обозначает, что программа занята и пользователь должен подождать. Часто отображается как (песочные) часы.
help
для объекта под курсором имеется вспомогательная информация. Часто отображается как знак вопроса или воздушный шар.
<uri>
ПА получает курсор из ресурса, обозначенного в URI. Если ПА не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если ПА не может обработать ни один курсор, определённый пользователем, он обязан использовать общий курсор в конце списка.
P { cursor : url("mything.cur"), url("second.csr"), text; }
В дополнение к возможности устанавливать предопределённые значения цветов для текста, фона, и т.д., CSS2 позволяет авторам специфицировать цвета таким образом, чтобы интегрировать их в графическую среду пользователя. Таблицы стилей, учитывающие пользовательские установки, дают следующие преимущества:
1Создают страницы, соответствующие привычкам и вкусам пользователя.
2Создают страницы более доступными, т.к. текущие пользовательские установки могут быть рассчитаны на людей с физическими проблемами.
Набор значений, определённых для системных цветов, представляется исчерпывающим. Для систем, не имеющих соответствующих значений, специфицированное значение должно отображаться в ближайший системный атрибут или в цвет по умолчанию.
Далее дан список дополнительных значений для относящихся к цвету атрибутов CSS и их основной смысл. Любое свойство цвета (например, 'color' или 'background-color') может иметь одно из следующих названий. Хотя они и нечувствительны к регистру, рекомендуется использовать смешанную капитализацию, как показано ниже, чтобы сделать названия более понятными.
ActiveBorder
Рамка активного окна.
ActiveCaption
Заголовок активного окна.
AppWorkspace
Цвет фона многодокументного интерфейса.
Background
Фон рабочего стола.
ButtonFace
Цвет переднего плана 3-мерных элементов.
ButtonHighlight
Тёмная тень для 3-мерных элементов (для краёв, выступающих из светлой основы).
ButtonShadow
Цвет тени для 3-мерных элементов.
ButtonText
Текст кнопки.
CaptionText
Текст заголовка, бокса и в боксе прокручиваемого списка.
GrayText
Серый ("недоступен") текст. Это цвет установлен в #000 на тот случай, если текущий дисплей не поддерживает сплошной серый цвет.
Highlight
Объект(ы), выделенный в элементе управления.
HighlightText
Текст объекта(ов), выделенного в элементе управления.
InactiveBorder
Рамка неактивного окна.
InactiveCaption
Заголовок неактивного окна.
InactiveCaptionText
Цвет текста неактивного заголовка.
InfoBackground
Цвет фона элементов подсказки.
InfoText
Цвет текста элементов подсказки.
Menu
Фон меню.
MenuText
Текст меню.
Scrollbar
Серая область прокрутки.
ThreeDDarkShadow
Тёмная тень для 3-мерных элементов дисплея.
ThreeDFace
Цвет переднего плана для 3-мерных элементов дисплея.