4.1 верстаем обьявление

шпаргалка с урока: https://jsfiddle.net/crzdvl/u7ow38fp/119/

как добавить веб-шрифт?

сайт с которого берем шрифты - https://fonts.google.com/

<div>

универсальны контейнер для контента. Он не влияет на контент до тех пор, пока не будет стилизован с css. то есть этот тег помогает структурировать нам другие теги и прикольно компоновать их между собой. попробуйте этот код 👇

<div class="warning">
    <img src="leopard.jpg"
         alt="An intimidating leopard.">
    <p>Beware of the leopard</p>
</div>

.warning {
    border: 10px ridge #f00;
    background-color: #ff0;
    padding: .5rem;
    display: flex;
    flex-direction: column;
}

.warning img {
    width: 100%;
}

.warning p {
    font: small-caps bold 1.2rem sans-serif;
    text-align: center;
}

больше css - больше креатива

display: flex

свойство display определяет тип отображения элемента. по умолчанию у каждого <div> display: block, то есть каждый элемент находится на своей строке, вот так 👇✨

но что если мы хотим сделать их в ряд? для этого нам нужно будет обернуть эти несколько тегов/элементов в тег <div> и добавить стиль display: flex. теперь в прямом смысле свойство flexпозволит нам управлять этим <div>, как мы захочем 😼 .

как вы видите наши элементы стали в ряд. это по умолчанию заложено при добавления стиля display: flex, то есть когда вы добавляете этот стиль, то по умолчанию скрыто добавляется и этотflex-direction: row, но есть ещё парочка свойств, который вы можете использовать

flex-direction: row; // в линию
flex-direction: row-reverse; // в линию наоборот
flex-direction: column; // в колонку
flex-direction: column-reverse; // в колонку наоборот

также есть такое свойство justify-content - отвечает за выравнивание элементов по оси/линии

justify-content: flex-start; // слева
justify-content: flex-end; // справа
justify-content: center; // по центру
justify-content: space-between; // первый элемент в плотную слева, 
                                последний вплотную справа, между 
                                остальными равномерные отсутпы
justify-content: space-around; // равномерные отступы между 
                                всеми элементами

больше свойств: https://tproger.ru/translations/how-css-flexbox-works/

ремарка* - без использования свойства display: flex, вы не можете использовать свойства flex-direction и justify-content. точнее можете, но работать оно не будет и только стили будут выглядеть грязнее 😅

margin и padding

что такое border мы уже учили, помните? это когда мы делали обводку вокруг разных тегов. margin - это внешний отступ от элемента, padding - это внутренний отступ от элемента. вот как это видит наш браузер

рассмотрим на примере. ниже слева видно абзац с padding: 30px вокруг него(пустое место вокруг текста). Зеленый цвет на изображении ниже справа – это padding, который расположен вокруг контейнера. то есть это расстояние которое мы сказали, чтобы было пустое вокруг нашего текста

теперь добавим margin абзацу. Я добавлю margin: 30px. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin

ещё пример ниже 👇

запись margin и padding

/* Применяется ко всем четырём сторонам */
margin: 20px;
padding: 20px;

/* по вертикали | по горизонтали */
margin: 5px 10px;
padding: 5px 10px;

/* сверху | горизонтально | снизу */
margin: 5px 10px 7px;
padding: 5px 10px 7px;

/* сверху | справа | снизу | слева */
margin: 2px 10px 9px 6px;
padding: 2px 10px 9px 6px;

полезные ссылки:

Previous3.3 домашка Next4.2 домашка

Last updated 4 years ago

Was this helpful?