From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../css/building_blocks/cascade_tasks/index.html | 51 ++ .../fundamental_css_comprehension/index.html | 123 +++++ .../selectors/attribute_selectors/index.html | 160 +++++++ .../selectors/combinators/index.html | 113 +++++ .../learn/css/building_blocks/selectors/index.html | 235 +++++++++ .../pseudo-classes_and_pseudo-elements/index.html | 415 ++++++++++++++++ .../selectors/selectors_tasks/index.html | 137 ++++++ .../type_class_and_id_selectors/index.html | 130 +++++ .../index.html" | 51 -- .../attribute_selectors/index.html" | 160 ------- .../combinators/index.html" | 113 ----- .../index.html" | 235 --------- .../pseudo-classes_and_pseudo-elements/index.html" | 415 ---------------- .../type_class_and_id_selectors/index.html" | 130 ----- .../index.html" | 137 ------ .../css/css_layout/multicol_skills/index.html | 78 +++ .../css_layout/multiple-column_layout/index.html | 468 ++++++++++++++++++ .../ru/learn/css/css_layout/normal_flow/index.html | 96 ++++ .../css/css_layout/position_skills/index.html | 64 +++ .../css/css_layout/responsive_design/index.html | 328 +++++++++++++ .../index.html" | 468 ------------------ .../index.html" | 78 --- .../index.html" | 64 --- .../index.html" | 96 ---- .../index.html" | 328 ------------- files/ru/learn/css/css_properties/index.html | 133 ------ .../first_steps/how_css_is_structured/index.html | 528 +++++++++++++++++++++ .../learn/css/first_steps/what_is_css/index.html | 130 +++++ .../index.html" | 528 --------------------- .../index.html" | 130 ----- files/ru/learn/css/howto/css_faq/index.html | 182 +++++++ files/ru/learn/css/howto/index.html | 86 ++++ .../ponimanie_osnov_css/index.html | 123 ----- .../css/styling_text/styling_lists/index.html | 389 +++++++++++++++ .../styling_text/typesetting_a_homepage/index.html | 126 +++++ .../ru/learn/css/styling_text/web_fonts/index.html | 203 ++++++++ .../index.html" | 203 -------- .../index.html" | 126 ----- .../index.html" | 389 --------------- .../learn/css/\320\272\320\260\320\272/index.html" | 86 ---- 40 files changed, 4042 insertions(+), 3993 deletions(-) create mode 100644 files/ru/learn/css/building_blocks/cascade_tasks/index.html create mode 100644 files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html delete mode 100644 "files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" create mode 100644 files/ru/learn/css/css_layout/multicol_skills/index.html create mode 100644 files/ru/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 files/ru/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ru/learn/css/css_layout/position_skills/index.html create mode 100644 files/ru/learn/css/css_layout/responsive_design/index.html delete mode 100644 "files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" delete mode 100644 "files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" delete mode 100644 files/ru/learn/css/css_properties/index.html create mode 100644 files/ru/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ru/learn/css/first_steps/what_is_css/index.html delete mode 100644 "files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" delete mode 100644 "files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" create mode 100644 files/ru/learn/css/howto/css_faq/index.html create mode 100644 files/ru/learn/css/howto/index.html delete mode 100644 files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html create mode 100644 files/ru/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ru/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/ru/learn/css/styling_text/web_fonts/index.html delete mode 100644 "files/ru/learn/css/styling_text/\320\262\320\265\320\261_\321\210\321\200\320\270\321\204\321\202\321\213/index.html" delete mode 100644 "files/ru/learn/css/styling_text/\320\267\320\260\320\264\320\260\320\275\320\270\320\265_colon__\321\201\321\202\320\270\320\273\320\270\320\267\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\210\320\272\320\276\320\273\321\214\320\275\320\276\320\263\320\276_\321\201\320\260\320\271\321\202\320\260/index.html" delete mode 100644 "files/ru/learn/css/styling_text/\321\201\321\202\320\270\320\273\320\270\320\267\320\260\321\206\320\270\321\217_\321\201\320\277\320\270\321\201\320\272\320\276\320\262/index.html" delete mode 100644 "files/ru/learn/css/\320\272\320\260\320\272/index.html" (limited to 'files/ru/learn/css') diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.html new file mode 100644 index 0000000000..b6524f9ed3 --- /dev/null +++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html @@ -0,0 +1,51 @@ +--- +title: 'Проверьте ваши навыки: Каскад' +slug: Learn/CSS/Building_blocks/Каскад_задачи +tags: + - CSS + - Начинающий +translation_of: Learn/CSS/Building_blocks/Cascade_tasks +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке Каскад и наследование.

+ +
+

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
+
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел {{anch("Оценка или дальнейшая помощь")}} внизу этой страницы.

+
+ +

Задание 1

+ +

В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе Контроль наследования,  чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.

+ +

Barely visible yellow links on a white background.

+ +

Посмотрите, сможете ли вы повторить эту картинку в примере ниже.

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}

+ +
+

Для получения оценки или для дальнейшей работы загрузите исходный код для этого задания в ваш собственный редактор или в онлайн-редактор.

+
+ +

Оценка или дальнейшая помощь

+ +

Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:

+ +
    +
  1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
    2. +
  2. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать: +
      +
    • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
      • +
    • Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
      • +
    • Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
      • +
    • Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..9009c684d8 --- /dev/null +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,123 @@ +--- +title: Понимание основ CSS +slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

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

+ + + + + + + + + + + + +
Предварительно:Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.
Цель:Проверка понимания основной теории, синтаксиса и техник CSS.
+ +

Отправной пункт

+ +

Чтобы начать проверку, вы должны:

+ + + +
+

Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

+
+ +

Краткое описание проекта

+ +

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

+ +

Первоначальные настройки:

+ + + +

Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:

+ + + +

Какие новые наборы правил надо написать:

+ + + +
+

Примечание: Имейте в виду, что второй набор правил устанавливает font-size: 10px; для элемента<html> — это означает, что для любых потомков <html> em будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <html>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).

+
+ +

Другие вещи для размышления:

+ + + +

Советы и подсказки

+ + + +

Образец

+ +

На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

Проверка

+ +

Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..9a6a2c4c07 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,160 @@ +--- +title: Селекторы атрибута +slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors +tags: + - CSS + - Атрибут + - Начинающий + - Обучение + - Селекторы +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определенными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Узнать, что такое селекторы атрибута и как их использовать.
+ +

Селекторы наличия и значения

+ +

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерОписание
[attr]a[title]Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value]a[href="https://example.com"]Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value]p[class~="special"] +

Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.

+
[attr|=value]div[lang|="zh"]Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
+ +

В приведённом ниже примере вы можете увидеть использование этих селекторов.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Селекторы вхождения подстроки

+ +

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерОписание
[attr^=value]li[class^="box-"]Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value]li[class$="-box"]Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
[attr*= ]li[class*="box"]Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.
+ +

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

+ +

Следующий пример показывает, как используются эти селекторы:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Чувствительность к регистру

+ +

Если вы хотите выбрать значения атрибута без учета регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

+ +

В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Примечание: Существует также более новое значение s, которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

+
+ +

Следующие шаги

+ +

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки (The box model)
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..7a076e05a8 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,113 @@ +--- +title: Комбинаторы +slug: Learn/CSS/Building_blocks/Селекторы/Combinators +tags: + - CSS + - Селекторы + - комбинаторы +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.
+ +

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

+ +

Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

+ +
body article p
+ +

В приведенном ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Дочерний комбинатор

+ +

Дочерний комбинатор (>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:

+ +
article > p
+ +

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

+ +

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Соседний родственный комбинатор

+ +

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

+ +
p + img
+ +

Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

+ +

Если вы вставите какой-то другой элемент, например <h2> между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Общий родственный комбинатор

+ +

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

+ +
p ~ img
+ +

В приведенном ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идет после него, будет выбран.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

Использование комбинаторов

+ +

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

+ +
ul > li[class="a"]  {  }
+ +

Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

+ +

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

+ +

Проверьте ваши навыки!

+ +

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

+ +

Двигаемся дальше

+ +

Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — CSS модель коробки.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..3819af4207 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,235 @@ +--- +title: Селекторы CSS +slug: Learn/CSS/Building_blocks/Селекторы +tags: + - Attribute + - Beginner + - CSS + - Learn + - Pseudo-class + - Pseudo-element + - id + - Обучение + - Псевдоэлемент + - псевдокласс + - селектор +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:Узнать, как работают CSS-селекторы.
+ +

Что такое селекторы?

+ +

Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

+ +

Some code with the h1 highlighted.

+ +

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

+ +

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в Спецификации селекторов 3 уровня, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.

+ +

Несколько селекторов

+ +

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

А могу написать короче — просто отделив селекторы запятыми:

+ +
h1, .special {
+  color: blue;
+}
+ +

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

+ +
h1,
+.special {
+  color: blue;
+}
+ +

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

+ +

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Типы селекторов

+ +

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

+ +

Селекторы тегов, классов и идентификаторов

+ +

К этой группе относятся селекторы HTML-элементов, таких как <h1>.

+ +
h1 { }
+ +

К группе относятся и селекторы классов:

+ +
.box { }
+ +

или селекторы идентификаторов (ID):

+ +
#unique { }
+ +

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

+ +

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

+ +
a[title] { }
+ +

или основываясь на значении атрибута:

+ +
a[href="https://example.com"] { }
+ +

Псевдоклассы, псевдоэлементы

+ +

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

+ +
a:hover { }
+ +

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

+ +
p::first-line { }
+ +

Комбинаторы

+ +

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

+ +
article > p { }
+ +

Продолжение

+ +

Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или Вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Справка о селекторах

+ +

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерРуководство
Селектор по типуh1 {  }Селектор по типу
Универсальный селектор* {  }Универсальный селектор
Селектор класса.box {  }Селекторы классов
Селектор ID#unique { }Селекторы по ID
Селектор атрибутов a[title] {  }Селекторы атрибутов
Селектор псевдоклассовp:first-child { }Псевдоклассы
Селектор псевдоэлементовp::first-line { }Псевдоэлементы
Селектор потомковarticle pСелектор потомков
Селектор дочерних элементовarticle > pСелектор дочерних элементов
Смежные селекторыh1 + pСмежные селекторы
Селектор братских элементовh1 ~ pСелектор братских элементов
+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. CSS-селекторы + +
    3. +
  3. Блоки в CSS
    4. +
  4. Фон и границы
    5. +
  5. Изменение направления текста
    6. +
  6. Перекрытие содержимого
    7. +
  7. Значения свойств CSS
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Изображения, формы и прочие медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация CSS-кода
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..4fe67b8adb --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,415 @@ +--- +title: 'Псевдоклассы, псевдоэлементы' +slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements +tags: + - CSS + - Начинающий + - Обучение + - Псевдо + - Псевдоэлемент + - Селекторы + - псевдокласс +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о селекторах псевдокласса и псевдоэлемента.
+ +

Что такое псевдокласс?

+ +

Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.

+ +

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

+ +
:pseudo-class-name
+ +

Простой пример псевдокласса

+ +

Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

+ + + +
+

Примечание : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для <article>, не только к первому дочернему абзацу — :first-child равнозначно *:first-child. Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.

+
+ +

Псевдоклассы пользовательского действия

+ +

Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Что такое псевдоэлемент?

+ +

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.

+ +
::pseudo-element-name
+ +
+

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

+
+ +

Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <span> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

+ +

Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Он действует так, как если бы <span> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.

+ +

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

+ +

Объединение псевдоклассов и псевдоэлементов

+ +

Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Генерация контента с помощью ::before и ::after

+ +

Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.

+ +

Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

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

+ +

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

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.

+ +

В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..

+ +

Справочный раздел

+ +

Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторОписание
{{ Cssxref(":active") }}Подходит, когда пользователь активирует (например, щелкает мышью) элемент.
{{ Cssxref(":any-link") }}Соответствует как состоянию :link, так и состоянию:visited ссылки.
{{ Cssxref(":blank") }}Соответствует элементу <input>, для которого значение ввода является пустым.
{{ Cssxref(":checked") }}Соответствует переключателю или флажку в выбранном состоянии.
{{ Cssxref(":current") }}Соответствует элементу или предку элемента, который в данный момент отображается.
{{ Cssxref(":default") }}Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов.
{{ Cssxref(":dir") }}Выбирает элемент на основе его направленности (значение атрибута HTML dir или свойства CSS direction ).
{{ Cssxref(":disabled") }}Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.
{{ Cssxref(":empty") }}Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
{{ Cssxref(":enabled") }}Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.
{{ Cssxref(":first") }}В постраничном носителе соответствует первой странице.
{{ Cssxref(":first-child") }}Соответствует элементу, который является первым среди других дочерних элементов одного предка.
{{ Cssxref(":first-of-type") }}Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.
{{ Cssxref(":focus") }}Соответствует элементу, имеющему фокус.
{{ Cssxref(":focus-visible")}}Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.
{{ Cssxref(":focus-within") }}Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.
{{ Cssxref(":future") }}Соответствует элементам после текущего элемента.
{{ Cssxref(":hover") }}Соответствует элементу, на который наведён курсор мыши.
{{ Cssxref(":indeterminate") }}Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно checkboxes.
{{ Cssxref(":in-range") }}Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.
{{ Cssxref(":invalid") }}Соответствует элементу, например <input>, в недопустимом состоянии.
{{ Cssxref(":lang") }}Соответствует элементу, основанному на языке (значение атрибута HTML lang).
{{ Cssxref(":last-child") }}Соответствует элементу, который является последним среди других дочерних элементов одного предка.
{{ Cssxref(":last-of-type") }}Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.
{{ Cssxref(":left") }}В постраничном носителе соответствует левосторонним страницам.
{{ Cssxref(":link")}}Соответствует непосещавшимся ссылкам.
{{ Cssxref(":local-link")}}Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.
{{ Cssxref(":is", ":is()")}}Соответствует любому селектору из полученного списка селекторов.
{{ Cssxref(":not") }}Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.
{{ Cssxref(":nth-child") }}Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-last-child") }}Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":nth-last-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":only-child") }}Соответствует элементу, являющемуся единственным дочерним для своего предка.
{{ Cssxref(":only-of-type") }}Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.
{{ Cssxref(":optional") }}Соответствует необязательным элементам формы.
{{ Cssxref(":out-of-range") }}Соответствует элементу с диапазоном, когда его значение находится вне диапазона.
{{ Cssxref(":past") }}Соответствует элементам перед текущим элементом.
{{ Cssxref(":placeholder-shown") }}Соответствует элементу input, который показывает текст-заполнитель.
{{ Cssxref(":playing") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.
{{ Cssxref(":paused") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.
{{ Cssxref(":read-only") }}Соответствует элементу, который не может быть изменён пользователем.
{{ Cssxref(":read-write") }}Соответствует элементу, который может быть изменён пользователем.
{{ Cssxref(":required") }}Соответствует обязательным элементам формы.
{{ Cssxref(":right") }}В постраничном носителе соответствует правосторонним страницам.
{{ Cssxref(":root") }}Соответствует элементу, который является корнем документа.
{{ Cssxref(":scope") }}Соответствует любому элементу, который является элементом области видимости.
{{ Cssxref(":valid") }}Соответствует элементу, такому как <input>, в допустимом состоянии.
{{ Cssxref(":target") }}Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment).
{{ Cssxref(":visited") }}Соответствует посещённым ссылкам.
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторОписание
{{ Cssxref("::after") }}Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.
{{ Cssxref("::before") }}Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.
{{ Cssxref("::first-letter") }}Соответствует первой букве элемента.
{{ Cssxref("::first-line") }}Соответствует первой строке содержимого порождающего элемента.
{{ Cssxref("::grammar-error") }} +

Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.

+
{{ Cssxref("::marker") }}Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.
+

{{ Cssxref("::selection") }}

+ 		Соответствует части документа, которая была выбрана.
{{ Cssxref("::spelling-error") }} +

Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

+
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html new file mode 100644 index 0000000000..b8f36063c2 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html @@ -0,0 +1,137 @@ +--- +title: 'Проверьте ваши навыки: Селекторы' +slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи +tags: + - CSS + - Начинающий +translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks +--- +
{{LearnSidebar}}
+ +
+ +

Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.

+ +
+

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
+
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел Оценка или дальнейшая помощь внизу этой страницы.

+
+ +

Selectors One

+ +

Without changing the HTML, use CSS to do the following things:

+ + + +

Text with the CSS applied for the solution to task 1.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Two

+ +

Without changing the HTML, make the following changes to the look of the content in this example:

+ + + +

Text with the CSS applied for the solution to task 2.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Three

+ +

In this example, try making the following changes without adding to the HTML.

+ + + +

Text with the CSS applied for the solution to task 3.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Four

+ +

In this task try the following:

+ + + +

Text with the CSS applied for the solution to task 4.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Five

+ +

In this final task add CSS using attribute selectors to do the following:

+ + + +

Four links with different color borders.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors mentioned above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Selectors skill test 1".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..875899ab41 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,130 @@ +--- +title: 'Селекторы типа, класса и ID' +slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors +tags: + - CSS + - id + - Класс + - Начинающий + - Обучение + - Селекторы +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
+ +

Селекторы типа

+ +

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

+ +

Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

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

+ +

Универсальный селектор обозначается звездочкой (*). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

+ +

Использование универсального селектора для облегчения чтения ваших селекторов

+ +

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдо-класс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдо-классах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 

+ +
article :first-child {
+  font-weight: bold;
+}
+ +

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .

+ +

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдо-класс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:

+ +
article *:first-child {
+  font-weight: bold;
+}
+ +

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

+ +

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

+ +

Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Нацеливание классов на отдельные элементы

+ +

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.

+ +

Нацеливание на элемент, к которому применено более одного класса

+ +

Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.

+ +

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.

+ +

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Селекторы ID

+ +

Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id. Можно выбрать элемент, которому присвоен  id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

+
+ +
+

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

+
+ +

В следующей статье

+ +

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки (The box model)
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git "a/files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" "b/files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" deleted file mode 100644 index b6524f9ed3..0000000000 --- "a/files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 'Проверьте ваши навыки: Каскад' -slug: Learn/CSS/Building_blocks/Каскад_задачи -tags: - - CSS - - Начинающий -translation_of: Learn/CSS/Building_blocks/Cascade_tasks ---- -
{{LearnSidebar}}
- -
- -

Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке Каскад и наследование.

- -
-

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
-
- Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел {{anch("Оценка или дальнейшая помощь")}} внизу этой страницы.

-
- -

Задание 1

- -

В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе Контроль наследования,  чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.

- -

Barely visible yellow links on a white background.

- -

Посмотрите, сможете ли вы повторить эту картинку в примере ниже.

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}

- -
-

Для получения оценки или для дальнейшей работы загрузите исходный код для этого задания в ваш собственный редактор или в онлайн-редактор.

-
- -

Оценка или дальнейшая помощь

- -

Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.

- -

Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:

- -
    -
  1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
    2. -
  2. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать: -
      -
    • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
      • -
    • Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
      • -
    • Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
      • -
    • Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
      • -
    -
    3. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" deleted file mode 100644 index 9a6a2c4c07..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Селекторы атрибута -slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors -tags: - - CSS - - Атрибут - - Начинающий - - Обучение - - Селекторы -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определенными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Узнать, что такое селекторы атрибута и как их использовать.
- -

Селекторы наличия и значения

- -

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторПримерОписание
[attr]a[title]Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value]a[href="https://example.com"]Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value]p[class~="special"] -

Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.

-
[attr|=value]div[lang|="zh"]Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
- -

В приведённом ниже примере вы можете увидеть использование этих селекторов.

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Селекторы вхождения подстроки

- -

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).

- - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторПримерОписание
[attr^=value]li[class^="box-"]Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value]li[class$="-box"]Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
[attr*= ]li[class*="box"]Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.
- -

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

- -

Следующий пример показывает, как используются эти селекторы:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Чувствительность к регистру

- -

Если вы хотите выбрать значения атрибута без учета регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

- -

В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Примечание: Существует также более новое значение s, которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

-
- -

Следующие шаги

- -

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки (The box model)
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" deleted file mode 100644 index 7a076e05a8..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Комбинаторы -slug: Learn/CSS/Building_blocks/Селекторы/Combinators -tags: - - CSS - - Селекторы - - комбинаторы -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.
- -

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

- -

Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

- -
body article p
- -

В приведенном ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Дочерний комбинатор

- -

Дочерний комбинатор (>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:

- -
article > p
- -

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

- -

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Соседний родственный комбинатор

- -

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

- -
p + img
- -

Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

- -

Если вы вставите какой-то другой элемент, например <h2> между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Общий родственный комбинатор

- -

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

- -
p ~ img
- -

В приведенном ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идет после него, будет выбран.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

Использование комбинаторов

- -

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

- -
ul > li[class="a"]  {  }
- -

Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

- -

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

- -

Проверьте ваши навыки!

- -

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

- -

Двигаемся дальше

- -

Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — CSS модель коробки.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" deleted file mode 100644 index 3819af4207..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Селекторы CSS -slug: Learn/CSS/Building_blocks/Селекторы -tags: - - Attribute - - Beginner - - CSS - - Learn - - Pseudo-class - - Pseudo-element - - id - - Обучение - - Псевдоэлемент - - псевдокласс - - селектор -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

- - - - - - - - - - - - -
Необходимые знания:Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:Узнать, как работают CSS-селекторы.
- -

Что такое селекторы?

- -

Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

- -

Some code with the h1 highlighted.

- -

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

- -

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в Спецификации селекторов 3 уровня, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.

- -

Несколько селекторов

- -

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

А могу написать короче — просто отделив селекторы запятыми:

- -
h1, .special {
-  color: blue;
-}
- -

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

- -
h1,
-.special {
-  color: blue;
-}
- -

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

- -

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

- -
h1, ..special {
-  color: blue;
-}
- -

Типы селекторов

- -

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

- -

Селекторы тегов, классов и идентификаторов

- -

К этой группе относятся селекторы HTML-элементов, таких как <h1>.

- -
h1 { }
- -

К группе относятся и селекторы классов:

- -
.box { }
- -

или селекторы идентификаторов (ID):

- -
#unique { }
- -

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

- -

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

- -
a[title] { }
- -

или основываясь на значении атрибута:

- -
a[href="https://example.com"] { }
- -

Псевдоклассы, псевдоэлементы

- -

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

- -
a:hover { }
- -

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

- -
p::first-line { }
- -

Комбинаторы

- -

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

- -
article > p { }
- -

Продолжение

- -

Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или Вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Справка о селекторах

- -

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторПримерРуководство
Селектор по типуh1 {  }Селектор по типу
Универсальный селектор* {  }Универсальный селектор
Селектор класса.box {  }Селекторы классов
Селектор ID#unique { }Селекторы по ID
Селектор атрибутов a[title] {  }Селекторы атрибутов
Селектор псевдоклассовp:first-child { }Псевдоклассы
Селектор псевдоэлементовp::first-line { }Псевдоэлементы
Селектор потомковarticle pСелектор потомков
Селектор дочерних элементовarticle > pСелектор дочерних элементов
Смежные селекторыh1 + pСмежные селекторы
Селектор братских элементовh1 ~ pСелектор братских элементов
- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. CSS-селекторы - -
    3. -
  3. Блоки в CSS
    4. -
  4. Фон и границы
    5. -
  5. Изменение направления текста
    6. -
  6. Перекрытие содержимого
    7. -
  7. Значения свойств CSS
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Изображения, формы и прочие медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация CSS-кода
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" deleted file mode 100644 index 4fe67b8adb..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: 'Псевдоклассы, псевдоэлементы' -slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements -tags: - - CSS - - Начинающий - - Обучение - - Псевдо - - Псевдоэлемент - - Селекторы - - псевдокласс -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о селекторах псевдокласса и псевдоэлемента.
- -

Что такое псевдокласс?

- -

Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.

- -

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

- -
:pseudo-class-name
- -

Простой пример псевдокласса

- -

Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

- - - -
-

Примечание : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для <article>, не только к первому дочернему абзацу — :first-child равнозначно *:first-child. Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.

-
- -

Псевдоклассы пользовательского действия

- -

Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Что такое псевдоэлемент?

- -

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.

- -
::pseudo-element-name
- -
-

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

-
- -

Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <span> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

- -

Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Он действует так, как если бы <span> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.

- -

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

- -

Объединение псевдоклассов и псевдоэлементов

- -

Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Генерация контента с помощью ::before и ::after

- -

Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.

- -

Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

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

- -

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

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.

- -

В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..

- -

Справочный раздел

- -

Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторОписание
{{ Cssxref(":active") }}Подходит, когда пользователь активирует (например, щелкает мышью) элемент.
{{ Cssxref(":any-link") }}Соответствует как состоянию :link, так и состоянию:visited ссылки.
{{ Cssxref(":blank") }}Соответствует элементу <input>, для которого значение ввода является пустым.
{{ Cssxref(":checked") }}Соответствует переключателю или флажку в выбранном состоянии.
{{ Cssxref(":current") }}Соответствует элементу или предку элемента, который в данный момент отображается.
{{ Cssxref(":default") }}Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов.
{{ Cssxref(":dir") }}Выбирает элемент на основе его направленности (значение атрибута HTML dir или свойства CSS direction ).
{{ Cssxref(":disabled") }}Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.
{{ Cssxref(":empty") }}Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
{{ Cssxref(":enabled") }}Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.
{{ Cssxref(":first") }}В постраничном носителе соответствует первой странице.
{{ Cssxref(":first-child") }}Соответствует элементу, который является первым среди других дочерних элементов одного предка.
{{ Cssxref(":first-of-type") }}Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.
{{ Cssxref(":focus") }}Соответствует элементу, имеющему фокус.
{{ Cssxref(":focus-visible")}}Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.
{{ Cssxref(":focus-within") }}Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.
{{ Cssxref(":future") }}Соответствует элементам после текущего элемента.
{{ Cssxref(":hover") }}Соответствует элементу, на который наведён курсор мыши.
{{ Cssxref(":indeterminate") }}Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно checkboxes.
{{ Cssxref(":in-range") }}Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.
{{ Cssxref(":invalid") }}Соответствует элементу, например <input>, в недопустимом состоянии.
{{ Cssxref(":lang") }}Соответствует элементу, основанному на языке (значение атрибута HTML lang).
{{ Cssxref(":last-child") }}Соответствует элементу, который является последним среди других дочерних элементов одного предка.
{{ Cssxref(":last-of-type") }}Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.
{{ Cssxref(":left") }}В постраничном носителе соответствует левосторонним страницам.
{{ Cssxref(":link")}}Соответствует непосещавшимся ссылкам.
{{ Cssxref(":local-link")}}Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.
{{ Cssxref(":is", ":is()")}}Соответствует любому селектору из полученного списка селекторов.
{{ Cssxref(":not") }}Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.
{{ Cssxref(":nth-child") }}Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-last-child") }}Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":nth-last-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":only-child") }}Соответствует элементу, являющемуся единственным дочерним для своего предка.
{{ Cssxref(":only-of-type") }}Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.
{{ Cssxref(":optional") }}Соответствует необязательным элементам формы.
{{ Cssxref(":out-of-range") }}Соответствует элементу с диапазоном, когда его значение находится вне диапазона.
{{ Cssxref(":past") }}Соответствует элементам перед текущим элементом.
{{ Cssxref(":placeholder-shown") }}Соответствует элементу input, который показывает текст-заполнитель.
{{ Cssxref(":playing") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.
{{ Cssxref(":paused") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.
{{ Cssxref(":read-only") }}Соответствует элементу, который не может быть изменён пользователем.
{{ Cssxref(":read-write") }}Соответствует элементу, который может быть изменён пользователем.
{{ Cssxref(":required") }}Соответствует обязательным элементам формы.
{{ Cssxref(":right") }}В постраничном носителе соответствует правосторонним страницам.
{{ Cssxref(":root") }}Соответствует элементу, который является корнем документа.
{{ Cssxref(":scope") }}Соответствует любому элементу, который является элементом области видимости.
{{ Cssxref(":valid") }}Соответствует элементу, такому как <input>, в допустимом состоянии.
{{ Cssxref(":target") }}Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment).
{{ Cssxref(":visited") }}Соответствует посещённым ссылкам.
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторОписание
{{ Cssxref("::after") }}Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.
{{ Cssxref("::before") }}Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.
{{ Cssxref("::first-letter") }}Соответствует первой букве элемента.
{{ Cssxref("::first-line") }}Соответствует первой строке содержимого порождающего элемента.
{{ Cssxref("::grammar-error") }} -

Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.

-
{{ Cssxref("::marker") }}Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.
-

{{ Cssxref("::selection") }}

- 		Соответствует части документа, которая была выбрана.
{{ Cssxref("::spelling-error") }} -

Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

-
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" deleted file mode 100644 index 875899ab41..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: 'Селекторы типа, класса и ID' -slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors -tags: - - CSS - - id - - Класс - - Начинающий - - Обучение - - Селекторы -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
- -

Селекторы типа

- -

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

- -

Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

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

- -

Универсальный селектор обозначается звездочкой (*). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

- -

Использование универсального селектора для облегчения чтения ваших селекторов

- -

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдо-класс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдо-классах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 

- -
article :first-child {
-  font-weight: bold;
-}
- -

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .

- -

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдо-класс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:

- -
article *:first-child {
-  font-weight: bold;
-}
- -

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

- -

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

- -

Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Нацеливание классов на отдельные элементы

- -

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.

- -

Нацеливание на элемент, к которому применено более одного класса

- -

Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.

- -

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.

- -

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Селекторы ID

- -

Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id. Можно выбрать элемент, которому присвоен  id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

-
- -
-

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

-
- -

В следующей статье

- -

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки (The box model)
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" deleted file mode 100644 index b8f36063c2..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 'Проверьте ваши навыки: Селекторы' -slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи -tags: - - CSS - - Начинающий -translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks ---- -
{{LearnSidebar}}
- -
- -

Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.

- -
-

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
-
- Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел Оценка или дальнейшая помощь внизу этой страницы.

-
- -

Selectors One

- -

Without changing the HTML, use CSS to do the following things:

- - - -

Text with the CSS applied for the solution to task 1.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Two

- -

Without changing the HTML, make the following changes to the look of the content in this example:

- - - -

Text with the CSS applied for the solution to task 2.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Three

- -

In this example, try making the following changes without adding to the HTML.

- - - -

Text with the CSS applied for the solution to task 3.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Four

- -

In this task try the following:

- - - -

Text with the CSS applied for the solution to task 4.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Five

- -

In this final task add CSS using attribute selectors to do the following:

- - - -

Four links with different color borders.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Assessment or further help

- -

You can practice these examples in the Interactive Editors mentioned above.

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Selectors skill test 1".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
diff --git a/files/ru/learn/css/css_layout/multicol_skills/index.html b/files/ru/learn/css/css_layout/multicol_skills/index.html new file mode 100644 index 0000000000..c549f1210b --- /dev/null +++ b/files/ru/learn/css/css_layout/multicol_skills/index.html @@ -0,0 +1,78 @@ +--- +title: 'Проверь свои навыки: Multicol' +slug: Learn/CSS/CSS_layout/Навыки_Multicol +translation_of: Learn/CSS/CSS_layout/Multicol_skills +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке Макет с несколькими столбцами. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.

+ +
+

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, or Glitch чтобы проработать задания.

+ +

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы.

+
+ +

Multicol Раз

+ +

В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.

+ +

Three columns of text

+ +

Попробуйте обновить живой пример ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Multicol Два

+ +

Создайте столбцы с минимальной шириной 200px.

+ +

Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.

+ +

Three columns of text with a grey rule between them.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Multicol Три

+ +

Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке

+ +

Three columns of text with a heading and subheading spanning all three in the middle.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

+
+ +

Оценка и дальнейшая помощь

+ +

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

+ +
    +
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как  CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. +
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".
      • +
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • +
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • +
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..9ba48bbbef --- /dev/null +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,468 @@ +--- +title: Макет с несколькими столбцами +slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
+ +

Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.

+ + + + + + + + + + + + +
Необходимые знания: +

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)

+
Задача: +

Изучить как создавать макет с неколькими столбцами на веб-страницах, такой как вы модете найти в газете.

+
+ +

Базовый пример

+ +

Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.

+ +

Наша отправная точка содержит немного очень простого HTML; обертака с классом container внутри которого имеется заголовок и несколько параграфов.

+ +

{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:

+ +
.container {
+  column-count: 3;
+}
+
+ +

Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.

+ +
+ + +
<div class="container">
+  <h1>Simple multicol example</h1>
+
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+
+ +
.container {
+  column-count: 3;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

+ +

Измените ваш CSS чтобы использовать следующий column-width:

+ +
.container {
+  column-width: 200px;
+}
+
+ +

Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.

+ +
+ + +
.container {
+  column-width: 200px;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

+ +

Стилизация столбцов

+ +

Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:

+ + + +

Используя ваш пример выше, измените размер отступа добавлением свойства column-gap:

+ +
.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+ +

Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и border.

+ +
.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}
+ +

Попробуйте добавить линейки других стилей и цветов.

+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

+ +

Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.

+ +

Свойств column-span

+ +

Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение all.

+ +
+

Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all.

+
+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}

+ +

Столбцы и фрагментация

+ +

Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведет себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.

+ +

Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.

+ +
+ + +
<div class="container">
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.</p>
+    </div>
+
+</div>
+
+ +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

+ +

Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением avoid к правилам .card. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.

+ +

В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.

+ +
.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

Перезагрузите страницу и ваши блоки должны остаться в целости.

+ +
+ + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

+ +

Проверь свои навыки!

+ +

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.

+ +

Заключение

+ +

Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.

+ +

См. также

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..d936c240c5 --- /dev/null +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,96 @@ +--- +title: Базовый поток +slug: Learn/CSS/CSS_layout/Нормальный_поток +tags: + - float + - grid +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.

+ + + + + + + + + + + + +
Что нужно знать прежде чем изучать:Основы HTML (изучите Введение в HTML), и понимания как работает CSS (изучите Введение в CSS.)
Цель:Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.
+ +

Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.

+ +

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

+ +

Как элементы располагаются по умолчанию?

+ +

Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.

+ +

По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже,  display: inline-block;, который смешивает характеристики обоих.).

+ +

Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.

+ +

Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).

+ +

Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это звётся схлопывание полей (margin collapsing), и мы рассматривали это ранее.

+ +

Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:

+ +
+
<h1>Базовый поток документа</h1>
+
+<p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p>
+
+<p>По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.</p>
+
+<p>Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих</p>
+
+<p>Встроенные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Встроенные элементы, что не влезают <span>переходять на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Заключение

+ +

Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/css_layout/position_skills/index.html b/files/ru/learn/css/css_layout/position_skills/index.html new file mode 100644 index 0000000000..f63a3a3a94 --- /dev/null +++ b/files/ru/learn/css/css_layout/position_skills/index.html @@ -0,0 +1,64 @@ +--- +title: 'Проверьте свои навыки: позиционирование' +slug: Learn/CSS/CSS_layout/Навыки_позиционирования +translation_of: Learn/CSS/CSS_layout/Position_skills +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.

+ +
+

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

+ +

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы

+
+ +

Позиционирование Раз

+ +

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

+ +

The green box is at the top right of a container with a grey border.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}

+ +

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

+ +
+

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе

+
+ +

Позиционирование Два

+ +

В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.

+ +

The content is scrolled but the sidebar has stayed in place.

+ +

Попробуйте обновить живой код ниже для воссоздания законченного примера:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}

+ +
+

ля оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редактор

+
+ +

Оценка и дальнейшая помощь

+ +

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

+ +
    +
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. +
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
      • +
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • +
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • +
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..978b4e43dc --- /dev/null +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,328 @@ +--- +title: Отзывчивый дизайн +slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивого) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

+ + + + + + + + + + + + +
Необходимые знания: +

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS и Устройство CSS.)

+
Задача: +

Понять базовые концепции и историю отзывчивого дизайна.

+
+ +

Исторические макеты сайтов

+ +

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

+ + + +

Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.

+ +
A layout with two columns squashed into a mobile size viewport. +
+
+ +
+

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

+
+ +

Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.

+ +
A layout with a horizontal scrollbar in a mobile viewport. +
+
+ +
+

Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.

+
+ +
+

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

+
+ +

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

+ +

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

+ +

Гибкий макет до отзывчивого дизайна

+ +

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

+ +

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

+ +

Отзывчивый дизайн

+ +

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трех методов в сочетании.

+ +
    +
  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
    2. +
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
    3. +
  3. Третьим ключевым компонентом был media query. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
    4. +
+ +

Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и media query, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

+ +

Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.

+ +

Media Queries (Медиа-запросы)

+ +

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

+ +

Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

+ +

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

+ +

Узнать больше о Media Query можно в документации MDN.

+ +

Гибкие сетки

+ +

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.

+ +

Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.

+ +

В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

+ +
target / context = result 
+
+ +

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнетесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.

+ +

Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:

+ +
A mobile view of the layout with boxes stacked on top of each other vertically. +
+
+ +

На более широких экранах они премещаются в два столбца:

+ +
A desktop view of a layout with two columns. +
+
+ +
+

Примечание: Вы можете найти живой пример и исходный код этого примера на GitHub.

+
+ +

Современные технологии макетов

+ +

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.

+ +

Multicol

+ +

Самый старый из этих методов — это multicol, когда вы задаете column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Если вместо этого вы зададите column-width, то вы определите минимальную ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.

+ +

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: пример, исходный код.

+
+ +

CSS grid

+ +

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Примечание: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

+
+ +

Отзывчивые изображения

+ +

Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдете следующий CSS:

+ +
img {
+  max-width: 100%;
+} 
+
+ +

Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.

+ +

Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

+ +

Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.

+ +

Вы можете найти подробное руководство по отзывчивым изображениям в разделе ищучения HTML на MDN.

+ +

Отзывчивая типография

+ +

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.

+ +

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.

+ +

В мобильных версиях заголовок меньше:

+ +
A stacked layout with a small heading size. +
+
+ +

На компьютерах, однако, мы видим больший размер заголовка:

+ +
A two column layout with a large heading. +
+
+ +
+

Примечание: смотрите этот пример в действии: пример, исходный код.

+
+ +

Такой подход к типографии показывает, что вам не надо ограничивать media queries только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.

+ +

Using viewport units for responsive typography

+ +

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

+ +

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

+ +
+

See an example of this in action: example, source code.

+
+ +

The viewport meta tag

+ +

If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <head> of the document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

+ +

Why is this needed? Because mobile browsers tend to lie about their viewport width.

+ +

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

+ +

The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple's default width=960px with the actual width of the device, so your media queries will work as intended.

+ +

So you should always include the above line of HTML in the head of your documents.

+ +

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

+ + + +

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

+ +
+

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

+
+ +

Summary

+ +

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

+ +

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git "a/files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" "b/files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" deleted file mode 100644 index 9ba48bbbef..0000000000 --- "a/files/ru/learn/css/css_layout/\320\274\320\260\320\272\320\265\321\202_\321\201_\320\275\320\265\321\201\320\272\320\276\320\273\321\214\320\272\320\270\320\274\320\270_\321\201\321\202\320\276\320\273\320\261\321\206\320\260\320\274\320\270/index.html" +++ /dev/null @@ -1,468 +0,0 @@ ---- -title: Макет с несколькими столбцами -slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами -translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
- -

Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.

- - - - - - - - - - - - -
Необходимые знания: -

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)

-
Задача: -

Изучить как создавать макет с неколькими столбцами на веб-страницах, такой как вы модете найти в газете.

-
- -

Базовый пример

- -

Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.

- -

Наша отправная точка содержит немного очень простого HTML; обертака с классом container внутри которого имеется заголовок и несколько параграфов.

- -

{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:

- -
.container {
-  column-count: 3;
-}
-
- -

Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.

- -
- - -
<div class="container">
-  <h1>Simple multicol example</h1>
-
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
-</div>
-
- -
.container {
-  column-count: 3;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

- -

Измените ваш CSS чтобы использовать следующий column-width:

- -
.container {
-  column-width: 200px;
-}
-
- -

Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.

- -
- - -
.container {
-  column-width: 200px;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

- -

Стилизация столбцов

- -

Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:

- - - -

Используя ваш пример выше, измените размер отступа добавлением свойства column-gap:

- -
.container {
-  column-width: 200px;
-  column-gap: 20px;
-}
- -

Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и border.

- -
.container {
-  column-count: 3;
-  column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
-}
- -

Попробуйте добавить линейки других стилей и цветов.

- -
- -
- -

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

- -

Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.

- -

Свойств column-span

- -

Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение all.

- -
-

Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all.

-
- -
- -
- -

{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}

- -

Столбцы и фрагментация

- -

Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведет себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.

- -

Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.

- -
- - -
<div class="container">
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-</div>
-
- -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

- -

Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением avoid к правилам .card. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.

- -

В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.

- -
.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

Перезагрузите страницу и ваши блоки должны остаться в целости.

- -
- - -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

- -

Проверь свои навыки!

- -

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.

- -

Заключение

- -

Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.

- -

См. также

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" "b/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" deleted file mode 100644 index c549f1210b..0000000000 --- "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_multicol/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'Проверь свои навыки: Multicol' -slug: Learn/CSS/CSS_layout/Навыки_Multicol -translation_of: Learn/CSS/CSS_layout/Multicol_skills ---- -
{{LearnSidebar}}
- -
- -

Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке Макет с несколькими столбцами. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.

- -
-

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, or Glitch чтобы проработать задания.

- -

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы.

-
- -

Multicol Раз

- -

В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.

- -

Three columns of text

- -

Попробуйте обновить живой пример ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

-
- -

Multicol Два

- -

Создайте столбцы с минимальной шириной 200px.

- -

Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.

- -

Three columns of text with a grey rule between them.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

-
- -

Multicol Три

- -

Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке

- -

Three columns of text with a heading and subheading spanning all three in the middle.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе.

-
- -

Оценка и дальнейшая помощь

- -

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

- -

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

- -
    -
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как  CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. -
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: -
      -
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".
      • -
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • -
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • -
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • -
    -
    3. -
diff --git "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" "b/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" deleted file mode 100644 index f63a3a3a94..0000000000 --- "a/files/ru/learn/css/css_layout/\320\275\320\260\320\262\321\213\320\272\320\270_\320\277\320\276\320\267\320\270\321\206\320\270\320\276\320\275\320\270\321\200\320\276\320\262\320\260\320\275\320\270\321\217/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'Проверьте свои навыки: позиционирование' -slug: Learn/CSS/CSS_layout/Навыки_позиционирования -translation_of: Learn/CSS/CSS_layout/Position_skills ---- -
{{LearnSidebar}}
- -
- -

Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.

- -
-

Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.

- -

Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы

-
- -

Позиционирование Раз

- -

В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.

- -

The green box is at the top right of a container with a grey border.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}

- -

В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?

- -
-

Для оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редакторе

-
- -

Позиционирование Два

- -

В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.

- -

The content is scrolled but the sidebar has stayed in place.

- -

Попробуйте обновить живой код ниже для воссоздания законченного примера:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}

- -
-

ля оценки или дальнейшей работы, загрузите отправную точку этого задания чтобы работать в вашем собственном или онлайн редактор

-
- -

Оценка и дальнейшая помощь

- -

Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.

- -

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

- -
    -
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
    2. -
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: -
      -
    • Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
      • -
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • -
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • -
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • -
    -
    3. -
diff --git "a/files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" "b/files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" deleted file mode 100644 index d936c240c5..0000000000 --- "a/files/ru/learn/css/css_layout/\320\275\320\276\321\200\320\274\320\260\320\273\321\214\320\275\321\213\320\271_\320\277\320\276\321\202\320\276\320\272/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Базовый поток -slug: Learn/CSS/CSS_layout/Нормальный_поток -tags: - - float - - grid -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.

- - - - - - - - - - - - -
Что нужно знать прежде чем изучать:Основы HTML (изучите Введение в HTML), и понимания как работает CSS (изучите Введение в CSS.)
Цель:Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.
- -

Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.

- -

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

- -

Как элементы располагаются по умолчанию?

- -

Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.

- -

По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже,  display: inline-block;, который смешивает характеристики обоих.).

- -

Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.

- -

Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).

- -

Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это звётся схлопывание полей (margin collapsing), и мы рассматривали это ранее.

- -

Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:

- -
-
<h1>Базовый поток документа</h1>
-
-<p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p>
-
-<p>По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.</p>
-
-<p>Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих</p>
-
-<p>Встроенные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Встроенные элементы, что не влезают <span>переходять на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Заключение

- -

Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" "b/files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" deleted file mode 100644 index 978b4e43dc..0000000000 --- "a/files/ru/learn/css/css_layout/\320\276\321\202\320\267\321\213\320\262\321\207\320\270\320\262\321\213\320\271_\320\264\320\270\320\267\320\260\320\271\320\275/index.html" +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: Отзывчивый дизайн -slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивого) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

- - - - - - - - - - - - -
Необходимые знания: -

Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS и Устройство CSS.)

-
Задача: -

Понять базовые концепции и историю отзывчивого дизайна.

-
- -

Исторические макеты сайтов

- -

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

- - - -

Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.

- -
A layout with two columns squashed into a mobile size viewport. -
-
- -
-

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

-
- -

Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.

- -
A layout with a horizontal scrollbar in a mobile viewport. -
-
- -
-

Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.

-
- -
-

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

-
- -

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

- -

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

- -

Гибкий макет до отзывчивого дизайна

- -

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

- -

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

- -

Отзывчивый дизайн

- -

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трех методов в сочетании.

- -
    -
  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
    2. -
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
    3. -
  3. Третьим ключевым компонентом был media query. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
    4. -
- -

Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и media query, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

- -

Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.

- -

Media Queries (Медиа-запросы)

- -

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

- -

Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

- -

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

- -

Узнать больше о Media Query можно в документации MDN.

- -

Гибкие сетки

- -

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.

- -

Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.

- -

В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

- -
target / context = result 
-
- -

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнетесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.

- -

Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:

- -
A mobile view of the layout with boxes stacked on top of each other vertically. -
-
- -

На более широких экранах они премещаются в два столбца:

- -
A desktop view of a layout with two columns. -
-
- -
-

Примечание: Вы можете найти живой пример и исходный код этого примера на GitHub.

-
- -

Современные технологии макетов

- -

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.

- -

Multicol

- -

Самый старый из этих методов — это multicol, когда вы задаете column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

- -
.container {
-  column-count: 3;
-} 
-
- -

Если вместо этого вы зададите column-width, то вы определите минимальную ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.

- -

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: пример, исходный код.

-
- -

CSS grid

- -

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Примечание: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

-
- -

Отзывчивые изображения

- -

Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдете следующий CSS:

- -
img {
-  max-width: 100%;
-} 
-
- -

Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.

- -

Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

- -

Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.

- -

Вы можете найти подробное руководство по отзывчивым изображениям в разделе ищучения HTML на MDN.

- -

Отзывчивая типография

- -

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.

- -

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.

- -

В мобильных версиях заголовок меньше:

- -
A stacked layout with a small heading size. -
-
- -

На компьютерах, однако, мы видим больший размер заголовка:

- -
A two column layout with a large heading. -
-
- -
-

Примечание: смотрите этот пример в действии: пример, исходный код.

-
- -

Такой подход к типографии показывает, что вам не надо ограничивать media queries только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.

- -

Using viewport units for responsive typography

- -

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

- -
h1 {
-  font-size: 6vw;
-}
- -

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

- -

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

- -
-

See an example of this in action: example, source code.

-
- -

The viewport meta tag

- -

If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <head> of the document.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

- -

Why is this needed? Because mobile browsers tend to lie about their viewport width.

- -

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

- -

The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple's default width=960px with the actual width of the device, so your media queries will work as intended.

- -

So you should always include the above line of HTML in the head of your documents.

- -

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

- - - -

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

- -
-

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

-
- -

Summary

- -

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

- -

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/ru/learn/css/css_properties/index.html b/files/ru/learn/css/css_properties/index.html deleted file mode 100644 index a6d9e5d116..0000000000 --- a/files/ru/learn/css/css_properties/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: 'CSS properties: what they are and how to use them' -slug: Learn/CSS/CSS_properties -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Learn/CSS/CSS_properties ---- -
-

{{Glossary("CSS")}} определяет как должна выглядеть вебстраница. Он использует предопределенные правила вместе с селекторами и свойствами для применения стилей к элементам HTML или группам элементов.

-
- - - - - - - - - - - - -
Prerequisites:Basics of {{Glossary("HTML")}}, HTML elements, and how to link HTML documents to CSS stylesheets.
Objective:Learn about different CSS selectors and properties enough to style a simple webpage.
- -

Summary

- -

Разделение содержимого и стиля делает Веб разработку намного быстрее и проще. Когда вы определяете только стуктуру документа в вашем HTML файле и храните всю информацию о стиле в отдельном файле (называемом stylesheet), вы можете обновлять стили нескольких документов одновременно (а так же экономить ресурсы компьютера).

- -

CSS syntax consists of easy-to-use, intuitive keywords.

- -
p {
-   font-family: "Times New Roman", georgia, sans-serif;
-   font-size: 24px;
-}
- -

In the example above, p is a selector that applies styles to all the {{HTMLElement("p")}} elements at once. The CSS properties font-family and font-size are enclosed within curly braces and the corresponding values, right after the colon, determine the styles.

- -

There are more than 250 properties you can apply to your document. From text to layout, (almost) anything is possible.

- -

Active Learning

- -

There is no active learning available yet. Please, consider contributing.

- -

Deeper dive

- -

If properties are fairly simple to use, selectors are another story. Okay, they aren't that hard, and mastering them unleashes the full potential of CSS. In the next examples, we will introduce the most common selectors.

- -

A CSS rule consists of selectors associated with properties. Selectors specify which elements will receive the properties laid down in the rule. Multiple rules can apply to the same element; the CSS cascade (which we'll discuss later on) determines which rule ends up taking effect in the case of conflicts. For now, just remember that the rule with the most specific selector overrides the rules with more generic selectors.

- -

The element selector

- -

Element selectors select HTML elements by element names only. Moreover, like all CSS selectors, you can apply a common set of properties to several elements at once.

- -

For our first example, let's assume the following HTML code fragment:

- -
<h1>I'm an example</h1>
-<p>In this example, I'm a paragraph</p>
-<p>And I'm another paragraph</p>
-
- -

In the following CSS rule, the element selector p applies the given styles simultaneously to all the {{HTMLElement("p")}} elements of our HTML document, preventing extensive rewriting. We are using the {{cssxref("font-family")}} property (which defines the font in which text appears) and the {{cssxref("font-size")}} (which defines text size).

- -
p {
-  font-family: "Helvetica", Arial, sans-serif;
-  font-size  : 12px;
-}
- -

The next CSS rule only applies to {{HTMLElement("h1")}} elements. We are using the {{cssxref("font-size")}} property to make our title twice the size of the body text, and the {{cssxref("font-weight")}} property to make the title bold.

- -
h1 {
-  font-size  : 24px;
-  font-weight: bold;
-}
- -

The following CSS rule applies the requisite styles to both {{HTMLElement("h1")}} and {{HTMLElement("p")}} elements, potentially removing even more duplication. (This use is called "group selector" or "chain selector". Notice the comma separating the selectors). Here we are using the {{cssxref("color")}} property to specify the same text color for both headings and paragraphs.

- -
h1, p {
-  color: darkmagenta;
-}
- -

Here is the result of all this code:

- -

{{ EmbedLiveSample('The_element_selector') }}

- -

The id selector

- -

The id attribute of a particular HTML element uniquely identifies that element. Hence, an id selector is used only when a set of style rules applies to a single element.

- -

For our next example, let's assume the following HTML code fragment:

- -
<p id="hello">Hello world!</p>
- -

The following CSS rule applies only to that unique identified element. To make a selector into an id selector, you must put a hash character (#) in front of the id name. We are using three properties: {{cssxref("text-align")}} to center the text within the paragraph {{cssxref("border")}} to add a thin line around the paragraph, and {{cssxref("padding")}} to add some extra inner-margin between the text and the border.

- -
#hello {
-  text-align: center;
-  border    : 1px solid black;
-  padding   : 8px;
-}
- -

And the result is the following:

- -

{{ EmbedLiveSample('The_id_selector') }}

- -

The class selector

- -

Within HTML, the class attribute lets you apply multiple identifiers to HTML elements. Those identifiers can be used with CSS to match groups of elements regardless of element name.

- -

For our next example, let's assume the following HTML code fragment:

- -
<h1 class="hello">Hey there!</h1>
-<p class="hello bye">Let's hang out together!</p>
-<p class="bye">And walk over the mountain</p>
-
- -

Let's apply a CSS rule for all elements with the class hello. To make the selector into a class selector, put a period/full stop before the class name. We use the {{cssxref("font-style")}} property to italicize the text.

- -
.hello {
-  font-style: italic;
-}
- -

And another one for all elements with the class bye. Here we are using the {{cssxref("text-decoration")}} property to draw a line through the text.

- -
.bye {
-  text-decoration: line-through;
-}
- -

Here's what happened:

- -

{{ EmbedLiveSample('The_class_selector') }}

- -

Next step

- -

So we've gone over the basics to get started with CSS. You can learn more about text styling or start exploring our CSS Tutorials right away.

diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..d2c60edcfb --- /dev/null +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,528 @@ +--- +title: Как структурирован CSS +slug: Learn/CSS/First_steps/Как_структурирован_CSS +tags: + - Beginner + - CSS + - HTML + - Learn + - Комментарии + - Обучение + - Свойство + - Структура + - значения + - отступ + - селектор + - сокращение +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача:Подробно узнать основные синтаксические структуры CSS.
+ +

Применение CSS к вашему HTML

+ +

Первое, что мы рассмотрим, это три метода применения CSS к документу.

+ +

Внешняя таблица стилей

+ +

В статье ​Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространенный и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.

+ +

Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Привет!</h1>
+    <p>Это мой первый опыт в CSS</p>
+  </body>
+</html>
+ +

Файл CSS может выглядеть следующим образом:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

Атрибут href элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.

+ +

В приведенном выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

+ +
<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Файл — внутри под-директории styles внутри под-под-директории general и так далее -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Вверх на один уровень в директории, затем направиться в под-директорию styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Внутренняя таблица стилей

+ +

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.

+ +

Таким образом, HTML будет выглядеть вот так:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Привет!</h1>
+    <p>Это мой первый опыт в CSS</p>
+  </body>
+</html>
+ +

Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.

+ +

Встроенные стили

+ +

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Привет!</h1>
+    <p style="color:red;">Это мой первый опыт в CSS</p>
+  </body>
+</html>
+ +

Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.

+ +

Есть несколько мест, где встроенные стили являются более распространенными или даже желательными. Вам, возможно, придется прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

+ +

Игра с CSS в этой статье

+ +

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

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Пишите сюда свой код</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Пишите сюда свой код */
+
+p {
+  color: red;
+}
+ +

Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

+ +

Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

+ +

Читайте дальше и получайте удовольствие!

+ +

Селекторы

+ +

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

+ +

Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:

+ +
h1  /* это селектор тегов */
+a:link  /* это селектор ссылок */
+.manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
+#onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
+*  /* уневерсальный селектор */
+.box p  /* селектор потомков */
+.box p:first-child  /* селектор потомков + селектор псевдоклассов */
+h1, h2, .intro  /* пречисление селекторов */
+
+ +
+

Примечание: Вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

+
+ +

Спецификация

+ +

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

+ +
<p class="special">Какого же я цвета?</p>
+ +

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объвление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

+ +

Попрактикуйтесь сами — добавьте два правила для параграфа p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

+ +

Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.

+ +

Свойства и значения

+ +

Если говорить в общем, CSS строится на двух его составляющих:

+ +
+
Свойства 
+
Определяют, какую характеристику вы желаете изменить (например, font-size, width, background-color).
+
+ +
+
Значения 
+
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
+
+ +

На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.

+ +

A declaration highlighted in the CSS

+ +

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

+ +

A highlighted declaration block

+ +

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1, другое для селектора p. Правило для h1 выделено.

+ +

The rule for h1 highlighted

+ +

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).

+ +

Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:

+ + + +
+

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

+
+ +
+

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.

+
+ +

Функции

+ +

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

+ +
+
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

В результате получим это:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

+ +

В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

Результат этого кода будет:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

+ + + +

@правила

+ +

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

+ +
@import 'styles2.css';
+ +

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиа-запросы, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

+ +

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

+ +

Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.

+ +

Стенография

+ +

Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются стенографическими свойствами, — они позволяют установать несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

+ +

К примеру, это строка (комментарий не в счёт):

+ +
/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
+   в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
+   значения добавляются в порядке верх(низ)–право–лево.
+   В двузначных стенограммах значения добавляются
+   от верхнего/нижнего края к левому/правому краю */
+padding: 10px 15px 15px 5px;
+ +

делает то же самое, что и эти четыре, вместе взятые:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+
+ +

или эти:

+ +
padding-block-start: 10px
+padding-inline-end: 15px;
+padding-block-end: 15px;
+padding-inline-start: 5px;
+ +

в то время как строка:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

делает то же, что и эти строки:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

+ +

Добавьте вышеупоминутые объвления в ваш код. Попробуйте изменить значения и посмотреть на результат.

+ +
+

Осторожно: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.

+
+ +

Комментарии

+ +

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

+ +

Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

+ +
/* Работаю над основными элементами */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Позволяет определить размер шрифта. На широких экранах
+     больше размер шрифта для удобства чтения */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Работаю над элементами, вложенными в DOM  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p{
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

+ +

Отступы

+ +

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

+ +

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

+ +
body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; background-style: none}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

+ +

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

А такие объявления не действительны:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

+ +

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

+ +

Что дальше?

+ +

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
  5. Использование ваших новых знаний
    6. +
diff --git a/files/ru/learn/css/first_steps/what_is_css/index.html b/files/ru/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..6b5bdf8924 --- /dev/null +++ b/files/ru/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,130 @@ +--- +title: Что такое CSS? +slug: Learn/CSS/First_steps/Что_такое_CSS +tags: + - Beginner + - CSS + - Learn + - Введение в CSS + - Начинающий + - Обучение + - Синтаксис + - Спецификации +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}
+ +

{{Glossary("CSS")}} (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

+ + + + + + + + + + + + +
Требуемые знания:Базовые компьютерные знания, установка базового програмного обеспечения, базовые знания работа с файлами и базовые знания HTML  (Введение в HTML).
Задача:Узнать, что такое CSS.
+ +

В модуле Основы HTML мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчеркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.

+ +

+ +

Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, Вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся Вам дизайн.

+ +

Для чего нужен CSS?

+ +

Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.

+ +

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространенный язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.

+ +

Представление документа пользователю означает преобразование его в форму, используемую Вашей аудиторией. {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

+ +
+

Примечание: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

+
+ +

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

+ +

Синтаксис CSS

+ +

CSS — это язык на основе правил: Вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на Вашей веб-странице. Например:

+ +

«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».

+ +

В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).

+ +

Затем у нас есть набор фигурных скобок { }. Внутри них будет один или несколько объявлений, которые принимают форму пары свойства и его значения. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.

+ +

Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color, которое может принимать различные цветовые значения. У нас также есть свойство font-size. Это свойство может принимать различные значения размера, как и свойства.

+ +

Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Вы обнаружите, что Вы быстро изучаете некоторые значения, тогда как другие Вам нужно искать. Страницы отдельных свойств в MDN дают Вам быстрый способ поиска свойств и их значений, когда Вы забыли или хотите узнать, что ещё Вы можете использовать в качестве значения.

+ +
+

Примечание: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, Вы должны привыкнуть к поиску "MDN css-feature-name" в Вашем бразере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

+
+ +

CSS-модули

+ +

Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN в модуле Свойства фона и границ, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).

+ +

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

+ +

Для конкретного примера давайте вернемся к модулю Свойства фона и границ — Вы можете подумать, что это логично для свойств background-color и border-color, которые будут определены в этом модуле. И Вы правы.

+ +

Технические характеристики CSS

+ +

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.

+ +

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членами организации.

+ +

Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!

+ +

Как новичок в CSS, вполне вероятно, что Вы найдете CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.

+ +

Поддержка браузера

+ +

После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке Как работает CSS. Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN Вы можете видеть статус интересующего Вас свойства, чтобы Вы могли определить, сможете ли Вы использовать её на веб-сайте.

+ +

Ниже приведена диаграмма данных для CSS свойства font-family:

+ +

{{Compat("css.properties.font-family")}}

+ +

Что дальше?

+ +

Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к Началу работы с CSS, где Вы можете начать писать CSS самостоятельно.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

В этом модуле

+ +
    +
  1. Что такое CSS?
    2. +
  2. Начало работы с CSS
    3. +
  3. Как структурирован CSS
    4. +
  4. Как работает CSS
    5. +
  5. Использование ваших новых знаний
    6. +
diff --git "a/files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" "b/files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" deleted file mode 100644 index d2c60edcfb..0000000000 --- "a/files/ru/learn/css/first_steps/\320\272\320\260\320\272_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\321\200\320\276\320\262\320\260\320\275_css/index.html" +++ /dev/null @@ -1,528 +0,0 @@ ---- -title: Как структурирован CSS -slug: Learn/CSS/First_steps/Как_структурирован_CSS -tags: - - Beginner - - CSS - - HTML - - Learn - - Комментарии - - Обучение - - Свойство - - Структура - - значения - - отступ - - селектор - - сокращение -translation_of: Learn/CSS/First_steps/How_CSS_is_structured ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
- -

Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

- - - - - - - - - - - - -
Необходимые знания:Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача:Подробно узнать основные синтаксические структуры CSS.
- -

Применение CSS к вашему HTML

- -

Первое, что мы рассмотрим, это три метода применения CSS к документу.

- -

Внешняя таблица стилей

- -

В статье ​Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространенный и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.

- -

Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Я пробую писать CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>Привет!</h1>
-    <p>Это мой первый опыт в CSS</p>
-  </body>
-</html>
- -

Файл CSS может выглядеть следующим образом:

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

Атрибут href элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.

- -

В приведенном выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

- -
<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- Файл — внутри под-директории styles внутри под-под-директории general и так далее -->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- Вверх на один уровень в директории, затем направиться в под-директорию styles -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Внутренняя таблица стилей

- -

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.

- -

Таким образом, HTML будет выглядеть вот так:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Я пробую писать CSS</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Привет!</h1>
-    <p>Это мой первый опыт в CSS</p>
-  </body>
-</html>
- -

Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.

- -

Встроенные стили

- -

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Я пробую писать CSS</title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Привет!</h1>
-    <p style="color:red;">Это мой первый опыт в CSS</p>
-  </body>
-</html>
- -

Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.

- -

Есть несколько мест, где встроенные стили являются более распространенными или даже желательными. Вам, возможно, придется прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

- -

Игра с CSS в этой статье

- -

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

- -

index.html:

- -
<!DOCTYPE html>
-<html lang="ru">
-  <head>
-    <meta charset="utf-8">
-    <title>Я пробую писать CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Пишите сюда свой код</p>
-
-  </body>
-</html>
- -

styles.css:

- -
/* Пишите сюда свой код */
-
-p {
-  color: red;
-}
- -

Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

- -

Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

- -

Читайте дальше и получайте удовольствие!

- -

Селекторы

- -

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

- -

Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:

- -
h1  /* это селектор тегов */
-a:link  /* это селектор ссылок */
-.manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
-#onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
-*  /* уневерсальный селектор */
-.box p  /* селектор потомков */
-.box p:first-child  /* селектор потомков + селектор псевдоклассов */
-h1, h2, .intro  /* пречисление селекторов */
-
- -
-

Примечание: Вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

-
- -

Спецификация

- -

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

- -
<p class="special">Какого же я цвета?</p>
- -

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объвление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

- -

Попрактикуйтесь сами — добавьте два правила для параграфа p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

- -

Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.

- -

Свойства и значения

- -

Если говорить в общем, CSS строится на двух его составляющих:

- -
-
Свойства 
-
Определяют, какую характеристику вы желаете изменить (например, font-size, width, background-color).
-
- -
-
Значения 
-
Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
-
- -

На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.

- -

A declaration highlighted in the CSS

- -

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

- -

A highlighted declaration block

- -

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1, другое для селектора p. Правило для h1 выделено.

- -

The rule for h1 highlighted

- -

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).

- -

Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:

- - - -
-

Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

-
- -
-

Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.

-
- -

Функции

- -

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

- -
-
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
-
- -

В результате получим это:

- -

{{EmbedLiveSample('calc_example', '100%', 200)}}

- -

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

- -

В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} rotate().

- -
-
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
-
- -

Результат этого кода будет:

- -

{{EmbedLiveSample('transform_example', '100%', 200)}}

- -

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

- - - -

@правила

- -

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

- -
@import 'styles2.css';
- -

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиа-запросы, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

- -

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

- -
body {
-  background-color: pink;
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

- -

Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.

- -

Стенография

- -

Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются стенографическими свойствами, — они позволяют установать несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

- -

К примеру, это строка (комментарий не в счёт):

- -
/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
-   в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
-   значения добавляются в порядке верх(низ)–право–лево.
-   В двузначных стенограммах значения добавляются
-   от верхнего/нижнего края к левому/правому краю */
-padding: 10px 15px 15px 5px;
- -

делает то же самое, что и эти четыре, вместе взятые:

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
-
- -

или эти:

- -
padding-block-start: 10px
-padding-inline-end: 15px;
-padding-block-end: 15px;
-padding-inline-start: 5px;
- -

в то время как строка:

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

делает то же, что и эти строки:

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-scroll: fixed;
- -

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

- -

Добавьте вышеупоминутые объвления в ваш код. Попробуйте изменить значения и посмотреть на результат.

- -
-

Осторожно: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.

-
- -

Комментарии

- -

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

- -

Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

- -
/* Работаю над основными элементами */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* Позволяет определить размер шрифта. На широких экранах
-     больше размер шрифта для удобства чтения */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* Работаю над элементами, вложенными в DOM  */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  background-style: none
-}
-
-div p{
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

- -

Отступы

- -

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

- -

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

- -
body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-div p,
-#id:first-line {
-  background-color: red;
-  background-style: none
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

- -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
-
-h1 {font-size: 1.5em;}
-
-div p, #id:first-line {background-color: red; background-style: none}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-
- -

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

- -

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

- -
margin: 0 auto;
-padding-left: 10px;
- -

А такие объявления не действительны:

- -
margin: 0auto;
-padding- left: 10px;
- -

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

- -

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

- -

Что дальше?

- -

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

В этом модуле

- -
    -
  1. Что такое CSS?
    2. -
  2. Начало работы с CSS
    3. -
  3. Как структурирован CSS
    4. -
  4. Как работает CSS
    5. -
  5. Использование ваших новых знаний
    6. -
diff --git "a/files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" "b/files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" deleted file mode 100644 index 6b5bdf8924..0000000000 --- "a/files/ru/learn/css/first_steps/\321\207\321\202\320\276_\321\202\320\260\320\272\320\276\320\265_css/index.html" +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Что такое CSS? -slug: Learn/CSS/First_steps/Что_такое_CSS -tags: - - Beginner - - CSS - - Learn - - Введение в CSS - - Начинающий - - Обучение - - Синтаксис - - Спецификации -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}
- -

{{Glossary("CSS")}} (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

- - - - - - - - - - - - -
Требуемые знания:Базовые компьютерные знания, установка базового програмного обеспечения, базовые знания работа с файлами и базовые знания HTML  (Введение в HTML).
Задача:Узнать, что такое CSS.
- -

В модуле Основы HTML мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчеркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.

- -

- -

Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, Вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся Вам дизайн.

- -

Для чего нужен CSS?

- -

Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.

- -

Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространенный язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.

- -

Представление документа пользователю означает преобразование его в форму, используемую Вашей аудиторией. {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.

- -
-

Примечание: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.

-
- -

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

- -

Синтаксис CSS

- -

CSS — это язык на основе правил: Вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на Вашей веб-странице. Например:

- -

«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».

- -

В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).

- -

Затем у нас есть набор фигурных скобок { }. Внутри них будет один или несколько объявлений, которые принимают форму пары свойства и его значения. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.

- -

Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color, которое может принимать различные цветовые значения. У нас также есть свойство font-size. Это свойство может принимать различные значения размера, как и свойства.

- -

Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Вы обнаружите, что Вы быстро изучаете некоторые значения, тогда как другие Вам нужно искать. Страницы отдельных свойств в MDN дают Вам быстрый способ поиска свойств и их значений, когда Вы забыли или хотите узнать, что ещё Вы можете использовать в качестве значения.

- -
-

Примечание: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, Вы должны привыкнуть к поиску "MDN css-feature-name" в Вашем бразере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

-
- -

CSS-модули

- -

Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN в модуле Свойства фона и границ, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).

- -

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

- -

Для конкретного примера давайте вернемся к модулю Свойства фона и границ — Вы можете подумать, что это логично для свойств background-color и border-color, которые будут определены в этом модуле. И Вы правы.

- -

Технические характеристики CSS

- -

Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.

- -

CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членами организации.

- -

Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!

- -

Как новичок в CSS, вполне вероятно, что Вы найдете CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.

- -

Поддержка браузера

- -

После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке Как работает CSS. Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN Вы можете видеть статус интересующего Вас свойства, чтобы Вы могли определить, сможете ли Вы использовать её на веб-сайте.

- -

Ниже приведена диаграмма данных для CSS свойства font-family:

- -

{{Compat("css.properties.font-family")}}

- -

Что дальше?

- -

Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к Началу работы с CSS, где Вы можете начать писать CSS самостоятельно.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

В этом модуле

- -
    -
  1. Что такое CSS?
    2. -
  2. Начало работы с CSS
    3. -
  3. Как структурирован CSS
    4. -
  4. Как работает CSS
    5. -
  5. Использование ваших новых знаний
    6. -
diff --git a/files/ru/learn/css/howto/css_faq/index.html b/files/ru/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..cecfb92b82 --- /dev/null +++ b/files/ru/learn/css/howto/css_faq/index.html @@ -0,0 +1,182 @@ +--- +title: Common CSS questions +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Why doesn't my CSS, which is valid, render correctly?

+ +

Браузер использует декларацию DOCTYPE чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме,  которую будут поддерживать старые браузеры. Правильное использование декларациии DOCTYPE в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.

+ +

У современных браузеров есть два режима отображения веб-страниц:

+ + + +

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

+ +

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

+ +
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

Why doesn't my CSS, which is valid, render at all?

+ +

To be applied, a CSS stylesheet must be served with a text/css MIME type. If the Web server doesn't serve it with this type, it won't be applied.

+ +

What is the difference between id and class?

+ +

HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.
+
+ Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.
+
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.

+ +

Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).

+ +

See CSS selectors

+ +

How do I restore the default value of a property?

+ +

Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.

+ +

This has changed with CSS 2; the keyword initial is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.

+ +

How do I derive one style from another?

+ +

CSS does not allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect.

+ +

How do I assign multiple classes to an element?

+ +

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

+ +

Why don't my style rules work properly?

+ +

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

+ +

HTML elements hierarchy

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

Explicitly re-defined style rule

+ +

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

+ +

Use of a shorthand property

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

Use of the * selector

+ +

The * wildcard selector refers to any element, and it has to be used with particular care.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

Specificity in CSS

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3.

+ +

What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?

+ +

These properties, called prefixed properties, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

How does z-index relate to positioning?

+ +

The z-index property specifies the stack order of elements.

+ +

An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.

+ +

Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

diff --git a/files/ru/learn/css/howto/index.html b/files/ru/learn/css/howto/index.html new file mode 100644 index 0000000000..105c7f0a97 --- /dev/null +++ b/files/ru/learn/css/howto/index.html @@ -0,0 +1,86 @@ +--- +title: Использование CSS для решения общих проблем +slug: Learn/CSS/Как +translation_of: Learn/CSS/Howto +--- +

Следующие ссылки указывают на решения общих повседневных проблем, вам придется решать их с помощью CSS.

+ +

Примеры и использование

+ +
+
+

Основы

+ + + +

CSS и текст

+ + +
+ +
+

Блоки и разметка

+ + +
+
+ +

Необычное или передовые технологии

+ +

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

+ +

Общие

+ + + +

Дополнительные эффекты

+ + + +

Разметка

+ + + +

Смотрите также

+ +

CSS FAQ — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.

diff --git a/files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html b/files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html deleted file mode 100644 index 9009c684d8..0000000000 --- a/files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Понимание основ CSS -slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

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

- - - - - - - - - - - - -
Предварительно:Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.
Цель:Проверка понимания основной теории, синтаксиса и техник CSS.
- -

Отправной пункт

- -

Чтобы начать проверку, вы должны:

- - - -
-

Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

-
- -

Краткое описание проекта

- -

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

- -

Первоначальные настройки:

- - - -

Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:

- - - -

Какие новые наборы правил надо написать:

- - - -
-

Примечание: Имейте в виду, что второй набор правил устанавливает font-size: 10px; для элемента<html> — это означает, что для любых потомков <html> em будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <html>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).

-
- -

Другие вещи для размышления:

- - - -

Советы и подсказки

- - - -

Образец

- -

На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

Проверка

- -

Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

В этом модуле

- - diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..b749acb5cc --- /dev/null +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,389 @@ +--- +title: Стилизация списков +slug: Learn/CSS/Styling_text/Стилизация_списков +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

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

+ + + + + + + + + + + + +
Требования: +

Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.

+
Цель:Познакомиться с лучшими практиками и свойствами по стилизации списков.
+ +

Пример простого списка

+ +

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

+ +

HTML для нашего примера списка представлен ниже:

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Hummus</li>
+  <li>Pita</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Hummus</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pita</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

Если вы перейдете к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:

+ + + +

Управление интервалами списков

+ +

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

+ +

CSS, используемый для оформления текста и интервалов, выглядит следующим образом:

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

Стили специфичные для списков

+ +

Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:

+ + + +

Стили маркеров

+ +

Как указано выше, свойство {{cssxref("list-style-type")}} позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Это дает нам следующий вид:

+ +

an ordered list with the bullet points set to appear outside the list item text.

+ +

Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.

+ +

Позиция маркера

+ +

Свойство {{cssxref("list-style-position")}} устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

+ +

Если вы установите значение на inside, то маркеры будут находиться внутри строк:

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

Использование пользовательского изображения как маркер

+ +

Свойство {{cssxref("list-style-image")}} позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

+ +

В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Мы сделали следующее:

+ + + +

Это дает нам следующий результат:

+ +

an unordered list with the bullet points set as little star images

+ +

короткая запись list-style

+ +

Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, {{cssxref("list-style")}}. Например, следующий CSS:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Может быть заменен этим:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc, none, и outside). Если указаны и type и image, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

+ +

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

+ +

Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

+ +

start

+ +

Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счет списка с цифры отличной от 1. Например:

+ +
<ol start="4">
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+ +

что даст вам такой результат:

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

Атрибут {{htmlattrxref("reversed","ol")}} начнет отсчет по убыванию вместо возрастания. Например:

+ +
<ol start="4" reversed>
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+ +

что даст вам такой результат:

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +
+

Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start, счет продолжится до нуля и далее отрицательные значения.

+
+ +

value

+ +

Атрибут {{htmlattrxref("value","ol")}} позволит вам установить специфичные цифровые значения к пунктам списка. Например:

+ +
<ol>
+  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+ +

что даст вам такой результат:

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

Обратите внимание: Даже если вы используете нечисловой {{cssxref("list-style-type")}}, вам все равно надо использовать эквивалентное цифровое значение в атрибуте value.

+
+ +

Активное изучение: Стилизация вложенного списка

+ +

В этой сессии активного изучения, мы хотим, чтобы вы взяли все что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:

+ +
    +
  1. Задали неупорядоченному списку квадратные маркеры.
    2. +
  2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
    3. +
  3. Задали упорядоченному списку маркеры в виде строчных букв.
    4. +
  4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдете.
    5. +
+ +

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Смотрите также

+ +

Счетчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:

+ + + +

Заключение

+ +

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

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..4f77ee31bc --- /dev/null +++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,126 @@ +--- +title: 'Задание: Стилизирование школьного сайта' +slug: 'Learn/CSS/Styling_text/Задание:_Стилизирование_школьного_сайта' +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

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

+ + + + + + + + + + + + +
Предварительные требования:Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке.
Задача:Проверить понимание методов CSS по стилизации текста.
+ +

Отправная точка

+ +

Чтобы начать эту оценку, вам необходимо:

+ + + +

В качестве альтернативы, вы можете пользоваться сайтами как  JSBin или Glitch чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать этот URL чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <style> в head документа.

+ +
+

Обратите внимание: Если вы застрянете, то попросите помощи — см. секцию {{anch("Оценка или дальнейшая помощь")}} в конце этой страницы.

+
+ +

Краткое описание проекта

+ +

Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает еще каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с легкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.

+ +

Шрифты:

+ + + +

Общая стилизация текста:

+ + + +

Ссылки:

+ + + +

Списки:

+ + + +

Меню навигации:

+ + + +

Советы и подсказки

+ + + +

Пример

+ +

Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.

+ +

+ +

Оценка или дальнейшая помощь

+ +

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

+ +
    +
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch.
    2. +
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: +
      +
    • Описательный заголовок такой как "Требуется оценка верстки домашней страницы общественный школы".
      • +
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • +
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • +
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..f6ca27747f --- /dev/null +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,203 @@ +--- +title: Веб-шрифты +slug: Learn/CSS/Styling_text/Веб_шрифты +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.

+ + + + + + + + + + + + +
Предварительные требования:Основная компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), Основы CSS текста и шрифта.
Задача: +

Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.

+
+ +

Краткое повторение семейств шрифтов

+ +

Как мы рассматривали в Фундаментальной стилизации текста и шрифта, шрифты примененные к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имен семейств шрифтов и браузер следует по списку пока не найдет тот шрифт, который является доступным в системе, под управлением которой он работает:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространенных системах — так называемые Безопасные веб-шрифты. Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.

+ +

Веб-шрифты

+ +

Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:

+ +

Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.

+ +

Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:

+ +
    +
  1. Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
    2. +
  2. В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.
    3. +
+ +
+

Обратите внимание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!

+
+ +

Активное изучение: пример веб-шрифта

+ +

Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса

+ +

Вы должны использовать файлы web-font-start.html и web-font-start.css как отправную точку добавляя в них ваш код (см. живой пример). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле web-font-start.css вы найдете некоторый минимальный CSS для работы с базовым макетом и версткой примера.

+ +

Поиск шрифтов

+ +

В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:

+ + + +

Давайте найдем какие-нибудь шрифты! Отправляйтесь на Font Squirrel и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдете каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).

+ +

В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.

+ +
+

Обратите внимание: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.

+
+ +

Генерация требуемого кода

+ +

Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.

+ +
    +
  1. Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
    2. +
  2. Перейдите на Fontsquirrel Webfont Generator.
    3. +
  3. Выгрузите два ваших файла шрифтов используя кнопку Upload Fonts.
    4. +
  4. Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".
    5. +
  5. Кликните по Download your kit.
    6. +
+ +

После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.

+ +

Реализация кода в вашем демо

+ +

Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:

+ + + +

Для внедрения их в ваше демо следуйте следующим шагам:

+ +
    +
  1. Переименуйте распакованную папку на что-нибудь легкое и простое, например fonts.
    2. +
  2. Откройте файл stylesheet.css и скопируйте содержимое обоих @font-face блоков в ваш файл web-font-start.css — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.
    3. +
  3. Каждый из функций url() указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте fonts/ в начало каждого пути (настройте так как необходимо).
    4. +
  4. Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:
    5. +
+ +
font-family: 'zantrokeregular', serif;
+ +

Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.

+ +

+ +
+

Обратите внимание: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. web-font-finished.html и web-font-finished.css (run the finished example live).

+
+ +

Использование онлайн-сервиса шрифтов

+ +

Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании @font-face кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают Adobe Fonts и Cloud.typography. Большинство из этих услуг на основе подписки, за исключением Google Fonts, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.

+ +

Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.

+ +
    +
  1. Отправляйтесь на Google Fonts.
    2. +
  2. Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.
    3. +
  3. Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
    4. +
  4. Когда вы выбрали семейства шрифтов, нажмите на панель [Number] Families Selected в низу страницы.
    5. +
  5. На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить ее в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнете пользоваться им в вашем CSS.
    6. +
  6. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.
    7. +
+ +
+

Обратите внимание: Вы можете найти законченные версии google-font.html и google-font.css, если вам необходимо сверить вашу работу с нашей (см. live).

+
+ +

@font-face более детально

+ +

Давайте исследуем тот @font-face синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда @font-face начал получать популярность (Bulletproof @font-face Syntax). Давайте пройдемся по нему, чтобы посмотреть, что он делает:

+ + + +
+

Обратите внимание: Вы также можете указать определенные значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать

+
+ +

Переменные шрифты

+ +

В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше Руководство по переменным шрифтам.

+ +

Испытайте свои навыки!

+ +

Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. Задание: стилизация школьного сайта.

+ +

Заключение

+ +

Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ +

В этом модуле

+ + diff --git "a/files/ru/learn/css/styling_text/\320\262\320\265\320\261_\321\210\321\200\320\270\321\204\321\202\321\213/index.html" "b/files/ru/learn/css/styling_text/\320\262\320\265\320\261_\321\210\321\200\320\270\321\204\321\202\321\213/index.html" deleted file mode 100644 index f6ca27747f..0000000000 --- "a/files/ru/learn/css/styling_text/\320\262\320\265\320\261_\321\210\321\200\320\270\321\204\321\202\321\213/index.html" +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Веб-шрифты -slug: Learn/CSS/Styling_text/Веб_шрифты -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.

- - - - - - - - - - - - -
Предварительные требования:Основная компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), Основы CSS текста и шрифта.
Задача: -

Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.

-
- -

Краткое повторение семейств шрифтов

- -

Как мы рассматривали в Фундаментальной стилизации текста и шрифта, шрифты примененные к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имен семейств шрифтов и браузер следует по списку пока не найдет тот шрифт, который является доступным в системе, под управлением которой он работает:

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространенных системах — так называемые Безопасные веб-шрифты. Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.

- -

Веб-шрифты

- -

Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:

- -

Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.woff");
-}
- -

Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.

- -

Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:

- -
    -
  1. Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
    2. -
  2. В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.
    3. -
- -
-

Обратите внимание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!

-
- -

Активное изучение: пример веб-шрифта

- -

Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса

- -

Вы должны использовать файлы web-font-start.html и web-font-start.css как отправную точку добавляя в них ваш код (см. живой пример). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле web-font-start.css вы найдете некоторый минимальный CSS для работы с базовым макетом и версткой примера.

- -

Поиск шрифтов

- -

В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:

- - - -

Давайте найдем какие-нибудь шрифты! Отправляйтесь на Font Squirrel и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдете каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).

- -

В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.

- -
-

Обратите внимание: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.

-
- -

Генерация требуемого кода

- -

Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.

- -
    -
  1. Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
    2. -
  2. Перейдите на Fontsquirrel Webfont Generator.
    3. -
  3. Выгрузите два ваших файла шрифтов используя кнопку Upload Fonts.
    4. -
  4. Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".
    5. -
  5. Кликните по Download your kit.
    6. -
- -

После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.

- -

Реализация кода в вашем демо

- -

Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:

- - - -

Для внедрения их в ваше демо следуйте следующим шагам:

- -
    -
  1. Переименуйте распакованную папку на что-нибудь легкое и простое, например fonts.
    2. -
  2. Откройте файл stylesheet.css и скопируйте содержимое обоих @font-face блоков в ваш файл web-font-start.css — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.
    3. -
  3. Каждый из функций url() указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте fonts/ в начало каждого пути (настройте так как необходимо).
    4. -
  4. Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:
    5. -
- -
font-family: 'zantrokeregular', serif;
- -

Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.

- -

- -
-

Обратите внимание: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. web-font-finished.html и web-font-finished.css (run the finished example live).

-
- -

Использование онлайн-сервиса шрифтов

- -

Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании @font-face кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают Adobe Fonts и Cloud.typography. Большинство из этих услуг на основе подписки, за исключением Google Fonts, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.

- -

Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.

- -
    -
  1. Отправляйтесь на Google Fonts.
    2. -
  2. Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.
    3. -
  3. Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
    4. -
  4. Когда вы выбрали семейства шрифтов, нажмите на панель [Number] Families Selected в низу страницы.
    5. -
  5. На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить ее в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнете пользоваться им в вашем CSS.
    6. -
  6. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.
    7. -
- -
-

Обратите внимание: Вы можете найти законченные версии google-font.html и google-font.css, если вам необходимо сверить вашу работу с нашей (см. live).

-
- -

@font-face более детально

- -

Давайте исследуем тот @font-face синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда @font-face начал получать популярность (Bulletproof @font-face Syntax). Давайте пройдемся по нему, чтобы посмотреть, что он делает:

- - - -
-

Обратите внимание: Вы также можете указать определенные значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать

-
- -

Переменные шрифты

- -

В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше Руководство по переменным шрифтам.

- -

Испытайте свои навыки!

- -

Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. Задание: стилизация школьного сайта.

- -

Заключение

- -

Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/styling_text/\320\267\320\260\320\264\320\260\320\275\320\270\320\265_colon__\321\201\321\202\320\270\320\273\320\270\320\267\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\210\320\272\320\276\320\273\321\214\320\275\320\276\320\263\320\276_\321\201\320\260\320\271\321\202\320\260/index.html" "b/files/ru/learn/css/styling_text/\320\267\320\260\320\264\320\260\320\275\320\270\320\265_colon__\321\201\321\202\320\270\320\273\320\270\320\267\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\210\320\272\320\276\320\273\321\214\320\275\320\276\320\263\320\276_\321\201\320\260\320\271\321\202\320\260/index.html" deleted file mode 100644 index 4f77ee31bc..0000000000 --- "a/files/ru/learn/css/styling_text/\320\267\320\260\320\264\320\260\320\275\320\270\320\265_colon__\321\201\321\202\320\270\320\273\320\270\320\267\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\321\210\320\272\320\276\320\273\321\214\320\275\320\276\320\263\320\276_\321\201\320\260\320\271\321\202\320\260/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: 'Задание: Стилизирование школьного сайта' -slug: 'Learn/CSS/Styling_text/Задание:_Стилизирование_школьного_сайта' -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

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

- - - - - - - - - - - - -
Предварительные требования:Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке.
Задача:Проверить понимание методов CSS по стилизации текста.
- -

Отправная точка

- -

Чтобы начать эту оценку, вам необходимо:

- - - -

В качестве альтернативы, вы можете пользоваться сайтами как  JSBin или Glitch чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать этот URL чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <style> в head документа.

- -
-

Обратите внимание: Если вы застрянете, то попросите помощи — см. секцию {{anch("Оценка или дальнейшая помощь")}} в конце этой страницы.

-
- -

Краткое описание проекта

- -

Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает еще каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с легкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.

- -

Шрифты:

- - - -

Общая стилизация текста:

- - - -

Ссылки:

- - - -

Списки:

- - - -

Меню навигации:

- - - -

Советы и подсказки

- - - -

Пример

- -

Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.

- -

- -

Оценка или дальнейшая помощь

- -

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

- -
    -
  1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch.
    2. -
  2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать: -
      -
    • Описательный заголовок такой как "Требуется оценка верстки домашней страницы общественный школы".
      • -
    • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
      • -
    • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
      • -
    • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
      • -
    -
    3. -
- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/styling_text/\321\201\321\202\320\270\320\273\320\270\320\267\320\260\321\206\320\270\321\217_\321\201\320\277\320\270\321\201\320\272\320\276\320\262/index.html" "b/files/ru/learn/css/styling_text/\321\201\321\202\320\270\320\273\320\270\320\267\320\260\321\206\320\270\321\217_\321\201\320\277\320\270\321\201\320\272\320\276\320\262/index.html" deleted file mode 100644 index b749acb5cc..0000000000 --- "a/files/ru/learn/css/styling_text/\321\201\321\202\320\270\320\273\320\270\320\267\320\260\321\206\320\270\321\217_\321\201\320\277\320\270\321\201\320\272\320\276\320\262/index.html" +++ /dev/null @@ -1,389 +0,0 @@ ---- -title: Стилизация списков -slug: Learn/CSS/Styling_text/Стилизация_списков -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

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

- - - - - - - - - - - - -
Требования: -

Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам.

-
Цель:Познакомиться с лучшими практиками и свойствами по стилизации списков.
- -

Пример простого списка

- -

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

- -

HTML для нашего примера списка представлен ниже:

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Hummus</li>
-  <li>Pita</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pita with salad, hummus, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Hummus</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pita</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

Если вы перейдете к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:

- - - -

Управление интервалами списков

- -

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

- -

CSS, используемый для оформления текста и интервалов, выглядит следующим образом:

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
- - - -

Стили специфичные для списков

- -

Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:

- - - -

Стили маркеров

- -

Как указано выше, свойство {{cssxref("list-style-type")}} позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Это дает нам следующий вид:

- -

an ordered list with the bullet points set to appear outside the list item text.

- -

Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.

- -

Позиция маркера

- -

Свойство {{cssxref("list-style-position")}} устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

- -

Если вы установите значение на inside, то маркеры будут находиться внутри строк:

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

an ordered list with the bullet points set to appear inside the list item text.

- -

Использование пользовательского изображения как маркер

- -

Свойство {{cssxref("list-style-image")}} позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

- -

В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Мы сделали следующее:

- - - -

Это дает нам следующий результат:

- -

an unordered list with the bullet points set as little star images

- -

короткая запись list-style

- -

Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, {{cssxref("list-style")}}. Например, следующий CSS:

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

Может быть заменен этим:

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc, none, и outside). Если указаны и type и image, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

- -

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

- -

Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

- -

start

- -

Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счет списка с цифры отличной от 1. Например:

- -
<ol start="4">
-  <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pita with salad, hummus, and fried halloumi.</li>
-</ol>
- -

что даст вам такой результат:

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

Атрибут {{htmlattrxref("reversed","ol")}} начнет отсчет по убыванию вместо возрастания. Например:

- -
<ol start="4" reversed>
-  <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pita with salad, hummus, and fried halloumi.</li>
-</ol>
- -

что даст вам такой результат:

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -
-

Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start, счет продолжится до нуля и далее отрицательные значения.

-
- -

value

- -

Атрибут {{htmlattrxref("value","ol")}} позволит вам установить специфичные цифровые значения к пунктам списка. Например:

- -
<ol>
-  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
-</ol>
- -

что даст вам такой результат:

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

Обратите внимание: Даже если вы используете нечисловой {{cssxref("list-style-type")}}, вам все равно надо использовать эквивалентное цифровое значение в атрибуте value.

-
- -

Активное изучение: Стилизация вложенного списка

- -

В этой сессии активного изучения, мы хотим, чтобы вы взяли все что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:

- -
    -
  1. Задали неупорядоченному списку квадратные маркеры.
    2. -
  2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
    3. -
  3. Задали упорядоченному списку маркеры в виде строчных букв.
    4. -
  4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдете.
    5. -
- -

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Смотрите также

- -

Счетчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:

- - - -

Заключение

- -

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

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

- -

В этом модуле

- - diff --git "a/files/ru/learn/css/\320\272\320\260\320\272/index.html" "b/files/ru/learn/css/\320\272\320\260\320\272/index.html" deleted file mode 100644 index 105c7f0a97..0000000000 --- "a/files/ru/learn/css/\320\272\320\260\320\272/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Использование CSS для решения общих проблем -slug: Learn/CSS/Как -translation_of: Learn/CSS/Howto ---- -

Следующие ссылки указывают на решения общих повседневных проблем, вам придется решать их с помощью CSS.

- -

Примеры и использование

- -
-
-

Основы

- - - -

CSS и текст

- - -
- -
-

Блоки и разметка

- - -
-
- -

Необычное или передовые технологии

- -

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

- -

Общие

- - - -

Дополнительные эффекты

- - - -

Разметка

- - - -

Смотрите также

- -

CSS FAQ — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.

-- cgit v1.2.3-54-g00ecf