- •Каскадные таблицы стилей css
- •Селекторы стилей
- •Значения свойств стилей
- •Свойства стилей
- •Тип шрифта
- •Оформление текста
- •Управление отображением
- •Вид элемента
- •Способ размещения
- •Вид смещения
- •Выравнивание последующего элемента
- •Управление списками
- •Генерация содержимого
- •Сброс счётчика
- •Приращение счётчика
- •Стиль нумерации/маркирования
- •Положение маркера
- •Оформление таблиц
- •Положение названия
- •Алгоритм размещения
- •Формирование границ
- •Пустые ячейки
- •Размеры элементов
- •Вертикальное выравнивание
- •Отображение элементов
- •Вид наложения
- •Область отображения
- •Способ отображения
- •Границы, отступы, поля
- •Управление вёрсткой страниц
- •Размер страницы
- •Переход на новую страницу
- •Управление интерфейсом
- •Вид курсора
- •Визуальные фильтры
- •Динамические фильтры (переходы)
- •Переход blendTrans
- •Переход revealTrans
Управление отображением
В этом разделе рассматриваются специальные средства управления отображением элементов. С помощью свойства display задаётся принадлежность элемента определённой категории.
Позиции задаются свойствами смещения top от верхнего края вниз, left - от левого края вправо, right - от правого края влево и bottom - от нижнего вверх. Элементу, для которого не указан режим абсолютного позиционирования, можно указать плавающее позиционирование свойством float.
Таблица 2.6. Свойства управления отображением |
|||
Свойство |
Описание |
Умолчание |
Применение |
display |
Вид элемента |
inline |
Ко всем элементам |
position |
Способ размещения |
static |
Ко всем элементам кроме сгенерированных |
top |
Верхняя координата |
auto |
К позиционируемым элементам |
bottom |
Нижняя координата |
auto |
К позиционируемым элементам |
left |
Левая координата |
auto |
К позиционируемым элементам |
right |
Правая координата |
none |
К позиционируемым элементам |
float |
Вид смещения |
auto |
Ко всем элементам кроме сгенерированных и позиционированных |
clear |
Выравнивание после плавающего элемента |
none |
К блочным элементам |
Вид элемента
display:block|inline|list-item|marker|none|run-in|compact display:table|inline-table|table-row-group|table-column|table-column-group|table-header-group|table-footer-group|table-row|table-cell|table-caption
block - блочный элемент,
inline - внутристрочный элемент,
list-item - элемент списка,
marker - генерируемый элемент перед или после блока,
none - блок не генерируется,
run-in - блок вдвигаемого текста,
compact - блок занимающий поле,
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption - табличные элементы.
Способ размещения
position:static|relative|absolute|fixed
static - статическое, обычное размещение в порядке описания слева направо сверху вниз, при необходимости вставляются разрывы строк и страниц,
relative - относительное, тоже обычное, но можно дополнительно сместить элемент от своей позиции свойствами top, left, bottom и right.
absolute - абсолютное, позиция (размер) задаются свойствами top, left, bottom и right относительно родительского блока,
fixed - фиксированное, как и абсолютное, но элемент фиксируется к позиции просмотра (не перемещается при скроллинге).
Вид смещения
float:left|right|none
Способ размещения плавающего элемента в объемлющем блоке (например, иллюстрация на заполненной текстом странице) задаётся следующими значениями:
left - плавающий элемент смещается влево,
right - плавающий элемент смещается вправо,
none - элемент не плавающий.