Свойство background-attachment

Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера, или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке.

BODY {background-color: lightsteelblue;

background-image: url(/image/image.gif);

background-repeat: repeat-y;

background-attachment: fixed;}

Свойство background-position

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

Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например 10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.

Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10мм правее и на 10мм ниже левого верхнего угла блока содержимого.

Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в таблице 3.

Таблица 3 Допустимые комбинации ключевых значений

Комбинация	Значение
top left, left top	0% 0%
top, top center, center top	50% 0%
top right, right top	100% 0%
left, center left, left center	0% 50%
center, center center	50% 50%
right, center right, right center	100% 50%
bottom left, left bottom	0% 100%
bottom, bottom right, bottom center	50% 100%
bottom right, right bottom	100% 100%

Свойство background

Свойство background позволяет одновременно устанавливать значения свойств background-color, background-image, background-repeat и background-attachment. Все допустимые значения индивидуальных свойств задаются в виде списка, элементы которого отделены пробелами. Если значение какого-либо свойства не задано, то оно устанавливается в начальное значение, определяемое браузером:

BODY {background: lightsteelblue url(/image/image.gif) center}

Примечание

Свойство color наследуется по обычным правилам. Все свойства, определяющие параметры фона, не наследуются, но фон элемента-родителя будет отображаться по умолчанию, так как начальным значением свойства background-color является transparent (прозрачный).

Форматирование текста

Свойство letter-spacing

Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами.

<P STYLE="letter-spacing: 0.5em">

Слово слово слово слово слово

</P>

Свойство text-transform

Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML.

Свойство text-decoration

Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-through.

Свойство text-align

Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю – при значении right, по центру – при значении center и по ширине блока содержимого элемента – при значении justify.

Внимание

Текст выравнивается относительно блока содержимого элемента, а не относительно окна отображения браузера.

Свойство text-indent

Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины.

Свойство 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 определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.

Визуальное форматирование

Свойство position

Свойство position элемента позволяет определить способ его позиционирования на странице: статический, относительный или абсолютный.

Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значениями его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента.

Абсолютное позиционирование

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

Чтобы определить точку отсчета местоположения элемента следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение левой верхней вершины блока этого элемента и будет точкой отсчета для абсолютно позиционированного элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдет до элемента <BODY>, то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент.

Следующий фрагмент страницы HTML иллюстрирует абсолютное позиционирование элемента:

<SPAN STYLE="position:static;

background-color:#90EE90">

Родитель, позиционированный статически!

<IMG SRC="Ж.gif" STYLE="position:absolute; top:60px; left:60px;">

</SPAN>

    

а)                                                                      б)

   

в)                                                                     г)

Свойства top и left

Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя. Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением.

Свойства width и height

Еще два параметра, влияющие на отображение абсолютно позиционированного элемента, – это свойства width и height элемента. Как отмечалось, при абсолютном позиционировании элемент изымается из стандартного потока и отображается самостоятельно в своем собственном прямоугольном блоке, левый верхний угол которого помещается в определенную точку окна браузера. Свойства width и height задают ширину и высоту этого блока. Если они не заданы, то по горизонтали блок распространяется до правого края окна браузера, а по вертикали – на столько, на сколько – необходимо для отображения содержимого элемента. Установка значений свойств width и height ограничивает размеры блока абсолютно позиционированного элемента. Если его содержимое не помещается в блок заданного размера, то оно просто не видимо пользователю. Динамическим изменением размеров блока можно сделать так, что будет видно все содержимое элемента.