Читать книгу Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт - Страница 12

Описать универсальное оформление шапки сайта в 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: – определяет цвет текста.

Причем существует несколько цветовых моделей, через которые можно указать значение цвета.

Так зеленый цвет можно вывести в свойстве color как:

– green

– #41AB0D

– rgb (255,0,0)

– rgba (255,100,0,.5)

– hsl (0, 20%, 50%)

– hsla (221, 100%, 50%,.8) и пр.

Самые популярные это green и #41AB0D.

Через # записывается шестнадцатеричная система счисления цвета. Выше приведена сокращенная запись hex-цветов.

Есть специализированные сайты, с помощью которых можно узнать название того или иного цвета, его прочие цветовые модели. Например, сайт Сolorscheme https://colorscheme.ru/color-names.html

max-width: – устанавливает максимальную ширину элемента.

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