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
|
---
title: Синтаксис
slug: Web/CSS/Syntax
translation_of: Web/CSS/Syntax
original_slug: Web/CSS/Синтаксис
---
<div>{{cssref}}</div>
<div>Основная задача Каскадных Стилей — это рассказать движку браузера, как отрисовать элементы страницы — каким цветом, как позиционировать их на странице, как украшать, и так далее. Синтаксис CSS построен следуя этой идее, и состоит из следующих основных блоков:</div>
<div></div>
<ul>
<li><strong>Свойство</strong> (<em>property</em>) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).</li>
<li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определённых</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li>
</ul>
<h2 id="Объявления_CSS">Объявления CSS</h2>
<p>Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p>
<p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p>
<p><img alt="css syntax - declaration.png" class="default internal" src="https://mdn.mozillademos.org/files/7771/css%20syntax%20-%20declaration(1).png" style="border: 1px solid black; height: 189px; padding: 1em; width: 465px;"></p>
<p>В CSS существует более <a href="/ru/docs/CSS/Reference">ста различных свойств</a>, и бесконечное число допустимых значений. <span id="result_box" lang="ru"><span class="hps">Не все</span> <span class="hps">пары</span> <span class="hps">свойств и значений</span> <span class="hps">допускаются</span>, <span class="hps">и каждое свойство</span> <span class="hps">определяет</span><span>, каковы</span> <span class="hps">допустимые значения</span><span>.</span> <span class="hps">Когда значение</span> <span class="hps">не подходит для</span> <span class="hps">данного свойства</span><span>,</span> <span class="hps">объявление считается</span> <span class="hps">недействительной и</span> <span class="hps">целиком</span> <span class="hps">игнорируются</span> <span class="hps">CSS</span>-движком<span class="hps">.</span></span></p>
<h2 id="Блоки_объявлений_CSS">Блоки объявлений CSS</h2>
<p>Объявления группируются в <strong>блоки</strong>, структура которых состоит из открывающейся , '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), и закрывающейся, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>) фигурных скобок.</p>
<p><a href="/@api/deki/files/6165/=css_syntax_-_block.png"><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></a></p>
<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p>
<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p>
<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.</div>
<h2 id="CSS_rulesets">CSS rulesets</h2>
<p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
<p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a <em>selector</em> which is a condition selecting some elements of the page. The pair selector-declarations block is called a <strong>ruleset</strong>, or often simply a <strong>rule</strong>.</p>
<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p>
<p>As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascade</a> algorithm.</p>
<div class="note">It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.<br>
<br>
This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole <em>selector</em> is invalid and therefor the entire rule is ignored (as invalid too).</div>
<h2 id="CSS_statements">CSS statements</h2>
<p>Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.</p>
<p>A <strong>statement</strong> is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).</p>
<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
<p>There are different kinds of statements:</p>
<ul>
<li><strong>Rulesets</strong> (or <em>rules</em>) that, as seen, associate a collection of CSS declarations to a condition described by a selector.</li>
<li><strong>At-rules</strong> that start with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of <a href="/en/CSS/At-rule" title="At-rule">at-rules</a>, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}).</li>
</ul>
<p>Any statement which isn't a rule or an at-rule is invalid and ignored.</p>
<p><a name="nested_statements">There is another group of statements, the <strong>nested statements</strong>, these are statements that can be used in a specific subset of at-rules, the <em>conditional group rules</em>. These statements only apply if a specific condition is matched: the <code>@media</code> at-rule content is applied only if the device on which runs the browser matches the expressed condition; the <code>@document</code> at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only <em>rulesets</em> could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{ CSS_key_concepts()}}</li>
</ul>
|
