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
|
---
title: Использование ваших новых знаний
slug: Learn/CSS/First_steps/Styling_a_biography_page
tags:
- Beginner
- CSS
- Learn
- Playground
- Начинающий
- Обучение
translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
original_slug: Learn/CSS/First_steps/Using_your_new_knowledge
---
<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
<dl>
<dd>С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.</dd>
</dl>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Необходимые знания:</th>
<td>Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>).</td>
</tr>
<tr>
<th scope="row">Задача:</th>
<td>Попрактиковать использование CSS с вашими новыми знаниями.</td>
</tr>
</tbody>
</table>
<h2 id="Перед_началом">Перед началом</h2>
<p>Вы можете писать код в редакторе ниже или <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">скачать исходный код</a>, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p>
<div class="blockIndicator note">
<p><strong>Примечание</strong>: Если у вас не получается, попросите о помощи — читайте раздел {{anch("Помощь")}} с кодом ниже.</p>
</div>
<h2 id="Работа_с_CSS">Работа с CSS</h2>
<p>В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.</p>
<ul>
<li>{{cssxref("font-family")}}</li>
<li>{{cssxref("color")}}</li>
<li>{{cssxref("border-bottom")}}</li>
<li>{{cssxref("font-weight")}}</li>
<li>{{cssxref("font-size")}}</li>
<li>{{cssxref("text-decoration")}}</li>
</ul>
<p>Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.</p>
<p>Измените значения свойств CSS, чтобы поменять внешний вид биографии.</p>
<ol>
<li>Сделайте заголовок розовым, используя CSS-цвет <code>hotpink</code>.</li>
<li>Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет <code>purple</code>.</li>
<li>Примените к подзаголовку <code><h2></code> курсив.</li>
<li>Установите цвет <code>#eeeeee</code> для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.</li>
<li>Сделайте ссылки <code>зелёными</code> при наведении.</li>
</ol>
<p>У вас должно получиться примерно как-то так:</p>
<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
<p>После этого попробуйте использовать селекторы, не указанные здесь, но описанные в <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference">Руководстве по CSS</a>. Не бойтесь ошибок — практикуйтесь!</p>
<p>Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!</p>
<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
<h2 id="Помощь">Помощь</h2>
<p>Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:</p>
<ol>
<li>Загрузите ваш код на <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li>
<li>Напишите пост с просьбой о помощи и / или оценке на <a href="https://discourse.mozilla.org/c/mdn">форуме MDN</a>. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть:
<ul>
<li>Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".</li>
<li>Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.</li>
<li>Ссылка на ваш код в онлайн-редакторе.</li>
<li>Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.</li>
</ul>
</li>
</ol>
<h2 id="Что_дальше">Что дальше?</h2>
<p>Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, <a href="/ru/docs/Learn/CSS/Building_blocks">Как устроен CSS</a>, мы глубже разберёмся в некоторых аспектах языка.</p>
<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ol>
<li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Что такое CSS?</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как структурирован CSS</a></li>
<li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
</ol>
|
