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

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


В прошлой статье я начал рассказывать про блоки DIV. Сегодня я расскажу как их оформить с помощью CSS, а также покажу примерный макет шаблона сайта.

Итак, я уже рассказывал про "тело" сайта, блоки DIV, а также про то, как подключить CSS стили в шаблоне. Далее я покажу примерный макет нашего будущего HTML шаблона:



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




Код шаблона взят с сайта kapon.com.ua.



Скачать: makethtml.zip

Итак, это уже готовый шаблон, правда пока ещё не очень функциональный. На основе этого макета мы и будем строить наш шаблон в будущем.
Рассказывать подробно про строение макета я не буду, так как комментарии в нем уже есть.

Как оформить блок DIV через CSS? На этот вопрос я отвечу дальше.

Итак, Вы из прошлого урока научились давать имена div блокам. Возьмем блок из данного шаблона, например "header". Также я говорил про подключение css стилей в шаблоне в уроке 3. У нас есть файл css, шаблон и блок - пора приступать к оформлению блока!

Для того, чтобы оформить блок с селектором ID нужно написать в файле стилей знак # (решетка), название селектора и открыть фигурную скобку. После того, написать нужные стили и закрыть скобки.

Получится примерно так:

#header {
blackground: red;
color: green;
}



Мы сделали фон блока красным, а текст зеленым.

А как оформить блок с селектором "class"? В макете, представленном выше нет блока с class, поэтому предлагаю оформить следующий блок из прошлого урока:

 



Для оформления блока с селектором class нужно написать точку, название блока и в фигурных скобочках нужные стили.

Пример:

 
.name2 {
color: #000;
size: 14 px;
}


Теперь текст в блоке name2 будет черным, с размером 14 пикселей.

На сегодня всё. Помните, что создание шаблона html - не такое трудное дело, как кажется.

Дата: 2013-10-12 14:52:23   Просмотров: 7155

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