В прошлой статье я начал рассказывать про блоки 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 - не такое трудное дело, как кажется.