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/styling_text | |
| 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/styling_text')
6 files changed, 63 insertions, 63 deletions
diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index 5d80571f6f..270aec1251 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> -<p class="summary"><span class="seoSummary">В данной статье мы начнем путь к овладению стилизацией текста при помощи {{glossary("CSS")}}.</span> Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.</p> +<p class="summary"><span class="seoSummary">В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}.</span> Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.</p> <table class="learn-box standard-table"> <tbody> @@ -24,10 +24,10 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <h2 id="Что_участвует_в_стилизации_текста_в_CSS">Что участвует в стилизации текста в CSS?</h2> -<p>Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течет к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведет себя как ряд встроенных элементов, размещенных на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.</p> +<p>Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течёт к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведёт себя как ряд встроенных элементов, размещённых на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.</p> <div class="note"> -<p><strong>Примечание:</strong> если приведенный выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.</p> +<p><strong>Примечание:</strong> если приведённый выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.</p> </div> <p>Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:</p> @@ -38,12 +38,12 @@ translation_of: Learn/CSS/Styling_text/Fundamentals </ul> <div class="note"> -<p><strong>Примечание:</strong> имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернете их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)</p> +<p><strong>Примечание:</strong> имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернёте их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)</p> </div> <h2 id="Шрифты">Шрифты</h2> -<p>Давайте сразу перейдем к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> +<p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> <pre class="brush: html notranslate"><h1>Tommy the cat</h1> diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.html index 54a8cc02fe..9ec747a83e 100644 --- a/files/ru/learn/css/styling_text/index.html +++ b/files/ru/learn/css/styling_text/index.html @@ -24,7 +24,7 @@ translation_of: Learn/CSS/Styling_text --- <p id="Перед_стартом"> {{LearnSidebar}}</p> -<p>Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространенных вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок</p> +<p>Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространённых вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок</p> <h2 id="Необходимые_условия">Необходимые условия</h2> @@ -52,7 +52,7 @@ translation_of: Learn/CSS/Styling_text <h2 id="Проверка">Проверка</h2> -<p>Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведенных руководствах.</p> +<p>Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.</p> <dl> <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы муниципальной школы</a></dt> 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 bbafb52296..993e92c7b8 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -31,10 +31,10 @@ translation_of: Learn/CSS/Styling_text/Styling_links <p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">псевдоклассы</a>:</p> <ul> - <li><strong>Link (не посещенная)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li> + <li><strong>Link (не посещённая)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li> <li><strong>Visited</strong>: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс {{cssxref(":visited")}}.</li> - <li><strong>Hover</strong>: Ссылка, когда на нее наведен курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}</li> - <li><strong>Focus</strong>: Ссылка, когда она была сфокусирована (например когда пользователь переместился на нее используя клавишу <kbd>Tab</kbd> или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.</li> + <li><strong>Hover</strong>: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}</li> + <li><strong>Focus</strong>: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу <kbd>Tab</kbd> или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.</li> <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li> </ul> @@ -56,8 +56,8 @@ translation_of: Learn/CSS/Styling_text/Styling_links <ul> <li>Ссылки подчеркнуты.</li> - <li>Не посещенные ссылки синие.</li> - <li>Посещенные ссылки фиолетовые</li> + <li>Не посещённые ссылки синие.</li> + <li>Посещённые ссылки фиолетовые</li> <li>Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.</li> <li>Сфокусированные ссылки имеют контур вокруг себя — <span class="tlid-translation translation" lang="ru"><span title="">вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на </span></span>Mac, вам может понадобиться включить опцию <em>Full Keyboard Access: All controls </em>нажав <kbd>Ctrl</kbd> + <kbd>F7</kbd><span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>,</span> прежде чем это будет работать<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></li> <li>Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).</li> @@ -66,7 +66,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <p>Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы недолжны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:</p> <ul> - <li>Использовать нижнее подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, то хотя бы выделите их каким-либо другим путем.</li> + <li>Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путем.</li> <li>Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.</li> </ul> @@ -113,9 +113,9 @@ a:active { }</pre> -<p>Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введете их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> +<p>Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> -<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> <pre class="brush: css">body { width: 300px; @@ -163,20 +163,20 @@ a:active { Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p></pre> -<p>Объединение этих двух дает нам такой результат:</p> +<p>Объединение этих двух даёт нам такой результат:</p> <p>{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}</p> -<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> <ul> <li>Первые два правила не так интересны в этом обсуждении.</li> - <li>Третье правило использует селектор <code>a</code> чтобы избавиться от подчеркивания текста и контура фокуса по умолчанию (которые все равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.</li> - <li>Далее, мы используем селекторы <code>a:link</code> и <code>a:visited</code> чтобы настроить пару цветовых вариаций не посещенных и посещенных ссылок, так чтоб они отличались.</li> - <li>Следующие два правила используют <code>a:focus</code> и <code>a:hover</code> настраивают сфокусированные и наведенные (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчеркивание чтобы ссылка выделялась еще больше. Два пункта на которые надо обратить внимание: + <li>Третье правило использует селектор <code>a</code> чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые все равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.</li> + <li>Далее, мы используем селекторы <code>a:link</code> и <code>a:visited</code> чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.</li> + <li>Следующие два правила используют <code>a:focus</code> и <code>a:hover</code> настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание: <ul> - <li>Нижнее подчеркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчеркнутыми (например хвосты у букв как "р" и "у").</li> - <li>Значение {{cssxref("border-bottom")}} установлено на <code>1px solid</code>, без определенного цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.</li> + <li>Нижнее подчёркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как "р" и "у").</li> + <li>Значение {{cssxref("border-bottom")}} установлено на <code>1px solid</code>, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.</li> </ul> </li> <li>Наконец, <code>a:active</code> используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!</li> @@ -184,7 +184,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog <h3 id="Активное_изучение_Стилизуйте_ссылки_самостоятельно">Активное изучение: Стилизуйте ссылки самостоятельно</h3> -<p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте свое воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все еще так же функциональное, как и наш пример выше.</p> +<p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.</p> <p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы действительно застряли нажмите кнопку <em>Show solution</em> чтобы вставить пример, который мы показали выше.</p> @@ -320,25 +320,25 @@ a[href*="http"] { <p>{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}</p> -<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаем путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p> +<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p> -<p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придется менять размер изображения и вставлять его как есть.</p> +<p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.</p> -<p>Наконец, мы задаем некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p> +<p>Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p> <p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p> <p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p> <div class="note"> -<p><strong>Обратите внимание</strong>: Не переживайте если вы еще не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> +<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> </div> <h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2> <p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты, которые вы исследовали в этой статье</span></span> также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p> -<p>Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определенных обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.</p> +<p>Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определённых обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.</p> <p>Для начала HTML:</p> @@ -390,7 +390,7 @@ a:active { color: white; }</pre> -<p>Что дает нам следующий результат:</p> +<p>Что даёт нам следующий результат:</p> <p>{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}</p> @@ -398,13 +398,13 @@ a:active { <ul> <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li> - <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаем горизонтальный список ссылок, поэтому в третьем правиле задаем свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li> - <li>четвертое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдемся по нему шаг за шагом: + <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li> + <li>четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом: <ul> <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li> <li>Далее мы устанавливаем {{cssxref("display")}} на <code>inline-block</code> — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением <code>block</code>, мы хотим иметь возможность менять их размер. <code>inline-block</code> позволяет нам делать это.</li> - <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаем {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code><ul></code> и выпадет вниз на следующую строку. <span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы возвращаемся к 100%, используя следующее правило</span></span>, которое выбирает только последний <code><a></code> в списке и удаляет его margin. Сделано!</li> - <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаем для текста черный цвет.</li> + <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code><ul></code> и выпадет вниз на следующую строку. <span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы возвращаемся к 100%, используя следующее правило</span></span>, которое выбирает только последний <code><a></code> в списке и удаляет его margin. Сделано!</li> + <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.</li> </ul> </li> </ul> 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 c4f25e9a04..3b57fc4763 100644 --- a/files/ru/learn/css/styling_text/styling_lists/index.html +++ b/files/ru/learn/css/styling_text/styling_lists/index.html @@ -71,7 +71,7 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> </dl></pre> -<p>Если вы перейдете к живому примеру прямо сейчас и изучите элемент списка используя <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика браузера</a>, то вы заметите несколько стилей установленных по умолчанию:</p> +<p>Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика браузера</a>, то вы заметите несколько стилей установленных по умолчанию:</p> <ul> <li>Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>) и {{cssxref("padding-left")}} <code>40px</code> (<code>2.5em</code>.)</li> @@ -124,8 +124,8 @@ dd { <ul> <li>Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.</li> <li>Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.</li> - <li>Правило 4 задает одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li> - <li>Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" class="hidden"> </span></li> + <li>Правило 4 задаёт одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li> + <li>Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" class="hidden"> </span></li> </ul> <h2 id="Стили_специфичные_для_списков">Стили специфичные для списков</h2> @@ -133,7 +133,7 @@ dd { <p>Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:</p> <ul> - <li>{{cssxref("list-style-type")}}: задает тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li> + <li>{{cssxref("list-style-type")}}: задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li> <li>{{cssxref("list-style-position")}}: управляет будет ли маркер появляется внутри пунктов списка или <span class="tlid-translation translation" lang="ru"><span title="">вне их перед началом каждого элемента.</span></span></li> <li>{{cssxref("list-style-image")}}: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.</li> </ul> @@ -146,7 +146,7 @@ dd { list-style-type: upper-roman; }</pre> -<p>Это дает нам следующий вид:</p> +<p>Это даёт нам следующий вид:</p> <p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> @@ -199,13 +199,13 @@ ul li { <ul> <li>{{cssxref("background-image")}}: <span class="tlid-translation translation" lang="ru"><span title="">Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.</span></span></li> <li>{{cssxref("background-position")}}: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим <code>0 0</code>, что значит что маркер будет появляться в самом верху слева каждого пункта списка.</li> - <li>{{cssxref("background-size")}}: Задает размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), <span class="tlid-translation translation" lang="ru"><span title="">что очень хорошо сочетается с отступом (padding) </span></span><code>20px</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><span class="tlid-translation translation" lang="ru"><span title="">который мы позволили разместить внутри маркера </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</span></span></li> + <li>{{cssxref("background-size")}}: Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), <span class="tlid-translation translation" lang="ru"><span title="">что очень хорошо сочетается с отступом (padding) </span></span><code>20px</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><span class="tlid-translation translation" lang="ru"><span title="">который мы позволили разместить внутри маркера </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</span></span></li> <li>{{cssxref("background-repeat")}}: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение <code>no-repeat</code>.</li> </ul> </li> </ul> -<p>Это дает нам следующий результат:</p> +<p>Это даёт нам следующий результат:</p> <p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> @@ -219,7 +219,7 @@ ul li { list-style-position: inside; }</pre> -<p>Может быть заменен этим:</p> +<p>Может быть заменён этим:</p> <pre class="brush: css">ul { list-style: square url(example.png) inside; @@ -229,11 +229,11 @@ ul li { <h2 id="Контроль_счета_списка">Контроль счета списка</h2> -<p>Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p> +<p>Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p> <h3 id="start">start</h3> -<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счет списка с цифры отличной от 1. Например:</p> +<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счёт списка с цифры отличной от 1. Например:</p> <pre class="brush: html"><ol start="4"> <li>Toast pita, leave to cool, then slice down the edge.</li> @@ -248,7 +248,7 @@ ul li { <h3 id="reversed">reversed</h3> -<p>Атрибут {{htmlattrxref("reversed","ol")}} начнет отсчет по убыванию вместо возрастания. Например:</p> +<p>Атрибут {{htmlattrxref("reversed","ol")}} начнёт отсчёт по убыванию вместо возрастания. Например:</p> <pre class="brush: html"><ol start="4" reversed> <li>Toast pita, leave to cool, then slice down the edge.</li> @@ -262,7 +262,7 @@ ul li { <p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> <div class="note"> -<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счет продолжится до нуля и далее отрицательные значения.</p> +<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счёт продолжится до нуля и далее отрицательные значения.</p> </div> <h3 id="value">value</h3> @@ -365,7 +365,7 @@ window.addEventListener("load", drawOutput); <h2 id="Смотрите_также">Смотрите также</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Счетчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рекомендуем изучить это, если вы захотите размяться. Смотрите</span></span>:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рекомендуем изучить это, если вы захотите размяться. Смотрите</span></span>:</p> <ul> <li>{{cssxref("@counter-style")}}</li> @@ -375,7 +375,7 @@ window.addEventListener("load", drawOutput); <h2 id="Заключение">Заключение</h2> -<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> <p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> @@ -386,5 +386,5 @@ window.addEventListener("load", drawOutput); <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li> <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li> - <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Верстка домашней страницы общественной школы</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li> </ul> 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 470566580f..53db98ecdd 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 @@ -40,12 +40,12 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <h2 id="Краткое_описание_проекта">Краткое описание проекта</h2> -<p>Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает еще каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с легкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.</p> +<p>Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает ещё каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с лёгкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.</p> <p>Шрифты:</p> <ul> - <li>Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьезности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.</li> + <li>Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьёзности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.</li> <li>Используйте подходящий сервис для генерации пуленепробиваемого <code>@font-face</code> кода для этих двух шрифтов.</li> <li>Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.</li> </ul> @@ -66,9 +66,9 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <ul> <li>Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.</li> - <li>Сделайте так чтобы ссылки были подчеркнутыми по умолчанию, но, чтобы подчеркивание исчезало, когда вы фокусируетесь или наводите мышь на них.</li> + <li>Сделайте так чтобы ссылки были подчёркнутыми по умолчанию, но, чтобы подчёркивание исчезало, когда вы фокусируетесь или наводите мышь на них.</li> <li>Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.</li> - <li>Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все еще вписывался в общий дизайн страницы.</li> + <li>Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все ещё вписывался в общий дизайн страницы.</li> <li>Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.</li> </ul> @@ -106,7 +106,7 @@ original_slug: Learn/CSS/Styling_text/Задание:_Стилизировани <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://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваш пост должен включать: <ul> - <li>Описательный заголовок такой как "Требуется оценка верстки домашней страницы общественный школы".</li> + <li>Описательный заголовок такой как "Требуется оценка вёрстки домашней страницы общественный школы".</li> <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li> <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li> <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li> diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html index 03318d45b6..f617762a19 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -27,17 +27,17 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <h2 id="Краткое_повторение_семейств_шрифтов">Краткое повторение семейств шрифтов</h2> -<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты примененные к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имен семейств шрифтов и браузер следует по списку пока не найдет тот шрифт, который является доступным в системе, под управлением которой он работает:</p> +<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p> <pre class="brush: css notranslate">p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; }</pre> -<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространенных системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать стек шрифта для указания предпочтительных шрифтов</span></span>, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, <span class="tlid-translation translation" lang="ru"><span title="">но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</span></span></p> +<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать стек шрифта для указания предпочтительных шрифтов</span></span>, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, <span class="tlid-translation translation" lang="ru"><span title="">но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</span></span></p> <h2 id="Веб-шрифты">Веб-шрифты</h2> -<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, <span class="tlid-translation translation" lang="ru"><span title="">это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете.</span></span> Замечательно! Требуемый синтаксис выглядит примерно так:</p> +<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, <span class="tlid-translation translation" lang="ru"><span title="">это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете.</span></span> Замечательно! Требуемый синтаксис выглядит примерно так:</p> <p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p> @@ -69,7 +69,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. <span class="tlid-translation translation" lang="ru"><span title="">Сложно продемонстрировать это на встроенном живом примере</span></span>, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса</p> -<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдете некоторый минимальный CSS для работы с базовым макетом и версткой примера.</p> +<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.</p> <h3 id="Поиск_шрифтов">Поиск шрифтов</h3> @@ -81,7 +81,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел {{anch("Использование онлайн-сервиса шрифтов")}} для более подробной информации.</li> </ul> -<p>Давайте найдем какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдете каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p> +<p>Давайте найдём какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p> <p>В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. <span class="tlid-translation translation" lang="ru"><span title="">В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.</span></span></p> @@ -116,7 +116,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Для внедрения их в ваше демо следуйте следующим шагам:</p> <ol> - <li>Переименуйте распакованную папку на что-нибудь легкое и простое, например <code>fonts</code>.</li> + <li>Переименуйте распакованную папку на что-нибудь лёгкое и простое, например <code>fonts</code>.</li> <li>Откройте файл <code>stylesheet.css</code> и скопируйте содержимое обоих <code>@font-face</code> блоков в ваш файл <code>web-font-start.css</code> — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.</li> <li>Каждый из функций <code>url()</code> указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте <code>fonts/</code> в начало каждого пути (настройте так как необходимо).</li> <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li> @@ -143,7 +143,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.</li> <li>Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.</li> <li>Когда вы выбрали семейства шрифтов, нажмите на панель <em>[Number] Families Selected</em> в низу страницы.</li> - <li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить ее в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнете пользоваться им в вашем CSS.</li> + <li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.</li> <li>Далее вам надо скопировать CSS-объявления<span class="tlid-translation translation" lang="ru"><span title="">, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.</span></span></li> </ol> @@ -167,16 +167,16 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты font-style: normal; }</pre> -<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдемся по нему, чтобы посмотреть, что он делает:</p> +<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:</p> <ul> <li><code>font-family</code>: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.</li> - <li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделенных запятыми — браузер будет искать среди них и использовать первый который найдет и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдет, даже если он не умеет использовать этот шрифт.</li> + <li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.</li> <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, <span class="tlid-translation translation" lang="ru"><span title="">вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. </span></span><a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым</a> от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.</li> </ul> <div class="note"> -<p><strong>Обратите внимание</strong>: Вы также можете указать определенные значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p> +<p><strong>Обратите внимание</strong>: Вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p> </div> <h2 id="Переменные_шрифты">Переменные шрифты</h2> |