Урок 4. Классы и идентификаторы в HTML и CSS. Теги

Структура сайта. Создание блочных элементов

Блочная вёрстка

Стилизация и оформление веб-страницы — ключевой этап разработки. CSS позволяет задавать внешний вид элементов с помощью классов и идентификаторов (селекторов). Селектор — это элемент или группа элементов, к которым применяются определённые стили.

Классы и идентификаторы используются, когда нужно:

• Задать уникальный стиль отдельным элементам (изображениям, тексту, блокам).

• В CSS класс обозначается точкой (.class), а идентификатор — решёткой (#id).

• В HTML селекторы добавляются через атрибуты class="" или id="".

Различия между классами и идентификаторами:

• ID должны быть уникальными (используются один раз на странице) и имеют приоритет над классами.

• Классы можно применять многократно и комбинировать. Если в CSS заданы конфликтующие свойства, применится последнее объявленное значение.

Когда использовать:

• id — для стилизации одного элемента.

• class — для группового оформления.

Практический пример

1. Добавим текст-рыбу (заполнитель) с помощью сервиса fish-text.ru.

2. Вставим три абзаца в HTML, назначив двум из них класс, а одному — ID:

   <p class="custom-class">
       Далеко-далеко, за словесными горами в стране гласных и согласных живут рыбные тексты.
   </p>
   <p id="custom-id">
       Далеко-далеко, за словесными горами в стране гласных и согласных живут рыбные тексты.
   </p>
   <p class="custom-class">
       Далеко-далеко за словесными горами, в стране гласных и согласных живут рыбные тексты.
   </p>

3. Зададим общие стили для всех абзацев:

   p {
       padding: 15px;
       margin: 15px;
   }

4. Стилизуем класс и ID:

   .custom-class {
       background-color: #42b0ff;
       border: 4px double black;
   }
   #custom-id {
       background-color: #42b0ff;
       border: 4px outset #afdeff;
   }

Структура сайта. Блочная вёрстка

Основные блоки страницы:

• Шапка (header)

• Навигация (nav)

• Контент (main)

• Боковая панель (aside)

• Подвал (footer)

Тег <div> — универсальный контейнер для группировки элементов. Позволяет создавать адаптивные макеты, подстраивающиеся под размер экрана.

Код HTML:

<div id="container">
    <div id="header"><h2>Шапка сайта</h2></div>
    <div id="navigation"><h2>Навигация</h2></div>
    <div id="content"><h2>Контент</h2></div>
    <div id="sidebar"><h2>Сайдбар</h2></div>
    <div id="clear"></div>
    <div id="footer"><h2>Подвал</h2></div>
</div>

Стили CSS:

#container {
    width: auto;
}
#header {
    background: #85d6e5;
    height: 150px;
}
#navigation {
    background: #afdeff;
    height: 40px;
}
#content {
    background: #85d6e5;
    float: left;
    width: 75%;
    height: 250px;
}
#sidebar {
    background: #9fd5fc;
    float: right;
    width: 25%;
    height: 250px;
}
#clear {
    clear: both;
} /* Очистка потока */
#footer {
    background: #75c9d8;
    height: 150px;
}

Блоки адаптивно меняют размер при изменении ширины экрана.

HTML5: Семантические теги

Вместо <div id="header"> в HTML5 используют <header>. Аналогично:

• <nav> — навигация,

• <main> — контент,

• <aside> — сайдбар,

• <footer> — подвал.

Это упрощает код и делает его читаемым.

Итог:

• Освоили работу с классами и ID.

• Научились создавать адаптивную блочную вёрстку.

• Познакомились с семантическими тегами HTML5.