diff options
Diffstat (limited to 'files/ru/learn/css/first_steps/getting_started/index.html')
| -rw-r--r-- | files/ru/learn/css/first_steps/getting_started/index.html | 28 |
1 files changed, 14 insertions, 14 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 674d5498d9..cad8d8ee51 100644 --- a/files/ru/learn/css/first_steps/getting_started/index.html +++ b/files/ru/learn/css/first_steps/getting_started/index.html @@ -15,7 +15,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> -<p class="summary">В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</p> +<p class="summary">В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</p> <table class="learn-box standard-table"> <tbody> @@ -32,7 +32,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <h2 id="Начнём_с_HTML">Начнём с HTML</h2> -<p>Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своем компьютере. Сохраните приведенный ниже код как <code>index.html</code> в папке на вашем компьютере.</p> +<p>Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как <code>index.html</code> в папке на вашем компьютере.</p> <pre class="brush: html"><!doctype html> <html lang="ru"> @@ -81,13 +81,13 @@ translation_of: Learn/CSS/First_steps/Getting_started color: red; }</pre> -<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдет, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдет, внимательно проверьте, правильно ли Вы ввели всё.</p> +<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — Вы успешно применили 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; @@ -115,15 +115,15 @@ 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> <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> +<p>В своём HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p> <pre class="brush: html; highlight[3]"><ul> <li>Элемент один</li> @@ -171,7 +171,7 @@ span.special { <p>Этот селектор выберет любой элемент <code><em></code>, который находится внутри (потомка) <code><li></code>. Итак, в Вашем примере документа Вы должны найти, что <code><em></code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p> -<p>Ещё можно попробовать стилизовать абзац, когда он идет сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code> (<strong>соседний братский комбинатор</strong>) между селекторами.</p> +<p>Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code> (<strong>соседний братский комбинатор</strong>) между селекторами.</p> <p>Попробуйте также добавить это правило в таблицу стилей:</p> @@ -189,7 +189,7 @@ span.special { <h2 id="Стилизация_элементов_на_основе_состояния">Стилизация элементов на основе состояния</h2> -<p>Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещенные ссылки зелёного цвета.</p> +<p>Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.</p> <pre class="brush: css">a:link { color: pink; @@ -199,17 +199,17 @@ a:visited { color: green; }</pre> -<p>Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчеркивание, что достигается с помощью следующего правила:</p> +<p>Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:</p> <pre class="brush: css">a:hover { 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> @@ -226,7 +226,7 @@ a:visited { <pre class="brush: css">/* выбирает любой <span> внутри <p>, который находится внутри <article> */ article p span { ... } -/* выбирает любой <p>, который идет сразу после <ul>, который идет сразу после <h1> */ +/* выбирает любой <p>, который идёт сразу после <ul>, который идёт сразу после <h1> */ h1 + ul + p { ... }</pre> <p>Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:</p> @@ -241,7 +241,7 @@ h1 + ul + p { ... }</pre> <p>В оригинальном HTML, который мы предоставили, единственный элемент в стиле <code><span class="special"></code>.</p> -<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнете понимать это, когда будете писать больше на CSS.</p> +<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнёте понимать это, когда будете писать больше на CSS.</p> <h2 id="Завершение">Завершение</h2> |