container (контейнер) – блок, который центрует контент по середине.

Тег div является пустым универсальным контейнером, который наполняется определенным содержанием. Его цель – логически объединить любой набор элементов внутри данного тега в единственном блоке.

При этом если мы зададим данному div-блоку определенный класс, то через данный класс далее мы можем вложенные элементы стилизовать средствами CSS, или динамически манипулировать ими с применением скриптов Javascript.

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

Атрибут class указывает одно или несколько имен классов для элемента HTML. Если мы в HTML пишем элементу несколько классов, их мы должны указать просто через пробел.

Как видно из примера выше, если класс состоит из несколько слов, частей, то записывается оно через тире, например, title-home, title-1 и т. д.

В целом название класса можно описывать, используя различные направления и правила, ориентируясь на DOM, БЭМ и прочее. Советую вам, если интересно, почитать данную тему отдельно и для самого себя выстроить определенную систему названий, которые для вас и желательно для других разработчиков будут логичны и понятны.

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

.title-home {

стили

}

В JavaScript имя класса используется для выполнения определенных задач для элементов.

Второй тип шапки состоит из логотипа, меню – навигации сайта и аватар пользователя или какой-либо иной информации

Логотип как правило оформляется в виде картинки:

Menu One

Menu Two

Menu Three

Menu Four

Menu – это тег ссылки. Нажимая на ссылку, мы можем перейти на другую страницу сайта или на другой сайт. В данном теге обязательно должен быть атрибут href, в него записывают адрес страницы, на которую ведет ссылка.

Лайфхак к ссылке: когда мы только пишем код, на любые ссылки необходимо ставить «затычки» #:

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

– определяет абзац в HTML-документе, при его отображении браузер автоматически вставляет до и после него отступы.

Описать универсальное оформление шапки сайта в CSS на порядок сложнее, чем в HTML, постараюсь указать основное.

Во-первых, нам нужно ограничить контейнер, то есть задать ему максимальную ширину, для каждого макета она своя, а также выравниваем содержимое данного контейнера по середине – margin: auto;

.container {

max-width: 1140px;

margin: auto;

}

В классе header можно поставить универсальное выравнивание элементов по центру, чтобы выровнять логотип соответственно прочим элементам шапки, также универсально распределение элементов органично по длине шапки и пр.

.header {

display: flex; /*выравнивание по центру по вертикали*/

align-items: center; /*раскидываем по сторонам*/

justify-content: space-between;

}

justify-cоntent: space-between; – данное свойство равномерно распределяет элементы по всей строке. Первый и последний элемент прижимаются к соответствующим краям нашего контейнера. В целом про свойство justify-content смотрите далее.

display: flex; – делает все дочерние элементы резиновыми – flex, а не блочными, как было изначально. Если родительский блок содержит, например, графические элементы, они становятся анонимными flex-элементами.

Оформим непосредственно меню, ниже указан пример, отмечу, что при работе над проектом данные вы должны смотреть в своем макете (боковая панель слева).

.menu-link {

font-size: 16px;

line-height: 24px;

color: #2E266F;

text-decoration: none;

margin-right: 45px;

}

text-decoration: none; – убирает автоматическое подчеркивание в созданном нами списке

font-size: – определяет размер шрифта элемента.

line-height: – высота строки.

color: – определяет цвет текста.

Читать дальше