Существует несколько стилевых свойств, называемых визуальными. Они определяют
разнообразные ситуации отображения элемента, которые мы рассмотрим по порядку.
Вы знаете, что различные типы элементов отображаются на веб-странице
по-разному. Линейные занимают минимум пространства, их размер зависит только от
содержимого. Блочные занимают всю доступную ширину окна независимо от своего
содержимого. Элементы списков выводятся с отступами в зависимости от уровня
вложенности, об отображении элементов таблиц вообще говорить нечего. При помощи
свойства display можно управлять отображением
элемента, например, назначить элементу <img
/> блочное отображение (со всеми вытекающими отсюда последствиями).
Свойство display принимает множество значений, перечислим самые полезные:
block
Элемент отображается как блочный.
inline
Элемент отображается как линейный.
none
Элемент не отображается на веб-странице. Вложенные в него элементы также не
будут отображаться. При этом элемент не просто становится невидимым, под него
не резервируется место. Это очень важное значение, однако полностью вы
его оцените в курсе JavaScript.
В качестве примера
можно привести ссылки с блочным отображением. Здесь я также применила
псевдокласс a:hover для придания панели большей привлекательности.
Всё очень просто: можно при помощи CSS
сделать элемент видимым или невидимым.
visible
Видимый элемент
hidden
Невидимый элемент
Не думайте, что стилевые правила
display:none и visibility:hidden абсолютно равны! Их отличие
заключается в том, что свойство display не резервирует место под элемент, а
visibility место сохраняет, просто элемент становится невидимым.
Замечание: И опять-таки, в статических
веб-страницах от этого свойства особой пользы нет, в то время как при наличии
сценариев JavaScript оно себя проявляет во всей красе. Представьте -
пользователь подвел мышь к элементу, и рядом появилось пояснение, отвел мышь от
элемента - элемент-пояснение скрылся. Но об этом в последующих курсах.
Переполнение (overflow)
Напомню, что ширина и высота любого элемента задается при помощи стилевых
свойств width и height
соответственно. Размеры области содержимого элемента (ширина содержимого и
высота содержимого) зависят от нескольких факторов: имеет ли элемент
установленные свойства 'width' или 'height', содержит ли он текст или другие
элементы, является ли линейным или блочным и т.д.
Что происходит, если содержимое переполняет элемент, то есть фактические
размеры содержимого превышают размеры элемента? Размеры элемента изменяются так,
чтобы по возможности отобразить содержимое полностью. Таким образом, элемент как
бы "подстраивается" под размеры содержимого. В большинстве случаев это удобно,
однако возможны исключения. Стилевое свойство overflow позволяет управлять поведением элемента при
переполнении. Оно принимает следующие значения:
visible
Блок растягивается, чтобы отобразить все содержимое. (Значение по
умолчанию)
hidden
Содержимое не отображается за пределами блока. То есть все размеры
сохранятся, но, возможно, будет потеряна часть информации.
scroll
В блоке появляются горизонтальная и вертикальная полосы прокрутки
содержимого. Даже если содержимое не переполняет блок, место под полосы
прокртуки резервируется.
auto
При переполнении появляется нужная полоса прокрутки (горизонтальная,
вертикальная или обе). При отсутствии переполнения полос прокрутки нет, что
позволяет экономить место.
Курсор (cursor)
При помощи свойства cursor можно изменить курсор пользователя над заданным
элементом. Курсор может принимать несколько стандартных форм, а также задаваться
графическим изображением. Свойство cursor принимает следующие значения:
auto
вид в зависимости от содержимого, над которым находится курсор. (Значение по
умолчанию)
crosshair
простой крест (похож на увеличенный "+").
default
курсор по умолчанию, зависящий от платформы. Часто отображается
стрелкой.
pointer
курсор - указатель на ссылку.
move
такой же курсор отображается при перемещении объектов мышью.
обозначают перемещение какого-либо края. Например, курсор 'se-resize'
используется, если передвижение начинается в юго-восточном углу элемента.
text
принимает вид курсора над текстом. Отображается как вертикальная черта I.
wait
обозначает, что программа занята и пользователь должен подождать. Часто
отображается как песочные часы.
help
для объекта под курсором имеется вспомогательная информация. Часто
отображается как знак вопроса.
url(адрес картинки)
получает курсор из ресурса, обозначенного в адресе.
Цвет полос прокрутки
Цвет полос прокрутки можно настроить только в Internet
Explorer
Чтобы настроить нестандартный цвет полос прокрутки в броузере Internet
Explorer, нужно применить к тегу <body> несколько стилевых свойств. Поскольку эти
свойства определяют множество частей полосы прокрутки, лучше их представить не
таблицей, а в виде рисунка.
