Блоки в CSS

Все элементы в языке разметки гипертекста делятся на блочные и строчные. Блочные создают блок, визуально самостоятельную структурную единицу. Примеры блочных элементов: div, p, h1-h6. Строчные элементы не создают визуальной самостоятельной структурной единицы. Они выводятся одной линейной строкой. Примеры строчных элементов: i, em, b и аналоги. Подробнее строчные элементы рассмотрены в статье стили текста.

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

Рассмотрим рисунок. В центре блока размещается его содержимое - контент. Для контента можно задавать ширину (width) и высоту (height). Внутри блока может существовать пустое пространство - отступы (padding). Блок имеет свою границу (border), а за пределами этой границы может быть свободное пространство - поля (margin). Соответственно, для любого блока можно задать поля, границы и отступы.

Границы блоков

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

Каждая граница может иметь свой цвет, толщину и тип линии. Чтобы задать все эти вещи, для нужной границы через дефис необходимо приписать цвет (color), толщину (width) и тип линии (style). Например:

border-top-color
border-top-width
border-bottom-width
border-right-style

Также для всех границ сразу можно задать эти свойства. Делается это при помощи сокращённой записи свойства border:

Выше указаны сокращённые виды записи для задания цвета, толщины и стиля (типа линий) всех четырёх границ сразу.

Значение свойства width задаётся при помощи одного из трёх ключевых слов:

  1. thin - тонкая граница;
  2. medium - средняя граница;
  3. thick - толстая граница.

Толщину линий можно задавать также в любых единицах измерения главное, чтобы значение было положительное!

Задать цвет линии можно тоже тремя способами, с которыми мы познакомились в главе цвет и фон в CSS.

Тип линии задаётся при помощи ключевых слов, всего их девять:

  1. none - граница отсутствует, отсутствует соответственно толщина и цвет тоже, поэтому эти свойства можно не задавать. Используется по умолчанию;
  2. dotted - линия границы состоит из точек;
  3. solid - сплошная линия границы;
  4. dashed - граница в виде пунктирной линии;
  5. double - граница отображается в виде двойной сплошной линии. Толщина двойной сплошной линии задаётся при помощи свойства width, то есть сумма линий + расстояние между ними = border-width;
  6. groove - граница в виде вдавленной линий, которая имитирует объём;
  7. ridge - граница в виде выпуклой линии, имитирующей объём;
  8. inset - при использовании этой границы, блок кажется визуально вдавленным;
  9. outset - блок кажется выпуклым.

Внешний вид блоков, с различными границами вы можете посмотреть здесь.

В том случае, если требуется задать единый стиль для всех границ, правильнее будет воспользоваться сокращенной записью свойства border, в которой через пробел указываются: толщина, тип линии и цвет, причём именно в таком порядке:

border: 1px solid red;

Поля

Поля - это свободное пространство между блоками. Задавая ширину полей, мы задаём расстояние между блоками. Задаются поля для каждой границы при помощи четырёх свойств:

  1. margin-top - ширина верхнего поля;
  2. margin-right - ширина правого поля;
  3. margin-bottom - ширина нижнего поля;
  4. margin-left - ширина левого поля.

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

div {
margin:5px 10px 8px 9px;
}

Если все поля равны, то после слова margin пишется одно значение:

div {
margin:5px;
}

В том случае, если поля попарно равны, свойство margin будет иметь 2 значения:

div {
margin:5px 10px;
}

Причем, первое значение указывается для верхнего и нижнего полей, а второе - для правого и левого. Также можно задать 3 значения для свойства margin, например:

div {
margin:5px 10px 15px;
}

В этом случае первое значение применяется к верхнему полю, второе к левому и правому, а третье - к нижнему.

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

Отступы

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

Для задания отступов можно использовать сокращённую запись, которая полностью аналогична записи свойства margin. Размеры отступов можно задавать в единицах длины или процентах. Проценты вычисляются относительно размеров блока.

2012 год.


| В раздел | Следующая>>