- •Каскадные таблицы стилей css
- •Селекторы стилей
- •Значения свойств стилей
- •Свойства стилей
- •Тип шрифта
- •Оформление текста
- •Управление отображением
- •Вид элемента
- •Способ размещения
- •Вид смещения
- •Выравнивание последующего элемента
- •Управление списками
- •Генерация содержимого
- •Сброс счётчика
- •Приращение счётчика
- •Стиль нумерации/маркирования
- •Положение маркера
- •Оформление таблиц
- •Положение названия
- •Алгоритм размещения
- •Формирование границ
- •Пустые ячейки
- •Размеры элементов
- •Вертикальное выравнивание
- •Отображение элементов
- •Вид наложения
- •Область отображения
- •Способ отображения
- •Границы, отступы, поля
- •Управление вёрсткой страниц
- •Размер страницы
- •Переход на новую страницу
- •Управление интерфейсом
- •Вид курсора
- •Визуальные фильтры
- •Динамические фильтры (переходы)
- •Переход blendTrans
- •Переход revealTrans
Сброс счётчика
counter-reset:имя_счётчика Vv|none
Vv - начальное зачение счётчика.
Приращение счётчика
counter-increment:имя_счётчика Vv|none
Vv - величина приращения счётчика.
Стиль нумерации/маркирования
list-style-type:disk|circle|square list-style-type:decimal|decimal-leading-zero|lower-roman|upper-roman list-style-type:lower-greek|lower-latin|upper-latin
disk - диск в качестве маркера для маркированных списков,
circle - круг,
square - квадрат,
decimal - десятичная нумерация 1 2 3,
decimal-leading-zero - десятичная нумерация с ведущим нулём 01 02 03,
lower-roman - малые римские i ii iii iv,
upper-roman - большие римские I II III IV,
lower-greek - малые греческие буквы,
lower-latin - малые латинские буквы a b c,
upper-latin - большие латинские буквы A B C.
Положение маркера
list-style-position:inside|outside
<ul> <li> <code>outside</code> - маркер списка располагается<br> вне текста, </li> <li style="list-style-position:inside"> <code>inside</code> - маркер списка располагается<br> внутри текста. </li> </ul>
outside - маркер списка располагается вне текста,
inside - маркер списка располагается внутри текста.
Оформление таблиц
Для табличных элементов можно задать положение названия, алгоритм расчёта ширины таблицы, технику отображения пустых ячеек и формирования границ между ячейками.
Таблица 2.8. Свойства оформления таблиц |
||
Свойство |
Описание |
Умолчание |
caption-side |
Положение названия |
top |
table-layout |
Алгоритм размещения |
auto |
border-collapse |
Формирование границ |
collapse |
border-spacing |
Размер границ |
0 |
empty-cells |
Пустые ячейки |
show |
Положение названия
caption-side:top|left|right|bottom
Алгоритм размещения
table-layout:auto|fixed
fixed - быстрый алгоритм. Формирование таблицы производится независимо от содержимого ячеек - ширина таблицы определяется атрибутами ширины составляющих её элементов;
auto - оптимизирующий (двухпроходный) алгоритм. Ширина таблицы определяется атрибутами ширины составляющих её элементов и размерами их содержимого.
Формирование границ
border-collapse:collapse|separate
collapse - границы описываются и формируются для горизонтальной группы ячеек,
separate - границы описываются и формируются отдельно для каждой ячейки.
При separate-алгоритме размеры границ можно задать с помощью свойства border-spacing одним числом сразу для обеих границ или двумя числами: размер (толщина) горизонтальной границы и вертикальной границы.
Пустые ячейки
empty-cells:show|hide
При separate-алгоритме задаётся способ отображения границ пустых ячеек таблицы:
show - граница отображается так же, как и для имеющих содержимое,
hide - граница вокруг пустых ячеек таблицы не отображается.
Размеры элементов
Размер элементов по вертикали и горизонтали можно задавать. Можно указать высоту строки (на высоту строки влияет и её выравнивание).
Таблица 2.9. Свойства управления размерами элемента |
|||
Свойство |
Описание |
Умолчание |
Применение |
min-width |
Минимальная ширина |
Зависит от браузера |
Ко всем элементам, кроме табличных и незаменяемых внутристрочных |
max-width |
Максимальная ширина |
|
Ко всем элементам, кроме табличных и незаменяемых внутристрочных |
height |
Высота |
auto |
Ко всем элементам, кроме табличных и незаменяемых внутристрочных |
min-height |
Минимальная высота |
0 |
Ко всем элементам, кроме табличных и незаменяемых внутристрочных |
max-height |
Максимальная высота |
|
Ко всем элементам, кроме табличных и незаменяемых внутристрочных |
line-height |
Высота строки |
normal |
Ко всем элементам |
vertical-align |
Вертикальное выравнивание |
baseline |
Внутристрочные элементы и ячейки таблиц |