diff options
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.html | 166 |
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> |