diff options
| -rw-r--r-- | files/ru/learn/css/index.html | 84 |
1 files changed, 47 insertions, 37 deletions
diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.html index b88d38c409..290cee77a5 100644 --- a/files/ru/learn/css/index.html +++ b/files/ru/learn/css/index.html @@ -1,65 +1,75 @@ --- -title: CSS +title: Научитесь стилизовать HTML с помощью CSS slug: Learn/CSS tags: - - Beginner + - Новичкам - CSS - - Debugging - - Landing - - NeedsContent - - Topic - - TopicStub - - length + - Программирование + - Отладка + - Лэндинг + - Стили + - Тема + - Длина + - Специфичность translation_of: Learn/CSS --- -<p>{{LearnSidebar}}</p> +{{LearnSidebar}} -<p class="summary">Каскадные таблицы стилей, или CSS, — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p> +<p class="summary">Каскадные таблицы стилей — или {{glossary("CSS")}} — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p> -<h2 id="План_обучения">План обучения </h2> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">Хотите стать frontend-разработчиком?</h4> -<p>Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>. После его прохождения переходите к:</p> + <p>Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.</p> -<ul> - <li>изучению CSS, начиная с модуля <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>;</li> - <li>далее — к более продвинутой теме <a href="/ru/docs/Learn/HTML#Модули">HTML-модули</a></li> - <li>после этого — к модулю <a href="/ru/docs/Learn/JavaScript">JavaScript</a> и тому, как его использовать, чтобы добавить вашим веб-страницам динамической функциональности.</li> -</ul> + <p><a href="/ru/docs/Learn/Front-end_web_developer"><strong>Начать изучение курса</strong></a></p> -<p>Мы рекомендуем изучать HTML и CSS одновременно. HTML гораздо интереснее в сочетании с CSS и изучать эти языки раздельно было бы ошибочно.</p> +</div> -<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> +<h2 id="Необходимые_условия">Необходимые условия</h2> -<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно; большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе<a href="/ru/docs/Learn/CSS/First_steps"> Введение в CSS</a>, хотя и более детально.</p> +<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/Introduction_to_CSS">Введение в CSS</a></dt> - <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц, — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</dd> - <dt><a href="/ru/docs/Learn/CSS/Styling_text">Дизайн текста</a></dt> - <dd>Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.</dd> - <dt><a href="/ru/docs/Learn/CSS/Styling_boxes">Стилизация блоков</a></dt> - <dd>Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приёмами управления блоками, установив такие свойства, как поля, отступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.</dd> - <dt><a href="/ru/docs/Learn/CSS/CSS_layout">Размещение элементов с помощью CSS</a></dt> - <dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</dd> - <dt>Адаптивный дизайн (TBD)</dt> - <dd><span id="result_box" lang="ru"><span>В настоящее время существует множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD - Responsive Web Design) стал основным навыком веб-разработки.</span> <span>В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.</span></span></dd> + <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> +<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>В разделе <strong><a href="/ru/docs/Learn/CSS/Как">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p> +<p>CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:</p> -<p>В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения 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 с подробными ссылками на дополнительные учебники.</dd> - <dt><a href="/ru/docs/Web/CSS/Reference">CSS-справочник</a></dt> - <dd><span id="result_box" lang="ru"><span>Комплексный</span> <span>справочник по</span> <span>всем многочисленным</span> <span>особенностям</span> <span>языка</span> <span>CSS,</span></span> — если Вы, к примеру, хотите знать, какие значения может иметь свойство, то вам сюда.</dd> + <dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt> + <dd>Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда</dd> </dl> |