Цитаты из книги автора Елена Эберт Шпаргалки для начинающего верстальщика HTML/CSS

. Робсон, Э. Фримена «Изучаем HTML, XHTML и CSS (Head First)».

время актуальна версия, которую выражает .

также внутри должен обязательно быть тег , в нем отражен основной текст, который и виден на экране браузера.
В теге должны быть тег , он задает название страницы, в браузере, тег , задающий кодировку страницы (в атрибуте charset, как правило, это значение utf-8).

названием проекта мы должны положить файл для CSS, его мы должны назвать style. css.
Внутри данно

Как его создать? Можно открыть Блокнот через панель Пуск на компьютере и нажать во вкладке Файл — Сохранить как…
Сохранить мы должны данный файл как index.html.

Оформляем шапку первого типа в CSS

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

margin: auto; — свойство margin

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

Через # записывается шестнадцатеричная система счисления цвета.

line-height: — высота строки.
color: — определяет цвет текста.