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
|
---
title: 'CSS properties: what they are and how to use them'
slug: conflicting/Learn/CSS/Building_blocks/Selectors
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Learn/CSS/CSS_properties
original_slug: Learn/CSS/CSS_properties
---
<div class="summary">
<p>{{Glossary("CSS")}} определяет как должна выглядеть вебстраница. Он использует предопределенные правила вместе с селекторами и свойствами для применения стилей к элементам HTML или группам элементов.</p>
</div>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prerequisites:</th>
<td>Basics of {{Glossary("HTML")}}, <a href="https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags">HTML elements</a>, and <a href="https://developer.mozilla.org/en-US/Learn/CSS/Using_CSS_in_a_web_page#The_link_tag">how to link HTML documents to CSS stylesheets</a>.</td>
</tr>
<tr>
<th scope="row">Objective:</th>
<td>Learn about different CSS selectors and properties enough to style a simple webpage.</td>
</tr>
</tbody>
</table>
<h2 id="Summary">Summary</h2>
<p>Разделение содержимого и стиля делает Веб разработку намного быстрее и проще. Когда вы определяете только стуктуру документа в вашем HTML файле и храните всю информацию о стиле в отдельном файле (называемом stylesheet), вы можете обновлять стили нескольких документов одновременно (а так же экономить ресурсы компьютера).</p>
<p>CSS syntax consists of easy-to-use, intuitive keywords.</p>
<pre class="brush: css">p {
font-family: "Times New Roman", georgia, sans-serif;
font-size: 24px;
}</pre>
<p>In the example above, <code>p</code> is a selector that applies styles to all the <code>{{HTMLElement("p")}}</code> elements at once. The CSS properties <code>font-family</code> and <code>font-size</code> are enclosed within curly braces and the corresponding values, right after the colon, determine the styles.</p>
<p>There are more than <a href="/en-US/docs/Web/CSS/Reference">250 properties</a> you can apply to your document. From text to layout, (almost) anything is possible.</p>
<h2 id="Active_Learning">Active Learning</h2>
<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
<h2 id="Deeper_dive">Deeper dive</h2>
<p>If properties are fairly simple to use, selectors are another story. Okay, they aren't that hard, and mastering them unleashes the full potential of CSS. In the next examples, we will introduce the most common selectors.</p>
<p>A CSS rule consists of selectors associated with properties. Selectors specify which elements will receive the properties laid down in the rule. Multiple rules can apply to the same element; the CSS cascade (which we'll discuss later on) determines which rule ends up taking effect in the case of conflicts. For now, just remember that the rule with the most <a href="/en-US/docs/Web/CSS/Specificity">specific selector</a> overrides the rules with more generic selectors.</p>
<h3 id="The_element_selector">The element selector</h3>
<p>Element selectors select HTML elements by element names only. Moreover, like all CSS selectors, you can apply a common set of properties to several elements at once.</p>
<p>For our first example, let's assume the following HTML code fragment:</p>
<pre class="brush: html"><h1>I'm an example</h1>
<p>In this example, I'm a paragraph</p>
<p>And I'm another paragraph</p>
</pre>
<p>In the following CSS rule, the element selector <code>p</code> applies the given styles simultaneously to all the <code>{{HTMLElement("p")}}</code> elements of our HTML document, preventing extensive rewriting. We are using the {{cssxref("font-family")}} property (which defines the font in which text appears) and the {{cssxref("font-size")}} (which defines text size).</p>
<pre class="brush: css">p {
font-family: "Helvetica", Arial, sans-serif;
font-size : 12px;
}</pre>
<p>The next CSS rule only applies to <code>{{HTMLElement("h1")}}</code> elements. We are using the {{cssxref("font-size")}} property to make our title twice the size of the body text, and the {{cssxref("font-weight")}} property to make the title bold.</p>
<pre class="brush: css">h1 {
font-size : 24px;
font-weight: bold;
}</pre>
<p>The following CSS rule applies the requisite styles to both <code>{{HTMLElement("h1")}}</code> and <code>{{HTMLElement("p")}}</code> elements, potentially removing even more duplication. (This use is called "group selector" or "chain selector". Notice the comma separating the selectors). Here we are using the {{cssxref("color")}} property to specify the same text color for both headings and paragraphs.</p>
<pre class="brush: css">h1, p {
color: darkmagenta;
}</pre>
<p>Here is the result of all this code:</p>
<p>{{ EmbedLiveSample('The_element_selector') }}</p>
<h3 id="The_id_selector">The id selector</h3>
<p>The <code>id</code><strong> </strong>attribute of a particular HTML element uniquely identifies that element. Hence, an id selector is used only when a set of style rules applies to a single element.</p>
<p>For our next example, let's assume the following HTML code fragment:</p>
<pre class="brush: html"><p id="hello">Hello world!</p> </pre>
<p>The following CSS rule applies only to that unique identified element. To make a selector into an id selector, you must put a hash character (#) in front of the id name. We are using three properties: {{cssxref("text-align")}} to center the text within the paragraph {{cssxref("border")}} to add a thin line around the paragraph, and {{cssxref("padding")}} to add some extra inner-margin between the text and the border.</p>
<pre class="brush: css">#hello {
text-align: center;
border : 1px solid black;
padding : 8px;
}</pre>
<p>And the result is the following:</p>
<p>{{ EmbedLiveSample('The_id_selector') }}</p>
<h3 id="The_class_selector">The class selector</h3>
<p>Within HTML, the <code>class</code><strong> </strong>attribute lets you apply multiple identifiers to HTML elements. Those identifiers can be used with CSS to match groups of elements regardless of element name.</p>
<p>For our next example, let's assume the following HTML code fragment:</p>
<pre class="brush: html"><h1 class="hello">Hey there!</h1>
<p class="hello bye">Let's hang out together!</p>
<p class="bye">And walk over the mountain</p>
</pre>
<p>Let's apply a CSS rule for all elements with the class <code>hello</code>. To make the selector into a class selector, put a period/full stop before the class name. We use the {{cssxref("font-style")}} property to italicize the text.</p>
<pre class="brush: css">.hello {
font-style: italic;
}</pre>
<p>And another one for all elements with the class <code>bye</code>. Here we are using the {{cssxref("text-decoration")}} property to draw a line through the text.</p>
<pre class="brush: css">.bye {
text-decoration: line-through;
}</pre>
<p>Here's what happened:</p>
<p>{{ EmbedLiveSample('The_class_selector') }}</p>
<h2 id="Next_step">Next step</h2>
<p>So we've gone over the basics to get started with CSS. You can <a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">learn more about text styling</a> or start exploring<a href="/en-US/docs/Web/CSS/Tutorials"> our CSS Tutorials</a> right away.</p>
|
