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
|
---
title: Научитесь стилизовать HTML с помощью CSS
slug: Learn/CSS
tags:
- Новичкам
- CSS
- Программирование
- Отладка
- Лэндинг
- Стили
- Тема
- Длина
- Специфичность
translation_of: Learn/CSS
---
{{LearnSidebar}}
<p class="summary">Каскадные таблицы стилей — или {{glossary("CSS")}} — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p>
<div class="callout">
<h4 id="Looking_to_become_a_front-end_web_developer">Хотите стать frontend-разработчиком?</h4>
<p>Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.</p>
<p><a href="/ru/docs/Learn/Front-end_web_developer"><strong>Начать изучение курса</strong></a></p>
</div>
<h2 id="Необходимые_условия">Необходимые условия</h2>
<p>Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a></p>
<p>После того как вы разберётесь с основами HTML, мы рекомендуем продолжать изучение HTML и CSS одновременно, переключаясь между темами. HTML гораздо интереснее в сочетании с CSS, и вы не можете по настоящему изучить CSS не зная HTML</p>
<p>В данном разделе содержится информация, которая требует базового знакомства с компьютером и интернетом. В статье <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Установка рабочего пространства</a> подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>, которая включена в полное руководство для новичка <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>.</p>
<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно — большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>, хотя и более детально.</p>
<h2 id="Модули">Модули</h2>
<p>Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.</p>
<dl>
<dt><a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a></dt>
<dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</dd>
<dt><a href="/ru/docs/Learn/CSS/Building_blocks">Устройство CSS</a></dt>
<dd>
<p class="summary">Этот модуль продолжается с того места, где закончился модуль <a href="/ru/docs/Learn/CSS/First_steps">введение в CSS</a> — теперь, после того как вы познакомились с языком и получили опыт его использования, пришло время погрузится немного глубже. В этот модуле рассказывается про каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и рамок, отладку, и многое другое.</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>
</dd>
<dt><a href="/ru/docs/Learn/CSS/Styling_text">Стилизация текста</a></dt>
<dd>После изучения основ, следующая тема, которую стоит изучить — стилизация текста. Это одна из самых распространенных вещей, для которых используется CSS. В этом модуле мы рассмотрим основы стилизации текста, включая установку шрифта, жирность, курсив, межстрочный и межбуквенный интервалы, тени и другие особенности оформления. В завершении модуля мы рассмотрим подключение пользовательских шрифтов на странице, а так же стилизацию списков и ссылок</dd>
<dt><a href="/ru/docs/Learn/CSS/CSS_layout">CSS раскладки</a></dt>
<dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение раскладки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы раскладки, такие как Flexbox и CSS grid, и некоторые традиционные методы раскладки, которые все ещё применяются.</dd>
</dl>
<h2 id="Решаем_часто_встречающиеся_проблемы_в_CSS">Решаем часто встречающиеся проблемы в CSS</h2>
<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Howto">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p>
<p>В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с углублённым знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать.</p>
<h2 id="CSS_странный">"CSS странный"</h2>
<p>CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:</p>
<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<dl>
<dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt>
<dd>Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда</dd>
</dl>
|
