diff options
author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/learn/css/building_blocks/values_and_units/index.html | |
parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/learn/css/building_blocks/values_and_units/index.html')
-rw-r--r-- | files/ru/learn/css/building_blocks/values_and_units/index.html | 28 |
1 files changed, 14 insertions, 14 deletions
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 d64426b99e..2e32d47268 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> @@ -40,7 +40,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units } </code> </pre> -<p>Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <code><color></code> как примененный, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция <code>rgb()</code> и т.д. Вы можете воспользоваться <em>любым </em>доступным значением <code><color></code> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.</p> +<p>Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <code><color></code> как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция <code>rgb()</code> и т.д. Вы можете воспользоваться <em>любым </em>доступным значением <code><color></code> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.</p> <p>Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.</p> @@ -69,13 +69,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <tr> <td><code><dimension></code></td> <td> - <p><code><dimension></code> (измерение) это — <code><number></code> (число) с единицей измерения, прикрепленной к нему, например <code>45deg</code>, <code>5s</code>, или <code>10px</code>. <code><dimension></code> — это зонт категорий, включающих в себя типы <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, и <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution"> </a>(длина, угол, время и разрешение)<a href="/en-US/docs/Web/CSS/resolution">. </a></p> + <p><code><dimension></code> (измерение) это — <code><number></code> (число) с единицей измерения, прикреплённой к нему, например <code>45deg</code>, <code>5s</code>, или <code>10px</code>. <code><dimension></code> — это зонт категорий, включающих в себя типы <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, и <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution"> </a>(длина, угол, время и разрешение)<a href="/en-US/docs/Web/CSS/resolution">. </a></p> </td> </tr> <tr> <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> <td> - <p><code><percentage></code> (проценты) представляют собой долю некоторого другого значения, например <code>50%</code>. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине ее родительского элемента.</p> + <p><code><percentage></code> (проценты) представляют собой долю некоторого другого значения, например <code>50%</code>. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента.</p> </td> </tr> </tbody> @@ -140,7 +140,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h4 id="Единицы_относительной_длины">Единицы относительной длины</h4> -<p>Относительные единицы длин являются относительными к чему-то еще, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался <span class="tlid-translation translation" lang="ru"><span title="">относительно всего остального на странице.</span></span> Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.</p> +<p>Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался <span class="tlid-translation translation" lang="ru"><span title="">относительно всего остального на странице.</span></span> Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.</p> <table class="standard-table"> <thead> @@ -191,7 +191,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h4 id="Изучение_на_примере">Изучение на примере</h4> -<p>В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что еще измениться.</p> +<p>В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.</p> <p>Второй блок имеет ширину, установленную в единицах <code>vw</code> (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">открыть этот пример в отдельной вкладке браузера</a>.</p> @@ -203,7 +203,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h4 id="em_и_rem">em и rem</h4> -<p><code>em</code> и <code>rem</code> — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как <a href="/en-US/docs/Learn/CSS/Styling_text">стилизация текста</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout">разметка CSS</a>. Приведенный ниже пример показывает это.</p> +<p><code>em</code> и <code>rem</code> — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как <a href="/en-US/docs/Learn/CSS/Styling_text">стилизация текста</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout">разметка CSS</a>. Приведённый ниже пример показывает это.</p> <p>HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс <em>ems, </em>а второй класс <em>rems</em>.</p> @@ -223,9 +223,9 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.</p> -<p>Различие в том, что второй набор блоков находится внутри обертки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.</p> +<p>Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.</p> -<p><strong>Попробуйте изменить ширину обертки (.wrapper) или процентное значение чтобы увидеть, как это работает.</strong></p> +<p><strong>Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> @@ -251,7 +251,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо еще.</p> -<p>Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зеленых и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.</p> +<p>Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.</p> <div class="blockIndicator note"> <p><strong>Внимание</strong>: В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими.</p> @@ -259,13 +259,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h3 id="Ключевые_слова_цвета">Ключевые слова цвета</h3> -<p>Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определенное количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> .</p> +<p>Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> .</p> <p><strong>Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.</strong></p> <h3 id="Шестнадцатеричные_RGB_значения"><span class="tlid-translation translation" lang="ru"><span title="">Шестнадцатеричные</span></span> RGB значения</h3> -<p>Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решетки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть <code>0123456789abcdef</code>. Каждая пара значений представляет один из каналов — красного, зеленого или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).</p> +<p>Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть <code>0123456789abcdef</code>. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).</p> <p>Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.</p> @@ -275,13 +275,13 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <h3 id="RGB_и_RGBA_значения">RGB и RGBA значения</h3> -<p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p> +<p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p> <p>Давайте перепишем наш последний пример используя RGB цвета:</p> <p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> -<p>А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвертое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на <code>0</code>, то это сделает цвет полностью прозрачным, тогда как <code>1</code> сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.</p> +<p>А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на <code>0</code>, то это сделает цвет полностью прозрачным, тогда как <code>1</code> сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.</p> <div class="blockIndicator note"> <p><strong>Внимание</strong>: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.</p> |