aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/guide/css/getting_started/readable_css/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/web/guide/css/getting_started/readable_css/index.html')
-rw-r--r--files/ru/web/guide/css/getting_started/readable_css/index.html166
1 files changed, 0 insertions, 166 deletions
diff --git a/files/ru/web/guide/css/getting_started/readable_css/index.html b/files/ru/web/guide/css/getting_started/readable_css/index.html
deleted file mode 100644
index 9e9a4231a9..0000000000
--- a/files/ru/web/guide/css/getting_started/readable_css/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: Чистый СSS код
-slug: Web/Guide/CSS/Getting_started/Readable_CSS
-translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
-translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p>
-
-<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2>
-
-<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p>
-
-<h3 id="Пустое_пространство">Пустое пространство</h3>
-
-<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p>
-
-<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p>
-
-<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p>
-
-<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Примеры</div>
-
-<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p>
-
-<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
-</pre>
-
-<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p>
-
-<pre class="brush: css">.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-</pre>
-
-<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p>
-
-<pre class="brush: css">.carrot {
- color: orange;
- text-decoration: underline;
- font-style: italic;
-}
-</pre>
-
-<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p>
-
-<pre class="brush: css">.carrot
- {
- color : orange;
- text-decoration : underline;
- font-style : italic;
- }
-</pre>
-
-<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p>
-
-<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px }
-.vegetable.carrot { color: orange; height: 90px; width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px; width: 30px }
-</pre>
-</div>
-
-<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p>
-
-<h3 id="Комментарии">Комментарии</h3>
-
-<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p>
-
-<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p>
-
-<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Пример</div>
-
-<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/
-.carrot {
- color: orange;
- text-decoration: underline;
- font-style: italic;
- }
-</pre>
-</div>
-
-<h3 id="Группировка_селекторов">Группировка селекторов</h3>
-
-<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p>
-
-<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p>
-
-<div class="tuto_example">
-<div class="tuto_type">Пример</div>
-
-<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p>
-
-<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p>
-
-<pre class="brush: css">/* цвет для заголовков */
-h1, h2, h3 {color: navy;}
-</pre>
-</div>
-
-<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2>
-
-<ol>
- <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
- <pre class="brush: css">strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-</pre>
- </li>
- <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li>
- <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
- <table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
- <tr>
- <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
- </tr>
- </tbody>
- </table>
- </li>
-</ol>
-
-<div class="tuto_details">
-<div class="tuto_type">Задание</div>
-
-<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p>
-
-<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
- <tbody>
- <tr>
- <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
- </tr>
- </tbody>
-</table>
-
-<p>(Существует более чем один способ сделать это).</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:
-
-<pre class="brush: css">/*.carrot {
- color: orange;
-}*/</pre>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
-
-<h2 id="Что_дальше">Что дальше?</h2>
-
-<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p>