CSS 3

#### Инлайн-стили
``html {.wrap}
<h2 style="text-align: center;">Выравнивание текста по центру</h2>

<p style="color: blue; font-size: 18px;">Синий, 18-пунктовый текст</p>

Отменяет все предыдущие правила стилизации.


### Селектор

``css
h1 { }
#job-title { }
div.hero { }
div > p { }

См: [Цвета](#css-colors)




### Фон

``css
background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");

См: [Шрифты](#css-fonts)




### Положение

``css
.box {
    position: relative;
    top: 20px;
    left: 20px;
}

См: [Анимация](#css-animation)


### Комментарий
``css

/* Это однострочный комментарий */

/* Это
   многострочный комментарий */

См: [Flexbox](#css-flexbox) | [Flex Tricks](#css-flexbox-tricks)




### Разметка сетки

``css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  ширина: 50px;
  height: 50px;
}

См: [Динамический контент](#css-dynamic-content)


Селекторы CSS
-----------


### Примеры {.row-span-2}

#### Селектор групп
``css
h1, h2 {
    цвет: красный;
}

#### Селектор атрибутов
``css
div[attribute="SomeValue"] {
    background-color: red;
}

#### Селектор отсутствия детей
``css
.box:empty {
  фон: lime;
  высота: 80px;
  width: 80px;
}

### Case {.row-span-2}

``css

/* Hello */
text-transform: capitalize;

/* HELLO */
text-transform: uppercase;

/* привет */
text-transform: lowercase;

Цвета CSS
------------


### Именованный цвет

``css
цвет: красный;
цвет: оранжевый;
цвет: tan;
цвет: rebeccapurple;

### rgb() Цвета

``css
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

цвет: наследуется;
цвет: начальный;
color: unset;
цвет: прозрачный;

color: currentcolor; /* ключевое слово */

CSS Модель коробки
------------


### Максимумы/минимумы

``css
.column {
    max-width: 200px;
    ширина: 500px;
}

См. также: [Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) / [Padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)


### Размер ящика

``css
.container {
    box-sizing: border-box;
}

См. также: [Видимость](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)


### Ключевое слово Auto

``css
div {
    margin: auto;
}

См. также: [Переполнение](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)




CSS-анимация {.cols-5}
---------


### Короткое обозначение {.col-span-5 .secondary}

| | name | duration | timing-function | delay | count | direction | fill-mode | play-state |
|--------------|----------|----------|-----------------|---------|------------|---------------------|-----------|------------|
| `анимация:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` | `both` | `reverse` |
| | name | duration | timing-function | delay | count | direction | fill-mode | play-state |

### Свойства {.row-span-2 .col-span-2}

| Свойство | Значение |
|------------------------------|--------------------------------------------------------|
| `анимация:` | _(сокращение)_ |
| `animation-name:` | \<name> |
| `animation-duration:` | \<time>ms |
| `animation-timing-function:` | ease / linear / ease-in / ease-out / ease-in-out |
| ``animation-delay:`` | \<time>ms |
| ``animation-iteration-count:`` | infinite / \<number> |
| ``направление анимации`` | нормальное / обратное / альтернативное / альтернативно-обратное |
| ``animation-fill-mode:`` | none / forward / backwards / both / initial / inherit |
| ``animation-play-state:`` | normal / reverse / alternate / alternate-reverse |
{.left-text}

См. также: [Анимация](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)


### Пример {.col-span-3}

``css
/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
анимация: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
анимация: 3s linear 1s slidein;

/* @keyframes duration | name */
анимация: 3s slidein;

анимация: 4s linear 0s infinite alternate move_eye;
анимация: bounce 300ms linear 0s infinite normal;
анимация: bounce 300ms linear infinite;
анимация: bounce 300ms linear infinite alternate-reverse;
анимация: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

CSS Flexbox {.cols-2}
-------


### Простой пример

``css
.container {
  display: flex;
}

### Контейнер {.row-span-2}

.container {

``css
  display: flex;
  display: inline-flex;

  flex-direction: row; /* ltr - по умолчанию */
  flex-direction: row-reverse; /* rtl */
  flex-direction: column; /* top-bottom */
  flex-direction: column-reverse; /* bottom-top */

```css
  align-items: flex-start; /* вертикальный выравнивание по верху */
  align-items: flex-end; /* вертикальный выравнивание по низу */
  align-items: center; /* вертикальный выравнивание по центру */
  align-items: stretch; /* одинаковая высота для всех (по умолчанию) */

  justify-content: flex-start; /* [xxx ] */
  justify-content: center; /* [ xxx ] */
  justify-content: flex-end; /* [ xxx] */
  justify-content: space-between; /* [x x x] */
  justify-content: space-around; /* [ x x x ] */
  justify-content: space-evenly; /* [ x x x ] */

``css
  order: 1;

}


Приемы CSS Flexbox
--------------

### Вертикальный центр

``css
.container {
  display: flex;
}

.container > div {
  width: 100px;
  высота: 100px;
  margin: auto;
}

### Переупорядочивание

``css
.container > .top {
 порядок: 1;
}

.container > .bottom {
 порядок: 2;
}

.container {
  display: flex;
  flex-direction: column;
}

.container > .top {
  flex: 0 0 100px;
}

.container > .content {
  flex: 1 0 auto;
}

Таким образом, создаются колонки, имеющие разную ширину, но размеры которых зависят от обстоятельств.
в зависимости от обстоятельств.

### Вертикальный


``css
.container {
  align-items: center;
}

CSS Grid Layout
------------


### Колонки шаблона сетки

``css
#grid-container {
    display: grid;
    ширина: 100px;
    grid-template-columns: 20px 20% 60%;
}

### Зазор между сетками

```css
/* Расстояние между строками составляет 20px*/
/*Расстояние между столбцами 10px*/
#grid-container {
    display: grid;
    grid-gap: 20px 10px;
}

### CSS grid-row

Синтаксис CSS:
- grid-row: grid-row-start / grid-row-end;
#### Пример
``css
.item {
    grid-row: 1 / span 2;
}

### minmax() Функция

```css {.wrap}
.grid {
    display: grid;
    grid-template-columns: 100px minmax(100px, 500px) 100px;
}

### CSS grid-row-gap

``css
grid-row-gap: length;

### Обоснование элементов

```css
#container {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
}

### Обосновать себя

```css
#grid-container {
    display: grid;
    justify-items: start;
}

.grid-items {
    justify-self: end;
}

Динамическое содержимое CSS
------------

### Переменная

Определение переменной CSS
``css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

См. также: [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)

### Счетчик

``css
/* Установить значение "my-counter" равным 0 */
counter-set: my-counter;

/* Увеличение "my-counter" на 1 */
counter-increment: my-counter;

/* Уменьшение "my-counter" на 1 */
counter-increment: my-counter -1;

/* Сбросить значение "my-counter" в 0 */
counter-reset: my-counter;

``css
ol {
  counter-reset: section;
  list-marker-type: none;
}

li::before {
  счетчик-инкремент: section;
  content: counters(section, ".") " ";
}

[Нажмите на меня](#css-getting-started), страница будет плавно прокручиваться до раздела Getting started




См. также {.cols-1}
---------

- [CSS selectors cheatsheet](https://frontend30.com/css-selectors-cheatsheet/) _(frontend30.com)_
- [MDN: Using CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
- [Ultimate flexbox cheatsheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html)
- [GRID: простая визуальная шпаргалка](http://grid.malven.co/)
- [CSS Tricks: A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Поддержка браузеров](https://caniuse.com/#feat=css-grid)