22. Единицы измерения элемента. Границы объектов. Курсоры.

В языке HTML существует два способа задать линейные размеры элемента: пиксели и проценты. В CSS единиц длины гораздо больше.

Таблица 3.4 – Единицы измерения

in - Дюймы	pt - Пункты (типограф.)	px - Пикселы
cm - Сантиметры	pc - Пика	em - Вычисляется относительно размера шрифта элемента
mm - Миллиметры	ex - Высота строчной буквы "x" в шрифте	% - Проценты

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

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

• in - дюймы;

• cm - сантиметры;

• mm - миллиметры.

Ко второй группе можно отнести величины, которые пришли в CSS из типографии. То есть они используются для установки размеров шрифта, межстрочных интервалов и прочих типографских величин. Данная группа величин привычна полиграфистам. К ним относятся:

• pt - типографский пункт;

• pc - пика;

• ex - высота строчной буквы "x" в шрифте.

Третью группу составляют величины, которые являются относительными, то есть реальный размер элемента вычисляется относительно какой-либо иной величины. К ним относятся:

• em - вычисляется относительно размера шрифта элемента;

• px - пиксель. Вычисляется относительно устройства отображения;

• % - процент. Естественно, процентные соотношения не являются единицами измерения в привычном смысле слова. Они вычисляются относительно размеров элемента-предка.

Реальные единицы измерения. Реальные единицы измерения великолепно работают в физическом мире, однако для использования на экране монитора они оказываются мало пригодны. Причина на редкость проста: мониторы имеют совершенно разные физические параметры. К ним относятся:

• размер монитора по диагонали (варьируется от 14 дюймов до 21 дюйма);

• разрешение монитора (варьируется от 640х480 до 1600х1200) .

использование в CSS реальных единиц измерения крайне ограничено. Принципиально использовать реальные единицы измерения можно только в том случае, когда известны параметры устройства вывода. Таким устройством может быть принтер, потому что для него известны геометрические размеры страницы и разрешение (например, 300 точек на дюйм и страница формата А4). Однако особого смысла использование реальных единиц и для печати не имеет.

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

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

3.7 Границы

Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам.

В таблице указаны возможные имена свойств параметров границ:

border-width	Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая). table {border-width: 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;}
border-collapse	Задает стиль рисования таблицы. Может принимать следующие значения: separate (по умолчанию) - Ячейки отделены друг от друга collapse - ячейки не имеют промежутков между собой <TABLE STYLE="border-collapse:collapse">

* Спецификация CSS2 позволяет задать стили для каждой из сторон границы. Например: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом { border-bottom-width: 1px } будет означать, что ширина нижней границы равна 1 пикселу.

Ниже приведен пример использования параметров границ:

<STYLE type="text/css">

table {border-width: 3px;border-color: red;border-style: dashed;}

.gro {border-style: groove;}

</STYLE>

<table class="gro"><tr><td>Пример стиля groove</table>

<br>

<h4 style=border-style:dotted;border-top-color:green;>

Верхняя часть заголовка зеленого цвета (dotted)</h4>

<table style=border-style:dashed;border-top-color:blue;>

<tr>

<td>Верхняя граница окрашена в синий цвет

<td>Пример стиля dashed

</table>

<br>

<table style=border-style:double;>

<tr>

<td>Пример стиля double

<td>Граница из двух линий. Сумма ширины каждой линии и промежуток

между ними равняется значению border-width.

</table>

<p>Пример использования тега DIV<br>

<DIV STYLE="background: silver;

border-style: dashed;

border-width: thick;

border-top-color: red;

border-right-color: green;

border-bottom-color: blue;

border-left-color: yellow;

">

Пример атрибутов<br> границы элемента DIV</DIV><br>

<table border=1 onclick="this.style.borderCollapse='collapse'" >

<tr>

<td>Это обычный вид таблицы

<td>Ячейки отделены друг от друга

<tr>

<td>Теперь попробуйте щелкнуть мышкой внутри таблицы

<td>Ячейки должны соединиться

</table>

3.8 Курсоры

Internet Explorer позволяет задавать стили для курсоров. Некоторые стили доступны только для IE 6.

all-scroll	Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении I {cursor: all-scroll;}
auto	По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте I {cursor: auto;}
col-resize	Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали H4 {cursor: col-resize;}
crosshair	Курсор-крест H4 {cursor: crosshair;}
default	Стандартный курсор, используемый системой H4 {cursor: default;}
hand	Рука с вытянутым указательным пальцем. Используется при гиперссылке H4 {cursor: hand;}
help	Стрелка с вопросительным знаком. H3 {cursor: help;}
move	Курсор со 4 стрелками, показывающий возможность перемещения H2 {cursor: move;}

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

<TABLE border="1" CELLPADDING="2" CELLSPACING="2">

<TR>

<TD STYLE="cursor:all-scroll">all-scroll</TD>

<TD STYLE="cursor:auto">auto</TD>

<TD STYLE="cursor:col-resize">col-resize</TD>

<TD STYLE="cursor:crosshair">crosshair</TD>

<TD STYLE="cursor:default">default</TD>

<TD STYLE="cursor:hand">hand</TD>

</TR>

<TD STYLE="cursor:row-resize; ">row-resize</TD>

<TD STYLE="cursor:text">text</TD>

<TD STYLE="cursor:vertical-text; ">vertical-text</TD>

<TD STYLE="cursor:wait">wait</TD>

</TR>

</TABLE>