> For the complete documentation index, see [llms.txt](https://vik-coder.gitbook.io/html-css-course-with-sh/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vik-coder.gitbook.io/html-css-course-with-sh/urok-4/untitled.md).

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

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

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

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

[веб-шрифты](https://fonts.google.com/) и [как их юзать](https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/shrifty-podklyuchenie-web-shriftov)

{% file src="/files/-MWtsQrX7p\_quqx9aaAU" %}

## [**\<div>**](https://developer.mozilla.org/ru/docs/Web/HTML/Element/div)

универсальны контейнер для контента. Он не влияет на контент до тех пор, пока не будет стилизован с **css.** то есть этот тег помогает структурировать нам другие теги и прикольно компоновать их между собой. попробуйте этот код :point\_down:&#x20;

{% tabs %}
{% tab title="index.html" %}

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

{% endtab %}

{% tab title="style.css" %}

```css
.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;
}
```

{% endtab %}
{% endtabs %}

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

### display: flex

свойство **`display`** определяет *тип отображения* элемента. по умолчанию у каждого **\<div>** `display: block`, то есть каждый элемент находится на своей строке, вот так :point\_down::sparkles:&#x20;

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWtx5UZrqE_nvPl2_cO%2F600x266_flex_1.gif?alt=media\&token=9397ac8a-95a5-4561-bed7-b8be77b6bbe1)

но что если мы хотим сделать их в ряд? для этого нам нужно будет обернуть эти несколько тегов/элементов в тег **\<div>** и добавить стиль `display: flex`. теперь в прямом смысле свойство `flex`позволит нам управлять этим **\<div>**, как мы захочем :smirk\_cat: .&#x20;

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWtwwDEJNRf412rad0j%2F600x258_flex_2%20\(1\).gif?alt=media\&token=26430c18-57c8-45d6-8c04-1149b9327d7e)

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

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

```

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWtzEeIlLcyaw2Vh06Z%2F1.gif?alt=media\&token=c59c359c-f242-45a8-b06e-1f7f25d5cd17)

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWtzHQ-izEuSA8NzHeN%2F2.gif?alt=media\&token=f8728289-909e-4042-9023-ea37648497e8)

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

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWtzuaEOIxRsRRBsF8L%2F_5.gif?alt=media\&token=f3e13eaf-6f0e-47fd-a900-5f25762fda14)

```css
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/>&#x20;

**ремарка\*** - без использования свойства `display: flex,` вы не можете использовать свойства `flex-direction` и `justify-content`. точнее можете, но работать оно не будет и только стили будут выглядеть грязнее :sweat\_smile:&#x20;

### margin и padding

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

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWu2akPQZb88wLA7rzU%2FArtboard-1-1024x440.jpg?alt=media\&token=7f90d7d1-d273-49cb-ac16-4cc5b55c430f)

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWu6EjYGdBUYrrCphQV%2F78-1553510253.png?alt=media\&token=69fcc91d-a78a-4a5f-b4ff-2feda70be15a)

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

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWu3X-sXAvH0bA8ZSab%2F58.png?alt=media\&token=cb63f094-c827-4d89-8631-eef781e020ce)

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

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWu414WdWdnv3Hdclmd%2F59.png?alt=media\&token=2bbad919-767f-43e4-bcf8-60335f756cb6)

ещё пример ниже :point\_down:&#x20;

![](https://4136267992-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR4-D07_duqULkui1iD%2F-MWtqhKMX95Bv4az_Vvw%2F-MWu6777ZNHvbJ7fCNCM%2F%D0%97%D0%B0%D1%85%D0%BE%D0%BF%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F%20%D0%B5%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_%D0%B2%D0%B8%D0%B1%D1%96%D1%80_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%96_20210328213212.png?alt=media\&token=e9edbc84-7e2d-44cb-bd92-8b9146abecd6)

#### запись margin и padding

```css
/* Применяется ко всем четырём сторонам */
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;
```

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

* [тег \<div>](http://htmlbook.ru/html/div)
* [padding](http://htmlbook.ru/css/padding) и [margin](http://htmlbook.ru/css/margin)
* [размещение элементов на странице](https://tproger.ru/translations/how-css-flexbox-works/)
* [font-family](https://developer.mozilla.org/ru/docs/Web/CSS/font-family)
* [веб-шрифты](https://fonts.google.com/) и [как их юзать](https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/shrifty-podklyuchenie-web-shriftov)