3. Каскадные таблицы стилей

• Общин правила построения каскадны таблиц стилей
• Шрифты
• Цвет и фон
• Форматирование текста
• Блоки
• Визуальное форматирование
• Визуальные эффекты

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

Каскадные таблицы стилей предоставляют разработчику веб-документов мощные средства компоновки элементов HTML на странице документа, определяющие внешний вид страницы HTML в окне браузера.

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

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

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

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

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

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

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

В данном примере в исходном фрагменте родитель (span) элемента img, позиционированного абсолютно, является статически позиционированным элементом. Поэтому ищется ближайший абсолютно позиционированный родитель. Таковым является тело документа, относительно начала которого и смещается вправо и вниз на 60 пикселов изображение. Если к этому фрагменту добавить один абзац, то элемент span сместится вниз, но его потомок – элемент img – все равно будет позиционирован относительно начала документа, что приведет к перекрытию изображением родителя.

Если теперь изменить позиционирование родителя на относительное, то элемент img будет смещен вниз и вправо относительно начала элемента-родителя. А если добавить перед элементом span абзац, то изображение сместится вместе со своим родителем, оставаясь расположенным на 60 пикселов вниз и вправо относительно начала элемента-родителя.

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

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

Относительное позиционирование.

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

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

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

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

Статическое позиционирование.

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