Итак, что-же такое DIV: зачем он нужен и чем он хорош.
Тег DIV отвечает за создание так называемого контейнера. Его главной особенностью является то, что ему можно придать любые свойства: начиная от размеров, и заканчивая положением на странице. Имеено благодаря этому различные информационные блоки можно размещать независимо друг от друга. В случае с табличной версткой для таких преобразований может понадобится переверстать пол документа.
Итак, как же работать с DIV?
Он задается, как и любой другой тег в HTML:
<div>здесь текст</div>
Для задания свойств контейнеру применяется свойство STYLE. Так например, чтобы сделать текст красного цвета необходимо написать STYLE="color: red"
<div STYLE="color: red" >здесь текст</div> будет выглядеть так:
здесь текст
Если необходимо задать несколько свойств, их можно перечислять через точку с запятой:
<div STYLE="color: red; background-color: pink;" >здесь текст</div> будет выглядеть так:
здесь текст
Итак, какие-же свойства можно использовать:
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 style="color:red; background-color: pink; width: 60px; height: 40px; border-style: groove; border-color: yellow; position: relative; left: 60px; top: 10px;">здесь текст</div>
При использовании DIV верстки придется отказаться от использования таблиц для разметки (так как в них уже не будет смысла), но тем не менее может получится очень красиво.
P.S. В следующий раз расскажу, как сделать закругленные края и поищу еще какие-нибудь вкусности.
P.P.S. Всем желаю удачи!