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

Как работает CSS
================

* Назад
* Обзор: First steps
* Далее

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

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

Как работает CSS?
-----------------

Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идёт в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощённая версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:

1. Браузер получает HTML-страницу (например, из Интернета)
2. Преобразует HTML в DOM (*Document Object Model*). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.
3. Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.
4. После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)
5. Дерево представления (*render tree*) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.
6. Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)

Диаграмма демонстрирует этот процесс.

![](/ru/docs/Learn/CSS/First_steps/How_CSS_works/browser_simple_rendering_pipeline__ru.png)

DOM-дерево
----------

DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится DOM node (en-US) в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.

Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.

Как представлено DOM-дерево
---------------------------

Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.

Возьмём следующий пример:

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

В DOM-дереве узел, соответствующий элементу `<p>`, — это родительский элемент. Его дочерние элементы — текст и три элемента `<span>`. Узлы `SPAN` также будут родителями — с текстом в качестве дочерних элементов:
```

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
```

Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:
```

p {
  margin: 0;
}
```

Добавление CSS в DOM
--------------------

Допустим, мы добавили таблицу стилей к нашему примеру:

```html
<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
```

А вот CSS-код:

```css
span {
  border: 1px solid black;
  background-color: lime;
}
```

Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило, браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов `<span>`. После этого информация будет отображена на экране.

Новый результат:

В статье Отладка CSS мы будем использовать браузер DevTools для отладки CSS.

Что происходит, когда браузер не понимает CSS?
----------------------------------------------

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

— Да ничего: браузер просто пропустит это!

Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.

Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.

Ниже я использовал британское написание слова *color*, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.

```html
<p>I want this text to be large, bold and blue.</p>
```

```css
p {
  font-weight: bold;
  colour: blue; /\* некорректное написание свойства цвета \*/
  font-size: 200%;
}
```

Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.

Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают `calc()` как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции `calc()`, равной `100% - 50px`. Старые браузеры используют пиксельное значение, потому что не распознают `calc()`. Новые браузеры используют `calc()` так как эта строка появляется позже в каскаде.

```css
.box {
  width: 500px;
  width: calc(100% - 50px);
}
```

Завершение
----------

Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в использовании ваших новых знаний.

* Назад
* Обзор: First steps
* Далее


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

Что такое CSS?
==============

* Обзор: First steps
* Далее

**CSS** (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

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

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

![](/ru/docs/Learn/CSS/First_steps/What_is_CSS/basic_styling__ru.png)

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

Для чего нужен CSS?
-------------------

Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.

**Документ** обычно представляет собой текстовый файл, структурированный с использованием языка разметки: HTML — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.

**Представление** документа пользователю означает преобразование его в форму, используемую вашей аудиторией\*\*.\*\* Browsers, такие как Firefox (en-US), Chrome (en-US) или Edge (en-US) , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

**Примечание:** Браузер иногда называют user agent, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

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

Синтаксис CSS
-------------

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

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

В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:

```css
h1 {
  color: red;
  font-size: 5em;
}
```

Правило открывается с помощью селектора . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — (`<h1>` (en-US)).

Затем у нас есть набор фигурных скобок `{ }`. Внутри них будет один или несколько **объявлений**, которые принимают форму пары **свойства** и его **значения**. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.

Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-свойства (en-US) имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство `color`, которое может принимать различные цветовые значения. У нас также есть свойство `font-size`. Это свойство может принимать различные значения размера, как и свойства.

Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.

```css
h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}
```

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

**Примечание:** вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, вы должны привыкнуть к поиску "MDN *css-feature-name*" в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

CSS-модули
----------

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

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

Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств `background-color` и `border-color` (en-US), которые будут определены в этом модуле. И Вы правы.

### Технические характеристики CSS

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как W3C, WHATWG, ECMA или Khronos (en-US)) и определяют, как эти технологии должны вести себя.

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.

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

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

Информация о совместимости с браузерами
---------------------------------------

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

Что дальше?
-----------

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

* Обзор: First steps
* Далее


Использование ваших новых знаний - Изучение веб-разработки

Использование ваших новых знаний
================================

* Назад
* Обзор: First steps

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

| Необходимые знания: | Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите Введение в HTML). |
| --- | --- |
| Задача: | Попрактиковать использование CSS с вашими новыми знаниями. |

Перед началом
-------------

Вы можете писать код в редакторе ниже или скачать исходный код, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как CodePen, jsFiddle или Glitch.

**Примечание:** Если у вас не получается, попросите о помощи — читайте раздел Помощь с кодом ниже.

Работа с CSS
------------

В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.

* `font-family`
* `color` (en-US)
* `border-bottom`
* `font-weight`
* `font-size`
* `text-decoration` (en-US)

Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.

Измените значения свойств CSS, чтобы поменять внешний вид биографии.

1. Сделайте заголовок розовым, используя CSS-цвет `hotpink`.
2. Значение свойства заголовка `border-bottom` сделайте пунктирным (10px dotted) и добавьте цвет `purple`.
3. Примените к подзаголовку `<h2>` курсив.
4. Установите цвет `#eeeeee` для фона `background-color` маркированного списка с контактными данными и значение 5px solid purple для `border`. Используйте `padding`, чтобы отделить содержимое блока от границы.
5. Сделайте ссылки `зелёными` при наведении.

У вас должно получиться примерно как-то так:

![Screenshot of how the example should look after completing the assessment.](/ru/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

После этого попробуйте использовать селекторы, не указанные здесь, но описанные в Руководстве по CSS. Не бойтесь ошибок — практикуйтесь!

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

Помощь
------

Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:

1. Загрузите ваш код на CodePen, jsFiddle или Glitch.
2. Напишите пост с просьбой о помощи и / или оценке на форуме MDN. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть:
    * Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".
    * Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.
    * Ссылка на ваш код в онлайн-редакторе.
    * Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.
Что дальше?
-----------

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

* Назад
* Обзор: First steps


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

Как структурирован CSS
======================

* Назад
* Обзор: First steps
* Далее

Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

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

Применение CSS к вашему HTML
----------------------------

Первое, что мы рассмотрим, это три метода применения CSS к документу.

### Внешняя таблица стилей

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

Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением `.css`, и ссылка на него из HTML-элемента `<link>`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Привет!</h1>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>
```

Файл CSS может выглядеть следующим образом:

```css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
```

Атрибут `href` элемента `<link>` должен ссылаться на файл в файловой системе.

В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

```html
<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Файл — внутри под-директории styles внутри под-под-директории general и так далее -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Вверх на один уровень в директории, затем направиться в под-директорию styles -->
<link rel="stylesheet" href="../styles/style.css" />
```

### Внутренняя таблица стилей

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента `<style>`, содержащейся внутри HTML `<head>`.

Таким образом, HTML будет выглядеть вот так:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Я пробую писать CSS</title>
    <style>
 h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
 }

 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <h1>Привет!</h1>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>
```

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

### Встроенные стили

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте `style`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Я пробую писать CSS</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Привет!
    </h1>
    <p style="color:red;">Это мой первый опыт в CSS</p>
  </body>
</html>
```

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

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

Игра с CSS в этой статье
------------------------

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

index.html:

```html
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Пишите сюда свой код</p>
  </body>
</html>
```

styles.css:

```css
/\* Пишите сюда свой код \*/

p {
  color: red;
}
```

Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое `<body>` HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.

Читайте дальше и получайте удовольствие!

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

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

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

```css
h1  /\* это селектор тегов \*/
a:link  /\* это селектор ссылок \*/
.manythings  /\* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) \*/
#onething  /\* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) \*/
*  /\* универсальный селектор \*/
.box p  /\* селектор потомков \*/
.box p:first-child  /\* селектор потомков + селектор псевдоклассов \*/
h1, h2, .intro  /\* перечисление селекторов \*/
```

**Примечание:** вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

### Спецификация

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента `p` — он будет синим; также я задал класс, который сделает элемент красным:

```css
.special {
  color: red;
}

p {
  color: blue;
}
```

А теперь допустим, что в нашем HTML-коде у нас есть абзац `p` с классом `special`. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

```html
<p class="special">Какого же я цвета?</p>
```

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются **каскадами**, или **спецификациями**. В примере ниже мы задали два правила для селектора `p`, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

```css
p {
  color: red;
}

p {
  color: blue;
}
```

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

**Попрактикуйтесь сами — добавьте два правила для параграфа `p { ... }` в вашу таблицу стилей. Затем добавьте класс к одному элементу `p` и попробуйте применить к нему какой-нибудь стиль.**

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

Свойства и значения
-------------------

Если говорить в общем, CSS строится на двух его составляющих:

**Свойства**

Определяют, какую характеристику вы желаете изменить (например, `font-size`, `width`, `background-color`).

Значения

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

На изображении внизу выделены свойство и его значение. Здесь свойство — `color`, а его значение — `blue`.

![A declaration highlighted in the CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration.png)

Свойство вкупе со значением называется *CSS-объявлением*. CSS-объявления помещаются внутри *блока объявлений CSS*. Ниже показан наш CSS-код с выделенным блоком объявлений.

![A highlighted declaration block](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration-block.png)

Наконец блок объявлений воссоединяется с *селекторами*, образуя *CSS-правила*. Наше изображение содержит два правила — одно для селектора `h1`, другое для селектора `p`. Правило для `h1` выделено.

![The rule for h1 highlighted](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured/rules.png)

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (`:`).

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

* **`font-size`**
* **`width`**
* **`background-color`**
* **`color` (en-US)**
* **`border`**

**Предупреждение:** **Важно**: Если свойство или значение не определено, то объявление считается *недействительным* — и будет попросту проигнорировано.

**Предупреждение:** **Важно**: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, `color` надо *всегда* писать `color`; британский вариант `colour` не будет работать.

### Функции

Чаще всего в качестве значений выступают ключевые слова или числа. Но некоторые значения могут быть функциями.

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

Напрмер, рассмотрим функцию `calc()`, с попомщью которой можно выполнять простые математические операции в CSS:

```html
<div class="outer">
  <div class="box">Ширина внутреннего контейнера равна 90% - 30px.</div>
</div>
```

```css
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
```

Этот код отобразит следующий результат:

Вызов функции состоит из имени функции, круглых скобок и значения внутри них. В приведённом выше примере с помощью функции `calc()` устанавливается ширина контейнера равная 90% от ширины родтиельского блока минус 30 пикселей. Результат такого расчёта нельзя вычислить заранее и ввести как статическое значение.

#### Функции трансформации

Другим примером могут служить различные `функции трансформации`, такие как `rotate()`.

```html
<div class="box"></div>
```

```css
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}
```

Результат приведённого выше кода будет таким:

**Найдите различные значения свойств, перечисленных ниже. Напишите правила CSS, которые применяют стили к различным элементам HTML:**

* **`transform`**
* **`background-image`, в том числе значения градиента**
* **`color` (en-US), в том числе значения rgb и hsl**
Правила
-------

До сих пор не сталкивались мы с правилами `@rules` (произносится как *эт-рулс*, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил `@rules` простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать `@import`:

```css
@import "styles2.css";
```

Чаще других встречается `@rules` под названием `@media`: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента `<body>` равно `pink`. Однако после мы добавили правило `@media`, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

```css
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}
```

Вы столкнётесь и с другими правилами `@rules` в продолжение следующих уроков.

**Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.**

Стенография
-----------

Некоторые свойства вроде `font`, `background`, `padding`, `border` и `margin` называются *стенографическими свойствами*, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):

```css
/\* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
 в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
 значения добавляются в порядке верх(низ)–право–лево.
 В двузначных стенограммах значения добавляются
 от верхнего/нижнего края к левому/правому краю \*/
padding: 10px 15px 15px 5px;
```

делает то же самое, что и эти четыре, вместе взятые:

```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
```

или эти:

```cpp
padding-block-start: 10px
padding-inline-end: 15px;
padding-block-end: 15px;
padding-inline-start: 5px;
```

в то время как строка:

```css
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
```

делает то же, что и эти строки:

```css
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;
```

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

**Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.**

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

Комментарии
-----------

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

Комментарии в CSS начинаются с `/*` и окачиваются с `*/`. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

```css
/\* Работаю над основными элементами \*/
/\* -------------------------------------------------------------------------------------------- \*/
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /\* Позволяет определить размер шрифта. На широких экранах
 больше размер шрифта для удобства чтения \*/
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/\* Работаю над элементами, вложенными в DOM \*/
/\* -------------------------------------------------------------------------------------------- \*/
div p,
#id:first-line {
  background-color: red;
  background-style: none;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора `.special`.

```css
/\*.special {
 color: red;
}\*/

p {
  color: blue;
}
```

**Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.**

Отступы
-------

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

```css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

```css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none;
}
div p {
  margin: 0;
  padding: 1em;
}
div p + p {
  padding-top: 0;
}
```

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

```css
margin: 0 auto;
padding-left: 10px;
```

А такие объявления не действительны:

```css
margin: 0auto;
padding- left: 10px;
```

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

**Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.**

Что дальше?
-----------

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

* Назад
* Обзор: First steps
* Далее


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

Common CSS questions
====================

Why doesn't my CSS, which is valid, render correctly?
-----------------------------------------------------

Браузер использует декларацию `DOCTYPE` чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме, которую будут поддерживать старые браузеры. Правильное использование декларации `DOCTYPE` в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.

У современных браузеров есть два режима отображения веб-страниц:

* *Индивидуальный*: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы с неполной, некорректной или отсутствующий `DOCTYPE` декларацией или с тем видом `DOCTYPE`, который использовался до 2001 года, будет отображён в индивидуальном режиме.
* *Стандартный*: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным `DOCTYPE` отображаются уже в стандартом режиме.

Gecko-based browsers, have a third *Almost Standards Mode)* that has only a few minor quirks.

The standard `DOCTYPE` declaration that will trigger standards mode is:

```html
<!doctype html>
```

When at all possible, you should just use the above doctype. There are other valid legacy doctypes that will trigger Standards or Almost Standards mode:

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

Why doesn't my CSS, which is valid, render at all?
--------------------------------------------------

To be applied, a CSS stylesheet must be served with a `text/css` MIME type. If the Web server doesn't serve it with this type, it won't be applied.

What is the difference between `id` and `class`?
------------------------------------------------

HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.

Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.

Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.

Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).

See CSS selectors (en-US)

How do I restore the default value of a property?
-------------------------------------------------

Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.

This has changed with CSS 2; the keyword initial is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.

How do I derive one style from another?
---------------------------------------

CSS does not allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect.

How do I assign multiple classes to an element?
-----------------------------------------------

HTML elements can be assigned multiple classes by listing the classes in the `class` attribute, with a blank space to separate them.
```

<style type="text/css">
.news { background: black; color: white; }
.today { font-weight: bold; }
</style>

<div class="news today">
... content of today's news ...
</div>
```

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the `class` attribute is not relevant.

Why don't my style rules work properly?
---------------------------------------

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's *CSS Style Rules* view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

### HTML elements hierarchy

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.
```

.news { color: black; }
.corpName { font-weight: bold; color: red; }

<!-- news item text is black, but corporate name is red and in bold -->
<div class="news">
   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
</div>
```

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

### Explicitly re-defined style rule

In CSS stylesheets, order **is** important. If you define a rule and then you re-define the same rule, the last definition is used.
```

#stockTicker { font-weight: bold; }
.stockSymbol { color: red; }
/*  other rules             */
/*  other rules             */
/*  other rules             */
.stockSymbol { font-weight: normal; }

<!-- most text is in bold, except "GE", which is red and not bold -->
<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>
```

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

### Use of a shorthand property

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.
```

#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
.stockSymbol { font: 14px Arial; color: red; }

<div id="stockTicker">
   NYS: <span class="stockSymbol">GE</span> +1.0 ...
</div>
```

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order **is** important.
```

#stockTicker {
   font-weight: bold;
   font: 12px Verdana;  /* font-weight is now normal */
}
```

### Use of the `*` selector

The `*` wildcard selector refers to any element, and it has to be used with particular care.
```

body * { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

<div id="section">
   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>
```

In this example the `body *` selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So `font-weight: bold;` applied to the .corpName class is overridden by `font-weight: normal;` applied to all elements in the body.

The use of the \* selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

### Specificity in CSS

When multiples rules apply to a certain element, the rule chosen depends on its style specificity (en-US). Inline style (in HTML `style` attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.
```

div { color: black; }
#orange { color: orange; }
.green { color: green; }

<div id="orange" class="green" style="color: red;">This is red</div>
```

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3.

What do the -moz-\*, -ms-\*, -webkit-\*, -o-\* and -khtml-\* properties do?
---------------------------------------------------------------------------

These properties, called *prefixed properties*, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.

Please see the Mozilla CSS Extensions (en-US) page for more information on the Mozilla-prefixed CSS properties.

How does z-index relate to positioning?
---------------------------------------

The z-index property specifies the stack order of elements.

An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.

Z-index will only work on elements that have a specified position (`position:absolute`, `position:relative`, or `position:fixed`).


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

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

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

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

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

Что такое селекторы?
--------------------

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

![Some code with the h1 highlighted.](/ru/docs/Learn/CSS/Building_blocks/Selectors/selector.png)

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент `h1` или класс `.special`.

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

Несколько селекторов
--------------------

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в *лист селекторов*: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка `h1` и класса `.special`; я могу написать их так:

```css
h1 {
  color: blue;
}

.special {
  color: blue;
}
```

А могу написать короче — просто отделив селекторы запятыми:

```css
h1, .special {
  color: blue;
}
```

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

```css
h1,
.special {
  color: blue;
}
```

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как `h1` будет стилизован.

```css
h1 {
  color: blue;
}

..special {
  color: blue;
}
```

Но если мы объединим селекторы, правило не применится ни к `h1`, ни к классу: оно считается недействительным.

```css
h1,
..special {
  color: blue;
}
```

Типы селекторов
---------------

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

### Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как `<h1>`.

```css
h1 {
}
```

К группе относятся и селекторы классов:

```css
.box {
}
```

или селекторы идентификаторов (ID):

```css
#unique {
}
```

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

Эта группа селекторов позволяет выбирать селекторы, основываясь на *наличии* у них конкретного атрибута элемента:

```css
a[title] {
}
```

или основываясь на *значении* атрибута:

```css
a[href="https://example.com"]
{
}
```

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

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс `:hover`, например, применяет правило, только если на элемент наведён курсор мыши

```css
a:hover {
}
```

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, `::first-line` всегда выбирает первую строку внутри элемента (абзаца `<p>` в нашем случае), действуя, как если бы тег `<span>` оборачивал первую строку, а затем был стилизован.

```css
p::first-line {
}
```

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

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент `<article>` с помощью комбинатора дочерних элементов (`>`):

```css
article > p {
}
```

Продолжение
-----------

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

* Назад
* Обзор: Building blocks
* Далее
Справка о селекторах
--------------------

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

| Селектор | Пример | Руководство |
| --- | --- | --- |
| Селектор по типу | `h1 { }` | Селектор по типу |
| Универсальный селектор | `* { }` | Универсальный селектор |
| Селектор класса | `.box { }` | Селекторы классов |
| Селектор ID | `#unique { }` | Селекторы по ID |
| Селектор атрибутов | `a[title] { }` | Селекторы атрибутов |
| Селектор псевдоклассов | `p:first-child { }` | Псевдоклассы |
| Селектор псевдоэлементов | `p::first-line { }` | Псевдоэлементы |
| Селектор потомков | `article p` | Селектор потомков |
| Селектор дочерних элементов | `article > p` | Селектор дочерних элементов |
| Смежные селекторы | `h1 + p` | Смежные селекторы |
| Селектор братских элементов | `h1 ~ p` | Селектор братских элементов |


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

Изменение направления текста
============================

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

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

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

| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
| --- | --- |
| Цель: | Понять важность режимов письма для современного CSS. |

Какие бывают режимы письма?
---------------------------

Режим письма в CSS определяет, идёт ли текст по горизонтали или по вертикали. Свойство `writing-mode` позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.

В приведённом ниже примере заголовок отображается с использованием `writing-mode: vertical-rl`. Теперь текст идёт вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.

Три возможных значения свойства `writing-mode`:

* `horizontal-tb`: Направление потока блока сверху вниз. Предложения идут горизонтально.
* `vertical-rl`: Направление потока блоков справа налево. Предложения идут вертикально.
* `vertical-lr`: Направление потока блока слева направо. Предложения идут вертикально.

Таким образом, свойство `writing-mode` на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице - сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.

Writing modes and block and inline layout
-----------------------------------------

We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.

If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left.

When we switch the writing mode, we are changing which direction is block and which is inline. In a `horizontal-tb` writing mode the block direction runs from top to bottom; in a `vertical-rl` writing mode the block direction runs right-to-left horizontally. So the **block dimension** is always the direction blocks are displayed on the page in the writing mode in use. The **inline dimension** is always the direction a sentence flows.

This figure shows the two dimensions when in a horizontal writing mode.
 ![Showing the block and inline axis for a horizontal writing mode.](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/horizontal-tb.png)

This figure shows the two dimensions in a vertical writing mode.

![Showing the block and inline axis for a vertical writing mode.](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/vertical.png)

Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.

### Direction

In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!

Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about *start* and *end* along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.

Logical properties and values
-----------------------------

The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.

Let's take a look at our two boxes again — one with a `horizontal-tb` writing mode and one with `vertical-rl`. I have given both of these boxes a `width`. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.

What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like `width` and `height` — with **logical**, or **flow relative** versions.

The property mapped to `width` when in a horizontal writing mode is called `inline-size` — it refers to the size in the inline dimension. The property for `height` is named `block-size` and is the size in the block dimension. You can see how this works in the example below where we have replaced `width` with `inline-size`.

### Logical margin, border, and padding properties

In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example `margin-top`, `padding-left`, and `border-bottom`. In the same way that we have mappings for width and height there are mappings for these properties.

The `margin-top` property is mapped to `margin-block-start` (en-US) — this will always refer to the margin at the start of the block dimension.

The `padding-left` property maps to `padding-inline-start` (en-US), the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The `border-bottom` property maps to `border-block-end` (en-US), which is the border at the end of the block dimension.

You can see a comparison between physical and logical properties below.

**If you change the writing mode of the boxes by switching the `writing-mode` property on `.box` to `vertical-rl`, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.**

**You can also see that the `<h2>` (en-US) has a black `border-bottom`. Can you work out how to make that bottom border always go below the text in both writing modes?**

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values (en-US).

### Logical values

We have so far looked at logical property names. There are also some properties that take physical values of `top`, `right`, `bottom`, and `left`. These values also have mappings, to logical values — `block-start`, `inline-end`, `block-end`, and `inline-start`.

For example, you can float an image left to cause text to wrap round the image. You could replace `left` with `inline-start` as shown in the example below.

**Change the writing mode on this example to `vertical-rl` to see what happens to the image. Change `inline-start` to `inline-end` to change the float.**

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

### Should you use physical or logical properties?

The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.

Summary
-------

The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.

In the next module we will take a good look at overflow in CSS.

* Назад
* Обзор: Building blocks
* Далее
In this module
--------------

1. Cascade and inheritance
2. CSS selectors
    * Type, class, and ID selectors
    * Attribute selectors
    * Pseudo-classes and pseudo-elements
    * Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)


Каскад и наследование - Изучение веб-разработки

Каскад и наследование
=====================

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

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

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

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

Конфликтующие правила
---------------------

CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово *"каскадные"* является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

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

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

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

### Каскад

Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.

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

### Специфичность

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. *Различные типы селекторов ( селекторы элементов `h1{...}`, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.* По существу, это мера того, насколько специфическим будет отбор по селектору:

* Селектор элементов ( *например `h1`* ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
* Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута `class` — поэтому получит больше баллов, *селектор класса применится после селектора элемента и поэтому перекроет его стили*.

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

Позже мы объясним, как сделать оценку специфичности, и прочие детали.

### Наследование

Наследование также надо понимать в этом контексте — некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.

Например, если вы установили значение `color` и `font-family` для элемента, то каждый элемент внутри него также будет иметь этот цвет и шрифт, если только вы не применили к ним напрямую стиль с другим цветом и шрифтом.

Некоторые свойства не наследуются — например, если вы установили для элемента `width` равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!

**Примечание:** На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section (en-US).

Понимание взаимодействия этих концепций
---------------------------------------

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

Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:

Понимание наследования
----------------------

Итак, наследование. В примере ниже мы имеем `<ul>` с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего `<ul>` стиль границы, внутренние отступы и цвет шрифта.

Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку `<li>` и к элементам внутри первого вложенного списка. Далее мы добавили класс `special` ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.

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

Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.

### Контроль наследования

CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.

`inherit`

Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это "включает наследование".

`initial`

Устанавливает значение свойства, применённого к выбранному элементу, равным initial value этого свойства (*в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)*

`unset` (en-US)

Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как `inherit`, иначе оно действует как `initial`.

**Примечание:** Существует также более новое значение `revert`, которое имеет ограниченную поддержку браузерами.

**Примечание:** Смотрите Origin of CSS declarations (en-US) для более подробной информации о каждом из них, и о том, как они работают.

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

Например:

1. Второй элемент списка имеет класс `my-class-1`. Таким образом, цвет для следующего вложенного элемента `a` устанавливается по наследству. Как изменится цвет, если это правило будет удалено?
2. Понятно ли, почему третий и четвёртый элементы `a` имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
3. Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента `<a>` — например: `a { color: red; }`?

### Возврат всех исходных значений свойств

Стенографическое свойство CSS `all` можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (`inherit`, `initial`, `unset`, или `revert`). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.

В примере ниже имеются два блока `<blockquote>`. Первый имеет стиль, который применён к самому элементу `blockquote`, второй имеет класс `fix-this`, который устанавливает значение `all` в `unset`.

Попробуйте установить для `all` ещё одно из доступных значений и исследуйте, в чём заключается разница.

Понимание каскада
-----------------

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

Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.

1. **Порядок следования**
2. **Специфичность**
3. **Важность**

Мы внимательно изучим их, чтобы увидеть, как именно браузеры определяют, какой CSS следует применить.

### Порядок следования

Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идёт последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент.

### Специфичность

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

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

Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.

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

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

Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

1. **Тысячи**: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута `style` (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
2. **Сотни**: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
3. **Десятки**: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
4. **Единицы**: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.

**Примечание:** Универсальный селектор (\*), комбинаторы (+, >, ~, '') и псевдокласс отрицания (:not) не влияют на специфичность.

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

| Селектор | Тысячи | Сотни | Десятки | Единицы | Специфичность |
| --- | --- | --- | --- | --- | --- |
| `h1` | 0 | 0 | 0 | 1 | 0001 |
| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 |
| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 |
| `#identifier` | 0 | 1 | 0 | 0 | 0100 |
| Без селектора, с правилом внутри атрибута `style` элемента. | 1 | 0 | 0 | 0 | 1000 |

Прежде чем мы продолжим, давайте посмотрим на пример в действии.

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

* Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
* Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
* Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.

**Примечание:** Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, *миллион* соединённых селекторов **класса** не способны переписать правила *одного* селектора **id**.

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

### !important

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

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

Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

1. Вы увидите, что применены значения `color` (en-US) и `padding` третьего правила, но `background-color` — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
2. Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
3. Оба элемента имеют `class` с названием `better`, но у второго также есть `id` с названием `winning`. Поскольку ID имеют *ещё более высокую* специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID *очень специфичны*, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
4. 2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления `!important` во втором правиле — размещение которого после `border: none` означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.

**Примечание:** Единственный способ переопределить объявление `!important` – это включить другое объявление `!important` в правило *с такой же специфичностью* позже или в правило с более высокой специфичностью.

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

Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.

Влияние расположения CSS
------------------------

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

Подведение итогов
-----------------

Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:

1. Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
2. Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
3. Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).
4. Важные объявления в авторских таблицах стилей.
5. Важные объявления в пользовательских таблицах стилей.

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

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

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

Что дальше?
-----------

Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.

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

Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

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


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

Переполнение содержимого
========================

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

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

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

Что такое переполнение?
-----------------------

Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством `width` и `height` (или `inline-size` и `block-size`). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.

CSS пытается избежать "потери данных"
-------------------------------------

Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.

Первый пример — это блок, который был ограничен установленным параметром `height`. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.

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

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

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

Если вы ограничиваете поле с помощью параметров `width` или `height`, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).

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

Свойство overflow
-----------------

Свойство `overflow` позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – `visible`, что означает - «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить `overflow: hidden`. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

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

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

В приведённом выше примере нам нужно прокручивать содержимое только по оси `y`, однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство `overflow-y` (en-US), которое позволяет прокручивать содержимое только по оси `y`.

Вы также можете установить прокрутку по оси x с помощью `overflow-x` (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства `word-break` или `overflow-wrap`. Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со `scroll`, вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

**Примечание:** вы можете точно задать прокрутку по осям x и y, используя свойство `overflow`, передав два значения. Первое значение будет относиться к `overflow-x`, а второе — к `overflow-y`. Если передать одно значение, то `overflow-x` и `overflow-y` получат одинаковые значения. Например, `overflow: scroll hidden` устанавливает `overflow-x` в `scroll` и `overflow-y` в `hidden`.

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте `overflow: auto`. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

**В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.**

Overflow устанавливает контекст форматирования блока
----------------------------------------------------

Когда вы используете значение overflow, такое как `scroll` или `auto`, вы создаете **контекст форматирования блока** (BFC). Содержимое блока, для которого вы установили параметр `overflow` приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.

Нежелательное переполнение в веб-разработке
-------------------------------------------

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

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

При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).

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

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

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

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

* Назад
* Обзор: Building blocks
* Далее
In this module
--------------

1. Каскад и наследование
2. Селекторы CSS
    * Селекторы типа, класса и ID
    * Селекторы атрибута
    * Псевдоклассы и псевдоэлементы
    * Комбинаторы
3. Блочная модель(The box model)
4. Фон и границы
5. Обработка разных направлений текста
6. Переполнение содержимого
7. Значения и единицы измерения
8. Размеры в CSS
9. Элементы изображений, форм и медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация вашей CSS (en-US)