Создание шаблона Viewy - Урок 2 - Часть 2: CSS, имена и классы

После изучения блоков необходимо рассмотреть как один блок отличать от другого. Этим и займемся.

(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)

Как Вы поняли, весь наш макет страницы будет состоять из блоков, внутри которых мы будем задавать картинки, меню (список из ссылок), посты, надписи и т.д. Допустим, мы будем создавать вот такой стандартный шаблон:



Если посмотреть внимательно на картинку, то можно заметить, что наш шаблон будет состоять из 4 больших блоков:



Зададим этим блокам имена. Чтобы обозначить имя блоку необходимо этому тегу приписать свойство id вот так:

<div id="header"></div>

Таким образом мы задали идентификатор (проще говоря имя) нашему блоку. Стоит отметить что желательно, чтобы это имя было уникальным, то есть единственным в пределах одной страницы. Конечно, возможно задать одно и то же имя двум разным блокам (ведь в жизни бывают однофамильцы), но тогда могут возникнуть проблемы при вставке джаваскриптов и так далее.
Как задавать имена блокам мы рассмотрели. Назовем сразу все основные блоки шаблона (шапка, боковая панель, блок основного содержания и футер):

<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>



Теперь с помощью этих имен можно задавать внешний вид этих блоков. Напомню, мы меняли фон тега в стилях, и это выглядело так:

body
{
background-color: white
}

У стандартных тегов языка html нет имен, точнее сам тег и является своим именем. Такие теги: тег ссылки, тег картинки и так далее. Чтобы обратиться в таком режиме к блокам страницы необходимо написать его имя:

#header
{
background-color: green;
}

При обращении к имени блока нужно указать решетку, дав понять браузеру, что это не стандартный тег языка html, а наш собственный блок, имя которого задано вручну.
Давайте опишем цвет фона для всех блоков:

#header
{
background-color: green;
}
#sidebar
{
background-color: red;
}
#content
{
background-color: yellow;
}
#footer
{
background-color: black;
}

Теперь все блоки будут иметь разный цвет фона.
Понятие идентификатора (проще говоря имя, далее так и буду называть, просто указываю "официальные" названия) мы рассмотрели, теперь необходимое понятие - понятие "класса".

Представьте ситуацию - в магазине лежит три ящика яблок разных сортов. Что у них общего? Они все круглые (почти круглые), у всех есть черешок и листик. Что у них разного? Цвет - красные, зеленые, желтые. Сорт и вкус - кислые, сладкие, горькие. Проще говоря можно обозначить что все эти фрукты принадлежат к одной большой группе (или классу) - "Яблоки". Но при этом у них разные сорта (или имена). Вот так и блоки, которые имеют одинаковые свойства, можно объединять в один большой класс. Зачем это нужно? Представьте, что у вас есть штук шесть блоков, которым нужно задать один и тот же фон. Вам придется придумывать для каждого блока свое уникальное имя и для каждого блока прописать стиль его фона. Неудобно и долго, неправда ли? Тут на помощь приходит понятие "класс". С помощью этого понятия можно всем блокам задать одно большое имя и описать их общие свойства.
Покажу все на примере кода. Есть шесть блоков:

<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
<div id="block6"></div>

В стилях нужно тогда написать:

#block1 {background-color: white;}
#block2 {background-color: white;}
#block3 {background-color: white;}
#block4 {background-color: white;}
#block5 {background-color: white;}
#block6 {background-color: white;}

А теперь введем понятие "класс" и напишем этот же код немного изящнее:

<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>
<div сlass="blocks"></div>

И в стилях:

. blocks {background-color: white;}

Вместо указания стилей для шести различных блоков мы написали строку для всего класса. Все блоки, которым мы зададим это имя класса, будут иметь белый фон.
Конечно, этот пример очень надуманный, но вскоре мы его применим на практике в нашем шаблоне более серьезно.
Заметьте, что класс в стилях начинается с точки, а не с решетки. Кроме того у блока может быть как имя, так и класс одновременно. Класс будет задавать общие свойства блоков - например, белый фон, а имя - различные - например, цвет текста.

Полный код внесенных изменений:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Блок 0 -->
<html xmlns="https://www.w3.org/1999/xhtml">

<!-- Блок 1 -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>{Title}</title> <!-- Заголовок страницы -->
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<!-- Стили по умолчанию -->
<style type="text/css">
body
{
background-color: white;
}
#header
{
background-color: green;
}
#sidebar
{
background-color: red;
}
#content
{
background-color: yellow;
}
#footer
{
background-color: black;
}
</style>
</head>
<!-- Блок 1 конец -->

<!-- Блок 2 -->
<body>

<div id="header"> <!-- Блок 1 -->
Любой текст 1
</div>

<div id="sidebar"> <!-- Блок 2 -->
Любой текст 2
</div>

<div id="content"> <!-- Блок 3 -->
Любой текст 3
</div>

<div id="footer"> <!-- Блок 4 -->
Любой текст 4
</div>

</body>
<!-- Блок 2 конец -->

</html>
<!-- Блок 0 конец -->

Показать/Скрыть текст статьи