HTML, XHTML и CSS на 100%
Шрифт:
Рассмотрим простой пример задания границы для таблиц на странице:
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 }
9.5. Интерфейс пользователя
Таблицы стилей позволяют управлять и интерфейсом пользователя, то есть, например, задавать вид указателя мыши или определять стили шрифта и оформления, установленные по умолчанию на компьютере клиента.
Указатели мыши
Средства 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 – «лицевая» сторона объемных элементов.