diff options
author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
---|---|---|
committer | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-15 14:29:50 +0300 |
commit | 55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch) | |
tree | 5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/learn/css/building_blocks | |
parent | 08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff) | |
download | translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2 translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip |
Auto fixes
Diffstat (limited to 'files/ru/learn/css/building_blocks')
15 files changed, 42 insertions, 42 deletions
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 <h2 id="Блок-тень">Блок-тень</h2> -<p>{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и <code>text-shadow</code>, <code>box-shadows</code> отлично поддерживаются брузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.</p> +<p>{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и <code>text-shadow</code>, <code>box-shadows</code> отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.</p> <p>Вы можете найти примеры из стати на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (или в <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">исходном коде</a>).</p> @@ -150,7 +150,7 @@ button:active { <p>{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}</p> -<p>Мы стилизовали кнопку с помощью состояний <em>focus</em>, <em>hover</em> и <em>active</em>. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противополжном углу кнопки для эстетичности.</p> +<p>Мы стилизовали кнопку с помощью состояний <em>focus</em>, <em>hover</em> и <em>active</em>. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.</p> <p>При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.</p> @@ -302,14 +302,14 @@ article div:last-child { <p>Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В Firefox Вы можеет использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p> +<p><strong>Примечание</strong>: В Firefox Вы можете использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p> </div> <p>Значение <code>circle()</code> — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте <a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Обзор CSS-фигур</a> на MDN.)</p> <h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> -<p>Функция, о которой мы, кажется, упомянули в свйстве <code>text</code> для значения {{cssxref("background-clip")}}. Опция <code>-webkit-text-fill-color: transparent;</code> позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс <code>-webkit-</code> для любых браузеров:</p> +<p>Функция, о которой мы, кажется, упомянули в свойстве <code>text</code> для значения {{cssxref("background-clip")}}. Опция <code>-webkit-text-fill-color: transparent;</code> позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс <code>-webkit-</code> для любых браузеров:</p> <pre class="brush: css">.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 <h2 id="Стилизация_фона_в_CSS">Стилизация фона в CSS</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">CSS cвойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">CSS свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> <pre class="brush: css notranslate"><code>.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 <h3 id="Специфичность">Специфичность</h3> -<p>Cпецифичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. <em>Различные типы селекторов ( селекторы элементов <code>h1{...}</code>, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.</em> По существу, это мера того, насколько специфическим будет отбор по селектору:</p> +<p>Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. <em>Различные типы селекторов ( селекторы элементов <code>h1{...}</code>, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.</em> По существу, это мера того, насколько специфическим будет отбор по селектору:</p> <ul> <li>Селектор элементов ( <em>например <code>h1</code></em> ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.</li> @@ -74,7 +74,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> -<p>Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы черезвычайно трудно использовать!</p> +<p>Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!</p> <div class="blockIndicator note"> <p><strong>Примечание</strong>: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: <a href="https://developer.mozilla.org/ru-RU/docs/Web/CSS/color#Specifications">color property Specifications section</a>.</p> @@ -90,7 +90,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance <h2 id="Понимание_наследования">Понимание наследования</h2> -<p>Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы устанавили для внешнего <code><ul></code> стиль границы, внутренние отступы и цвет шрифта.</p> +<p>Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <code><ul></code> стиль границы, внутренние отступы и цвет шрифта.</p> <p>Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <code><li></code> и к элементам внутри первого вложенного списка. Далее мы добавили класс <code>special</code> ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.</p> 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/Каскад_задачи <p>Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:</p> <ol> - <li>Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.</li> + <li>Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.</li> <li>Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваше сообщение должно включать: <ul> <li>Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").</li> 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 <h3 id="Поддерживаются_ли_свойство_и_значение_браузером_в_котором_вы_тестируете">Поддерживаются ли свойство и значение браузером в котором вы тестируете?</h3> -<p>Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсетки" (subgrid) {{cssxref("grid-template-columns")}}.</p> +<p>Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.</p> <p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> 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 <div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> -<p class="summary">Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социльной сети.</p> +<p class="summary">Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.</p> <table class="learn-box standard-table"> <tbody> 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 <p>Вы также можете попробовать значение <code>fill</code>, которое будет заполнять блок, но при этом не сохранять соотношение сторон.</p> -<h2 id="Замещаемые_элемнты_в_верстке">Замещаемые элемнты в верстке</h2> +<h2 id="Замещаемые_элементы_в_верстке">Замещаемые элементы в верстке</h2> <p><span class="tlid-translation translation" lang="ru"><span title="">При использовании различных методов верстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например</span></span>, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.</p> @@ -127,7 +127,7 @@ textarea { <h3 id="Другие_полезные_настройки">Другие полезные настройки</h3> -<p>В дополние к правилам отмеченых выше, вы должны также установить <code>overflow: auto</code> для <code><textarea></code> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:</p> +<p>В дополнение к правилам отмеченных выше, вы должны также установить <code>overflow: auto</code> для <code><textarea></code> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:</p> <pre class="brush: css">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 <dt><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS</a></dt> <dd>Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим <em>CSS-блоки.</em></dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></dt> - <dd>В этом уроке мы рассмотрим всякие интересные вещи, котроые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиетнов и фоновых изображений до скругления углов, фонов и границ.</dd> + <dd>В этом уроке мы рассмотрим всякие интересные вещи, которые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста</a></dt> <dd>Раньше CSS развивался, чтобы лучше поддерживать разные <strong>режимы написания</strong>, включая <em>справа налево</em> или <em>сверху вниз</em> (как в японском языке). Мы рассмотрим их в этой статье.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></dt> 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 <ul> <li>Используя <code>li[class],</code> мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.</li> - <li><code>li[class="a"]</code> выбирает селектор с классом <code>a</code>, но не селектор с классом <code>a</code> в сочетании с другим, отделённым запятой, классом как частью зачения. Он выбирает второй пункт списка.</li> + <li><code>li[class="a"]</code> выбирает селектор с классом <code>a</code>, но не селектор с классом <code>a</code> в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.</li> <li><code>li[class~="a"]</code> выберет класс <code>a</code>, а также значение, которое содержит класс <code>a</code> как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.</li> </ul> @@ -77,7 +77,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors <h2 id="Селекторы_вхождения_подстроки"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы вхождения подстроки</span></span></h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута</span></span>. Например, если у вас есть классы <code>box-warning</code> и <code>box-error</code> и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать <code>[class^="box-"]</code>, чтобы выбрать оба класса (или <code>[class|="box"]</code> как описано в предыдущем разделе).</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута</span></span>. Например, если у вас есть классы <code>box-warning</code> и <code>box-error</code> и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать <code>[class^="box-"]</code>, чтобы выбрать оба класса (или <code>[class|="box"]</code> как описано в предыдущем разделе).</p> <table class="standard-table"> <thead> 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 <h2 id="Дочерний_комбинатор">Дочерний комбинатор</h2> -<p><strong>Дочерний комбинатор</strong> (<code>></code>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code><p></code>, которые являются дочерними элементами <code><article></code>, селетор пишется так:</p> +<p><strong>Дочерний комбинатор</strong> (<code>></code>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code><p></code>, которые являются дочерними элементами <code><article></code>, селектор пишется так:</p> <pre class="brush: css notranslate">article > p</pre> <p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code><li></code>, которые являются прямыми потомками <code><ul></code>, и присвоить им верхнюю границу красного цвета.</p> -<p>Если вы уберёте символ <code>></code>, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <code><li></code> получат верхнюю границу красного цвета.</p> +<p>Если вы уберёте символ <code>></code>, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <code><li></code> получат верхнюю границу красного цвета.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> 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/Селекторы <h2 id="Что_такое_селекторы">Что такое селекторы?</h2> -<p>Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p> +<p>Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p> <p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> 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 <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора.</span> <span title="">Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.</span></span></p> -<p>В примере ниже у нас есть <code><div></code>, содержащий примечание. Серая граница применятеся когда блок имеет класс <code>notebox</code>. Если у блока есть также класс <code>warning</code> или <code>danger</code>, мы меняем {{cssxref("border-color")}}.</p> +<p>В примере ниже у нас есть <code><div></code>, содержащий примечание. Серая граница применяется когда блок имеет класс <code>notebox</code>. Если у блока есть также класс <code>warning</code> или <code>danger</code>, мы меняем {{cssxref("border-color")}}.</p> <p>Мы можем указать браузеру, что мы хотим подобрать только такой элемент, <span class="tlid-translation translation" lang="ru"><span title="">к которому применены два класса, сцепив их вместе без пробелов между ними. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Вы увидите, что к последнему </span></span><code><div></code> <span class="tlid-translation translation" lang="ru"><span title=""> не применён ни один стиль, так как он имеет только класс</span></span> <code>danger</code>; <span class="tlid-translation translation" lang="ru"><span title="">ему нужен ещё и класс </span></span> <code>notebox</code><span class="tlid-translation translation" lang="ru"><span title="">, чтобы получить какую-нибудь стилизацию.</span></span></p> 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 <h2 id="Типичная_HTML_таблица">Типичная HTML таблица</h2> -<p>Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать этоболее интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p> +<p>Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p> <pre class="brush: 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 <p>В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.</p> <ol> - <li>В начале неоюходимо сделать копию <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a>, загрузить оба изображения (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), и вставить эти файлы в отдельную папку на вашем компьютере.</li> + <li>В начале необходимо сделать копию <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a>, загрузить оба изображения (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), и вставить эти файлы в отдельную папку на вашем компьютере.</li> <li>Следующее, это создать новый файл <code>style.css</code> и сохранить его в той же папке вместе с другими файлами.</li> <li>Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}: <pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> @@ -125,9 +125,9 @@ th, td { <p>Наиболее важные части следующие:</p> <ul> - <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматиривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> + <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> <br> - Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет озывчивой (хотя для этого потребуется еще некоторая работа для правильного отображнения на экранах небольших размеров).</li> + Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется еще некоторая работа для правильного отображения на экранах небольших размеров).</li> <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code> рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li> <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.</li> @@ -141,7 +141,7 @@ th, td { <p>Теперь мы еще кое-что изменим.</p> -<p>Во-первых, мы пойдем и найдем на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотит, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбраный вами Google Fonts шрифт.</p> +<p>Во-первых, мы пойдем и найдем на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.</p> <p>Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <code><link></code>:</p> @@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td { <p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и еще {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p> -<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементамяркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p> +<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p> <h4 id="Полосатая_зебра">Полосатая зебра</h4> @@ -233,16 +233,16 @@ table { }</pre> <ul> - <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательноость элементов. Так формула <code>2n-1</code> выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.</li> + <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула <code>2n-1</code> выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.</li> <li>Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный <code>.png</code> с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.</li> - <li>И наконец мы установили для таблицы сплошной цвет фона, котрый обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор <code>:nth-child</code>.</li> + <li>И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор <code>:nth-child</code>.</li> </ul> <p>Этот взрыв цвета выглядит следующим образом:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> -<p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и акдемической.</p> +<p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.</p> <h3 id="Стилизация_заголовка">Стилизация заголовка</h3> @@ -264,7 +264,7 @@ table { <h2 id="Активное_обучение_Стилизация_вашей_собственной_таблицы">Активное обучение: Стилизация вашей собственной таблицы</h2> -<p>Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то зачительно более стильное и менее безвкусное чем наша таблица.</p> +<p>Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.</p> <h2 id="Стилизация_таблицы_быстрые_советы">Стилизация таблицы быстрые советы</h2> @@ -272,7 +272,7 @@ table { <ul> <li>Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.</li> - <li>Используйте {{cssxref("table-layout")}}<code>: fixed</code> для более понятного поведения разметки, при этомлегко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).</li> + <li>Используйте {{cssxref("table-layout")}}<code>: fixed</code> для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).</li> <li>Используйте {{cssxref("border-collapse")}}<code>: collapse</code>, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.</li> <li>Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.</li> <li>Используйте полоски зебры, чтобы облегчить чтение между строк.</li> 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 --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> -<div>Каждый элемент в CSS заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div> +<div>Каждый элемент в CSS заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные задачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div> <div></div> @@ -66,7 +66,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Однако, мы можем изменить внутренний тип отображения, используя такие значения <code>display</code> как <code>flex</code>. Если мы установим <code>display: flex;</code> для элемента, внешний тип отображения примет значение <code>block</code>, но внутренний тип изменится на <code>flex</code>. Любые прямые дочерние элементы этой коробки станут <em>гибкими</em> (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, о которой вы узнаете позже.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flow_Layout/%D0%91%D0%BB%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D0%B8_%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B5">Блочное и cтрочное расположение</a>.</p> +<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flow_Layout/%D0%91%D0%BB%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D0%B8_%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B5">Блочное и срочное расположение</a>.</p> </div> <p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code>, и другие внутренние значения, которые могут иметь ваши элементы, например <code><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> @@ -168,7 +168,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который дает им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p> -<p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ишрина и высота совпали с первым блоком?</strong></p> +<p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ширина и высота совпали с первым блоком?</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> @@ -209,9 +209,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> -<h4 id="Cхлопывание_margin"> Cхлопывание margin </h4> +<h4 id="Схлопывание_margin"> Схлопывание margin </h4> -<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.</p> +<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения негативны, то сумма отрицательных значений будет вычтена из общей суммы.</p> <p>В примере ниже имеется два абзаца. Первый абзац имеет ширину <code>margin-bottom</code> 50 пикселей. Ширина второго параграфа — <code>margin-top</code> 30 пикселей. Поля схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.</p> @@ -225,7 +225,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p> -<p>Для слилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> +<p>Для стилизации границ существует большое количество различных свойств — имеется четыре границы, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p> <p>Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.</p> @@ -238,7 +238,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <li>{{cssxref("border-left")}}</li> </ul> -<p>Для утановки ширины, стиля или цвета всех границ используйте:</p> +<p>Для установки ширины, стиля или цвета всех границ используйте:</p> <ul> <li>{{cssxref("border-width")}}</li> @@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <ul> <li><span class="tlid-translation translation" lang="ru"><span title="">Применяются свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li> - <li>Использование <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><code>margin</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>border</code><span class="tlid-translation translation" lang="ru"><span title=""> приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.</span></span></li> + <li>Использование <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><code>margin</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>border</code><span class="tlid-translation translation" lang="ru"><span title=""> приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.</span></span></li> </ul> <p><span class="tlid-translation translation" lang="ru"><span title="">Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> 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 <h2 id="Что_такое_значение_CSS">Что такое значение CSS?</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например </span></span><code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> или <code><a href="/en-US/docs/Web/CSS/length"><length></a></code><a href="/en-US/docs/Web/CSS/length">. </a>Если вы видите значение <code><color></code> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечисленно на странице <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code><a href="/en-US/docs/Web/CSS/color_value">.</a></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например </span></span><code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> или <code><a href="/en-US/docs/Web/CSS/length"><length></a></code><a href="/en-US/docs/Web/CSS/length">. </a>Если вы видите значение <code><color></code> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code><a href="/en-US/docs/Web/CSS/color_value">.</a></p> <div class="blockIndicator note"> <p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. 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.</p> @@ -146,7 +146,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <thead> <tr> <th scope="col">Единица</th> - <th scope="col">Отосительна к</th> + <th scope="col">Относительна к</th> </tr> </thead> <tbody> @@ -273,7 +273,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p><strong>И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.</strong></p> -<h3 id="RGB_и_RGBA_зачения">RGB и RGBA зачения</h3> +<h3 id="RGB_и_RGBA_значения">RGB и RGBA значения</h3> <p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p> |