From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../advanced_styling_effects/index.html | 8 ++++---- .../backgrounds_and_borders/index.html | 2 +- .../cascade_and_inheritance/index.html | 6 +++--- .../css/building_blocks/cascade_tasks/index.html | 2 +- .../css/building_blocks/debugging_css/index.html | 2 +- .../fundamental_css_comprehension/index.html | 2 +- .../images_media_form_elements/index.html | 4 ++-- files/ru/learn/css/building_blocks/index.html | 2 +- .../selectors/attribute_selectors/index.html | 4 ++-- .../selectors/combinators/index.html | 4 ++-- .../learn/css/building_blocks/selectors/index.html | 2 +- .../type_class_and_id_selectors/index.html | 2 +- .../css/building_blocks/styling_tables/index.html | 22 +++++++++++----------- .../css/building_blocks/the_box_model/index.html | 16 ++++++++-------- .../building_blocks/values_and_units/index.html | 6 +++--- files/ru/learn/css/css_layout/flexbox/index.html | 2 +- files/ru/learn/css/css_layout/floats/index.html | 4 ++-- files/ru/learn/css/css_layout/grids/index.html | 2 +- files/ru/learn/css/css_layout/index.html | 4 ++-- .../learn/css/css_layout/introduction/index.html | 12 ++++++------ .../css_layout/multiple-column_layout/index.html | 4 ++-- .../ru/learn/css/css_layout/normal_flow/index.html | 2 +- .../ru/learn/css/css_layout/positioning/index.html | 2 +- .../practical_positioning_examples/index.html | 4 ++-- .../css/css_layout/responsive_design/index.html | 12 ++++++------ .../css/first_steps/getting_started/index.html | 4 ++-- .../first_steps/how_css_is_structured/index.html | 8 ++++---- .../learn/css/first_steps/how_css_works/index.html | 2 +- .../using_your_new_knowledge/index.html | 2 +- .../learn/css/first_steps/what_is_css/index.html | 4 ++-- files/ru/learn/css/howto/css_faq/index.html | 4 ++-- files/ru/learn/css/index.html | 6 +++--- files/ru/learn/css/styling_text/index.html | 2 +- .../css/styling_text/styling_links/index.html | 10 +++++----- .../css/styling_text/styling_lists/index.html | 2 +- .../styling_text/typesetting_a_homepage/index.html | 2 +- 36 files changed, 89 insertions(+), 89 deletions(-) (limited to 'files/ru/learn/css') diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html index 174d980693..251a05fd63 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html @@ -36,7 +36,7 @@ translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects

Блок-тень

-

{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и text-shadow, box-shadows отлично поддерживаются брузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

+

{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и text-shadow, box-shadows отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

Вы можете найти примеры из стати на box-shadow.html (или в исходном коде).

@@ -150,7 +150,7 @@ button:active {

{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}

-

Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противополжном углу кнопки для эстетичности.

+

Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.

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

@@ -302,14 +302,14 @@ article div:last-child {

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

-

Примечание: В Firefox Вы можеет использовать Инспектор фигур, чтобы редактировать фигуры.

+

Примечание: В Firefox Вы можете использовать Инспектор фигур, чтобы редактировать фигуры.

Значение circle() — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте Обзор CSS-фигур на MDN.)

-webkit-background-clip: text

-

Функция, о которой мы, кажется, упомянули в свйстве text для значения {{cssxref("background-clip")}}. Опция -webkit-text-fill-color: transparent; позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс -webkit- для любых браузеров:

+

Функция, о которой мы, кажется, упомянули в свойстве text для значения {{cssxref("background-clip")}}. Опция -webkit-text-fill-color: transparent; позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс -webkit- для любых браузеров:

.text-clip {
   -webkit-background-clip: text;
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
index c0e52dd232..861ec6f884 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -32,7 +32,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 

Стилизация фона в CSS

-

CSS cвойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.

+

CSS свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.

.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
index 5d29314cea..dd52f08276 100644
--- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -51,7 +51,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 

Специфичность

-

Cпецифичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

+

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

  • Селектор элементов ( например h1 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
  • @@ -74,7 +74,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

    {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

    -

    Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы черезвычайно трудно использовать!

    +

    Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!

    Примечание: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.

    @@ -90,7 +90,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance

    Понимание наследования

    -

    Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы устанавили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.

    +

    Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.

    Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <li> и к элементам внутри первого вложенного списка. Далее мы добавили класс special ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.

    diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.html index d4f7440cb8..b7580f53e0 100644 --- a/files/ru/learn/css/building_blocks/cascade_tasks/index.html +++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html @@ -40,7 +40,7 @@ original_slug: Learn/CSS/Building_blocks/Каскад_задачи

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

      -
    1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
    2. +
    3. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
    4. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать:
      • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
      • diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html index 1e78277f4b..ceb299bcab 100644 --- a/files/ru/learn/css/building_blocks/debugging_css/index.html +++ b/files/ru/learn/css/building_blocks/debugging_css/index.html @@ -138,7 +138,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS

        Поддерживаются ли свойство и значение браузером в котором вы тестируете?

        -

        Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсетки" (subgrid) {{cssxref("grid-template-columns")}}.

        +

        Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.

        Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

        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 index 36f4767e10..2e47ff1cdf 100644 --- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -8,7 +8,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
        {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
        -

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

        +

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

        diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html index 481cd28b58..21896e3f92 100644 --- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html +++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html @@ -57,7 +57,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements

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

        -

        Замещаемые элемнты в верстке

        +

        Замещаемые элементы в верстке

        При использовании различных методов верстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.

        @@ -127,7 +127,7 @@ textarea {

        Другие полезные настройки

        -

        В дополние к правилам отмеченых выше, вы должны также установить overflow: auto для <textarea> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:

        +

        В дополнение к правилам отмеченных выше, вы должны также установить overflow: auto для <textarea> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:

        textarea {
           overflow: auto;
        diff --git a/files/ru/learn/css/building_blocks/index.html b/files/ru/learn/css/building_blocks/index.html
        index 8f071e3f62..8f2b09449c 100644
        --- a/files/ru/learn/css/building_blocks/index.html
        +++ b/files/ru/learn/css/building_blocks/index.html
        @@ -52,7 +52,7 @@ translation_of: Learn/CSS/Building_blocks
          
        Блоки в CSS
        Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим CSS-блоки.
        Фон и границы
        -
        В этом уроке мы рассмотрим всякие интересные вещи, котроые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиетнов и фоновых изображений до скругления углов, фонов и границ.
        +
        В этом уроке мы рассмотрим всякие интересные вещи, которые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.
        Изменение направления текста
        Раньше 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 index 3ac93f2012..de2d540a59 100644 --- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -69,7 +69,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
        • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
        • -
        • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью зачения. Он выбирает второй пункт списка.
        • +
        • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
        • li[class~="a"] выберет класс a, а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.
        @@ -77,7 +77,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors

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

        -

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

        +

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

        diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html index 89cab04833..c5dcf8b0c1 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -37,13 +37,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators

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

        -

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

        +

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

        article > p

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

        -

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

        +

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

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

        diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index b52ba93b52..dc1eae6b95 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

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

        -

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

        +

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

        Some code with the h1 highlighted.

        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 index 2d54a6bde3..6e182420c8 100644 --- 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 @@ -80,7 +80,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se

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

        -

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

        +

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

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

        diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html index 4c39633b30..2dafd6f79b 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables

        Типичная HTML таблица

        -

        Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать этоболее интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

        +

        Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

        <table>
           <caption>A summary of the UK's most famous punk bands</caption>
        @@ -82,7 +82,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
         

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

          -
        1. В начале неоюходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
        2. +
        3. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
        4. Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
        5. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
          <link href="style.css" rel="stylesheet" type="text/css">
          @@ -125,9 +125,9 @@ th, td {

          Наиболее важные части следующие:

            -
          • Свойство {{cssxref("table-layout")}} со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ({{cssxref(":nth-child")}}) ("Выберите n-ый дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматиривает эту технику в статье Fixed Table Layouts.
            +
          • Свойство {{cssxref("table-layout")}} со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ({{cssxref(":nth-child")}}) ("Выберите n-ый дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.

            - Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет озывчивой (хотя для этого потребуется еще некоторая работа для правильного отображнения на экранах небольших размеров).
          • + Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется еще некоторая работа для правильного отображения на экранах небольших размеров).
          • Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше:
          • Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
          • Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.
          • @@ -141,7 +141,7 @@ th, td {

            Теперь мы еще кое-что изменим.

            -

            Во-первых, мы пойдем и найдем на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотит, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбраный вами Google Fonts шрифт.

            +

            Во-первых, мы пойдем и найдем на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.

            Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <link>:

            @@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td {

            Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и еще {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

            -

            Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементамяркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

            +

            Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

            Полосатая зебра

            @@ -233,16 +233,16 @@ table { }
          -
        • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательноость элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
        • +
        • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
        • Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
        • -
        • И наконец мы установили для таблицы сплошной цвет фона, котрый обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.
        • +
        • И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.

        Этот взрыв цвета выглядит следующим образом:

        -

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

        +

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

        Стилизация заголовка

        @@ -264,7 +264,7 @@ table {

        Активное обучение: Стилизация вашей собственной таблицы

        -

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

        +

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

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

        @@ -272,7 +272,7 @@ table {
        • Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
        • -
        • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этомлегко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
        • +
        • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
        • Используйте {{cssxref("border-collapse")}}: collapse, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
        • Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.
        • Используйте полоски зебры, чтобы облегчить чтение между строк.
        • diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index 74a40b9a33..27f451d650 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -8,7 +8,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model ---
          {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
          -
          Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
          +
          Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные задачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
          @@ -66,7 +66,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

          Однако, мы можем изменить внутренний тип отображения, используя такие значения display как flex. Если мы установим display: flex; для элемента, внешний тип отображения примет значение block, но внутренний тип изменится на flex. Любые прямые дочерние элементы этой коробки станут гибкими (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.

          -

          Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и cтрочное расположение.

          +

          Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и срочное расположение.

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

          @@ -168,7 +168,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

          В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который дает им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.

          -

          Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ишрина и высота совпали с первым блоком?

          +

          Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?

          {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

          @@ -209,9 +209,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

          {{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

          -

           Cхлопывание margin 

          +

           Схлопывание margin 

          -

          Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.

          +

          Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения негативны, то сумма отрицательных значений будет вычтена из общей суммы.

          В примере ниже имеется два абзаца. Первый абзац имеет ширину margin-bottom  50 пикселей. Ширина второго параграфа — margin-top 30 пикселей. Поля схлопываются так, что в результате  margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.

          @@ -225,7 +225,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model

          Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям width и height бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения width и height.

          -

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

          +

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

          Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.

          @@ -238,7 +238,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
        • {{cssxref("border-left")}}
        -

        Для утановки ширины, стиля или цвета всех границ используйте:

        +

        Для установки ширины, стиля или цвета всех границ используйте:

        • {{cssxref("border-width")}}
        • @@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
          • Применяются свойства width и height.
          • -
          • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.
          • +
          • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.

          Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства width и height.

          diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html index 7aa0744ad9..d64426b99e 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.html +++ b/files/ru/learn/css/building_blocks/values_and_units/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

          Что такое значение CSS?

          -

          В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечисленно на странице <color>.

          +

          В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.

          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.

          @@ -146,7 +146,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
        - + @@ -273,7 +273,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units

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

        -

        RGB и RGBA зачения

        +

        RGB и RGBA значения

        Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — rgb() — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.

        diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index fcb1840af7..324f802c37 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -90,7 +90,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox

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

        -

        Примечание: Вы можете также распологать flex элементы в обратном направлении, используя значения row-reverse и column-reverse. Попробуйте их тоже!

        +

        Примечание: Вы можете также располагать flex элементы в обратном направлении, используя значения row-reverse и column-reverse. Попробуйте их тоже!

        Перенос строк

        diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 4c4914cbe9..86ff3ac15d 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Floats padding: 1em; } -

        Если вы сохраните и обнавите сейчас, то вы увидите нечто похожее на следующее:

        +

        Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:

        ЕдиницаОтосительна кОтносительна к
        -

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

        +

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

        • Нормальный поток
        • @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

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

          -

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

          +

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

          Примечание: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за  направление отображения строковых элементов (таких как предложение).

          @@ -68,10 +68,10 @@ translation_of: Learn/CSS/CSS_layout/Introduction

          Методы CSS, которыми вы можете управлять разметкой элементов:

            -
          • Свойство {{cssxref("display")}} — Стандартные значениея  blockinline или inline-block могут изменять поведение элементов в обычном потоке (см.подробнее Types of CSS boxes). Также можно менять сами методы разметки такими значениями свойства display, как CSS Grid или Flexbox.
          • +
          • Свойство {{cssxref("display")}} — Стандартные значения  blockinline или inline-block могут изменять поведение элементов в обычном потоке (см.подробнее Types of CSS boxes). Также можно менять сами методы разметки такими значениями свойства display, как CSS Grid или Flexbox.
          • Floats — Применение значения {{cssxref("float")}} типа left может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.
          • Свойство {{cssxref("position")}} — Позволяет точно контролировать положение блоков внутри других блоков. static позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.
          • -
          • Макет Таблицы — свойства для разметки таблиц могут быть использованы и для нетабличных элеметов, с помощью display: table и соотвествующих свойств.
          • +
          • Макет Таблицы — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью display: table и соответствующих свойств.
          • Multi-column layoutМногоколоночный макет поможет расположить содержимое столбцами, как в газетах.
          @@ -122,7 +122,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

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

          -

          В качестве простого примера, добавим свойство {{cssxref("flex")}}  ко всем дочерним элементам, со значением 1. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное местро убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы  станут меньше, для того, чтобы все они были одного размера.

          +

          В качестве простого примера, добавим свойство {{cssxref("flex")}}  ко всем дочерним элементам, со значением 1. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы  станут меньше, для того, чтобы все они были одного размера.

-

Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого margin: 0 auto трюкa. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.

+

Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого margin: 0 auto трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.

Укладка наших вкладок

diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index ee270e0769..ba5149fc62 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -6,7 +6,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн ---
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
-

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

+

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

@@ -97,7 +97,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

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

-

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

+

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

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

@@ -127,7 +127,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
-

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

+

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

A desktop view of a layout with two columns.
@@ -159,7 +159,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

Flexbox

-

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

+

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

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

@@ -205,11 +205,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

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

-

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

+

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

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

-

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

+

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

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

diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html index 30d495ad25..6d811800b5 100644 --- a/files/ru/learn/css/first_steps/getting_started/index.html +++ b/files/ru/learn/css/first_steps/getting_started/index.html @@ -21,7 +21,7 @@ translation_of: Learn/CSS/First_steps/Getting_started
- + @@ -131,7 +131,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <li>Элемент <em>три</em></li> </ul> -

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

+

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

.special {
   color: orange;
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
index 62bbb0b148..3f6c18c125 100644
--- 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
@@ -27,7 +27,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS
  
- + @@ -207,7 +207,7 @@ p {
<p class="special">Какого же я цвета?</p>
-

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объвление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

+

В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

p {
   color: red;
@@ -346,7 +346,7 @@ p {
 
 

Стенография

-

Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются стенографическими свойствами, — они позволяют установать несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

+

Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):

@@ -386,7 +386,7 @@ background-scroll: fixed;

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

-

Добавьте вышеупоминутые объвления в ваш код. Попробуйте изменить значения и посмотреть на результат.

+

Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.

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

diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html index a0ff236f45..ff9721cbcf 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.html +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -139,7 +139,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works

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

-

Это хорошо применяется, если Вы хотиете использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают calc() как значение. Я добавлю резерв — знаение в px, затем задам ширину с помощью функции calc(), равной 100% - 50px. Старые браузеры используют пиксельное значение, потому что не распознают calc(). Новые браузеры используют calc() так как эта строка появляется позже в каскаде.

+

Это хорошо применяется, если Вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают calc() как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции calc(), равной 100% - 50px. Старые браузеры используют пиксельное значение, потому что не распознают calc(). Новые браузеры используют calc() так как эта строка появляется позже в каскаде.

.box {
   width: 500px;
diff --git a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html
index 015846a9ff..977b1ddd39 100644
--- a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html
+++ b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html
@@ -99,6 +99,6 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
 
  1. Что такое CSS?
  2. Начало работы с CSS
  3. -
  4. Как струтурирован CSS
  5. +
  6. Как структурирован CSS
  7. Как работает CSS
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 index 6dd204cd6b..f1b43354ea 100644 --- a/files/ru/learn/css/first_steps/what_is_css/index.html +++ b/files/ru/learn/css/first_steps/what_is_css/index.html @@ -23,7 +23,7 @@ original_slug: Learn/CSS/First_steps/Что_такое_CSS
- + @@ -85,7 +85,7 @@ p {

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

-

Примечание: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, Вы должны привыкнуть к поиску "MDN css-feature-name" в Вашем бразере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

+

Примечание: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, Вы должны привыкнуть к поиску "MDN css-feature-name" в Вашем браузере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!

CSS-модули

diff --git a/files/ru/learn/css/howto/css_faq/index.html b/files/ru/learn/css/howto/css_faq/index.html index 59f971e488..c4ab7459a5 100644 --- a/files/ru/learn/css/howto/css_faq/index.html +++ b/files/ru/learn/css/howto/css_faq/index.html @@ -6,12 +6,12 @@ original_slug: Web/CSS/Common_CSS_Questions ---

Why doesn't my CSS, which is valid, render correctly?

-

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

+

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

У современных браузеров есть два режима отображения веб-страниц:

    -
  • Индивидуальный: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы  с неполной, некорректной или отстутвующей DOCTYPE декларацией или с тем видом DOCTYPE, который использовался до 2001 года, будет отображён в индивидуальном режиме.
  • +
  • Индивидуальный: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы  с неполной, некорректной или отсутствующий DOCTYPE декларацией или с тем видом DOCTYPE, который использовался до 2001 года, будет отображён в индивидуальном режиме.
  • Стандартный: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным  DOCTYPE отображаются уже в стандартом режиме.
diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.html index 1e4d325d61..c312325c9d 100644 --- a/files/ru/learn/css/index.html +++ b/files/ru/learn/css/index.html @@ -42,11 +42,11 @@ translation_of: Learn/CSS
Дизайн текста
Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.
Стилизация блоков
-
Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приемами управления блоками, установив такие свойства, как поля, оступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.
+
Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приемами управления блоками, установив такие свойства, как поля, отступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.
Размещение элементов с помощью CSS
-
К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.
+
К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.
Адаптивный дизайн (TBD)
-
В настоящее время существоет множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD - Responsive Web Design) стал основным навыком веб-разработки. В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.
+
В настоящее время существует множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD - Responsive Web Design) стал основным навыком веб-разработки. В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.

Решаем часто встречающиеся проблемы  в CSS

diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.html index 8a696e55df..54a8cc02fe 100644 --- a/files/ru/learn/css/styling_text/index.html +++ b/files/ru/learn/css/styling_text/index.html @@ -39,7 +39,7 @@ translation_of: Learn/CSS/Styling_text

Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.

-
Основы стилизирования текcта и шрифта
+
Основы стилизирования текста и шрифта
В этой статье мы детально изучим стилизирование текста и шрифта, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а так же line и letter spacing.
Стилизирование списков
Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS свойства о которых нужно знать, и
diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html index 29ecf37729..861d27909c 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
-

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

+

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

Необходимые знания:Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.)Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.)
Задача:
Необходимые знания:Базовая компьютерная грамотность, Базовое програмное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSSБазовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача:
Требуемые знания:Базовые компьютерные знания, установка базового програмного обеспечения, базовые знания работа с файлами и базовые знания HTML  (Введение в HTML).Базовые компьютерные знания, установка базового программного обеспечения, базовые знания работа с файлами и базовые знания HTML  (Введение в HTML).
Задача:
@@ -182,7 +182,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog
  • Наконец, a:active используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!
  • -

    Активное изучение: Стилизуйте ссылки самостояельно

    +

    Активное изучение: Стилизуйте ссылки самостоятельно

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

    @@ -328,10 +328,10 @@ a[href*="http"] {

    И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.

    -

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

    +

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

    -

    Обратите вниманиеe: Не переживайте если вы еще не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

    +

    Обратите внимание: Не переживайте если вы еще не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

    Стилизация ссылок в виде кнопок

    @@ -404,7 +404,7 @@ a:active {
  • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.
  • Далее мы устанавливаем {{cssxref("display")}} на inline-block — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
  • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаем {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
  • -
  • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет приемущество в центрировании текста по вертикали) и задаем для текста черный цвет.
  • +
  • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаем для текста черный цвет.
  • diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.html index dfd19f97e8..c4f25e9a04 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.html +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -8,7 +8,7 @@ original_slug: Learn/CSS/Styling_text/Стилизация_списков
    {{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
    -

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

    +

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

    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 index fd8fa8eb06..470566580f 100644 --- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html @@ -54,7 +54,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани
    • Дайте всей странице font-size 10px.
    • -
    • Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответсвующие относительные единицы.
    • +
    • Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответствующие относительные единицы.
    • Дайте основному тексту подходящую line-height.
    • Отцентрируйте ваш заголовок верхнего уровня на странице.
    • Дайте вашим заголовкам немного letter-spacing чтобы они не были слишком сжатыми, позвольте буквам немного дышать.
    • -- cgit v1.2.3-54-g00ecf