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
|
---
title: Устройство CSS
slug: Learn/CSS/Building_blocks
tags:
- Beginner
- CSS
- Landing
- Learn
- Начинающий
- Обучение
- Опции
- Функции
- состоит
translation_of: Learn/CSS/Building_blocks
---
<div>{{LearnSidebar}}</div>
<p class="summary">Этот модуль — продолжение раздела <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>: Вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.</p>
<p class="summary">Наша цель в этом модуле — обеспечить Вас необходимым набором инструментов для написания хорошего CSS-кода, а также помочь Вам понять необходимую теорию для перехода к особым дисциплинам, таким как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">размещение элементов с помощью CSS</a>.</p>
<h2 id="Необходимые_умения">Необходимые умения</h2>
<p>Перед изучением этого раздела Вы должны иметь:</p>
<ol>
<li>Стандартную рабочую среду (<a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установке базового программного обеспечения</a>), а также понимание того, как создавать файлы и работать с ними (<a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>).</li>
<li>Общее представление о HTML (модуль <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>).</li>
<li>Общее представление о CSS (модуль <a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a>).</li>
</ol>
<div class="note">
<p><strong>Примечание</strong>: Если Вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, Вы можете опробовать примеры (большую часть) на таких онлайн-программах, как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Руководства">Руководства</h2>
<p>В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения Вы встретите упражнения, позволяющие Вам усвоить пройденный материал.</p>
<dl>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></dt>
<dd>Цель данного урока — углубить Ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы</a></dt>
<dd>Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы рассмотрим разные типы в мельчайших подробностях и увидим как они работают. Подстатьи по порядку:
<ul>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибутов</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинации селекторов</a></li>
</ul>
</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS</a></dt>
<dd>Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим <em>CSS-блоки.</em></dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></dt>
<dd>В этом уроке мы рассмотрим всякие интересные вещи, котроые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиетнов и фоновых изображений до скругления углов, фонов и границ.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста</a></dt>
<dd>Раньше CSS развивался, чтобы лучше поддерживать разные <strong>режимы написания</strong>, включая <em>справа налево</em> или <em>сверху вниз</em> (как в японском языке). Мы рассмотрим их в этой статье.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></dt>
<dd>В этом уроке мы рассмотрим ещё одну важную концепцию CSS — <strong>overflow</strong>. Переполнение происходит, когда слишком много информации находится в пределах ограниченного блока. В этой статье мы рассмотрим, как это исправить.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS</a></dt>
<dd>У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></dt>
<dd>В предыдущих уроках Вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></dt>
<dd>Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда Вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что Вам нужно знать про эти элементы.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></dt>
<dd>Стилизация HTML таблиц — это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья описывает, как сделать, чтобы Ваши HTML-таблицы выглядели хорошо, и некоторые свойства, подробно рассмотренные в предыдущих статьях.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></dt>
<dt></dt>
<dd>При написании CSS Вы можете столкнуться с тем, что Ваш CSS-код работает не так, как Вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></dt>
<dd>Как только Вы начнёте работать над большими проектами и таблицами стилей, Вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.</dd>
</dl>
<h2 id="Смотрите_также">Смотрите также</h2>
<dl>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Узконаправленные функции CSS</a></dt>
<dd>В этой статье описаны некоторые хитрости, которые познакомят Вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</dd>
</dl>
|
