Прошлая часть была посвящена финальной структуризации html, а также добавлению фонового изображения. На этом уроке мы закончим создавать все базовые стили этой веб-страницы.
Добавляем стили
Сначала мы добавим свойства основной обертки, чтобы контент был ограничен в 1180px ширины экрана. Это необходимо сделать для нормального отображения контента на больших мониторах. Также мы изменим способ отображения контента на flex, чтобы манипулировать положением двух вложенных секций - navbar и header.
- max-width - Ограничение ширины создаваемого блока.
- margin - Внешний отступ блока. Первое значение 0 применяется для вертикального отступа. Второе значение auto позволит отобразить контент в середине блока по горизонтали.
- display - Изменение способа отображения контента.
- flex-direction - Изменение направления контента внутри флекс контейнера. Что такое направление контента, а также чем отличается основная ось от пересекающей, вы сможете узнать на курсах веб разработчика в школе программирования для детей КИДКОД.
- height - Задаем 100% высоты от родительского блока.
Если сейчас проверить результат, то мы увидим как контент будет ограничен в ширину и будет располагаться с равными отступами по горизонтали.
Далее добавляем стили для навигационной панели, а также изменяем свойства текста в логотипе.
- border-bottom - Нижняя граница блока. Состоит из 3х параметров: цвет, тип границы и толщина.
- font-family - Изменение шрифта. На первом уроке мы импортировали специальный шрифт и теперь может его использовать.
- color - Цвет текста.
- font-weight - Жирность шрифта.
- font-size - Размер шрифта.
- margin-bottom - Нижний внешний отступ для блока.
Проверяем результат и смотрим на изменения в навигационной панели.
Следующий на очереди компонент для создания на нашей веб-странице, специальная секция - herobox. Для начала опишем основные свойства главной обертки - header.
- flex-grow - Свойство дочернего элемента для флекс контейнера. С помощью значения 1 позволяет расширить получившийся блок на все оставшееся пространство этого блока.
- align-items - Выравнивание контента внутри флекс контейнера по пересекающей оси.
Теперь перейдем к добавлению свойств создаваемой карточки внутри header блока.
- background-color - Цвет фона для блока.
- box-shadow - Тень блока. Использует несколько параметров (перечисляем их слева-направо): расстояние для тени по оси-х, расстояние для тени по оси-у, размытие тени (blur), размер тени, цвет.
- border-radius - Скругление границ блока.
Осталось применить свойства для текста карточки. Ранее мы уже описывали все перечисленные ниже свойства, поэтому просто добавьте их в текущие стили.
В итоге мы получим финальный результат создаваемой на протяжении 3х уроков веб-страницы. Далее нас ждет добавление динамического взаимодействия пользователя с контентом.
Если вы хотите узнать больше о программировании и уметь создавать не только веб-страницы, но и приложения для операционных систем, то добро пожаловать на курсы в школу программирования для детей КИДКОД. Пользователям дзена предусмотрена скидка в 25% на первый месяц обучения по промо коду "дзен".