Чтение онлайн

Рассмотрим простой пример задания границы для таблиц на странице:

table { border: outset 10pt;

border-collapse: separate;

border-spacing: 15pt }

td { border: inset 5pt }

Этот CSS-код создаст вокруг таблицы выпуклую границу размером 10 пунктов. Поскольку задано значение separate свойства border-collapse, то для ячеек будут созданы вдавленные границы размером 5 пунктов. Расстояние между ячейками будет составлять 15 пунктов.

Помимо размера, CSS предоставляет возможность задавать стиль границ таблицы. Для этого используется свойство border-style. Рассмотрим список значений данного свойства и их описания.

• none – граница отсутствует.

• hidden – аналогично значению none, но в модели с пересекающимися границами имеет приоритет над любыми другими границами.

• dotted – граница представляется рядом точек.

• dashed – граница представляется рядом коротких линейных сегментов.

• solid – граница представляется единым сегментом линии.

• double – граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равна значению border-width.

• groove – граница выглядит вдавленной.

• ridge – в противоположность groove, граница выглядит выпуклой.

• inset – в модели с отдельными границами весь блок выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение groove.

• outset – в модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ridge.

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

CSS позволяет определить, отображать ли границы пустых ячеек. Вы можете задать отображение пустых ячеек, используя свойство CSS empty-cells. Это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству visibility присвоено значение hidden.

Чтобы все ячейки таблицы (в том числе и пустые) имели границы, можно использовать следующий CSS-код:

table { empty-cells: show }

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

Средства CSS позволяют задавать указатель мыши свойством cursor. Данное свойство может принимать следующие значения.

• auto – браузер определяет отображаемый указатель исходя из контекста.

• crosshair – простое перекрестие (напоминающее символ +).

• default – указатель, используемый в данной операционной системе по умолчанию. Зачастую представляется в виде стрелки.

• pointer – указатель, обозначающий ссылку.

• move – указатель, определяющий объект, который можно переместить.

• e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – указатель, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла блока, используется указатель se-resize. Первые буквы в этом значении – это первые буквы частей света South и East.

• text – указатель, используемый при выделении текста. Зачастую представляется в виде вертикальной линии |.

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

• help – указатель, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.

• hand – указатель представляет собой «руку». Зачастую такой указатель используется для ссылок.

• uri_адрес_файла – при данном значении браузер пользователя загружает файл указателя, задаваемого этим URL-адресом.

Если браузеру не удается обработать указатель мыши, расположенный первым в списке указателей, то он попытается обработать второй, третий и т. д. Если браузеру не удается обработать ни одного указателя, заданного в таблице стилей, он будет использовать общий указатель, расположенный в конце списка. Например:

p { cursor : url(«mything.cur»), url(«second.csr»), text; }

В этом примере при наведении на содержимое элемента P указатель мыши станет таким, какой задан в файле mything.cur. Если браузер не сможет загрузить данный файл указателя, он попробует загрузить файл second.csr и отобразить указатель, изображенный в этом файле. Если и этот файл окажется недоступным, браузер отобразит указатель, используемый при выделении текста.

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

• ActiveBorder – граница активного окна.

• ActiveCaption – заголовок активного окна.

• AppWorkspace – фон мультидокументного интерфейса.

• Background – фон Рабочего стола.

• ButtonFace – «лицевая» сторона объемных элементов.