HTML - Урок 6: Блочная верстка, div-блоки (Часть 1)

HTML - Урок 6: Блочная верстка, div-блоки (Часть 1)

В прошлой статье я говорил про тело сайта и то, как его оформить через файл css стилей. В этом уроке я расскажу про основы блочной верстки и про тег div.

При структурировании страницы часто используется тег div. Он помогает разбивать страницу на блоки. Внутри этого тега можно размещать другие теги, фотографии и ссылки которые потребуются при верстке шаблона. Всем элементам внутри тега div можно будет задать свое оформление с помощью CSS. Надо отметить, что div блоки очень часто используется при HTML верстке.

Чтобы дать название каждому блоку будем использовать селектор "id". Название блокам необходимо давать для того, чтобы задать каждому блоку свой стиль css. Если блок будет повторятся несколько раз, то нужно использовать селектор class, а не id. Повторю ещё раз: если блок повторяется один раз - используем селектор "ID", если несколько раз - селектор "class". Все блоки страницы желательно заключить в один общий.

Название блокам через селекторы задается следующим образом:

<div id="name">


Или:

<div class="name2">


Кстати, после того, как Вы наполнили блок, его необходимо закрыть. Делается это с помощью тега:
</div>
.

Если в блок с селектором "ID" Вы хотите добавить оформление из какого либо класса (class), то это можно прописать через пробел. Вот так:

<div id="name" class="name2">


Пример кода с использованием блока с селектором только ID, с использованием блока только с селектором class и с блоком, в котором селекторы совмещены:

...
<div id="name">
Блок 1.
</div>
<div class="name2">
Блок 2.
</div>
<div id="name3" class="name2">
Блок 3.
</div>
...


На сегодня пожалуй всё, в следующей части урока я расскажу про примерный типовой макет страницы, а также про привязку блоков к таблице стилей CSS.
Автор: Zed от 2013-09-10 18:17:34   Просмотров: 4949

Теги: html уроки урок DIV верстка