Атрибуты стиля (CSS attributes)

Рамки, поля, отступы, фон

Рамки

border-style определяет стиль для всех границ блока. Допустимые значения: solid, dotted, dashed, double, groove, ridge, inset, outset, none, и hidden.

Пример: p { border-style: solid; }

Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения.

Пример: p { border-top-style: double; }

border-width определяет толщину для всех границ блока, указанную в любой из единиц измерения CSS, кроме процентов (как правило, в пикселах). Пример: p { border-width: 2px; }

То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.

border-color определяет цвет границ блока. Значение цвета указывается любым допустимым способом.

Пример: p { border-color: Green; }

Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color.

border - сокращенное свойство, объединяющее border-width, border-style и border-color.

Пример: p { border: 2px solid #f33; }

Поля

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

Свойства padding-top, padding-right, padding-bottom и padding-left задают соответственно верхнее, правое, нижнее и левое поля. Пример: p { padding-left: 20px; }

Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left.

Примеры:

p { padding: 20px; } 
    /* все поля равны 20 пикс */
    p { padding: 5px 20px; }
    /* вертикальные поля равны 5 пикс, а горизонтальные 20 пикс */
    p { padding: 5px 20px 5px 10px; }
    /* сверху 5, справа 20, снизу 5, а слева 10 пикс */

Отступы

Пустое пространство между границей блока и другими блоками задается свойством margin. Оно полностью аналогично свойству padding, с тем отличием, что пространство добавляется не внутри блока, а снаружи.

Пример: p { margin: 20px; }

Фон

Цвет фона блока устанавливается при помощи свойства background-color.

Пример: p { background-color: #765; }

body {
      margin: 5px;
      padding: 5px 10px;
      border: 5px solid gray;
      background-color: #2ae;
    }
  ...
  <div>
    <p>
      В данном примере к элементу body применены свойства margin, padding, border
      и background-color. В упражнении предлагается назначить эти же свойства
      другим элементам страницы - абзацу, списку (и его элементам), а также
      изображению.
    </p>
    <ul>
      <li>margin - отступ</li>
      <li>padding - поле</li>
      <li>border - рамка</li>
      <li>background-color - цвет фона</li>
    </ul>
    <img src="Rock.jpg" alt="Rock" />
  </div>

Рис. 4.2. Поля, отступы, рамки и фон