1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: Чистый СSS код
slug: Web/Guide/CSS/Getting_started/Readable_CSS
translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
---
<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>
|
