Чтение онлайн

Спецификация CSS3 включает свойство

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

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

. Для него не определяются свойства, задающие позицию, поэтому текст отображается в обычной позиции в потоке. Тень заключается в абсолютно позиционируемый элемент <span>, помещенный в относительно позиционируемый элемент <span> (и поэтому позиционируется относительно него). Свойство z-index обеспечивает отображение тени под текстом.

Стандарт CSS позволяет задавать поля, рамки и отступы для любого элемента. Рамка элемента - это прямоугольник, обрисованный вокруг (полностью или частично) этого элемента. CSS-свойства позволяют задать стиль, цвет и толщину рамки:

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

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

В CSS3 можно закруглить все углы рамки, определив свойство

, или отдельные углы, задействовав более конкретные свойства. Например:

Свойства

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

Поля и отступы элемента задаются с помощью свойств

и :

Можно также определить поля и отступы для каждой из сторон элемента в отдельности:

Также можно задать величины полей и отступов для каждой из четырех сторон элемента с помощью свойств

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

Порядок работы с атрибутом

ничем не отличается.

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

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

Рис. 16.2 иллюстрирует блочную модель CSS и наглядно показывает, какой смысл имеют свойства

и для элементов с рамками и отступами.

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

: поля не используются при отображении абсолютно позиционируемых элементов.