16.2.1.2. Пример позиционирования средствами CSS: текст с тенью
Спецификация CSS3 включает свойство
text-shadow
, позволяющее добиться эффекта отбрасывания тени текстовыми элементами. Данное свойство поддерживается многими текущими броузерами, однако добиться эффекта тени можно и с помощью CSS-свойств позиционирования, для чего достаточно продублировать, сместив, выводимый текст:
<!-- Свойство text-shadow производит тень автоматически -->
Текст, отбрасывающий тень, заключается в относительно позиционируемый элемент
<span>
. Для него не определяются свойства, задающие позицию, поэтому текст отображается в обычной позиции в потоке. Тень заключается в абсолютно позиционируемый элемент <span>, помещенный в относительно позиционируемый элемент <span> (и поэтому позиционируется относительно него). Свойство z-index обеспечивает отображение тени под текстом.
16.2.2. Рамки, поля и отступы
Стандарт CSS позволяет задавать поля, рамки и отступы для любого элемента. Рамка элемента - это прямоугольник, обрисованный вокруг (полностью или частично) этого элемента. CSS-свойства позволяют задать стиль, цвет и толщину рамки:
border: solid black 1px; /* рамка рисуется черной сплошной линей,*/
Толщину, стиль и цвет рамки можно задать с помощью отдельных CSS-свойств, а также отдельно для каждой из сторон элемента. Например, чтобы нарисовать линию под элементом, достаточно просто определить свойство
border-bottom
. Можно даже задать толщину, стиль и цвет рамки только для одной стороны элемента с помощью таких свойств, как
border-top-width
и
border-left-color
.
В CSS3 можно закруглить все углы рамки, определив свойство
border-radius
, или отдельные углы, задействовав более конкретные свойства. Например:
border-top-right-radius: 50рх;
Свойства
margin
и
padding
задают ширину пустого пространства вокруг элемента. Отличие (очень важное) заключается в том, что свойство
margin
задает ширину пустого пространства снаружи от рамки, между рамкой и окружающими элементами, а свойство
padding
–
внутри рамки, между рамкой и содержимым элемента. Поля (
margin
) позволяют визуально отделить элемент (возможно, окруженный рамкой) от соседних элементов в нормальном потоке вывода документа. Отступы (
padding
) позволяют визуально отделить содержимое элемента от его рамки. Если элемент не имеет рамки, определять ширину отступов обычно не требуется. Если элемент позиционируется динамически, он выпадает из нормального потока вывода документа, и для него не имеет смысла определять ширину полей.
Поля и отступы элемента задаются с помощью свойств
margin
и
padding
:
margin: 5рх; padding: 5рх;
Можно также определить поля и отступы для каждой из сторон элемента в отдельности:
margin-left: 25рх; padding-bottom: 5рх;
Также можно задать величины полей и отступов для каждой из четырех сторон элемента с помощью свойств
margin
и
padding
, указав первым значение для верхней стороны и далее по часовой стрелке: сверху, справа, снизу и слева. Например, в следующем фрагменте приводятся два эквивалентных способа задания различных значений отступов для каждой из четырех сторон элемента:
16.2.3. Блочная модель и детали позиционирования в CSS
Свойства стиля
margin, border
и
padding
, описанные выше, не относятся к числу свойств, которыми приходится часто управлять в сценариях. Причина, по которой они были описаны здесь, состоит в том, что поля, рамки и отступы являются частью блочной модели CSS, знать которую необходимо, чтобы до конца разобраться, как действуют CSS-свойства позиционирования.
Рис. 16.2 иллюстрирует блочную модель CSS и наглядно показывает, какой смысл имеют свойства
top, left, width
и
height
для элементов с рамками и отступами.
На рис. 16.2 показан абсолютно позиционируемый элемент, вложенный в позиционируемый элемент-контейнер. Оба элемента, контейнер и вложенный в него, имеют рамки и отступы, и на рисунке показаны CSS-свойства, определяющие ширину отступов и толщину рамок для каждой стороны элемента-контейнера. Обратите внимание, что здесь не показаны свойства
margin
: поля не используются при отображении абсолютно позиционируемых элементов.