Главная | Обратная связь | Поможем написать вашу работу!

Выравнивание последующего элемента

clear:left|right|both|none

Способ выравнивания следующего за плавающим элемента задаётся значениями:

left - верхнее поле элемента увеличивается так, чтобы на его выравнивание слева плавающий элемент не влиял,
right - верхнее поле элемента увеличивается так, чтобы на его выравнивание справа плавающий элемент не влиял,
both - верхнее поле элемента увеличивается так, чтобы на его выравнивание слева и справа плавающий элемент не влиял,
none - никакие изменения в параметры элемента не вносятся.

Управление списками

CSS предоставляет возможность управления нумерацией (счётчиками) разделов, списков, перечней иллюстраций... Для этого используются функции counter() и counters(). Счётчики объявляются с помощью свойства content, потом могут обнуляться (свойство counter-reset) и прибавляться (свойство counter-increment). Например, для автоматической нумерации заголовков первого и второго уровней (h1 - главы и h2 - разделы) необходимо использовать стиль:

h1:before { content: "Глава " counter(chapter) ". "; counter-increment: chapter; counter-reset: section;}h2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section;}

Применение такого стиля даёт нумерацию глав в виде Глава 1., Глава 2., а для разделов в виде 1.1, 1.2 и т.д.

Для символов нумерации нумерованных списков и маркеров ненумерованных списков есть возможность выбрать стиль свойством list-style-type.

Расположение маркера по отношению к тексту элемента списка регулируется с помощью свойств list-style-position и marker-offset.

Таблица 2.7. Свойства управления списком
Свойство	Описание	Умолчание	Применение
content	Генерация содержимого	Пустая строка	К псевдоэлементам `before` и `after`
counter-reset	Сброс счётчика	`none`	Ко всем элементам
counter-increment	Приращение счётчика	`none`	Ко всем элементам
list-style-type	Стиль нумерации/маркирования	`disk`	К элементам с `display:list-item`
list-style-image	Символ маркирования	`none`	К элементам с `display:list-item`
list-style-position	Положение маркера	`outside`	К элементам с `display:list-item`
marker-offset	Смещение маркера	`auto`	К элементам с `display:marker`

Генерация содержимого

URI - адрес внешнего ресурса, используемого для генерации,
couter()|counters() - определение счётчиков,
attr(X) - функция, возвращающая значение атрибута Х элемента, выбранного селектором,
open-quote - открывающая кавычка, замещается соответствующими символами из свойства quotes,
close-quote - закрывающая кавычка, замещается соответствующими символами из свойства quotes,
no-open-quote - пустая строка, увеличивает уровень вложения кавычек на 1,
no-close-quote - пустая строка, уменьшает уровень вложения кавычек на 1.

Сброс счётчика

counter-reset:имя_счётчика Vv|none

Vv - начальное зачение счётчика.

Приращение счётчика

counter-increment:имя_счётчика Vv|none

Vv - величина приращения счётчика.

Стиль нумерации/маркирования

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`	Внутристрочные элементы и ячейки таблиц

Вертикальное выравнивание

baseline - по базовой линии строки или нижней границе объемлющего блока,
middle - по базовой линии объемлющего блока плюс половина высоты его,
sub - нижний индекс,
super - верхний индекс,
text-top - верхушка элемента выравнивается по верхушке шрифта родительского элемента,
text-bottom - низ элемента выравнивается по низу шрифта родительского элемента,
top - верх элемента выравнивается по верху строки,
bottom - низ элемента выравнивается по низу строки.

Отображение элементов

Таблица 2.10. Свойства управления отображением содержимого элемента
Свойство	Описание	Умолчание	Применение
overflow	Наложение	`visible`	К блочным или замещаемым элементам
clip	Область отображения	`auto`	К блочным или замещаемым элементам
visibility	Отображение	`inherit`	Ко всем элементам

Вид наложения

overflow:visible|hidden|scroll|auto

visible - содержание не обрезается, а может отображаться и вне границ,
hidden - содержание обрезается по границам, прокрутка не предусмотрена,
scroll - содержание обрезается по границам, предусмотрен механизм прокрутки,
auto - обработка определяется браузером.

Область отображения

clip:shape|auto

auto - область отображения имеет тот же размер и те же границы, что и сам элемент,
shape - форма области отображения - прямоугольник rect (верх, право, низ, лево), для которого задаются смещения относительно границ элемента. Отрицательные смещения обеспечивают отображение вне границ элемента.

Способ отображения

visibility:visible|hidden|collapse

visible - область отображения видима,
hidden - часть области отображения, выходящая за границы, не видима (прозрачна),
collapse - часть области отображения, выходящая за границы, скрыта.

Границы, отступы, поля

При оформлении документов для каждого из его элементов можно указать границы, отступы и поля. Соответствующие свойства применимы ко всем элементам.

top

left

margin-top

margin-left

border-top

border-left

padding-top
padding-left	`content`	padding-right
padding-bottom

border-right

border-bottom

margin-right

margin-bottom

right

bottom

Таблица 2.11. Свойства оформления документов
Свойство	Описание	Умолчание
margin/padding[-top/right/bottom/left]	Поле, отступ верхний, правый, нижний, левый	`0`
border[-top/right/bottom/left]-width	Толщина верхней, правой, нижней, левой границы	`medium`
border[-top/right/bottom/left]-color	Цвет верхней, правой, нижней, левой границы	Значение свойства `color`
border[-top/right/bottom/left]-style	Тип верхней, правой, нижней, левой границы	`none`

Поле

margin:Sv|Pv|auto

Отступ

padding:Sv|Pv|auto

Значения полей, равно как и отступов, можно задать как персонально, например:
<ДЕСКРИПТОР style="margin-left:20px; padding-top:15px">
так и одной строкой
<ДЕСКРИПТОР style="margin:10mm 5mm 10mm 20mm">
в порядке следования: верх, право, низ и лево.

Толщина границы

border-width:Rv>0|thin|medium|thick

thin - тонкая,
medium - средняя,
thick - толстая.

Тип границы

none - линия отсутствует,
hidden - скрытая линия,
dotted - пунктирная линия,
dashed - штриховая линия,
solid - обычная линия,
double - двойная обычная линия с интервалом между линиями,
groove - углубленная линия,
ridge - выпуклая линия,
inset - утопленная линия,
outset - выпуклая линия.

Свойства границ можно объединять, задавая сразу все нужные величины: толщину, тип и цвет. Например:
h1 {border-bottom: thick solid red}

⇐ Предыдущая 12

Воспользуйтесь поиском по сайту: