diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md index d0cb5d494c1d07..e7c9310c58ba50 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md @@ -157,7 +157,8 @@ button:active { При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки. -> **Примечание:** Есть ещё одно значение `box-shadow`, которое устанавливается перед значением свойства, — **радиус разброса**. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания. +> [!NOTE] +> Есть ещё одно значение `box-shadow`, которое устанавливается перед значением свойства, — **радиус разброса**. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания. ## Фильтры @@ -188,7 +189,8 @@ button:active { Вы можете найти больше примеров смешивания на странице [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (смотрите [источник](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) и на странице {{cssxref("<blend-mode>")}}. -> **Примечание:** Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства. +> [!NOTE] +> Смешивание — относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства. ### background-blend-mode @@ -284,7 +286,8 @@ article div:last-child { Как видите, смешались не только фоновые изображения, но и `
` под ними. -> **Примечание:** Не переживайте, если вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле [CSS Layout](/ru/docs/Learn/CSS/CSS_layout). +> [!NOTE] +> Не переживайте, если вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле [CSS Layout](/ru/docs/Learn/CSS/CSS_layout). ## CSS-фигуры @@ -296,7 +299,8 @@ article div:last-child { Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст. -> **Примечание:** В Firefox вы можете использовать [Инспектор фигур](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes), чтобы редактировать фигуры. +> [!NOTE] +> В Firefox вы можете использовать [Инспектор фигур](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes), чтобы редактировать фигуры. Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте [Обзор CSS-фигур](/ru/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) на MDN.) @@ -315,7 +319,8 @@ article div:last-child { Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами. -> **Примечание:** Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). +> [!NOTE] +> Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)). ## Итог diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md index 12d2ab79f412c1..6df04aac8c3d54 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -89,7 +89,8 @@ CSS-свойство {{cssxref ("background")}} является сокраще Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой _левый верхний угол_ блока равен `(0,0)`, а сам блок располагается вдоль горизонтальной (`x`) и вертикальной (`y`) осей. -> **Примечание:** По умолчанию значение `background-position` равно `(0,0)`. +> [!NOTE] +> По умолчанию значение `background-position` равно `(0,0)`. Обычно свойство `background-position` задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали. @@ -155,7 +156,8 @@ CSS-свойство {{cssxref ("background")}} является сокраще Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения. -> **Примечание:** Градиенты можно легко смешивать с обычными фоновыми изображениями. +> [!NOTE] +> Градиенты можно легко смешивать с обычными фоновыми изображениями. Другие свойства `background- *` также могут иметь значения, разделённые запятыми, как и `background-image`: @@ -245,7 +247,8 @@ background-position: } ``` -> **Примечание:** Свойства границ top, right, bottom, и left также имеют сопоставленные _логические_ свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается [работы с разными направлениями текста](/ru/docs/CSS/Building_blocks/Handling_different_text_directions). +> [!NOTE] +> Свойства границ top, right, bottom, и left также имеют сопоставленные _логические_ свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается [работы с разными направлениями текста](/ru/docs/CSS/Building_blocks/Handling_different_text_directions). **Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.** @@ -285,7 +288,8 @@ background-position: {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} -> **Примечание:** вы можете посмотреть [решение](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) здесь — но сначала попробуйте сделать это сами! +> [!NOTE] +> Вы можете посмотреть [решение](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) здесь — но сначала попробуйте сделать это сами! ## Итоги diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md index e9a2e73965a803..a542c1026fbd7a 100644 --- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -54,7 +54,8 @@ CSS (Cascading Style Sheets) означает Каскадные Таблицы Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать! -> **Примечание:** На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: [color property Specifications section](/ru/docs/Web/CSS/color#Specifications). +> [!NOTE] +> На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: [color property Specifications section](/ru/docs/Web/CSS/color#Specifications). ## Понимание взаимодействия этих концепций @@ -87,9 +88,11 @@ CSS предоставляет четыре специальных универ - {{cssxref("unset")}} - : Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как `inherit`, иначе оно действует как `initial`. -> **Примечание:** Существует также более новое значение {{cssxref("revert")}}, которое имеет ограниченную поддержку браузерами. +> [!NOTE] +> Существует также более новое значение {{cssxref("revert")}}, которое имеет ограниченную поддержку браузерами. -> **Примечание:** Смотрите [Origin of CSS declarations](/ru/docs/Web/CSS/Cascade#origin_of_css_declarations) для более подробной информации о каждом из них, и о том, как они работают. +> [!NOTE] +> Смотрите [Origin of CSS declarations](/ru/docs/Web/CSS/Cascade#origin_of_css_declarations) для более подробной информации о каждом из них, и о том, как они работают. Можно посмотреть список ссылок и изучить, как работают универсальные значения. Пример, следующий ниже, позволяет вам поиграть с CSS и увидеть, что происходит, когда вы вносите изменения. Подобные эксперименты с кодом — лучший способ освоить HTML и CSS. @@ -148,7 +151,8 @@ CSS предоставляет четыре специальных универ 3. **Десятки**: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе. 4. **Единицы**: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе. -> **Примечание:** Универсальный селектор (\*), комбинаторы (+, >, \~, '') и псевдокласс отрицания (:not) не влияют на специфичность. +> [!NOTE] +> Универсальный селектор (\*), комбинаторы (+, >, \~, '') и псевдокласс отрицания (:not) не влияют на специфичность. Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в [справочнике селекторов](/ru/docs/Web/CSS/CSS_Селекторы) MDN. @@ -170,7 +174,8 @@ CSS предоставляет четыре специальных универ - Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104. - Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24. -> **Примечание:** Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, _миллион_ соединённых селекторов **класса** не способны переписать правила _одного_ селектора **id**. +> [!NOTE] +> Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, _миллион_ соединённых селекторов **класса** не способны переписать правила _одного_ селектора **id**. > > Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности. @@ -189,7 +194,8 @@ CSS предоставляет четыре специальных универ 3. Оба элемента имеют [`class`](/ru/docs/Web/HTML/Global_attributes#class) с названием `better`, но у второго также есть [`id`](/ru/docs/Web/HTML/Global_attributes#id) с названием `winning`. Поскольку ID имеют _ещё более высокую_ специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID _очень специфичны_, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом. 4. 2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления `!important` во втором правиле — размещение которого после `border: none` означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность. -> **Примечание:** Единственный способ переопределить объявление `!important` – это включить другое объявление `!important` в правило _с такой же специфичностью_ позже или в правило с более высокой специфичностью. +> [!NOTE] +> Единственный способ переопределить объявление `!important` – это включить другое объявление `!important` в правило _с такой же специфичностью_ позже или в правило с более высокой специфичностью. Полезно знать о существовании `!important`, чтобы вы понимали, что это такое, когда встретите в чужом коде. **Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости.** `!important` меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей. diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.md b/files/ru/learn/css/building_blocks/cascade_tasks/index.md index d4eee2354a4734..d4e341640cdea9 100644 --- a/files/ru/learn/css/building_blocks/cascade_tasks/index.md +++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.md @@ -7,7 +7,8 @@ slug: Learn/CSS/Building_blocks/Cascade_tasks Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance). -> **Примечание:** вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/), которые можно использовать для работы над заданием, предварительно загрузив в них код. +> [!NOTE] +> Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/), которые можно использовать для работы над заданием, предварительно загрузив в них код. > > Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел [Оценка или дальнейшая помощь](#оценка_или_дальнейшая_помощь) внизу этой страницы. @@ -21,7 +22,8 @@ slug: Learn/CSS/Building_blocks/Cascade_tasks {{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}} -> **Примечание:** Для получения оценки или для дальнейшей работы [загрузите исходный код для этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/cascade/cascade-download.html) в ваш собственный редактор или в онлайн-редактор. +> [!NOTE] +> Для получения оценки или для дальнейшей работы [загрузите исходный код для этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/cascade/cascade-download.html) в ваш собственный редактор или в онлайн-редактор. ## Оценка или дальнейшая помощь diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.md b/files/ru/learn/css/building_blocks/debugging_css/index.md index 32fb1d86f12415..bc3df441614915 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.md +++ b/files/ru/learn/css/building_blocks/debugging_css/index.md @@ -59,7 +59,8 @@ View Source же для сравнения — это просто исходн ![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](inspecting3-font-size.png) -> **Примечание:** Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). +> [!NOTE] +> Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS). ## Понимание модели блоков @@ -75,7 +76,8 @@ View Source же для сравнения — это просто исходн ![The Layout section of the DevTools](inspecting4-box-model.png) -> **Примечание:** Узнать больше на [Examining and Inspecting the Box Model](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). +> [!NOTE] +> Узнать больше на [Examining and Inspecting the Box Model](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). ## Решение проблем специфичности diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md index 2ff0412db5a710..e875a2394000e2 100644 --- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md @@ -52,7 +52,8 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension - Напишите набор правил, который задаёт тегу `

` внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в `em`s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки. - В качестве последнего штриха задайте параграфу внутри `

` соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом `

` и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать. -> **Примечание:** Имейте в виду, что второй набор правил устанавливает `font-size: 10px;` для элемента `` — это означает, что для любых потомков `` `em` будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и ``, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема). +> [!NOTE] +> Имейте в виду, что второй набор правил устанавливает `font-size: 10px;` для элемента `` — это означает, что для любых потомков `` `em` будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и ``, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема). Другие вещи для размышления: diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md index 726b9b6cf8e1d5..d71d95c71b30d6 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md @@ -149,7 +149,8 @@ textarea { } ``` -> **Примечание:** Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out [Normalize.css](http://necolas.github.io/normalize.css/), which is a very popular stylesheet used as a base by many projects. +> [!NOTE] +> Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out [Normalize.css](http://necolas.github.io/normalize.css/), which is a very popular stylesheet used as a base by many projects. Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства. diff --git a/files/ru/learn/css/building_blocks/index.md b/files/ru/learn/css/building_blocks/index.md index a8b0d96ed67505..1a9297a9bc2ba9 100644 --- a/files/ru/learn/css/building_blocks/index.md +++ b/files/ru/learn/css/building_blocks/index.md @@ -17,7 +17,8 @@ slug: Learn/CSS/Building_blocks 2. Общее представление о HTML (модуль [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)). 3. Общее представление о CSS (модуль [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)). -> **Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/). +> [!NOTE] +> Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/). ## Руководства diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.md b/files/ru/learn/css/building_blocks/overflowing_content/index.md index 71d3a866ca7e26..1292ea96a34f20 100644 --- a/files/ru/learn/css/building_blocks/overflowing_content/index.md +++ b/files/ru/learn/css/building_blocks/overflowing_content/index.md @@ -59,7 +59,8 @@ slug: Learn/CSS/Building_blocks/Overflowing_content Как и в случае со `scroll`, вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления. -> **Примечание:** вы можете точно задать прокрутку по осям x и y, используя свойство `overflow`, передав два значения. Первое значение будет относиться к `overflow-x`, а второе — к `overflow-y`. Если передать одно значение, то `overflow-x` и `overflow-y` получат одинаковые значения. Например, `overflow: scroll hidden` устанавливает `overflow-x` в `scroll` и `overflow-y` в `hidden`. +> [!NOTE] +> Вы можете точно задать прокрутку по осям x и y, используя свойство `overflow`, передав два значения. Первое значение будет относиться к `overflow-x`, а второе — к `overflow-y`. Если передать одно значение, то `overflow-x` и `overflow-y` получат одинаковые значения. Например, `overflow: scroll hidden` устанавливает `overflow-x` в `scroll` и `overflow-y` в `hidden`. Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте `overflow: auto`. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки. diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md index 9ca9ff7af448a6..680a84b4e106b6 100644 --- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -58,7 +58,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}} -> **Примечание:** Существует также более новое значение `s`, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML. +> [!NOTE] +> Существует также более новое значение `s`, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML. ## Следующие шаги diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 8e07fdc2f3e12d..14cdc7441ed4a0 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -37,7 +37,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements - [`:only-child`](/ru/docs/Web/CSS/:only-child) - [`:invalid`](/ru/docs/Web/CSS/:invalid) -> **Примечание:** Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать `:first-child` и правило было бы применено к _любому_ элементу, оказавшемуся первым дочерним для `
`, не только к первому дочернему абзацу — `:first-child` равнозначно `*:first-child`. Однако обычно вы хотите б*о*льшего контроля, поэтому вам нужен более специфичный селектор. +> [!NOTE] +> Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать `:first-child` и правило было бы применено к _любому_ элементу, оказавшемуся первым дочерним для `
`, не только к первому дочернему абзацу — `:first-child` равнозначно `*:first-child`. Однако обычно вы хотите б*о*льшего контроля, поэтому вам нужен более специфичный селектор. ### Псевдоклассы пользовательского действия @@ -56,7 +57,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ::pseudo-element-name ``` -> **Примечание:** Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости. +> [!NOTE] +> Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости. Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в `` и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет. diff --git a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md index 7a08ae960c2559..3dd00c1629d2bb 100644 --- a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md +++ b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md @@ -7,7 +7,8 @@ slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS. -> **Примечание:** вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/), которые можно использовать для работы над заданием, предварительно загрузив в них код. +> [!NOTE] +> Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/), которые можно использовать для работы над заданием, предварительно загрузив в них код. > > Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел [Оценка или дальнейшая помощь](/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8#Оценка_или_дальнейшая_помощь) внизу этой страницы. @@ -25,7 +26,8 @@ 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](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html) to work in your own editor or in an online editor. +> [!NOTE] +> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html) to work in your own editor or in an online editor. ## Selectors Two @@ -42,7 +44,8 @@ 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](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html) to work in your own editor or in an online editor. +> [!NOTE] +> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html) to work in your own editor or in an online editor. ## Selectors Three @@ -58,7 +61,8 @@ 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](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html) to work in your own editor or in an online editor. +> [!NOTE] +> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html) to work in your own editor or in an online editor. ## Selectors Four @@ -73,7 +77,8 @@ 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](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html) to work in your own editor or in an online editor. +> [!NOTE] +> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html) to work in your own editor or in an online editor. ## Selectors Five @@ -89,7 +94,8 @@ 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](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html) to work in your own editor or in an online editor. +> [!NOTE] +> For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html) to work in your own editor or in an online editor. ## Assessment or further help diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index db71969529fca8..cd3001f048bbeb 100644 --- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -81,7 +81,8 @@ article *:first-child { > **Предупреждение:**Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении. -> **Примечание:** Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать. +> [!NOTE] +> Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать. ## В следующей статье diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md index 10b40f8dc93577..aec5a4de5ef866 100644 --- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md +++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md @@ -73,7 +73,8 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS Этот метод используется для создания _отзывчивых_ изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение. -> **Примечание:** Узнайте больше о [методах создания адаптивных изображений](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). +> [!NOTE] +> Узнайте больше о [методах создания адаптивных изображений](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). ## Единицы вьюпорта diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.md b/files/ru/learn/css/building_blocks/the_box_model/index.md index 9bfaf3a0b5010b..43f79c6fa05f6b 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.md +++ b/files/ru/learn/css/building_blocks/the_box_model/index.md @@ -41,7 +41,8 @@ slug: Learn/CSS/Building_blocks/The_box_model Однако мы можем изменить внутренний тип отображения, используя такие значения `display` как `flex`. Если мы установим `display: flex;` для элемента, внешний тип отображения примет значение `block`, но внутренний тип изменится на `flex`. Любые прямые дочерние элементы этого блока станут _flex_-объектами и будут размещены в соответствии с правилами, изложенными в спецификации [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox), о которой вы узнаете позже. -> **Примечание:** Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN [Блочное и строчное расположение](/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). +> [!NOTE] +> Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN [Блочное и строчное расположение](/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow). Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите `flex` и другие внутренние значения, которые могут быть у ваших элементов, например [`grid`](/ru/docs/Learn/CSS/CSS_layout/Grids). @@ -108,7 +109,8 @@ slug: Learn/CSS/Building_blocks/The_box_model ![Отображения размера элемента при использовании стандартной блочной модели.](standard-box-model.png) -> **Примечание:** Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее. +> [!NOTE] +> Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее. ### Альтернативная блочная модель CSS @@ -137,7 +139,8 @@ html { } ``` -> **Примечание:** Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения. +> [!NOTE] +> Интересный факт: Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения. ## Играем с блочными моделями @@ -147,7 +150,8 @@ html { {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} -> **Примечание:** вы можете найти решение этой задачи [здесь](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model). +> [!NOTE] +> Вы можете найти решение этой задачи [здесь](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model). ### Использование инструментов разработчика в браузере для просмотра блочных моделей diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.md b/files/ru/learn/css/building_blocks/values_and_units/index.md index e6b2ad3cfac570..c6f4e9216aed80 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.md +++ b/files/ru/learn/css/building_blocks/values_and_units/index.md @@ -15,9 +15,11 @@ slug: Learn/CSS/Building_blocks/Values_and_units В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например [``](/ru/docs/Web/CSS/color_value) или [``](/ru/docs/Web/CSS/length). Если вы видите значение `` как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице [``](/ru/docs/Web/CSS/color_value)[.](/ru/docs/Web/CSS/color_value) -> **Примечание:** You'll also see CSS values referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value. +> [!NOTE] +> You'll also see CSS values referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value. -> **Примечание:** Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the [\](/ru/docs/Web/CSS/color_value) data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts. +> [!NOTE] +> Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the [\](/ru/docs/Web/CSS/color_value) data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts. В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию `rgb()`: @@ -133,7 +135,8 @@ HTML это набор вложенных списков — у нас имее {{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} -> **Примечание:** Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки. +> [!NOTE] +> Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки. ## Цвет @@ -141,7 +144,8 @@ HTML это набор вложенных списков — у нас имее Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS. -> **Примечание:** В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими. +> [!NOTE] +> В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими. ### Ключевые слова цвета @@ -169,7 +173,8 @@ HTML это набор вложенных списков — у нас имее А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на `0`, то это сделает цвет полностью прозрачным, тогда как `1` сделает его полностью мутным. Значения между дают вам разные уровни прозрачности. -> **Примечание:** Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете. +> [!NOTE] +> Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете. In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller. @@ -177,7 +182,8 @@ In the example below I have added a background image to the containing block of **In this example, try changing the alpha channel values to see how it affects the color output.** -> **Примечание:** At some point modern browsers were updated so that `rgba()` and `rgb()`, and `hsl()` and `hsla()` (see below), became pure aliases of each other and started to behave exactly the same. So for example both `rgba()` and `rgb()` accept colors with and without alpha channel values. Try changing the above example's `rgba()` functions to `rgb()` and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code. +> [!NOTE] +> At some point modern browsers were updated so that `rgba()` and `rgb()`, and `hsl()` and `hsla()` (see below), became pure aliases of each other and started to behave exactly the same. So for example both `rgba()` and `rgb()` accept colors with and without alpha channel values. Try changing the above example's `rgba()` functions to `rgb()` and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code. ### HSL and HSLA values @@ -205,7 +211,8 @@ In the example below we have demonstrated an image and a gradient in use as a va {{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} -> **Примечание:** there are some other possible values for ``, however these are newer and currently have poor browser support. Check out the page on MDN for the [``](/ru/docs/Web/CSS/image) data type if you want to read about them. +> [!NOTE] +> There are some other possible values for ``, however these are newer and currently have poor browser support. Check out the page on MDN for the [``](/ru/docs/Web/CSS/image) data type if you want to read about them. ## Position diff --git a/files/ru/learn/css/css_layout/flexbox/index.md b/files/ru/learn/css/css_layout/flexbox/index.md index f6bcb2460a8e9d..f68d766c12ddb6 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.md +++ b/files/ru/learn/css/css_layout/flexbox/index.md @@ -74,7 +74,8 @@ flex-direction: column; Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера. -> **Примечание:** вы можете также располагать flex элементы в обратном направлении, используя значения `row-reverse` и `column-reverse`. Попробуйте их тоже! +> [!NOTE] +> Вы можете также располагать flex-элементы в обратном направлении, используя значения `row-reverse` и `column-reverse`. Попробуйте их тоже! ## Перенос строк diff --git a/files/ru/learn/css/css_layout/floats_skills/index.md b/files/ru/learn/css/css_layout/floats_skills/index.md index c0de5ccd1a83d8..1400b62865fafe 100644 --- a/files/ru/learn/css/css_layout/floats_skills/index.md +++ b/files/ru/learn/css/css_layout/floats_skills/index.md @@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Floats_skills Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats). Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала. -> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/) чтобы проработать задания. +> [!NOTE] +> Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/) чтобы проработать задания. > > Если вы застрянете, попросите нас о помощи — см. раздел [Оценка или дальнейшая помощь](#оценка_или_дальнейшая_помощь) в конце страницы @@ -21,7 +22,8 @@ slug: Learn/CSS/CSS_layout/Floats_skills {{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 700)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float1-download.html) чтобы работать в вашем собственном или онлайн редакторе. +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float1-download.html) чтобы работать в вашем собственном или онлайн редакторе. ## Float Два @@ -33,7 +35,8 @@ slug: Learn/CSS/CSS_layout/Floats_skills {{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float2-download.html) чтобы работать в вашем собственном или онлайн редакторе. +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float2-download.html) чтобы работать в вашем собственном или онлайн редакторе. ## Float Три @@ -45,7 +48,8 @@ slug: Learn/CSS/CSS_layout/Floats_skills {{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float3-download.html) чтобы работать в вашем собственном или онлайн редакторе. +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float3-download.html) чтобы работать в вашем собственном или онлайн редакторе. ## Оценка или дальнейшая помощь diff --git a/files/ru/learn/css/css_layout/grids/index.md b/files/ru/learn/css/css_layout/grids/index.md index cf64d133e15b34..ebddcc55a4b305 100644 --- a/files/ru/learn/css/css_layout/grids/index.md +++ b/files/ru/learn/css/css_layout/grids/index.md @@ -19,7 +19,8 @@ slug: Learn/CSS/CSS_layout/Grids \[Временная диаграмма; скоро будет заменена лучшей диаграммой.] -> **Примечание:** Может показаться удивительным, если кто-нибудь из фона дизайна, что CSS не имеет встроенной сетки, и вместо этого мы, похоже, используем множество субоптимальных методов для создания сетчатых конструкций. Как вы узнаете в последней части этой статьи, это изменится, однако вам, вероятно, понадобятся существующие методы создания гридов в течение некоторого времени. +> [!NOTE] +> Может показаться удивительным, если кто-нибудь из фона дизайна, что CSS не имеет встроенной сетки, и вместо этого мы, похоже, используем множество субоптимальных методов для создания сетчатых конструкций. Как вы узнаете в последней части этой статьи, это изменится, однако вам, вероятно, понадобятся существующие методы создания гридов в течение некоторого времени. ## Использование "grid system" в ваших проектах @@ -116,7 +117,8 @@ body { Верхний ряд отдельных столбцов теперь будет аккуратно размещаться в виде сетки. -> **Примечание:** Мы также дали каждому столбцу светло-красный цвет, чтобы вы могли точно видеть, сколько места занимает каждый. +> [!NOTE] +> Мы также дали каждому столбцу светло-красный цвет, чтобы вы могли точно видеть, сколько места занимает каждый. В контейнерах макетов, которые мы хотим разместить более одного столбца, нужно предоставить специальные классы, чтобы скорректировать их значения {{cssxref ("width")}} до необходимого количества столбцов (плюс желоба между ними). Нам нужно создать дополнительный класс, чтобы контейнеры могли охватывать от 2 до 12 столбцов. Каждая ширина является результатом сложения ширины столбца этого количества столбцов плюс ширины желоба, который всегда будет набирать номер меньше, чем число столбцов. @@ -186,7 +188,8 @@ body { С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты. -> **Примечание:** Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей [готовой версией](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) на GitHub (см. также [запуск в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)). +> [!NOTE] +> Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей [готовой версией](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) на GitHub (см. также [запуск в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)). Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом: @@ -301,7 +304,8 @@ body { Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично! -> **Примечание:** Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей [готовой версией на GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (см. также [запуск в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)). +> [!NOTE] +> Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей [готовой версией на GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (см. также [запуск в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)). ### Более простые вычисления с использованием функции calc() @@ -353,9 +357,11 @@ body { } ``` -> **Примечание:** вы можете увидеть нашу законченную версию в файле [liquid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (также см. её [в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). +> [!NOTE] +> Вы можете увидеть нашу законченную версию в файле [liquid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (также см. её [в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). -> **Примечание:** Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию `calc ()`, хотя он довольно хорошо поддерживается в браузерах - ещё в IE9. +> [!NOTE] +> Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию `calc ()`, хотя он довольно хорошо поддерживается в браузерах - ещё в IE9. ### Семантические и "несемантические" сетчатые системы @@ -369,7 +375,8 @@ body { } ``` -> **Примечание:** Если вы использовали препроцессор, такой как [Sass](http://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас. +> [!NOTE] +> Если вы использовали препроцессор, такой как [Sass](http://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас. ### Включение офсетных контейнеров в нашей сетке @@ -407,13 +414,15 @@ body {
14
``` -> **Примечание:** Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения! +> [!NOTE] +> Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения! Попытайтесь загрузить и обновить, чтобы увидеть разницу или посмотрите наш пример [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (см. [также «live»](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). Готовый пример должен выглядеть так: ![](offset-grid-finished.png) -> **Примечание:** В качестве дополнительного упражнения вы можете реализовать класс «смещение на два»? +> [!NOTE] +> В качестве дополнительного упражнения вы можете реализовать класс «смещение на два»? ### Ограничения с плавающей сеткой @@ -490,7 +499,8 @@ Flexbox является **одномерным** по дизайну. Он им Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует. -> **Примечание:** Нормализация - очень полезная небольшая библиотека CSS, написанная Николасом Галлахером, которая автоматически делает некоторые полезные основные исправления макета и делает стиль элементов по умолчанию более согласованным в разных браузерах. +> [!NOTE] +> Нормализация — очень полезная небольшая библиотека CSS, написанная Николасом Галлахером, которая автоматически делает некоторые полезные основные исправления макета и делает стиль элементов по умолчанию более согласованным в разных браузерах. Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее: @@ -564,7 +574,8 @@ Flexbox является **одномерным** по дизайну. Он им Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект. -> **Примечание:** Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) - файлом (см. также [в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). +> [!NOTE] +> Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) - файлом (см. также [в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца». @@ -721,7 +732,8 @@ Skeleton - это более простая сетка, чем некоторы ![](css-grid-finished.png) -> **Примечание:** Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу [законченную версию](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html) (также смотрите, как она [работает в прямом эфире](https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html)). +> [!NOTE] +> Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу [законченную версию](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html) (также смотрите, как она [работает в прямом эфире](https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html)). ### Другие полезные функции сетки CSS @@ -761,7 +773,8 @@ Skeleton - это более простая сетка, чем некоторы 1. Удалите элементы `
` внутри `
` - вам больше не нужны эти данные, поскольку CSS-сетки могут обрабатывать размещение содержимого по строкам и столбцам для вас. 2. Используйте свойства сетки CSS, чтобы создать макет для вашей формы как можно ближе к оригиналу. Вам нужно будет установить ширину на содержащем элементе и подумать о том, как установить пробелы в столбцах, а также пробелы в строке. -> **Примечание:** Сначала выполните это и если вы действительно застряли, вы можете проверить свой код на примере [css-tables-as-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html). Не обманывайте - сначала попробуйте упражнение! +> [!NOTE] +> Сначала выполните это и если вы действительно застряли, вы можете проверить свой код на примере [css-tables-as-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html). Не обманывайте - сначала попробуйте упражнение! ## Резюме diff --git a/files/ru/learn/css/css_layout/index.md b/files/ru/learn/css/css_layout/index.md index 7c1d29165791e3..ddb1f5b7f28966 100644 --- a/files/ru/learn/css/css_layout/index.md +++ b/files/ru/learn/css/css_layout/index.md @@ -15,7 +15,8 @@ slug: Learn/CSS/CSS_layout 2. Ориентироваться в основах CSS, как указано в разделе [Вступление в CSS](/ru/docs/Learn/CSS/First_steps). 3. Понимать, как [стилизовать блочные элементы](/ru/docs/Learn/CSS/Building_blocks). -> **Примечание:** Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода [JSBin](https://jsbin.com/) и [Glitch](https://glitch.com/). +> [!NOTE] +> Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода [JSBin](https://jsbin.com/) и [Glitch](https://glitch.com/). ## Руководство diff --git a/files/ru/learn/css/css_layout/introduction/index.md b/files/ru/learn/css/css_layout/introduction/index.md index 2537c7a01a20c0..c3e36d73477c5f 100644 --- a/files/ru/learn/css/css_layout/introduction/index.md +++ b/files/ru/learn/css/css_layout/introduction/index.md @@ -48,7 +48,8 @@ slug: Learn/CSS/CSS_layout/Introduction Элементы, выводящиеся один _под_ другим, называются _блочными_, в противоположность _строчным_, которые выводятся один _вслед_ за другим, как отдельные слова в обычном абзаце текста. -> **Примечание:** Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение). +> [!NOTE] +> Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение). Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдёт. Именно поэтому важно начинать вёрстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас. @@ -140,7 +141,8 @@ Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_Fl {{ EmbedLiveSample('Flex_2', '300', '200') }} -> **Примечание:** Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox). +> [!NOTE] +> Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox). ## Grid Layout @@ -230,7 +232,8 @@ Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_Fl {{ EmbedLiveSample('Grid_2', '300', '330') }} -> **Примечание:** Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью [Grid Layout](/ru/docs/Learn/CSS/CSS_layout/Grids). +> [!NOTE] +> Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью [Grid Layout](/ru/docs/Learn/CSS/CSS_layout/Grids). Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но всё равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего. @@ -296,7 +299,8 @@ p { {{ EmbedLiveSample('Float_1', '100%', 600) }} -> **Примечание:** Float полностью объяснён в нашем уроке по свойствам [float и clear](/ru/docs/Learn/CSS/CSS_layout/Floats). До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по [устаревшим методам разметки](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). +> [!NOTE] +> Float полностью объяснён в нашем уроке по свойствам [float и clear](/ru/docs/Learn/CSS/CSS_layout/Floats). До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по [устаревшим методам разметки](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). ## Методы позиционирования @@ -599,7 +603,8 @@ body { {{ EmbedLiveSample('Sticky_1', '100%', 200) }} -> **Примечание:** чтобы узнать больше о позиционировании, см. нашу статью [Позиционирование.](/ru/docs/Learn/CSS/CSS_layout/Positioning) +> [!NOTE] +> Чтобы узнать больше о позиционировании, см. нашу статью [Позиционирование.](/ru/docs/Learn/CSS/CSS_layout/Positioning) ## Макет таблицы diff --git a/files/ru/learn/css/css_layout/multicol_skills/index.md b/files/ru/learn/css/css_layout/multicol_skills/index.md index a36378dcd4041b..0b6166be2f48b7 100644 --- a/files/ru/learn/css/css_layout/multicol_skills/index.md +++ b/files/ru/learn/css/css_layout/multicol_skills/index.md @@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Multicol_skills Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout). Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала. -> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) чтобы проработать задания. +> [!NOTE] +> Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) чтобы проработать задания. > > Если вы застрянете, попросите нас о помощи — см. раздел [Оценка и дальнейшая помощь](#оценка_и_дальнейшая_помощь) в конце страницы. @@ -21,7 +22,8 @@ slug: Learn/CSS/CSS_layout/Multicol_skills {{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol1-download.html) чтобы работать в вашем собственном или онлайн редакторе. +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol1-download.html) чтобы работать в вашем собственном или онлайн редакторе. ## Multicol Два @@ -35,7 +37,8 @@ slug: Learn/CSS/CSS_layout/Multicol_skills {{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol2-download.html) чтобы работать в вашем собственном или онлайн редакторе. +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol2-download.html) чтобы работать в вашем собственном или онлайн редакторе. ## Multicol Три @@ -47,7 +50,8 @@ slug: Learn/CSS/CSS_layout/Multicol_skills {{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol3-download.html) чтобы работать в вашем собственном или онлайн редакторе. +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol3-download.html) чтобы работать в вашем собственном или онлайн редакторе. ## Оценка и дальнейшая помощь diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.md b/files/ru/learn/css/css_layout/multiple-column_layout/index.md index 0f433e199dbb07..508c481bba35fe 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.md @@ -217,7 +217,8 @@ body { Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение `all`. -> **Примечание:** Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение `none` (по умолчанию) либо `all`. +> [!NOTE] +> Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение `none` (по умолчанию) либо `all`. ```css hidden body { diff --git a/files/ru/learn/css/css_layout/position_skills/index.md b/files/ru/learn/css/css_layout/position_skills/index.md index 7d3350b8dee719..02f030bbd612a0 100644 --- a/files/ru/learn/css/css_layout/position_skills/index.md +++ b/files/ru/learn/css/css_layout/position_skills/index.md @@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Position_skills Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning). Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала. -> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/) чтобы проработать задания. +> [!NOTE] +> Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/) чтобы проработать задания. > > Если вы застрянете, попросите нас о помощи — см. раздел [Оценка и дальнейшая помощь](#оценка_и_дальнейшая_помощь) в конце страницы @@ -23,7 +24,8 @@ slug: Learn/CSS/CSS_layout/Position_skills В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом? -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html), чтобы работать в вашем собственном или онлайн-редакторе +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html), чтобы работать в вашем собственном или онлайн-редакторе ## Позиционирование Два @@ -35,7 +37,8 @@ slug: Learn/CSS/CSS_layout/Position_skills {{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}} -> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position2-download.html), чтобы работать в вашем собственном или онлайн-редакторе +> [!NOTE] +> Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position2-download.html), чтобы работать в вашем собственном или онлайн-редакторе ## Оценка и дальнейшая помощь diff --git a/files/ru/learn/css/css_layout/positioning/index.md b/files/ru/learn/css/css_layout/positioning/index.md index c439244ad40b15..f86b3dcd9de191 100644 --- a/files/ru/learn/css/css_layout/positioning/index.md +++ b/files/ru/learn/css/css_layout/positioning/index.md @@ -40,7 +40,8 @@ slug: Learn/CSS/CSS_layout/Positioning И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию! -> **Примечание:** вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)). +> [!NOTE] +> Вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)). ### Относительное позиционирование @@ -61,7 +62,8 @@ top: 30px; left: 30px; ``` -> **Примечание:** значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д. +> [!NOTE] +> Значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д. Если вы сейчас сохраните и обновите, вы получите примерно такой результат: @@ -124,7 +126,8 @@ span { Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали `top: 30px;`, сила толкает блок, заставляя его перемещаться вниз на 30px. -> **Примечание:** вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). +> [!NOTE] +> Вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). ### Абсолютное позиционирование @@ -197,11 +200,14 @@ span { Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является **исходным содержащим блоком**. См. раздел ниже для дополнительной информации). -> **Примечание:** вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить `top: 0; bottom: 0; left: 0; right: 0;` и `margin: 0;` для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните... +> [!NOTE] +> Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить `top: 0; bottom: 0; left: 0; right: 0;` и `margin: 0;` для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните... -> **Примечание:** Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит. +> [!NOTE] +> Да, значения `margin` все ещё влияют на позиционируемый элемент. Однако, схлопывания `margin` не происходит. -> **Примечание:** вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). +> [!NOTE] +> Вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). ### Контекст позиционирования @@ -276,7 +282,8 @@ span { Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}. -> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). +> [!NOTE] +> Вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). ### Введение в z-index @@ -374,7 +381,8 @@ p:nth-of-type(1) { Обратите внимание что `z-index` принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000. -> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). +> [!NOTE] +> Вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). ### Фиксированное позиционированиее @@ -476,7 +484,8 @@ p:nth-of-type(1) { {{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }} -> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). +> [!NOTE] +> Вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). ### position: sticky @@ -649,7 +658,8 @@ dt { Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством [позиции](/ru/docs/Web/CSS/position) его предка. -> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). +> [!NOTE] +> Вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). ## Проверь свои навыки! diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md index 577a7cb145f599..ad5d7d226aaa11 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md @@ -21,7 +21,8 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность. -> **Примечание:** Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как [XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest). На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного. +> [!NOTE] +> Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как [XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest). На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного. Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — [info-box-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html). Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле: @@ -120,7 +121,8 @@ body { } ``` -> **Примечание:** Мы используем селектор-потомки с полем `.info-box` в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы. +> [!NOTE] +> Мы используем селектор-потомки с полем `.info-box` в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы. Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их {{cssxref ("list-style-type")}} имеет значение `none`, чтобы избавиться от пули и их {{cssxref ("width")}} установлены на `150px`, чтобы они удобно располагались в информационном окне. Элементы {{htmlelement ("a")}} имеют {{cssxref ("display")}} встроенный блок, поэтому они будут сидеть в строке, но всё же быть стильными и соответствующим образом оформлены для кнопок вкладок, используя множество других свойств. @@ -242,7 +244,8 @@ In our second example, we will take our first example — our info-box — and a ![](fixed-info-box.png) -> **Примечание:** You can see the finished example running live at [fixed-info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. +> [!NOTE] +> You can see the finished example running live at [fixed-info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. As a starting point, you can use your completed example from the first section of the article, or make a local copy of [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) from our Github repo. @@ -280,7 +283,8 @@ First of all, we need some additional HTML to represent the web site main conten ``` -> **Примечание:** You can feel free to change the fake content for some real content if you like. +> [!NOTE] +> You can feel free to change the fake content for some real content if you like. ### Changes to the existing CSS @@ -323,7 +327,8 @@ Our finished example will look like this: ![](hidden-sliding-panel.png) -> **Примечание:** You can see the finished example running live at [hidden-info-panel.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article. +> [!NOTE] +> You can see the finished example running live at [hidden-info-panel.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article. As a starting point, make a local copy of [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file: @@ -339,7 +344,8 @@ As a starting point, make a local copy of [hidden-info-panel-start.html](https:/ To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — `