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

Свойство vertical-align

Свойство vertical-alignопределяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из таблицы 4.

Таблица 4 Ключевые значения выравнивания по вертикали

Значение	Результат
baseline	Выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя
middle	Выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя
sub	Элемент отображается в виде нижнего индекса
super	Элемент отображается в виде верхнего индекса
text-top	Выравнивание верха элемента с верхом шрифта элемента-родителя
text-bottom	Выравнивание низа элемента с низом шрифта элемента-родителя
top	Выравнивание верха элемента с верхом самого высокого элемента строки
bottom	Выравнивание низа элемента с ниже всех расположенным элементом строки

Значения этого свойства, заданные в виде процентов, вычисляются относительно высоты строки (свойство line-height) самого элемента. Они поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно.

Свойство line-height

Расстояние между базовыми линиями двух соседних строк (высота строки) задается установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.

Примечание

Все текстовые свойства, кроме свойств text-decoration и vertical-align, наследуются элементами-потомками от родителей.

Блоки

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

Свойства поля

В группу форматирования полявходят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента.

Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0.

Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например:

BODY {margin: 1em 2em} /* верх и низ = 1em, право и лево = 2em */

Свойства отступа

Ширина верхнего, правого, нижнего и левого отступаопределяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Свойства границы

Ширину верхней, правой, нижней или левой границызадают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Значениями этих свойств могут быть ключевые параметры thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, – это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick.

Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border‑bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. ниже), но не задан цвет границы, то по умолчанию используется цвет самого элемента.

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

Для задания типа любой из четырех частей границы применяются свойства border-top-style, border‑right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Типы границ, соответствующих всем перечисленным значениям, представлены в таблице 5.

Таблица 5 Типы линий границы

Ключевой параметр	Тип границы
none	Граница не отображается (несмотря на значение свойства 'border-width')
solid	Граница отображается сплошной линией
double	Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства 'border-width')
groove	Граница отображается, как будто она вдавлена в лист ("желобок")
ridge	Граница отображается, как будто она выдавлена из листа ("барельеф")
inset	Весь блок элемента отображается, как будто он вдавлен в лист
outset	Весь блок элемента отображается, как будто он выдавлен из листа ("барельеф")

Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.

⇐ Предыдущая 1 2 3 456 7 Следующая ⇒