Articles
Введение в CSS
Основы CSS

Основы CSS

Эта статья объясняет основы CSS.

Вы можете узнать о селекторах CSS, комбинаторах и специфичности.

YouTube Video

HTML/CSS для предварительного просмотра

css-base.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}
css-basics.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

Базовый синтаксис 

1selector {
2    property: value;
3}

Базовая структура CSS состоит из селектора, свойства и значения. Каждая пара свойства и значения завершается точкой с запятой.

  • селектор указывает, к какому HTML-элементу применяется стиль. В этом примере стили применяются ко всем элементам <header>.
  • свойство определяет стилистическое свойство, которое необходимо изменить, например, цвет или размер шрифта. Padding и color — это свойства в этом примере.
  • значение — это значение, присваиваемое свойству. Например, для цвета это может быть white или #9cf, а для размера отступа — 20px.

Селекторы

CSS-селекторы — это шаблоны для выбора элементов HTML. С помощью селекторов вы можете применять стили к конкретным элементам или группам элементов.

Универсальный селектор 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * — это универсальный селектор, который применяется ко всем элементам.
  • В этом примере шрифт применяется ко всем элементам.

Селектор элемента 

1/* Element Selector */
2strong {
3    color: red;
4}
  • Селектор элемента — это селектор, который применяется к определенным HTML-тегам, указывая имя тега.
  • В этом примере цвет текста элемента <strong> изменяется на красный.

Селектор ID 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # — это селектор ID, используемый для выбора элементов по их ID.
  • ID уникальны, поэтому на одной странице может быть только один элемент с одинаковым ID.

Селектор класса 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . — это селектор класса, используемый для выбора элементов по их классу.
  • Добавьте атрибут class к HTML-элементам, чтобы применять стили к элементам этого класса.

Селектор атрибута 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] — это селектор атрибута, который выбирает элементы с определенным атрибутом.
  • В этом примере текст элемента <a> с атрибутом href со значением index.html становится жирным.

Комбинатор

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

Комбинатор потомков 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • Комбинатор потомков применяет стили ко всем указанным элементам внутри определенного элемента.
  • В этом примере подчеркивание применяется к элементам <strong> внутри элементов <span>.

Комбинатор дочерних элементов 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • Символ > между span и em используется как комбинатор дочерних элементов. В этом примере стили применяются только к элементам <em>, которые являются непосредственными дочерними элементами <span>. В примере на третьей строке стиль не применяется, так как между тегами <span> и <em> находится тег <s>.

Комбинатор смежных соседей 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • Комбинатор смежных соседей с использованием символа + применяет стили к соседнему элементу, который находится сразу после определенного элемента.
  • В этом примере цвет текста становится зеленым, только если тег <b> находится сразу после тега <br>.

Комбинатор общих соседей 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • Комбинатор общих соседей с использованием символа ~ выбирает все соседние элементы, которые находятся после определенного элемента.
  • В этом примере цвет текста всех тегов <b>, которые идут после тега <br>, будет оттенком синего.

Псевдоклассы 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • Символ : используется для выбора псевдоклассов.
  • Подробности о псевдоклассах будут объяснены в другой статье.

Псевдоэлементы 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • Символ :: используется для выбора псевдоэлементов.
  • Подробности о псевдоэлементах также будут объяснены в другой статье.

Специфичность CSS

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

  1. Встроенные стили: Стили, написанные напрямую в HTML
  2. Селекторы ID ：#id
  3. Классы, селекторы атрибутов, псевдоклассы ：.class, [attribute=value], :hover, etc
  4. Селекторы элементов ：div, h1, p, etc
  5. Универсальный селектор ：*

Чем выше в списке, тем выше приоритет, чем ниже — тем ниже приоритет.

Как рассчитать специфичность

Приоритет CSS рассчитывается путем определения 'веса' каждого селектора. Вес каждого селектора представлен следующим образом.

  1. Встроенные стили: Встроенные стили обладают наибольшей мощностью и всегда имеют приоритет.
  2. Селекторы ID: Один селектор ID соответствует '100 очкам'.
  3. Классы, селекторы атрибутов, псевдоклассы: соответствуют '10 очкам'.
  4. Селекторы элементов, псевдоэлементы: соответствуют '1 очку'.

Применяется правило с наивысшим баллом.

Пример: 

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}
1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

Здесь к тегу <h1> применены три разных стиля:

  • Селектор элемента h1 (1 очко)
  • Селектор класса .header (10 очков)
  • Селектор ID #header (100 очков)

В этом случае, так как селектор ID имеет наивысший приоритет, применяется color: blue.

Переопределение приоритета с помощью !important

Используйте !important, если хотите заставить стиль примениться и игнорировать обычные приоритеты. !important обладает наибольшей силой влияния во всех правилах, переопределяя всё остальное.

Пример: 

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}
1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
  • Здесь указано color: red !important;, поэтому color: red имеет приоритет.

Наследование и приоритет

CSS может наследовать стили от родительских элементов к дочерним. Например, такие свойства, как color и font-family, наследуются по умолчанию. Однако, если определенный дочерний элемент имеет прямое стилизованное оформление, оно имеет приоритет над унаследованными стилями.

Пример: 

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}
1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>
  • Здесь color: gray; применяется к тегу footer, но поскольку для элемента p явно указано color: black;, текст элемента p отображается черным цветом. При этом элемент span наследует свойство color от footer и отображается серым цветом.

Каскад и приоритет CSS

Как следует из названия 'Каскадные Таблицы Стилей (CSS)', стили накладываются каскадно. Это означает, что если есть несколько таблиц стилей или правил, последнее определенное правило имеет приоритет. Если приоритеты одинаковы, применяется стиль, записанный позже.

Пример: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Здесь color: blue; определено позже, поэтому текст отображается синим цветом.

Резюме

Приоритет CSS определяется с использованием алгоритмов, таких как специфичность, но здесь мы рассмотрели только основные аспекты.

Основные правила таковы:

  • Встроенные стили всегда имеют наивысший приоритет.
  • Селекторы ID являются мощными и имеют приоритет над классами и тегами.
  • Селекторы классов и псевдоклассы имеют средний уровень приоритета.
  • Селекторы тегов и псевдоэлементы имеют низший уровень приоритета.
  • !important отменяет нормальный приоритет и принудительно применяет стиль.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Наследование в CSS