Стилизация таблиц - Изучение веб-разработки

Стилизация таблиц
=================

* Назад  (en-US)
* Обзор: Styling boxes
* Далее

Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.

| Необходимые знания: | Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS). |
| --- | --- |
| Цель: | Научиться эффективно стилизовать HTML таблицы. |

Типичная HTML таблица
---------------------

Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

```html
<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>
```

Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как `scope` (en-US), `<caption>`, `<thead>` (en-US), `<tbody>` (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/table-unstyled.png)

Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.

Активное обучение: Стилизация таблицы
-------------------------------------

В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.

1. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
2. Следующее, это создать новый файл `style.css` и сохранить его в той же папке вместе с другими файлами.
3. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри `<head>`:

```html
<link href="style.css" rel="stylesheet" type="text/css" />
```

### Отступы и разметка

Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш `style.css` файл:

```css
/\* Отступы \*/

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}
```

Наиболее важные части следующие:

* Свойство `table-layout` (en-US) со значением `fixed` как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда `table-layout: fixed`, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора `thead th:nth-child(n)` (`:nth-child`) ("Выберите *n-ый* дочерний элемент `<th>` (en-US) в последовательности, внутри элемента `<thead>` (en-US)") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.
 Мы также использовали `width` 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
* Свойство `border-collapse` (en-US) со значением `collapse` это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже:
 ![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/no-border-collapse.png)Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить `border-collapse: collapse;` рамки схлопываются в одну и так выглядит намного лучше:
 ![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/border-collapse.png)
* Мы установили `border` вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
* Мы установили `padding` на элементах `<th>` (en-US) и `<td>` — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.

На этом этапе наша таблица выглядит уже гораздо лучше:

![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-spacing.png)

### Немного простой типографики

Теперь мы ещё кое-что изменим.

Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный `<link>` элемент и изменить объявление `font-family` на выбранный вами Google Fonts шрифт.

Добавьте элемент `<link>` в блок head вашего HTML, на строчку выше существующего элемента `<link>`:

```html
<link
 href="https://fonts.googleapis.com/css?family=Rock+Salt"
 rel="stylesheet"
 type="text/css" />
```

Затем добавьте следующий CSS в ваш `style.css` файл, ниже предыдущего кода:

```css
/\* Типографика \*/

html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}
```

Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:

* Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов `<thead>` (en-US) и `<tfoot>`, который подходит нам по тематике панков.
* Мы добавили немного `letter-spacing` в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
* Мы выравниваем по центру текст ячейках внутри `<tbody>` (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство `text-align` имеет значение `left`, а заголовки значение `center`, но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
* Мы выровняли заголовок справа внутри `<tfoot>` так чтобы он визуально ассоциировался с соответствующими ему данными.

В результате таблица выглядит немного аккуратнее:

![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-typography.png)

### Графика и цвета

И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.

Начнём с добавления в конец файла `style.css` следующего CSS:

```css
/\* Графика и цвета \*/

thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
  border: 3px solid purple;
}
```

Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.

Мы добавили `background-image` в `<thead>` (en-US), `<tfoot>` и изменили `color` (en-US) для всего текста внутри header и footer на белый (и ещё `text-shadow`) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

Также мы добавили линейный градиент для `<th>` (en-US) и `<td>` элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на `<thead>` (en-US) и `<tfoot>` элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты (en-US).

#### Полосатая зебра

Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать **полосы зебры** — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш `style.css` файл:

```css
/\* Полосатая зебра \*/

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
```

* Ранее вы видели как `:nth-child` селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула `2n-1` выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула `2n` выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова `odd` и `even`, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
* Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный `.png` с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
* И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор `:nth-child`.

Этот взрыв цвета выглядит следующим образом:

![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-color.png)

То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.

### Стилизация заголовка

Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл `style.css`:

```css
/\* Заголовок \*/

caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}
```

Здесь нет ничего особенного, кроме свойства `caption-side` (en-US), которое имеет значение `bottom`. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

![](/ru/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-caption.png)

Активное обучение: Стилизация вашей собственной таблицы
-------------------------------------------------------

Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.

Стилизация таблицы быстрые советы
---------------------------------

Короткий список наиболее полезных вещей рассмотренных выше:

* Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
* Используйте `table-layout` (en-US)`: fixed` для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину `width` для заголовков таблицы (`<th>` (en-US)).
* Используйте `border-collapse` (en-US)`: collapse`, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
* Используйте `<thead>` (en-US), `<tbody>` (en-US) и `<tfoot>` чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
* Используйте полоски зебры, чтобы облегчить чтение между строк.
* Используйте `text-align` чтобы выровнять текст в `<th>` (en-US) и `<td>` для более аккуратного и удобного оформления.
Заключение
----------

Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.

* Назад  (en-US)
* Обзор: Styling boxes
* Далее
В этом блоке
------------

* Box model recap
* Backgrounds
* Borders
* Стилизация таблиц
* Advanced box effects
* Creating fancy letterheaded paper (en-US)
* A cool looking box (en-US)


Изменение размеров в CSS - Изучение веб-разработки

Изменение размеров в CSS
========================

* Назад
* Обзор: Building blocks
* Далее

В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.

| Необходимые условия: | Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (Введение в CSS.) |
| --- | --- |
| Цель: | Изучить различные способы задания размеров объектов в CSS. |

Размер по умолчанию или внутренний размер
-----------------------------------------

Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — **внутренний размер**, он исходит из самого изображения.

Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега `<img>` или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.

С другой стороны, пустой `<div>` не имеет собственного размера. Если вы добавите `<div>` в свой HTML-код без содержимого, а затем установите для него рамку, как мы это делали с изображением, вы увидите линию на странице. Это схлопнувшиеся границы элемента — содержимое, которое могло бы удерживать ее в открытом состоянии, отсутствует. В нашем примере ниже эта граница растягивается на всю ширину контейнера, потому что это элемент блочный, поведение которого должно быть вам знакомо. У него нет высоты, потому что нет содержимого.

В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого `<div>` устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.

Присваивание определенного размера
----------------------------------

Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется **внешним размером**. Возьмите наш `<div>` из примера выше и установите ему специальные значения `width` и `height` и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в нашем предыдущем уроке о переполнении, заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.

Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длины или процентного соотношения — это то, что нужно делать с большой осторожностью.

### Использование процентного соотношения

Во многих отношениях проценты действуют как единицы длины, и, как мы обсуждали в уроке, посвященном значениям и единицам, они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, *от чего этот процент рассчитывается*. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.

Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш `<div>` будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.

### Margins и paddings в процентах

Если вы установите `margins` и `padding` в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку `margin` 10% и `padding` 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.

Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!

При использовании margins и padding, заданных в процентах, значение рассчитывается на основе **inline размера** блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.

Минимальные и максимальные размеры
----------------------------------

Помимо возможности установить фиксированный размер, мы можем использовать CSS чтобы задать элементу минимальный или максимальный размер. Если у вас есть блок, который может содержать разное количество содержимого, и вы хотите, чтобы он всегда был определенной минимальной высоты, вы можете установить для него свойство `min-height`. Блок всегда будет минимальной заданной высоты, пока содержимого не станет больше, чем места в блоке.

В приведенном ниже примере вы можете увидеть два блока, обоим задали минимальную высоту в 150 пикселей. Блок слева имеет высоту 150 пикселей несмотря на то что в нем нет текста. В блоке справа есть контент, которому нужно больше места, чем минимальная заданная высота, поэтому он увеличился.

Это очень полезно при работе с переменным объемом контента, избегая при этом переполнения.

Часто `max-width` применяют для уменьшения масштаба изображений, если недостаточно места для их отображения.

Например, если бы вы установили `width: 100%` для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.

Если бы вы вместо этого применили `max-width: 100%`, и внутренняя ширина изображения была бы меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.

В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению было задано `width: 100%` и оно находится в контейнере, который больше его ширины, поэтому он растягивается до ширины контейнера. Второму изображению задано `max-width: 100%`, изображение достигло 100% своей ширины не растягивается, чтобы заполнить контейнер. Третье поле снова содержит то же изображение, также с `max-width: 100%` в этом случае вы можете увидеть, как он уменьшилось, чтобы поместиться в контейнер.

Этот метод используется для создания *отзывчивых* изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение.

**Примечание:** Узнайте больше о методах создания адаптивных изображений.

Единицы вьюпорта
----------------

Вьюпо́рт — это видимая область вашей страницы в браузере, который вы используете для просмотра сайта. В CSS у нас есть единицы измерения, которые относятся к размеру вьюпорта — `vw` единицы ширины вьюпорта и `vh` высоты вьюпорта. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно вьюпорта пользователя.

`1vh` равен 1% от высоты вьюпорта и `1vw` равен 1% ширины вьюпорта. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть блок размером 20vh и 20vw. В блоке есть буква `A`, которой присвоено значение `font-size` 10vh.

**Если вы измените величину `vh` и `vw` — это изменит размер блока или шрифт; изменение размера вьюпорта также изменит их размеры, поскольку они имеют размер заданный относительно вьюпорта. Чтобы увидеть изменение примера при изменении размера вьюпорта, вам нужно будет загрузить пример в новое окно браузера, размер которого можно изменить (поскольку встроенное приложение `<iframe>`, содержащее показанный выше пример, является его окном просмотра). Откройте пример, измените размер окна браузера и посмотрите, что происходит с размером поля и текста.**

Размеры объектов задаваемые в соответствии с вьюпортом могут быть полезны в ваших проектах. Например, если вы хотите, чтобы основная секция отображалась перед остальным контентом, установите для этой части страницы высоту 100vh, это приведет к выталкиванию остального контента ниже видимой области, что означает, что он появится только после того, как страницу прокрутят вниз.

Проверьте свои навыки!
----------------------

В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. Проверка своих навыков: задание размеров (en-US).

Заключение
----------

Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к CSS раскладке, изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.

* Назад
* Обзор: Building blocks
* Далее


Понимание основ CSS - Изучение веб-разработки

Понимание основ CSS
===================

* Назад  (en-US)
* Обзор: Introduction to CSS

Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.

| Предварительно: | Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля. |
| --- | --- |
| Цель: | Проверка понимания основной теории, синтаксиса и техник CSS. |

Отправной пункт
---------------

Чтобы начать проверку, вы должны:

* Перейти и скачать HTML файл для упражнения и связанный файл изображения, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать своё имя, то пожалуйста — только убедитесь, что изображение квадратное.
* Скачайте текстовый файл с исходным CSS — в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.

**Примечание:** Вместо этого вы можете использовать для проверки такие сайты как JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу `<img>` файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент `<style>` в заголовке документа.

Краткое описание проекта
------------------------

Вам предоставили некоторый исходный HTML и изображение, и нужно написать необходимые CSS-правила, чтобы стилизовать это в маленькую онлайн-визитку, которая может, возможно, стать картой игрока или профилем в социальных сетях. Следующие разделы описывают, что вам нужно сделать.

Первоначальные настройки:

* Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например `style.css`.
* Подключите ваш CSS к вашему файлу HTML с помощью элемента `<link>`.
* Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.
* Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте ещё три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.

Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:

* Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.
* Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать:
    + Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закруглённые углы!), помимо прочего.
    + Задайте заголовку градиент фона, который идёт от тёмного к светлому, плюс закруглённые углы, которые вписываются в закруглённые углы, заданные для главного контейнера карты.
    + Задайте для футера градиент фона, переходящий от светлого к тёмному, а также скруглённые углы, которые вписываются в скруглённые углы контейнера основной карты.
    + Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).
* Осторожно! В предоставленных наборах правил есть две ошибки. Используя любую технику, которую вы знаете, отследите их и исправьте, прежде чем двигаться дальше.

Какие новые наборы правил надо написать:

* Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в `em`s.
* `margin` по умолчанию, применяемый браузером к элементам `<h2>` и `<p>`, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.
* Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент `<article>`), нужно задать ему определённую высоту. Установите высоту `<article>` в 120px, но выраженную в `em`s. Также задайте ему полупрозрачный чёрный цвет фона, в результате получится чуть более тёмный оттенок, который позволяет цвету фона немного просвечивать красным цветом.
* Напишите набор правил, который задаёт тегу `<h2>` удобный размер шрифта 20px (но выраженный в `em`s) и соответствующую высоту строки, чтобы поместить её в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
* Напишите набор правил, который задаёт тегу `<p>` внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в `em`s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
* В качестве последнего штриха задайте параграфу внутри `<article>` соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом `<h2>` и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.

**Примечание:** Имейте в виду, что второй набор правил устанавливает `font-size: 10px;` для элемента `<html>` — это означает, что для любых потомков `<html>` `em` будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и `<html>`, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).

Другие вещи для размышления:

* Вы получите бонусные баллы, если напишите объявления своего CSS в отдельных строках, чтобы обеспечить максимальную читаемость.
* Вы должны включить `.card` в начале цепочки селекторов во всех ваших правилах, чтобы эти правила не мешали стилизации каких-либо других элементов, в случае если визитная карточка должна быть помещена на страницу с загрузкой другого контента.
Советы и подсказки
------------------

* Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.
* При попытке определить значение em вам нужно представить определённую величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (`<html>`), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение `em`, по крайней мере, в таком простом случае как этот.
Образец
-------

На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:

![A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.](/ru/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension/business-card.png)

Проверка
--------

Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!

* Назад  (en-US)
* Обзор: Introduction to CSS


Проверьте ваши навыки: Селекторы - Изучение веб-разработки

Проверьте ваши навыки: Селекторы
================================

Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.

**Примечание:** вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.

Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел Оценка или дальнейшая помощь внизу этой страницы.

Selectors One
-------------

Without changing the HTML, use CSS to do the following things:

* Make h1 headings blue.
* Give h2 headings a blue background and white text.
* Cause text wrapped in a span to have a font-size of 200%.

![Text with the CSS applied for the solution to task 1.](/ru/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors1.jpg)

Try updating the live code below to recreate the finished example:

**Примечание:** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Selectors Two
-------------

Without changing the HTML, make the following changes to the look of the content in this example:

* Give the element with an id of `special` a yellow background.
* Give the element with a class of `alert` a 1px grey border.
* If the element with a class of `alert` also has a class of `stop`, make the background red.
* If the element with a class of `alert` also has a class of `go`, make the background green.

![Text with the CSS applied for the solution to task 2.](/ru/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors2.jpg)

Try updating the live code below to recreate the finished example:

**Примечание:** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Selectors Three
---------------

In this example, try making the following changes without adding to the HTML.

* Style links, making the link-state orange, visited links green, and remove the underline on hover.
* Make the first element inside the container font-size: 150% and the first line of that element red.
* Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.

![Text with the CSS applied for the solution to task 3.](/ru/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors3.jpg)

Try updating the live code below to recreate the finished example:

**Примечание:** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Selectors Four
--------------

In this task try the following:

* Make any paragraph that directly follows an h2 element red.
* Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.

![Text with the CSS applied for the solution to task 4.](/ru/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors4.jpg)

Try updating the live code below to recreate the finished example:

**Примечание:** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Selectors Five
--------------

In this final task add CSS using attribute selectors to do the following:

* Target the `<a>` element with a `title` attribute and make the border pink (`border-color: pink`).
* Target the `<a>` element with an `href` attribute that contains the word `contact` somewhere in its value and make the border orange (`border-color: orange`).
* Target the `<a>` element with an `href` value starting with `https` and give it a green border (`border-color: green`).

![Four links with different color borders.](/ru/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks/selectors-attribute.png)

Try updating the live code below to recreate the finished example:

**Примечание:** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help
--------------------------

You can practice these examples in the Interactive Editors mentioned above.

If you would like your work assessed, or are stuck and want to ask for help:

1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include:
    * A descriptive title such as "Assessment wanted for Selectors skill test 1".
    * Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
    * A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
    * A link to the actual task or assessment page, so we can find the question you want help with.


Селекторы атрибута - Изучение веб-разработки

Селекторы атрибута
==================

* Назад
* Обзор: Building blocks
* Далее

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
| --- | --- |
| Задача: | Узнать, что такое селекторы атрибута и как их использовать. |

Селекторы наличия и значения
----------------------------

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, `href`) или на всевозможных разного рода сочетаниях со значением атрибута.

| Селектор | Пример | Описание |
| --- | --- | --- |
| `[attr]` | `a[title]` | Выбирает элементы с атрибутом *attr* (имя которого — это значение в квадратных скобках). |
| `[attr=value]` | `a[href="https://example.com"]` | Выбирает элементы с атрибутом *attr*, значение которого в точности равно *value* — строке внутри кавычек. |
| `[attr~=value]` | `p[class~="special"]` | Выбирает элементы с атрибутом *attr,* значение которого в точности равно *value* или содержит *value* в своём (разделённом пробелами) списке значений. |
| `[attr|=value]` | `div[lang|="zh"]` | Выбирает элементы с атрибутом *attr*, значение которого в точности равно *value* или начинается с *value*, за которым сразу следует дефис. |

В приведённом ниже примере вы можете увидеть использование этих селекторов.

* Используя `li[class],` мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
* `li[class="a"]` выбирает селектор с классом `a`, но не селектор с классом `a` в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
* `li[class~="a"]` выберет класс `a`, а также значение, которое содержит класс `a` как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.

Селекторы вхождения подстроки
-----------------------------

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы `box-warning` и `box-error` и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать `[class^="box-"]`, чтобы выбрать оба класса (или `[class|="box"]` как описано в предыдущем разделе).

| Селектор | Пример | Описание |
| --- | --- | --- |
| `[attr^=value]` | `li[class^="box-"]` | Выбирает элементы с атрибутом *attr* (его имя — это значение в квадратных скобках), значение которого начинается с *value*. |
| `[attr$=value]` | `li[class$="-box"]` | Выбирает элементы с атрибутом *attr*, значение которого заканчивается на *value*. |
| `[attr*= ]` | `li[class*="box"]` | Выбирает элементы с атрибутом *attr*, значение которого содержит *value*, независимо от его положения внутри строки. |

(Отступление: возможно, будет полезным заметить, что `^` и `$` давно используются как *якоря* в так называемых *регулярных выражениях* и обозначают *начинается с* и *заканчивается на*.)

Следующий пример показывает, как используются эти селекторы:

* `li[class^="a"]` выбирает все значения атрибута, которые начинаются с `a`, что соответствует первым двум элементам списка.
* `li[class$="a"]` выбирает все значения атрибута, которые заканчиваются на `a`, что соответствует первому и третьему элементу списка.
* `li[class*="a"]` выбирает все значения атрибута, где появляется `a`, независимо от положения в строке, что соответствует всем элементам нашего списка.

Чувствительность к регистру
---------------------------

Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение `i` перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

В примере ниже первый селектор выберет значение, начинающееся с `a` — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.

**Примечание:** Существует также более новое значение `s`, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

Следующие шаги
--------------

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

* Назад
* Обзор: Building blocks
* Далее


Псевдоклассы, псевдоэлементы - Изучение веб-разработки

Псевдоклассы, псевдоэлементы
============================

* Назад
* Обзор: Building blocks
* Далее

Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
| --- | --- |
| Цель: | Узнать о селекторах псевдокласса и псевдоэлемента. |

Что такое псевдокласс?
----------------------

Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
```

:pseudo-class-name
```

### Простой пример псевдокласса

Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса `:first-child` — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

* `:last-child`
* `:only-child`
* `:invalid`

**Примечание:** Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать `:first-child` и правило было бы применено к *любому* элементу, оказавшемуся первым дочерним для `<article>`, не только к первому дочернему абзацу — `:first-child` равнозначно `*:first-child`. Однако обычно вы хотите б*о*льшего контроля, поэтому вам нужен более специфичный селектор.

### Псевдоклассы пользовательского действия

Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:

* `:hover` — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
* `:focus` — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.

Что такое псевдоэлемент?
------------------------

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия `::`.
```

::pseudo-element-name
```

**Примечание:** Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.

Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в `<span>` и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

Селектор псевдоэлемента `::first-line` сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

Он действует так, как если бы `<span>` волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

Объединение псевдоклассов и псевдоэлементов
-------------------------------------------

Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы `:first-child` и `::first-line`. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента `<p>,` который находится внутри элемента `<article>`.

```css
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}
```

Генерация контента с помощью ::before и ::after
-----------------------------------------------

Существует пара специальных псевдоэлементов, которые используются вместе со свойством `content` для вставки содержимого в документ с помощью CSS.

Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства `content` и вы увидите, как изменится результат. Можете также изменить псевдоэлемент `::before` на `::after` и увидите, что текст вставлен в конце элемента, а не в начале.

Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.

Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:

Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.

В следующем примере мы добавили пустую строку, используя псевдоэлемент `::before.` Мы установили `display: block`, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

Использование псевдоэлементов `::before` и `::after` вместе со свойством `content` в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов `::before` и `::after`. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство `content`, чтобы увидеть, что добавляется в документ..

Справочный раздел
-----------------

Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

### Псевдоклассы

| Селектор | Описание |
| --- | --- |
| `:active` | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент. |
| `:any-link` | Соответствует как состоянию `:link,` так и состоянию`:visited` ссылки. |
| `:blank` | Соответствует элементу `<input>`, для которого значение ввода является пустым. |
| `:checked` | Соответствует переключателю или флажку в выбранном состоянии. |
| `:current` (en-US) | Соответствует элементу или предку элемента, который в данный момент отображается. |
| `:default` | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (*обрабатывают нажатие клавиши enter*) в наборе сходных элементов. |
| `:dir` | Выбирает элемент на основе его направленности (значение атрибута HTML `dir` (en-US) или свойства CSS `direction` ). |
| `:disabled` | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии. |
| `:empty` | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела. |
| `:enabled` | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии. |
| `:first` | В постраничном носителе соответствует первой странице. |
| `:first-child` | Соответствует элементу, который является первым среди других дочерних элементов одного предка. |
| `:first-of-type` | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка. |
| `:focus` | Соответствует элементу, имеющему фокус. |
| `:focus-visible` | Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю. |
| `:focus-within` | Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус. |
| `:future` (en-US) | Соответствует элементам после текущего элемента. |
| `:hover` | Соответствует элементу, на который наведён курсор мыши. |
| `:indeterminate` | Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes (en-US). |
| `:in-range` | Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона. |
| `:invalid` | Соответствует элементу, например `<input>`, в недопустимом состоянии. |
| `:lang` | Соответствует элементу, основанному на языке (значение атрибута HTML lang). |
| `:last-child` | Соответствует элементу, который является последним среди других дочерних элементов одного предка. |
| `:last-of-type` | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка. |
| `:left` | В постраничном носителе соответствует левосторонним страницам. |
| `:link` | Соответствует непосещавшимся ссылкам. |
| `:local-link` (en-US) | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ. |
| `:is()` | Соответствует любому селектору из полученного списка селекторов. |
| `:not` | Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору. |
| `:nth-child` | Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида *an+b* (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| `:nth-of-type` | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида *an+b* (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| `:nth-last-child` | Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида *an+b* (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| `:nth-last-of-type` | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида *an+b* (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| `:only-child` | Соответствует элементу, являющемуся единственным дочерним для своего предка. |
| `:only-of-type` | Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка. |
| `:optional` | Соответствует необязательным элементам формы. |
| `:out-of-range` | Соответствует элементу с диапазоном, когда его значение находится вне диапазона. |
| `:past` (en-US) | Соответствует элементам перед текущим элементом. |
| `:placeholder-shown` | Соответствует элементу input, который показывает текст-заполнитель. |
| `:playing` (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями "воспроизведён" или "приостановлен", когда этот элемент "воспроизводится". |
| `:paused` (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями "воспроизведён" или "приостановлен", когда этот элемент "приостановлен". |
| `:read-only` | Соответствует элементу, который не может быть изменён пользователем. |
| `:read-write` | Соответствует элементу, который может быть изменён пользователем. |
| `:required` | Соответствует обязательным элементам формы. |
| `:right` | В постраничном носителе соответствует правосторонним страницам. |
| `:root` | Соответствует элементу, который является корнем документа. |
| `:scope` (en-US) | Соответствует любому элементу, который является элементом области видимости. |
| `:valid` | Соответствует элементу, такому как <input>, в допустимом состоянии. |
| `:target` | Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment). |
| `:visited` | Соответствует посещённым ссылкам. |

### Псевдоэлементы

| Селектор | Описание |
| --- | --- |
| `::after` | Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента. |
| `::before` | Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента. |
| `::first-letter` | Соответствует первой букве элемента. |
| `::first-line` | Соответствует первой строке содержимого порождающего элемента. |
| `::grammar-error` | Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером. |
| `::marker` | Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число. |
| `::selection` | Соответствует части документа, которая была выбрана. |
| `::spelling-error` (en-US) | Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером. |

* Назад
* Обзор: Building blocks
* Далее


Комбинаторы - Изучение веб-разработки

Комбинаторы
===========

* Назад
* Обзор: Building blocks
* Далее

Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

| Необходимые условия: | Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
| --- | --- |
| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. |

Комбинатор потомка
------------------

**Селектор потомка** — обычно представляется символом пробела (" ") — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются *селекторами потомка.*

```css
body article p
```

В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом`.box`.

Дочерний комбинатор
-------------------

**Дочерний комбинатор** (`>`) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы `<p>`, которые являются дочерними элементами `<article>`, селектор пишется так:

```css
article > p
```

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы `<li>`, которые являются прямыми потомками `<ul>`, и присвоить им верхнюю границу красного цвета.

Если вы уберёте символ `>`, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор - пробел) и все элементы `<li>` получат верхнюю границу красного цвета.

Соседний родственный комбинатор
-------------------------------

Соседний родственный селектор (`+`) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы `<img>` , которые идут сразу после элементов `<p>` :

```css
p + img
```

Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к `<h1>`, и стилизуем его.

Если вы вставите какой-то другой элемент, например `<h2>` между `<h1>` и `<p>`, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

Общий родственный комбинатор
----------------------------

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (`~`). Чтобы выбрать все элементы `<img>`, которые находятся в *любом* месте после элементов `<p>`, надо указать так:

```css
p ~ img
```

В приведённом ниже примере мы выбираем все элементы `<p>`, которые идут после `<h1>`, и хотя в документе есть также `<div>`, тем не менее `<p>`, который идёт после него, будет выбран.

Использование комбинаторов
--------------------------

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками `<ul>`, можно использовать следующую комбинацию:

```css
ul > li[class="a"] {
}
```

Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

Проверьте ваши навыки!
----------------------

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

Двигаемся дальше
----------------

Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — CSS модель коробки.

* Назад
* Обзор: Building blocks
* Далее


Селекторы типа, класса и ID - Изучение веб-разработки

Селекторы типа, класса и ID
===========================

* Назад
* Обзор: Building blocks
* Далее

В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.

| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
| --- | --- |
| Задача: | Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу. |

Селекторы типа
--------------

**Селектор типа** иногда называется *селектором имени тега* или *селектором элемента*, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

**Попробуйте добавить CSS-правило, чтобы выбрать элемент `<h1>` и изменить его цвет на синий.**

Универсальный селектор
----------------------

Универсальный селектор обозначается звёздочкой (`*`). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

### Использование универсального селектора для облегчения чтения ваших селекторов

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента `<article>`, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого `<article>`, и сделать их шрифт жирным, мы могли бы использовать псевдокласс `:first-child`, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента `<article>`:

```css
article :first-child {
  font-weight: bold;
}
```

Однако этот селектор можно спутать с `article:first-child`, который выберет любой элемент `<article>`, являющийся первым дочерним элементом другого элемента .

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс `:first-child` , чтобы было очевидно, что делает селектор. Он выбирает *любой* элемент, который является первым дочерним элементом элемента `<article>` или первым дочерним элементом любого потомка элемента `<article>`:

```css
article \*:first-child {
  font-weight: bold;
}
```

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

Селекторы класса
----------------

Селектор класса начинается с символа точки (`.`). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем `.highlight`, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

### Нацеливание классов на отдельные элементы

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим `<span>` с классом `highlight` иначе, чем заголовок `<h1>` с классом `highlight`. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.

### Нацеливание на элемент, к которому применено более одного класса

Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.

В примере ниже у нас есть `<div>`, содержащий примечание. Серая граница применяется когда блок имеет класс `notebox`. Если у блока есть также класс `warning` или `danger`, мы меняем `border-color` (en-US).

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему `<div>` не применён ни один стиль, так как он имеет только класс `danger`; ему нужен ещё и класс `notebox`, чтобы получить какую-нибудь стилизацию.

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

Селектор ID начинается с `#`, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один `id`. Можно выбрать элемент, которому присвоен `id`, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

>
> \*\*Предупреждение:\*\*Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.
>
>
>

**Примечание:** Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

В следующей статье
------------------

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

* Назад
* Обзор: Building blocks
* Далее


Flexbox - Изучение веб-разработки

Flexbox
=======

* Назад
* Обзор: CSS layout
* Далее

Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.

| Необходимые навыки: | HTML основы (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS). |
| --- | --- |
| Цель: | Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов. |

Почему Flexbox?
---------------

Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.

С их помощью сложно или невозможно достичь следующих простых требований к макету:

* Вертикального выравнивания блока внутри родителя.
* Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
* Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.

Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!

Разберём простой пример
-----------------------

В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — flexbox0.html с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.

Вы увидите элемент `<header>` с заголовком верхнего уровня внутри, и элемент `<section>` содержащий три элемента `<article>`. Мы будем использовать их для создания стандартного трёхколоночного макета.

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

Определяем, какие элементы разместить в виде flex блоков
--------------------------------------------------------

Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение `display` в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы `<article>`, поэтому мы устанавливаем это значение на `<section>` (который становится flex контейнером):

```css
section {
  display: flex;
}
```

В результате у нас получится вот так:

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example2.png)

Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.

**Примечание**: вы также можете установить значение `display` `inline-flex`, если хотите расставить inline элементы как flex блоки.

Внутри flex модели
------------------

Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:

![flex_terms.png](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png)

* **Главная ось (main axis)** проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются **main start** и **main end**.
* **Поперечная ось (cross axis)** проходит перпендикулярно Flex элементам. Начало и конец этой оси называются **cross start** and **cross end**.
* Родительский элемент, на который назначено свойство `display: flex` (`<section>` в нашем примере) называется **flex container**.
* Элементы, размещённые в нём как Flex блоки называются **flex items** (в нашем примере это `<article>` ).

Запомните эти термины, они пригодятся вам в последующих разделах.

Столбцы или строки?
-------------------

В Flexbox есть свойство под названием `flex-direction`, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение `row`, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).

Попробуйте добавить следующую строчку в ваш файл:

```css
flex-direction: column;
```

Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.

**Примечание:** вы можете также располагать flex элементы в обратном направлении, используя значения `row-reverse` и `column-reverse`. Попробуйте их тоже!

Перенос строк
-------------

Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: flexbox-wrap0.html и посмотрите его вживую (сохраните его себе на компьютер, если хотите изучить этот пример):

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example3.png)

Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить — добавить следующее свойство в CSS-правило для `<section>`:

```css
flex-wrap: wrap;
```

Также добавьте следующее свойство в CSS-правило для `<arcticle>`:

```css
flex: 200px;
```

Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example4.png)

Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство `flex: 200px`, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.

Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства `flex-direction` на `row-reverse` — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.

flex-flow сокращение
--------------------

На этом этапе нужно заметить, что существует сокращение для свойств `flex-direction` и `flex-wrap` — `flex-flow`. Например, вы можете заменить

```css
flex-direction: row;
flex-wrap: wrap;
```

на

```css
flex-flow: row wrap;
```

Гибкое изменение размеров flex элементов
----------------------------------------

Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).

Прежде всего, добавим следующее правило в конец вашего CSS кода:

```css
article {
  flex: 1;
}
```

Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу `<article>` значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.

Теперь добавьте следующее правило в строку после предыдущего:

```css
article:nth-of-type(3) {
  flex: 2;
}
```

Обновив страницу, вы увидите, что третий элемент `<article>` занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).

Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
```

Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example1.png)

Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент `<article>`, макет будет и дальше выглядеть также хорошо.

flex: краткий код против развёрнутого
-------------------------------------

`flex` это сокращённое свойство, в которым можно задать до трёх разных свойств:

* Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства `flex-grow`.
* Следующее значение пропорции — `flex-shrink` — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
* Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства `flex-basis`.

Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.

Горизонтальное и вертикальное выравнивание
------------------------------------------

Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example5.png)

Сначала сделайте себе копию этого примера.

Теперь добавьте следующую строку в низ кода CSS:

```css
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
```

Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.

`align-items` контролирует, где на поперечной оси находятся flex элементы.

* По умолчанию стоит значение `stretch`, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
* Значение `center` , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
* Также есть значения `flex-start` и `flex-end`, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее `align-items`.

Вы можете переопределить `align-items` поведение для отдельных flex элементов, применив свойство `align-self` к ним. Например, попробуйте добавить эти строки в код:

```css
button:first-child {
  align-self: flex-end;
}
```

Посмотрите, что произошло и удалите эти строки.

`justify-content` контролирует, где flex элементы располагаются на главной оси.

* По умолчанию стоит значение `flex-start`, которое располагает все элементы в начале главной оси.
* Также можно использовать `flex-end`, чтобы расположить их в конце.
* `center` - также одно из значений `justify-content`, располагает все элементы по центру главной оси.
* Значение, которое мы использовали выше, `space-around`, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
* И ещё одно значение, `space-between`, которое очень похоже на `space-around,` за исключением того, что оно не оставляет места на обоих концах.

Попробуйте немного поиграть с этими значениями прежде чем продолжить

Порядок элементов flex
----------------------

В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.

Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:

```css
button:first-child {
  order: 1;
}
```

и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:

* По умолчанию все элементы flex имеют значение `order` равное 0.
* Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.
* Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
* Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.

Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:

```css
button:last-child {
  order: -1;
}
```

Вложенные flex блоки
--------------------

Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на complex-flexbox.html (см. вживую).

![](/ru/docs/Learn/CSS/CSS_layout/Flexbox/flexbox-example7.png)

HTML для этого довольно простой. У нас есть элемент `<section>`, содержащий три `<article>`. Третий `<article>` содержит ещё три `<div>`.
```

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button
```

Давайте посмотрим на код, который мы использовали для макета.

Прежде всего, мы устанавливаем дочерние элементы `<section>` в виде flex блоков.

```css
section {
  display: flex;
}
```

Затем мы устанавливаем несколько значений на самих `<article>`. Обратите внимание на второе правило: мы устанавливаем третий `<article>`, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.

```css
article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
```

Затем мы берём первый `<div>`. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы `<button>`) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.

```css
article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
```

Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.

```css
button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}
```

Подытожим
---------

Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.

* Назад
* Обзор: CSS layout
* Далее