Тег DIV отвечает за создание так называемого контейнера. Его главной особенностью является то, что ему можно придать любые свойства: начиная от размеров, и заканчивая положением на странице. Имеено благодаря этому различные информационные блоки можно размещать независимо друг от друга. В случае с табличной версткой для таких преобразований может понадобится переверстать пол документа.
Итак, как же работать с DIV?
Он задается, как и любой другой тег в HTML:
здесь текст
Для задания свойств контейнеру применяется свойство STYLE. Так например, чтобы сделать текст красного цвета необходимо написать STYLE="color: red"
здесь текст
будет выглядеть так:Если необходимо задать несколько свойств, их можно перечислять через точку с запятой:
здесь текст
будет выглядеть так:Итак, какие-же свойства можно использовать:
color - Определяет цвет элемента
background-color - Устанавливает цвет фона для элемента
background-image - Устанавливает фоновый рисунок для элемента
Для DIV можно использовать границы:
border-width - Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая).
border-color - Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
border-style - Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset
Так-же иногда полезно использовать отступы:
margin - Задает ширину отступа от четырех сторон объекта
margin-top - Задает высоту верхнего отступа объекта
margin-left - Задает ширину левого отступа объекта
margin-right - Задает ширину правого отступа объекта
margin-bottom - Задает высоту нижнего отступа объекта
padding - Задает величину пространтства, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей
padding-bottom - Задает величину пространтства, вставляемого между объектом его нижней границей
padding-left - Задает величину пространтства, вставляемого между объектом его левой границей
padding-right - Задает величину пространтства, вставляемого между объектом его правой границей
padding-top - Задает величину пространтства, вставляемого между объектом его верхней границей
Для DIV можно задавать ширину и высоту
width - Задает ширину контейнера (в пикселах или процентах)
height - Задает высоту контейнера (в пикселах или процентах)
Но все было-бы не так интересно, если бы не такое свойство, как position. Именно оно позволяет располагать наш контейнер там, где нам это нужно.
Атрибут position может принимать значения absolute и relative. В первом случае позиционирование будет осуществляться относительно левого верхнего угла страницы, во втором случае - относительно исходного положения. Для задания смещения используются свойства left и top, которые задают смещение слева и сверху соответственно.
Итак, что-же можно теперь сделать:
здесь текст
а так выглядит код:
здесь текст
При использовании DIV верстки придется отказаться от использования таблиц для разметки (так как в них уже не будет смысла), но тем не менее может получится очень красиво.
источник
