JavaScript. Подробное руководство, 6-е издание

16.2.1.2. Пример позиционирования средствами CSS: текст с тенью

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

  <!-- Свойство text-shadow производит тень автоматически -->
  <span style="text-shadow: Зрх Зрх 1рх #888 ">С тенью</span>

  <!– -
Ниже показано, как добиться похожего эффекта с помощью механизма позиционирования.
  – ->
  <span style="position:relative:">
   С тенью <!-- Это основной текст, отбрасывающий тень.– ->
   <span style="position:absolute; top:3px; left:3рх; z-index:-1; color: #888">
   С тенью <!-- Это тень -->
   </span>
  </span>

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

16.2.2. Рамки, поля и отступы

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

  border: solid black 1px; /* рамка рисуется черной сплошной линей,*/
   /* толщиной 1 пиксел */
  border: 3рх dotted red; /* рамка рисуется красной пунктирной линией */
   /* толщиной 3 пиксела */

Толщину, стиль и цвет рамки можно задать с помощью отдельных 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, указав первым значение для верхней стороны и далее по часовой стрелке: сверху, справа, снизу и слева. Например, в следующем фрагменте приводятся два эквивалентных способа задания различных значений отступов для каждой из четырех сторон элемента:

  padding: 1рх 2рх 3рх 4рх;
  /* Предыдущая строка эквивалентна четырем следующим. */
  padding-top: 1рх;
  padding-right: 2рх;
  padding-bottom: 3рх;
  padding-left: 4рх;

Порядок работы с атрибутом margin ничем не отличается.

16.2.3. Блочная модель и детали позиционирования в CSS

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

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

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

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