1 files changed, 131 insertions, 0 deletions
diff --git a/files/ru/learn/css/first_steps/what_is_css/index.html b/files/ru/learn/css/first_steps/what_is_css/index.html
new file mode 100644
index 0000000000..6dd204cd6b
--- /dev/null
+++ b/files/ru/learn/css/first_steps/what_is_css/index.html
@@ -0,0 +1,131 @@
+---
+title: Что такое CSS?
+slug: Learn/CSS/First_steps/What_is_CSS
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Введение в CSS
+  - Начинающий
+  - Обучение
+  - Синтаксис
+  - Спецификации
+translation_of: Learn/CSS/First_steps/What_is_CSS
+original_slug: Learn/CSS/First_steps/Что_такое_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требуемые знания:</th>
+   <td>Базовые компьютерные знания, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового програмного обеспечения</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a> и базовые знания HTML  (<a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Узнать, что такое CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчеркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17072/Basic_styling__ru.png" style="border: 1px solid #cccccc; height: 678px; width: 1385px;"></p>
+
+<p>Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, Вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся Вам дизайн.</p>
+
+<h2 id="Для_чего_нужен_CSS">Для чего нужен CSS?</h2>
+
+<p>Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.</p>
+
+<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространенный язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p>
+
+<p><strong>Представление</strong> документа пользователю означает преобразование его в форму, используемую Вашей аудиторией<strong>.</strong> {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.</p>
+</div>
+
+<p>CSS может использоваться для очень простой стилизации текста документа, например, изменение <a href="https://developer.mozilla.org/ru/docs/Web/CSS/color_value">цвета</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size">размера</a> заголовков и ссылок. Он может быть использован для создания макета, например, <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">превращение одного столбца текста в макет</a> с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations">анимация</a>. Посмотрите на ссылки в этом параграфе для конкретных примеров.</p>
+
+<h2 id="Синтаксис_CSS">Синтаксис CSS</h2>
+
+<p>CSS — это язык на основе правил: Вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на Вашей веб-странице. Например:</p>
+
+<p>«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».</p>
+
+<p>В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).</p>
+
+<p>Затем у нас есть набор фигурных скобок <code>{ }</code>. Внутри них будет один или несколько <strong>объявлений</strong>, которые принимают форму пары <strong>свойства</strong> и его <strong>значения</strong>. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.</p>
+
+<p>Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство <code>color</code>, которое может принимать различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">цветовые значения</a>. У нас также есть свойство <code>font-size</code>. Это свойство может принимать различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">значения размера</a>, как и свойства.</p>
+
+<p>Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>Вы обнаружите, что Вы быстро изучаете некоторые значения, тогда как другие Вам нужно искать. Страницы отдельных свойств в MDN дают Вам быстрый способ поиска свойств и их значений, когда Вы забыли или хотите узнать, что ещё Вы можете использовать в качестве значения.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN <a href="/en-US/docs/Web/CSS/Reference">Руководстве по CSS</a>. Кроме того, Вы должны привыкнуть к поиску "MDN <em>css-feature-name</em>" в Вашем бразере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!</p>
+</div>
+
+<h2 id="CSS-модули">CSS-модули</h2>
+
+<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).</p>
+
+<p>На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определённое свойство может быть найдено среди других похожих вещей, и поэтому, вероятно, в той же спецификации.</p>
+
+<p>Для конкретного примера давайте вернемся к модулю Свойства фона и границ — Вы можете подумать, что это логично для свойств <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> и <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code>, которые будут определены в этом модуле. И Вы правы.</p>
+
+<h3 id="Технические_характеристики_CSS">Технические характеристики CSS</h3>
+
+<p>Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.</p>
+
+<p>CSS ничем не отличается — он разработан группой в W3C, которая называется <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членами организации.</p>
+
+<p>Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!</p>
+
+<p>Как новичок в CSS, вполне вероятно, что Вы найдете CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p>
+
+<h2 id="Поддержка_браузера">Поддержка браузера</h2>
+
+<p>После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a><a href="/ru/docs/">.</a> Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN Вы можете видеть статус интересующего Вас свойства, чтобы Вы могли определить, сможете ли Вы использовать её на веб-сайте.</p>
+
+<p>Ниже приведена диаграмма данных для CSS свойства <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code>:</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где Вы можете начать писать CSS самостоятельно.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Начало работы с CSS</a></li>
+ <li><a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
+</ol>