From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css/getting_started/readable_css/index.html | 165 +++++++++++++++++++++ 1 file changed, 165 insertions(+) create mode 100644 files/ru/web/guide/css/getting_started/readable_css/index.html (limited to 'files/ru/web/guide/css/getting_started/readable_css/index.html') 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 new file mode 100644 index 0000000000..1720f6261d --- /dev/null +++ b/files/ru/web/guide/css/getting_started/readable_css/index.html @@ -0,0 +1,165 @@ +--- +title: Чистый СSS код +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Это 6-я статья руководства CSS для начинающих; здесь обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.

+ +

Информация: Чистый код CSS

+ +

Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.

+ +

Пустое пространство

+ +

Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.

+ +

В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.

+ +

Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.

+ +

Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.

+ +
+
Примеры
+ +

Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:

+ +
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

Некоторые используют отступы — 2 или 4 пробела или табы:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +

Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

Некоторые люди используют смешанный пробелы для повышения читаемости.

+ +
.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 }
+
+
+ +

Некоторые используют вкладки для компоновки элементов, а другие только пробелы.

+ +

Комментарии

+ +

Комментарии в CSS имеют следующий вид: /* комментарий */.

+ +

Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.

+ +

Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.

+ +
+
Пример
+ +
/* стиль для начальной буквой C в первом пункте*/
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

Группировка селекторов

+ +

Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.

+ +

В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.

+ +
+
Пример
+ +

Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.

+ +

Удобно определить цвет только в одном месте, в случае, если возможны изменения.

+ +
/* цвет для заголовков */
+h1, h2, h3 {color: navy;}
+
+
+ +

Действуем: добавление комментариев и улучшения формата

+ +
    +
  1. Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.
    3. +
  3. Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
Задание
+ +

Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(Существует более чем один способ сделать это).

+ +
+
Possible solution
+One way to do this is to put comment delimiters around the rule for .carrot: + +
/*.carrot {
+  color: orange;
+}*/
+Hide solution
+Посмотреть решение задания.
+ +

Что дальше?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы указать внешний вид текста в вашем документе.

-- cgit v1.2.3-54-g00ecf