aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/css/first_steps/getting_started
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-03-23 21:32:09 +0300
committerGitHub <noreply@github.com>2021-03-23 21:32:09 +0300
commit9a96229818a3971444a77c238cc5ae45921db1bf (patch)
treeeb49956807321447f47ebdd01c4d71e1f46779cf /files/ru/learn/css/first_steps/getting_started
parenta4f49f9a14007bf65efdbe671d6383e8b233ac5b (diff)
downloadtranslated-content-9a96229818a3971444a77c238cc5ae45921db1bf.tar.gz
translated-content-9a96229818a3971444a77c238cc5ae45921db1bf.tar.bz2
translated-content-9a96229818a3971444a77c238cc5ae45921db1bf.zip
Fix capitalization of Russian pronouns (#294)
* Fix capitalization of Russian pronouns * Apply suggestions from code review Co-authored-by: Alexander Myshov <myshov@users.noreply.github.com> * Update files/ru/web/mathml/element/math/index.html Co-authored-by: Alexander Myshov <myshov@users.noreply.github.com> Co-authored-by: Alexander Myshov <myshov@users.noreply.github.com>
Diffstat (limited to 'files/ru/learn/css/first_steps/getting_started')
-rw-r--r--files/ru/learn/css/first_steps/getting_started/index.html50
1 files changed, 25 insertions, 25 deletions
diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html
index cad8d8ee51..ed393dddc5 100644
--- a/files/ru/learn/css/first_steps/getting_started/index.html
+++ b/files/ru/learn/css/first_steps/getting_started/index.html
@@ -62,12 +62,12 @@ translation_of: Learn/CSS/First_steps/Getting_started
</pre>
<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Если Вы читаете это на устройстве или в среде, где Вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.</p>
+<p><strong>Примечание</strong>: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.</p>
</div>
<h2 id="Добавление_CSS_в_наш_документ">Добавление CSS в наш документ</h2>
-<p>Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым Вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.</p>
+<p>Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.</p>
<p>Создайте файл в той же папке, что и документ HTML, и сохраните его как <code>styles.css</code>. Расширение .css показывает, что это файл CSS.</p>
@@ -75,19 +75,19 @@ translation_of: Learn/CSS/First_steps/Getting_started
<pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
-<p>Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут <em>rel</em>, и местоположение этой таблицы стилей в качестве значения атрибута <em>href.</em> Вы можете проверить, работает ли CSS, добавив правило в <em>styles.css</em>. Используя Ваш редактор кода, добавьте следующее в ваш файл CSS:</p>
+<p>Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут <em>rel</em>, и местоположение этой таблицы стилей в качестве значения атрибута <em>href.</em> вы можете проверить, работает ли CSS, добавив правило в <em>styles.css</em>. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:</p>
<pre class="brush: css">h1 {
color: red;
}</pre>
-<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли Вы ввели всё.</p>
+<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.</p>
-<p>Вы можете продолжить работу в <code>styles.css</code> локально, или Вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p>
+<p>Вы можете продолжить работу в <code>styles.css</code> локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p>
<h2 id="Стилизация_HTML-элементов">Стилизация HTML-элементов</h2>
-<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, Вы должны использовать:</p>
+<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, вы должны использовать:</p>
<pre class="brush: css">p {
color: green;
@@ -107,7 +107,7 @@ translation_of: Learn/CSS/First_steps/Getting_started
<p>Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.</p>
-<p>Однако Вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <code>&lt;ul&gt;</code> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:</p>
+<p>Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <code>&lt;ul&gt;</code> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:</p>
<pre class="brush: css">li {
list-style-type: none;
@@ -115,13 +115,13 @@ translation_of: Learn/CSS/First_steps/Getting_started
<p>Попробуйте добавить это в свой CSS сейчас.</p>
-<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и Вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p>
+<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p>
-<p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка Вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p>
+<p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p>
<h2 id="Добавление_класса">Добавление класса</h2>
-<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p>
+<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p>
<p>В своём HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p>
@@ -131,7 +131,7 @@ translation_of: Learn/CSS/First_steps/Getting_started
&lt;li&gt;Элемент &lt;em&gt;три&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
-<p>В Вашем CSS Вы можете выбрать класс <code>special</code> к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:</p>
+<p>В вашем CSS вы можете выбрать класс <code>special</code> к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:</p>
<pre class="brush: css">.special {
color: orange;
@@ -142,14 +142,14 @@ translation_of: Learn/CSS/First_steps/Getting_started
<p>Вы можете захотеть, чтобы &lt;span&gt; в абзаце также был оранжевым и жирным. Попробуйте добавить класс "<code>special"</code>, затем перезагрузите страницу и посмотрите, что получится.</p>
-<p>Иногда Вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:</p>
+<p>Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:</p>
<pre class="brush: css">li.special {
color: orange;
font-weight: bold;
}</pre>
-<p>Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы Вы сделали это, Вы бы больше не смогли применить класс к <code>&lt;span&gt;</code> или другому элементу, просто добавив к нему класс; Вы должны добавить этот элемент в список селекторов:</p>
+<p>Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <code>&lt;span&gt;</code> или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:</p>
<pre class="brush: css">li.special,
span.special {
@@ -157,11 +157,11 @@ span.special {
font-weight: bold;
}</pre>
-<p>Как Вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и Вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только Вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.</p>
+<p>Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.</p>
<h2 id="Стилизация_элементов_на_основе_их_расположения_в_документе">Стилизация элементов на основе их расположения в документе</h2>
-<p>Есть моменты, когда Вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут Вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <code>&lt;em&gt;</code> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <code>&lt;em&gt;</code> который вложен в элемент <code>&lt;li&gt;</code>, я могу использовать селектор под названием <strong>descendant combinator (комбинатор-потомок)</strong>, который просто принимает форму пробела между двумя другими селекторами.</p>
+<p>Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <code>&lt;em&gt;</code> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <code>&lt;em&gt;</code> который вложен в элемент <code>&lt;li&gt;</code>, я могу использовать селектор под названием <strong>descendant combinator (комбинатор-потомок)</strong>, который просто принимает форму пробела между двумя другими селекторами.</p>
<p>Добавьте следующее правило в таблицу стилей.</p>
@@ -169,7 +169,7 @@ span.special {
color: rebeccapurple;
}</pre>
-<p>Этот селектор выберет любой элемент <code>&lt;em&gt;</code>, который находится внутри (потомка) <code>&lt;li&gt;</code>. Итак, в Вашем примере документа Вы должны найти, что <code>&lt;em&gt;</code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p>
+<p>Этот селектор выберет любой элемент <code>&lt;em&gt;</code>, который находится внутри (потомка) <code>&lt;li&gt;</code>. Итак, в вашем примере документа вы должны найти, что <code>&lt;em&gt;</code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p>
<p>Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code>  (<strong>соседний братский комбинатор</strong>) между селекторами.</p>
@@ -179,12 +179,12 @@ span.special {
font-size: 200%;
}</pre>
-<p>Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли Вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.</p>
+<p>Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Как Вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы</a> позже в нашем курсе.</p>
+<p><strong>Примечание</strong>: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы</a> позже в нашем курсе.</p>
</div>
<h2 id="Стилизация_элементов_на_основе_состояния">Стилизация элементов на основе состояния</h2>
@@ -205,23 +205,23 @@ a:visited {
text-decoration: none;
}</pre>
-<p>В приведённом ниже примере Вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли Вы сделать ссылки жирным шрифтом?</p>
+<p>В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?</p>
<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
-<p>Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте Вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с Вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p>
+<p>Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p>
<div class="blockIndicator note">
-<p><strong>Примечание</strong>:  Вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p>
+<p><strong>Примечание</strong>:  вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p>
<p>Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.</p>
-<p>Простой HTML-документ, как правило, доступен каждому — когда Вы начинаете оформлять этот документ, важно, чтобы Вы не сделали его менее доступным.</p>
+<p>Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.</p>
</div>
<h2 id="Сочетание_селекторов_и_комбинаторов">Сочетание селекторов и комбинаторов</h2>
-<p>Стоит отметить, что Вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:</p>
+<p>Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:</p>
<pre class="brush: css">/* выбирает любой &lt;span&gt; внутри &lt;p&gt;, который находится внутри &lt;article&gt; */
article p span { ... }
@@ -241,11 +241,11 @@ h1 + ul + p { ... }</pre>
<p>В оригинальном HTML, который мы предоставили, единственный элемент в стиле <code>&lt;span class="special"&gt;</code>.</p>
-<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнёте понимать это, когда будете писать больше на CSS.</p>
+<p>Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.</p>
<h2 id="Завершение">Завершение</h2>
-<p>В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако Вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.</p>
+<p>В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.</p>
<p>На следующем уроке мы рассмотрим структуру CSS.</p>