<section id="description">
<p>Вероятно, вы уже встречали атрибут <code>alt</code> в теге <code>img</code> в других задачах. <code>Alt</code> описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.</p>
<p>Например: <code>&#x3C;img src="importantLogo.jpeg" alt="Company logo"></code></p>
<p>Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание <code>alt</code> должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута <code>alt</code> для каждого изображения.</p></section>

Add a Text Alternative to Images for Visually Impaired Accessibility

<section id="description">
<p>В последней задаче вы узнали, что включение атрибута <code>alt</code> в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях <code>alt</code> текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, <code>img</code> прежнему нуждается в атрибуте <code>alt</code>, но его можно установить в пустую строку. Вот пример: <code>&#x3C;img src="visualDecoration.jpeg" alt=""></code> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. <strong>Заметка</strong> <br> Для изображений с надписью вы можете захотеть включить текст <code>alt</code>, так как он помогает поисковым системам вносить в каталог содержимое изображения.</p></section>

Know When Alt Text Should be Left Blank

<section id="description">
<p>Заголовки (элементы от <code>h1</code> до <code>h6</code> ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. <em>Семантическое значение</em> – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом <code>h2</code> под которым идут несколько подразделов с элементом <code>h4</code> будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент <code>h1</code>, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице.</p></section>

Use Headings to Show Hierarchical Relationships of Content

<section id="description">
<p>В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code> и <code>section</code>, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному <code>div</code> . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации.</p>
<p> Элемент <code>main</code> используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. <code>main</code> тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега <code>main</code> автоматически предоставляет вспомогательные устройства, которые имеют функциональность.</p></section>

Jump Straight to the Content Using the main Element

<section id="description">
<p><code>article</code> является еще одним из новых элементов HTML5, который добавляет семантический смысл вашей разметке. <code>article</code> является секционирующим элементом и используется для обертывания независимого, автономного содержимого. Тег хорошо работает с записями блога, сообщениями на форуме или новостями.</p>
<p>Определение того, может ли контент быть автономным, обычно является личным выбором, но есть несколько простых тестов, которые вы можете использовать. Спросите себя, если вы удалите весь окружающий контекст, будет ли этот контент по-прежнему иметь смысл? Точно так же для текста сохранялось бы содержимое, если оно было в RSS-канале?</p>
<p>Помните, что люди, использующие вспомогательные технологии, полагаются на организованную, семантически значимую разметку, чтобы лучше понять вашу работу.</p><p><strong>Заметка про элементы <code>section</code> и <code>div</code></strong><br>Элемент <code>section</code> также является новым с HTML5 и имеет несколько иной семантический смысл, чем <code>article</code>. Элемент <code>article</code> для автономного контента, а <code>section</code> для группировки тематически связанных материалов. Они могут использоваться вместе. Например, если книга является <code>article</code>, то каждая глава является <code>section</code>. Когда между группами контента нет никакой связи, используйте <code>div</code>.</p><p><blockquote>&#x3C;div> - сгруппированный контент<br>&#x3C;section> - группы связанные контентом<br>&#x3C;article> - независимые группы, автономный контент<br></blockquote></p>
</section>

Wrap Content in the article Element

<section id="description">
<p>Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом <code>header</code> . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. <code>header</code> разделяет встроенную функцию ориентира, которую вы видели с <code>main</code> , позволяя вспомогательным технологиям быстро перейти к этому контенту. <strong>Заметка</strong> <br> <code>header</code> предназначен для использования в теге <code>body</code> вашего HTML-документа. Это отличается от <code>head</code> элемента, который содержит заголовок страницы, мета - информации и т.д.</p></section>

Make Screen Reader Navigation Easier with the header Landmark

<section id="description">
<p>Элемент <code>nav</code> - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега <code>nav</code> . Использование <code>footer</code> (в следующей задаче) достаточно.</p></section>

Make Screen Reader Navigation Easier with the nav Landmark

<section id="description">
<p>Подобно <code>header</code> и <code>nav</code>, элемент <code>footer</code> имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы.</p></section>

Make Screen Reader Navigation Easier with the footer Landmark

<section id="description">
<p>В HTML5 <code>audio</code> элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. <code>audio</code> тег поддерживает атрибут <code>controls</code> . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <blockquote> &#x3C;audio id = "meowClip" элементы управления> <br> &#x3C;источник src = "audio / meow.mp3" type = "audio / mpeg" /> <br> &#x3C;источник src = "audio / meow.ogg" type = "audio / ogg" /> <br> &#x3C;/ Аудио> <br></blockquote> <strong>Заметка</strong> <br> Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать.</p></section>

Improve Accessibility of Audio Content with the audio Element

<section id="description">
<p>HTML5 представил элемент <code>figure</code> вместе со связанной <code>figcaption</code>. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту <code>figure</code>. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что <code>figcaption</code> идет внутри <code>figure</code> тегов и может быть объединен с другими элементами: <blockquote> &#x3C;Цифра> <br> &#x3C;img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота"> <br> &#x3C;br> <br> &#x3C;Figcaption> <br> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. <br> &#x3C;/ Figcaption> <br> &#x3C;/ Цифра> <br></blockquote></p>
</section>

Improve Chart Accessibility with the figure Element

<section id="description">
<p>Улучшение доступности с семантической разметкой HTML применяется к использованию как соответствующих имен тегов, так и атрибутов. Следующие несколько проблем охватывают некоторые важные сценарии с использованием атрибутов в формах. <code>label</code> метки обертывают текст для определенного элемента управления формой, как правило это имя или ярлык для выбора. Это связывает смысл с элементом и делает форму более читаемой. <code>for</code> атрибут на <code>label</code> теге явно связывает этот <code>label</code> с контролем формы и используется для чтения с экрана. Вы узнали о переключателях и их ярлыках в уроке в разделе «Основы HTML». В этом уроке мы завернули элемент ввода переключателя внутри элемента <code>label</code> вместе с текстом ярлыка, чтобы сделать текст кликабельным. Другой способ добиться этого - использовать атрибут <code>for</code> как объяснено в этом уроке. Значение атрибута <code>for</code> должно быть таким же, как значение атрибута <code>id</code> элемента управления формой. Вот пример: <blockquote> &#x3C;Форма> <br> &#x3C;label for = "name"> Имя: &#x3C;/ label> <br> &#x3C;input type = "text" id = "name" name = "name"> <br> &#x3C;/ Форма> <br></blockquote></p>
</section>

Improve Form Field Accessibility with the label Element

<section id="description">
<p>Следующая тема охватывает доступность переключателей. Каждый выбор дается <code>label</code> с <code>for</code> атрибутом привязки к <code>id</code> соответствующего пункта, как рассматривалось в последней задаче. Поскольку радиокнопки часто входят в группу, где пользователь должен выбрать одну, есть способ семантически показать, что выбор является частью набора. Тег <code>fieldset</code> окружает всю группу переключателей для достижения этого. Он часто использует тег <code>legend</code> чтобы предоставить описание для группировки, которое считывается программами чтения с экрана для каждого выбора в элементе <code>fieldset</code>. <code>fieldset</code> и тег <code>legend</code> не нужны, если выбор не требует пояснений, например, гендерный выбор. Использование <code>label</code> с <code>for</code> атрибута для каждого переключателя достаточно. Вот пример: <blockquote> &#x3C;form> <br> &#x3C;fieldset> <br> &#x3C;legend> Выберите один из этих трех элементов: &#x3C;/ legend> <br> &#x3C;input id = "one" type = "radio" name = "items" value = "one"> <br> &#x3C;label for = "one"> Выбор 1 &#x3C;/ label> &#x3C;br> <br> &#x3C;input id = "two" type = "radio" name = "items" value = "two"> <br> &#x3C;label for = "two"> Выбор 2 &#x3C;/ label> &#x3C;br> <br> &#x3C;input id = "three" type = "radio" name = "items" value = "three"> <br> &#x3C;label for = "three"> Choice Three &#x3C;/ label> <br> &#x3C;/ fieldset> <br> &#x3C;/ form> <br></blockquote></p>
</section>

Wrap Radio Buttons in a fieldset Element for Better Accessibility

<section id="description">
<p>Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> &#x3C;label for = "input1"> Введите дату: &#x3C;/ label> <br> &#x3C;input type = "date" id = "input1" name = "input1"> <br></blockquote></p>
</section>

Add an Accessible Date Picker

<section id="description">
<p>Продолжая тему даты, HTML5 также представил элемент <code>time</code> вместе с атрибутом <code>datetime</code> для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты <code>datetime</code> атрибутом <code>datetime</code> . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <code>&#x3C;p>Master Camper Cat officiated the cage match between Goro and Scorpion &#x3C;time datetime="2013-02-13">last Wednesday&#x3C;/time>, which ended in a draw.&#x3C;/p></code></p>
</section>

Standardize Times with the HTML5 datetime Attribute

<section id="description">
<p>Вы заметили, что все прикладные проблемы доступности до сих пор не использовали CSS? Это должно показать важность контура логического документа и использовать семантически значимые теги вокруг вашего контента, прежде чем вводить визуальный дизайн. Однако магия CSS также может улучшить доступность вашей страницы, когда вы хотите визуально скрывать контент, предназначенный только для чтения с экрана. Это происходит, когда информация находится в визуальном формате (например, диаграмме), но пользователям экрана чтения требуется альтернативная презентация (например, таблица) для доступа к данным. CSS используется для размещения элементов экрана только для чтения с визуальной области окна браузера. Вот пример правил CSS, которые это делают: <blockquote> .sr-only { <br> позиция: абсолютная; <br> left: -10000px; <br> ширина: 1px; <br> высота: 1шт; <br> top: auto; <br> переполнение: скрыто; <br> } </blockquote> <strong>Заметка</strong> <br> Следующие подходы CSS НЕ будут делать то же самое: <ul><li> <code>display: none;</code> или <code>visibility: hidden;</code> скрывает контент для всех, включая пользователей с экрана </li><li> Нулевые значения для размеров пикселей, такие как <code>width: 0px; height: 0px;</code> удаляет этот элемент из потока вашего документа, то есть читатели экрана будут игнорировать его </li></ul></p>
</section>

Make Elements Only Visible to a Screen Reader by Using Custom CSS

<section id="description">
<p>Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение.</p></section>

Improve Readability with High Contrast Text

<section id="description">
<p>Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый.</p></section>

Avoid Colorblindness Issues by Using Sufficient Contrast

<section id="description">
<p>Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими.</p></section>

Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information

<section id="description">
<p>У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы  получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( <code>a</code> ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами <code>a</code>. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.</p></section>

Give Links Meaning by Using Descriptive Link Text

<section id="description">
<p>HTML предлагает атрибут <code>accesskey</code> для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <code>&#x3C;button accesskey="b">Important Button&#x3C;/button></code></p>
</section>

Make Links Navigatable with HTML Access Keys

<section id="description">
<p><code>tabindex</code> HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена ​​другим элементам, таким как <code>div</code> , <code>span</code> и <code>p</code> , поместив на них <code>tabindex="0"</code> . Вот пример: <code>&#x3C;div tabindex="0">I need keyboard focus!&#x3C;/div></code> <strong>Примечание.</strong> <br> Отрицательное значение <code>tabindex</code> (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется <code>div</code> для всплывающего окна) и выходит за рамки этих задач.</p></section>

Use tabindex to Add Keyboard Focus to an Element

<section id="description">
<p><code>tabindex</code> атрибут также определяет точный порядок вкладок элементов. Это достигается, когда значение атрибута установлено как положительное число, равное 1 или выше.</p>
<p>Установка <code>tabindex = "1"</code>  сначала приведет фокусировку клавиатуры на этот элемент. Затем он перемещается по последовательности указанных значений <code>tabindex</code> (2, 3 и т.д.), прежде чем перейти к настройкам по умолчанию и <code>tabindex = "0"</code> элементам.</p>
<p>Важно отметить, что когда порядок табуляции задан таким образом, он переопределяет порядок по умолчанию (который использует источник HTML). Это может смутить пользователей, которые ожидают начать навигацию в верхней части страницы. Этот метод может быть необходим в некоторых случаях, но с точки зрения доступности, будьте аккуратны с его применением.</p>
<p>Вот пример:</p><p><code>&#x3C;div tabindex="1">Я получаю фокус клавиатуры, и я получаю его первым!&#x3C;/div></code></p>
<p><code>&#x3C;div tabindex="2">Я получаю фокус клавиатуры, и я получаю его вторым!&#x3C;/div></code></p>
</section>

Use tabindex to Specify the Order of Keyboard Focus for Several Elements

<section id="description">
<p>Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. CSS имеет несколько вариантов выравнивания его свойством <code>text-align</code> . <code>text-align: justify;</code> вызывает все строки текста, кроме последней строки, для соответствия левому и правому краям строки. <code>text-align: center;</code> центрирует текст <code>text-align: right;</code> выравнивание по правому краю текста и <code>text-align: left;</code> (по умолчанию) выравнивает текст по левому краю.</p></section>

Create Visual Balance Using the text-align Property

<section id="description">
<p>Вы можете указать ширину элемента, используя свойство <code>width</code> в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям: <blockquote> img { <br> width: 220px; <br> } </blockquote></p>
</section>

Adjust the Width of an Element Using the width Property

<section id="description">
<p>Вы можете указать высоту элемента, используя свойство <code>height</code> в CSS, подобное свойству <code>width</code> . Вот пример, который изменяет высоту изображения на 20 пикселей: <blockquote> img { <br> height: 20 px; <br> } </blockquote></p>
</section>

Adjust the Height of an Element Using the height Property

<section id="description">
<p>Чтобы сделать текст полужирным, вы можете использовать <code>strong</code> тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С <code>strong</code> тегом браузер применяет CSS <code>font-weight: bold;</code> к элементу.</p></section>

Use the strong Tag to Make Text Bold

<section id="description">
<p>Чтобы подчеркнуть текст, вы можете использовать тег <code>u</code> . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом <code>u</code> браузер применяет CSS <code>text-decoration: underline;</code> к элементу.</p></section>

Use the u Tag to Underline Text

<section id="description">
<p>Чтобы подчеркнуть текст, вы можете использовать тег <code>em</code> . Это отображает текст как курсив, так как браузер применяет CSS стиля <code>font-style: italic;</code> к элементу.</p></section>

Use the em Tag to Italicize Text

<section id="description">
<p>Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег <code>s</code> . Он показывает, что часть текста больше не действительна. С помощью тега <code>s</code> браузер применяет CSS <code>text-decoration: line-through;</code> к элементу.</p></section>

Use the s Tag to Strikethrough Text

<section id="description">
<p>Вы можете использовать тег <code>hr</code> чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента.</p></section>

Create a Horizontal Line Using the hr Element

<section id="description">
<p>Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить <code>background-color</code> к элементу, содержащему текст, который вы хотите подчеркнуть. Эта проблема использует <code>rgba()</code> вместо <code>hex</code> кодов или нормальный <code>rgb()</code> . <blockquote> rgba акроним расшифровывается как: <br> r = красный <br> g = зеленый <br> b = синий <br> a = альфа / уровень непрозрачности </blockquote> Значения RGB могут находиться в диапазоне от 0 до 255. Значение альфа может варьироваться от 1, полностью непрозрачного или сплошного цвета, до 0, что является полностью прозрачным или невидимым. <code>rgba()</code> отлично подходит для использования в этом случае, так как он позволяет вам регулировать непрозрачность. Это означает, что вам не нужно полностью блокировать фон. Для этой задачи вы будете использовать <code>background-color: rgba(45, 45, 45, 0.1)</code> . Он производит темно-серый цвет, который почти прозрачен, учитывая низкое значение непрозрачности 0,1.</p></section>

Adjust the background-color Property of Text

<section id="description">
<p>Размер шрифта тегов заголовков (от <code>h1</code> до <code>h6</code> ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство <code>font-size</code>.</p></section>

Adjust the Size of a Header Versus a Paragraph Tag

<section id="description">
<p>Свойство <code>box-shadow</code> применяет одну или несколько теней к элементу. Свойство <code>box-shadow</code> принимает значения для <code>offset-x</code> (как далеко отбрасывать тень горизонтально от элемента), <code>offset-y</code> (как далеко отбрасывать тень вертикально от элемента), <code>blur-radius</code> <code>spread-radius</code> и значения цвета в этом порядке. Значения <code>blur-radius</code> и <code>spread-radius</code> необязательны. Вот пример CSS для создания нескольких теней с некоторым размытием в основном прозрачных черных цветах: <blockquote> box-shadow: 0 10px 20px rgba (0,0,0,0,19), 0 6px 6px rgba (0,0,0,0,23); </blockquote></p>
</section>

Add a box-shadow to a Card-like Element

<section id="description">
<p>Свойство <code>opacity</code> в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента. <blockquote> Значение 1 непрозрачно, что совсем не прозрачно. <br> Значение 0,5 равно половине видимости. <br> Значение 0 полностью прозрачно. </blockquote> Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста.</p></section>

Decrease the Opacity of an Element

<section id="description">
<p>Свойство <code>text-transform</code> в CSS используется для изменения внешнего вида текста. Это удобный способ убедиться, что текст на веб-странице отображается постоянно, без необходимости изменять текстовое содержимое фактических элементов HTML. В следующей таблице показано, как различные значения <code>text-transform</code> изменяют текст примера «Transform me». <table class="table table-striped"><thead><tr><th> Стоимость </th><th> результат </th></tr></thead><tbody><tr><td> <code>lowercase</code> </td> <td> "трансформировать меня" </td></tr><tr><td> <code>uppercase</code> </td> <td> "TRANSFORM ME" </td></tr><tr><td> <code>capitalize</code> </td> <td> «Трансформировать меня» </td></tr><tr><td> <code>initial</code> </td> <td> Использовать значение по умолчанию </td></tr><tr><td> <code>inherit</code> </td> <td> Используйте значение <code>text-transform</code> из родительского элемента </td></tr><tr><td> <code>none</code> </td> <td> <strong>По умолчанию:</strong> используйте исходный текст </td></tr></tbody></table></p>
</section>

Use the text-transform Property to Make Text Uppercase

<section id="description">
<p>Свойство <code>font-size</code> используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов <code>h1</code> <code>h6</code> чтобы сбалансировать размеры заголовков.</p></section>

Set the font-size for Multiple Heading Elements

<section id="description">
<p>Вы устанавливаете <code>font-size</code> для каждого заголовка в последнем вызове, здесь вы настраиваете <code>font-weight</code> . Свойство <code>font-weight</code> устанавливает, как толстые или тонкие символы находятся в разделе текста.</p></section>

Set the font-weight for Multiple Heading Elements

<section id="description">
<p>Свойство <code>font-size</code> в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст.</p></section>

Set the font-size of Paragraph Text

<section id="description">
<p>CSS предлагает свойство <code>line-height</code> для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста.</p></section>

Set the line-height of Paragraphs

<section id="description">
<p>Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса <code>:hover</code> . Вот CSS, чтобы изменить <code>color</code> привязанного тега на красный во время наведения на него: <blockquote> a: hover { <br> красный цвет; <br> } </blockquote></p>
</section>

Adjust the Hover State of an Anchor Tag

<section id="description">
<p>CSS обрабатывает каждый элемент HTML как свой собственный ящик, который обычно называют <code>CSS Box Model</code> . Элементы уровня блока автоматически начинаются с новой строки (считайте заголовки, абзацы и div), в то время как встроенные элементы располагаются внутри окружающего содержимого (например, изображения или промежутки). Стандартная компоновка элементов таким образом называется <code>normal flow</code> документа, но CSS предлагает свойство position, чтобы переопределить его. Когда позиция элемента установлена ​​на <code>relative</code> , она позволяет указать, как CSS должен перемещать ее <i>относительно</i> текущей позиции в обычном потоке страницы. Он соединяется со свойствами смещения CSS <code>left</code> или <code>right</code> , а <code>top</code> или <code>bottom</code> . Они говорят , сколько пикселей, проценты, или Эмс , чтобы переместить элемент <i>от</i> места , где она обычно располагается. В следующем примере перемещение абзаца 10 пикселей снизу: <blockquote> п { <br> позиция: относительная; <br> снизу: 10 пикселей; <br> } </blockquote> Изменение положения элемента относительно относительного не удаляет его из обычного потока - другие элементы вокруг него все еще ведут себя так, как если бы этот элемент находился в позиции по умолчанию. <strong>Заметка</strong> <br> Позиционирование дает вам большую гибкость и силу над визуальным расположением страницы. Приятно помнить, что независимо от положения элементов базовая разметка HTML должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту.</p></section>

Change an Element's Relative Position

<section id="description">
<p>Смещение CSS <code>top</code> или <code>bottom</code> , а также <code>left</code> или <code>right</code> указывают браузеру, насколько можно смещать элемент относительно того, где он будет сидеть в нормальном потоке документа. Вы компенсируете элемент вдали от заданного места, которое перемещает элемент от указанной стороны (фактически, в противоположном направлении). Как вы видели в последнем вызове, использование верхнего смещения сдвинуло <code>h2</code> вниз. Аналогично, используя левое смещение перемещает элемент справа. <h2> инструкции </h2><section id="instructions"> Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх. </section><h2> тесты </h2><section id="tests"><pre> <code class="language-yml">tests: - text: 'Your code should use a CSS offset to relatively position the &#x3C;code>h2&#x3C;/code> 10px upwards. In other words, move it 10px away from the &#x3C;code>bottom&#x3C;/code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the &#x3C;code>h2&#x3C;/code> 10px upwards. In other words, move it 10px away from the &#x3C;code>bottom&#x3C;/code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the &#x3C;code>h2&#x3C;/code> 15px towards the right. In other words, move it 15px away from the &#x3C;code>left&#x3C;/code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the &#x3C;code>h2&#x3C;/code> 15px towards the right. In other words, move it 15px away from the &#x3C;code>left&#x3C;/code> of where it normally sits.");'</code> </pre></section><h2> Сезон испытания </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html">&#x3C;head> &#x3C;style> h2 { position: relative; } &#x3C;/style> &#x3C;/head> &#x3C;body> &#x3C;h1>On Being Well-Positioned&#x3C;/h1> &#x3C;h2>Move me!&#x3C;/h2> &#x3C;p>I still think the h2 is where it normally sits.&#x3C;/p> &#x3C;/body></code> </pre></div></section><h2> Решение </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></p>
</section>

Move a Relatively Positioned Element with CSS Offsets

<section id="description">
<p>Следующая опция для свойства <code>position</code> CSS является <code>absolute</code> , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от <code>relative</code> положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего <em>расположенного</em> предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием <code>position: relative;</code> ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body.</p></section>

Lock an Element to its Parent with Absolute Positioning

<section id="description">
<p>Следующая схема компоновки, которую предлагает CSS, - это <code>fixed</code> позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между <code>fixed</code> и <code>absolute</code> позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается.</p></section>

Lock an Element to the Browser Window with Fixed Positioning

<section id="description">
<p>Следующий инструмент позиционирования фактически не использует <code>position</code> , а устанавливает свойство <code>float</code> элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются <code>left</code> или <code>right</code> от содержащего их родительского элемента. Он обычно используется с свойством <code>width</code> чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой.</p></section>

Push Elements Left or Right with the float Property

<section id="description">
<p>Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство <code>z-index</code> может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства <code>z-index</code> элемента перемещают его выше в стеке, чем те, у которых более низкие значения.</p></section>

Change the Position of Overlapping Elements with the z-index Property

<section id="description">
<p>Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить <code>margin</code> в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство <code>display</code> для блокировки.</p></section>

Center an Element Horizontally Using the margin Property

<section id="description">
<p>Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами: <blockquote> красный (# FF0000) и голубой (# 00FFFF) <br> зеленый (# 00FF00) и пурпурный (# FF00FF) <br> синий (# 0000FF) и желтый (# FFFF00) </blockquote> Это отличается от устаревшей цветовой модели RYB, которую многие из нас преподавали в школе, которая имеет разные первичные и дополнительные цвета. Современная теория цвета использует аддитивную модель RGB (например, на экране компьютера) и субтрактивную модель CMY (K) (например, в печати). Читайте <a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">здесь</a> для получения дополнительной информации об этом сложном предмете. В Интернете доступно множество инструментов для выбора цветов, которые могут найти дополнение к цвету. <strong>Заметка</strong> <br> Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности.</p></section>

Learn about Complementary Colors

<section id="description">
<p>Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель RGB-аддитивности в современной теории цвета. Красный (R), зеленый (G) и синий (B) называются основными цветами. Смешивание двух основных цветов создает вторичные цвета cyan (G + B), пурпурный (R + B) и желтый (R + G). Вы видели эти цвета в задаче «Дополнительные цвета». Эти вторичные цвета являются дополнением к основному цвету, не используемому при их создании, и противоположны этому основному цвету на цветовом круге. Например, пурпурный цвет выполнен красным и синим цветом и является дополнением к зеленому. Третичные цвета являются результатом объединения основного цвета с одним из его вторичных соседних цветов. Например, красный (первичный) и желтый (вторичный) оранжевый. Это добавляет еще шесть цветов к простому цветному колесу в общей сложности двенадцать. Существуют различные способы выбора разных цветов, которые приводят к гармоничному сочетанию в дизайне. Один пример, который может использовать третичные цвета, называется схемой разделения цветов. Эта схема начинается с базового цвета, а затем соединяет ее с двумя цветами, которые смежны с его дополнением. Три цвета обеспечивают сильный визуальный контраст в дизайне, но более тонкие, чем использование двух дополнительных цветов. Вот три цвета, созданные с использованием схемы сплит-дополнений: <table class="table table-striped"><thead><tr><th> цвет </th><th> Шестнадцатеричный код </th></tr></thead><thead></thead><tbody><tr><td> оранжевый </td><td> # FF7D00 </td></tr><tr><td> циан </td><td> # 00FFFF </td></tr><tr><td> малина </td><td> # FF007D </td></tr></tbody></table></p>
</section>

Learn about Tertiary Colors

<section id="description">
<p>Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице.</p></section>

Adjust the Color of Various Elements to Complementary Colors

<section id="description">
<p>Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. CSS3 представила <code>hsl()</code> как альтернативный способ выбрать цвет, указав непосредственно эти характеристики. <b>Хюэ</b> - это то, что люди обычно считают «цветным». Если вы изображаете спектр цветов, начиная с красного слева, перемещаясь по зеленому посередине, а синий справа, оттенок - это то, где цвет соответствует этой линии. В <code>hsl()</code> оттенок использует концепцию цветового круга вместо спектра, где угол цвета на круге задается как значение от 0 до 360. <b>Насыщенность</b> - это количество серого цвета. Полностью насыщенный цвет не имеет серого цвета, а минимально насыщенный цвет почти полностью серый. Это задается в процентах, при этом 100% полностью насыщенный. <b>Легкость</b> - это количество белого или черного цвета. Процент задается от 0% (черный) до 100% (белый), где 50% - это нормальный цвет. Вот несколько примеров использования <code>hsl()</code> с полностью насыщенными, нормальными цветами легкости: <table class="table table-striped"><thead><tr><th> цвет </th><th> HSL </th></tr></thead><tbody><tr><td> красный </td><td> hsl (0, 100%, 50%) </td></tr><tr><td> желтый </td><td> hsl (60, 100%, 50%) </td></tr><tr><td> зеленый </td><td> hsl (120, 100%, 50%) </td></tr><tr><td> циан </td><td> hsl (180, 100%, 50%) </td></tr><tr><td> синий </td><td> hsl (240, 100%, 50%) </td></tr><tr><td> фуксин </td><td> hsl (300, 100%, 50%) </td></tr></tbody></table></p>
</section>

Adjust the Hue of a Color

<section id="description">
<p>Опция <code>hsl()</code> в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что 's' и 'l' в <code>hsl()</code> означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты.</p></section>

Adjust the Tone of a Color

<section id="description">
<p>Применение цвета на элементах HTML не ограничивается одним плоским оттенком. CSS обеспечивает возможность использования цветовых переходов, иначе называемых градиентами, на элементах. Доступ к нему осуществляется через <code>background</code> отеля <code>linear-gradient()</code> функции. Вот общий синтаксис: <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> Первый аргумент указывает направление, с которого начинается переход цвета - его можно указать как градус, где 90deg делает вертикальный градиент, а 45deg - угловым, как обратная косая черта. Следующие аргументы определяют порядок цветов, используемых в градиенте. Пример: <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code></p>
</section>

Create a Gradual CSS Linear Gradient

<section id="description">
<p>Функция <code>repeating-linear-gradient()</code> очень похожа на <code>linear-gradient()</code> с большой разницей, что повторяет заданный шаблон градиента. <code>repeating-linear-gradient()</code> принимает множество значений, но для простоты вы будете работать с значениями угла и значениями остановки цвета в этой задаче. Значением угла является направление градиента. Остановки цвета - это значения ширины, которые указывают, где происходит переход, и даются с процентом или количеством пикселей. В примере, показанном в редакторе кода, градиент начинается с <code>yellow</code> цвета в 0 пикселей, который смешивается со вторым <code>blue</code> цветом в 40 пикселей от начала. Так как следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий <code>green</code> цвет, который сам вписывается в четвертое значение цвета <code>red</code> которое составляет 80 пикселей от начала градиента. В этом примере это помогает думать о цветовых остановках как о парах, где смешиваются два разных цвета. <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.</p></section>

Use a CSS Linear Gradient to Create a Striped Element

<section id="description">
<p>Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство <code>background</code> поддерживает функцию <code>url()</code> , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок.</p></section>

Create Texture by Adding a Subtle Pattern as a Background Image

<section id="description">
<p>Чтобы изменить масштаб элемента, CSS имеет свойство <code>transform</code> , а также функцию <code>scale()</code> . Следующий пример кода удваивает размер всех элементов абзаца на странице: <blockquote> п { <br> преобразования: масштаб (2); <br> } </blockquote></p>
</section>

Use the CSS Transform scale Property to Change the Size of an Element

<section id="description">
<p>Свойство <code>transform</code> имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как <code>:hover</code> которые определяют определенное состояние элемента, свойство <code>transform</code> может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит: <blockquote> p: hover { <br> transform: масштаб (2.1); <br> } </blockquote></p>
</section>

Use the CSS Transform scale Property to Scale an Element on Hover

<section id="description">
<p>Следующей функцией свойства <code>transform</code> является <code>skewX()</code> , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X. <blockquote> п { <br> transform: skewX (-32deg); <br> } </blockquote></p>
</section>

Use the CSS Transform Property skewX to Skew an Element Along the X-Axis

<section id="description">
<p>Учитывая, что <code>skewX()</code> выделенный элемент вдоль оси X на заданную степень, неудивительно, что <code>skewY()</code> элемент вдоль оси Y (по вертикали).</p></section>

Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

<section id="description">
<p>Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством <code>box-shadow</code> которое задает тень элемента, а также свойство <code>border-radius</code> которое контролирует округлость углов элемента. Вы создадите круглый прозрачный объект с хрустящей тень, слегка смещенной в сторону - тень на самом деле будет формой луны, которую вы видите. Чтобы создать круглый объект, свойство <code>border-radius</code> должно быть установлено равным 50%. Вы можете вспомнить более раннюю задачу о том, что свойство <code>box-shadow</code> принимает значения для <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> и значение цвета в этом порядке. Значения <code>blur-radius</code> <code>spread-radius</code> необязательны.</p></section>

Create a Graphic Using CSS

<section id="description">
<p>Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый CSS. Но сначала вам нужно понять псевдо-элементы <code>::before</code> и <code>::after</code> . Эти псевдоэлементы используются для добавления чего-либо до или после выбранного элемента. В следующем примере под <code>::before</code> a <code>::before</code> используется для добавления прямоугольника к элементу с <code>heart</code> класса: <blockquote> .heart :: before { <br> content: ""; <br> background-color: желтый; <br> пограничный радиус: 25%; <br> позиция: абсолютная; <br> высота: 50 пикселей; <br> ширина: 70 пикселей; <br> top: -50px; <br> left: 5px; <br> } </blockquote> Чтобы функции <code>::before</code> и <code>::after</code> псевдоэлементов функционировали должным образом, они должны иметь определенное свойство <code>content</code> . Это свойство обычно используется для добавления к выбранному элементу таких вещей, как фотография или текст. Когда для создания фигур используются элементы <code>::before</code> и <code>::after</code> псевдоэлементов, свойство <code>content</code> по-прежнему требуется, но оно установлено в пустую строку. В приведенном выше примере элемент с классом <code>heart</code> имеет <code>::before</code> псевдоэлементом, который создает желтый прямоугольник с <code>height</code> и <code>width</code> 50 пикселей и 70 пикселей соответственно. Этот прямоугольник имеет круглые углы из-за его 25-процентного пограничного радиуса и расположен абсолютно в 5px <code>left</code> и 50px над <code>top</code> частью элемента.</p></section>

Create a More Complex Shape Using CSS and HTML

<section id="description">
<p>Чтобы анимировать элемент, вам нужно знать свойства анимации и правило <code>@keyframes</code> . Свойства анимации определяют, как должна себя вести анимация, и правило <code>@keyframes</code> контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: <code>animation-name</code> задает имя анимации, которое позже используется <code>@keyframes</code> чтобы сообщить CSS, какие правила идут с анимацией. <code>animation-duration</code> задает <code>animation-duration</code> анимации. <code>@keyframes</code> - это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование <code>@keyframes</code> и свойств анимации: <blockquote> #anim { <br> анимация-имя: красочный; <br> продолжительность анимации: 3 с; <br> } <br> @keyframes colorful { <br> 0% { <br> background-color: blue; <br> } <br> 100% { <br> background-color: желтый; <br> } <br> } </blockquote> Для элемента с <code>anim</code> идентификатором, фрагмент кода выше , задает <code>animation-name</code> , чтобы <code>colorful</code> и устанавливает <code>animation-duration</code> до 3 секунд. Затем правило <code>@keyframes</code> ссылается на свойства анимации с именем <code>colorful</code> . Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%.</p></section>

Learn How the CSS @keyframes and animation Properties Work

<section id="description">
<p>Вы можете использовать CSS <code>@keyframes</code> для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении: <blockquote> &#x3C;Стиль> <br> img: hover { <br> animation-name: width; <br> продолжительность анимации: 500 мс; <br> } <br><br> Ширина @keyframes { <br> 100% { <br> ширина: 40 пикселей; <br> } <br> } <br> &#x3C;/ Стиль> <br><br> &#x3C;img src = "https://bit.ly/smallgooglelogo" alt = "Логотип Google" /> </blockquote></p>
</section>

Use CSS Animation to Change the Hover State of a Button

<section id="description">
<p>Когда элементы имеют заданную <code>position</code> , например <code>fixed</code> или <code>relative</code> , свойства смещения CSS <code>right</code> , <code>left</code> , <code>top</code> и <code>bottom</code> могут использоваться в правилах анимации для создания движения. Как показано в приведенном ниже примере, вы можете нажать элемент вниз, а затем вверх, установив <code>top</code> свойство <code>50%</code> ключевого кадра на <code>50%</code> пикселей, но установив его на 0px для первого ( <code>0%</code> ) и последнего ( <code>100%</code> ) ключевого кадра. <blockquote> @keyframes rainbow { <br> 0% { <br> background-color: blue; <br> top: 0px; <br> } <br> 50% { <br> фон-цвет: зеленый; <br> top: 50px; <br> } <br> 100% { <br> background-color: желтый; <br> top: 0px; <br> } <br> } </blockquote></p>
</section>

Create Movement Using CSS Animation

<section id="description">
<p>Для этой задачи вы измените <code>opacity</code> анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу <code>@keyframes</code> .</p></section>

Create Visual Direction by Fading an Element from Left to Right

<section id="description">
<p>Предыдущие проблемы касались использования некоторых свойств анимации и правила <code>@keyframes</code> . Другим свойством анимации является <code>animation-iteration-count</code> , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: <code>animation-iteration-count: 3;</code> В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное.</p></section>

Animate Elements Continually Using an Infinite Animation Count

<section id="description">
<p>Вот еще один пример непрерывной анимации с свойством <code>animation-iteration-count</code> которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы <code>heart</code> (включая <code>:before</code> и <code>:after</code> фрагментов) анимируются, чтобы изменить размер с помощью свойства <code>transform</code> , а фоновый <code>div</code> анимирован, чтобы изменить его цвет, используя свойство <code>background</code> .</p></section>

Make a CSS Heartbeat using an Infinite Animation Count

<section id="description">
<p>Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства <code>animation-iteration-count</code> и установки правил <code>@keyframes</code> . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле <code>@keyframes</code> , что создает анимацию мерцания. Вы можете изменить правило <code>@keyframes</code> для одного из элементов, чтобы звезды мерцали с разной скоростью.</p></section>

Animate Elements at Variable Rates

<section id="description">
<p>В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила <code>@keyframes</code> . Вы можете достичь той же цели, манипулируя <code>animation-duration</code> нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства <code>animation-duration</code> для разных значений для каждого элемента.</p></section>

Animate Multiple Elements at Variable Rates

<section id="description">
<p>В анимации CSS свойство <code>animation-timing-function</code> определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность <code>animation-duration</code> ), <code>animation-timing-function</code> говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это <code>ease</code> , которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают <code>ease-out</code> , которое быстро начинается, а затем замедляется, <code>ease-in</code> , что медленно начинается, а затем ускоряется в конце или <code>linear</code> , что накладывает постоянную скорость анимации.</p></section>

Change Animation Timing with Keywords

<section id="description">
<p>Последняя задача <code>animation-timing-function</code> свойство <code>animation-timing-function</code> и несколько ключевых слов, которые изменяют скорость анимации в течение ее продолжительности. CSS предлагает опцию, отличную от ключевых слов, которая обеспечивает еще более точный контроль над тем, как анимация разыгрывается, используя кривые Безье. В анимациях CSS кривые Безье используются с функцией <code>cubic-bezier</code> . Форма кривой показывает, как анимация разыгрывается. Кривая живет в системе координат 1 на 1. Ось X этой системы координат - это продолжительность анимации (считайте ее временной шкалой), а ось Y - это изменение анимации. Функция <code>cubic-bezier</code> состоит из четырех основных точек, которые расположены на этой сетке 1 на 1: <code>p0</code> , <code>p1</code> , <code>p2</code> и <code>p3</code> . <code>p0</code> и <code>p3</code> для вас - это начальная и конечная точки, которые всегда расположены соответственно в начале (0, 0) и (1, 1). Вы устанавливаете значения x и y для двух других точек, а место размещения в сетке определяет форму кривой для анимации. Это делается в CSS, объявляя значения x и y опорных точек <code>p1</code> и <code>p2</code> в форме: <code>(x1, y1, x2, y2)</code> . Вытянув все это вместе, вот пример кривой Безье в CSS-коде: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> В приведенном выше примере значения x и y эквивалентны для каждой точки (x1 = 0,25 = y1 и x2 = 0,75 = y2), которая, если вы помните из класса геометрии, приводит к строке, которая простирается от начала координат до точки (1 , 1). Эта анимация представляет собой линейное изменение элемента в течение длины анимации и совпадает с использованием <code>linear</code> ключевого слова. Другими словами, он изменяется с постоянной скоростью.</p></section>

Learn How Bezier Curves Work

<section id="description">
<p>В предыдущем задании обсуждалось ключевое слово <code>ease-out</code> которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом <code>ease-out</code> (для синего элемента) и <code>linear</code> ключевым словом (для красного элемента). Подобные анимационные прогрессии к <code>ease-out</code> ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек <code>p1</code> и <code>p2</code> приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> Помните, что все функции <code>cubic-bezier</code> начинаются с <code>p0</code> at (0, 0) и заканчиваются <code>p3</code> в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в <code>p1</code> y значение 0, затем переходит в значение <code>p2</code> y 1), чем она перемещается по оси X (0 для начала, затем 0 для <code>p1</code> , до 0,58 для <code>p2</code> ). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.</p></section>

Use a Bezier Curve to Move a Graphic

<section id="description">
<p>Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали <code>linear</code> и <code>ease-out</code> кубические кривые Безье, однако они не отображали точное движение жонглирования. Для этого вам нужно настроить кривую Безье. Функция <code>animation-timing-function</code> автоматически зацикливается на каждом ключевом кадре, когда <code>animation-iteration-count</code> установлен на бесконечный. Поскольку в середине продолжительности анимации задано правило ключевого кадра (на <code>50%</code> ), это приводит к двум идентичным прогрессиям анимации при движении мяча вверх и вниз. Следующая кубическая кривая Безье моделирует движение жонглирования: <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> Обратите внимание, что значение y2 больше 1. Хотя кубическая кривая Безье отображается в системе координат 1 на 1, и она может принимать только значения х от 0 до 1, значение y может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования.</p></section>

Make Motion More Natural Using a Bezier Curve

<section id="description">
<p>Вы можете добавить еще один уровень организации в свой HTML-документ в тегах <code>html</code> с элементами <code>head</code> и <code>body</code> . Любая разметка с информацией о Вашей странице будет идти в теге <code>head</code>. Остальная разметка с содержимым страницы (то, что отображается для пользователя) войдет в тег <code>body</code> . Элементы метаданных, такие как <code>link</code>, <code>meta</code>, <code>title</code> и <code>style</code>, обычно входят в элемент <code>head</code>. Вот пример макета страницы: 
<pre class="language-html"><code>&#x3C;!DOCTYPE html>
&#x3C;html>
  &#x3C;head>
    &#x3C;!-- элементы метаданных -->
  &#x3C;/head>
  &#x3C;body>
    &#x3C;!-- содержание страницы -->
  &#x3C;/body>
&#x3C;/html></code></pre></p>
</section>

Define the Head and Body of an HTML Document

<section id="description">
<p>Упражнения до сих пор охватывали конкретные элементы HTML и их использование. Однако есть несколько элементов, которые дают общую структуру вашей странице и должны быть включены в каждый HTML-документ. В верхней части документа вам нужно указать браузеру, какую версию HTML использует ваша страница. HTML - развивающийся язык и регулярно обновляется. Большинство браузеров поддерживают самую последнюю спецификацию—HTML5, но старые веб-страницы могут использовать предыдущие версии языка. Чтобы сообщить браузеру какую версию HTML использовать нужно добавить следующий тег в первую строку вашего документа <code>&#x3C;!DOCTYPE ...></code> , где « <code>...</code> » - это версия HTML. Для HTML5 вы используете <code>&#x3C;!DOCTYPE html></code> . <code>!</code> и <code>DOCTYPE</code> должно быть написано заглавными буквами, особенно для старых браузеров. Далее, весь ваш HTML-код необходимо обернуть в теги <code>html</code> . Открытие <code>&#x3C;html></code> идет непосредственно под линией <code>&#x3C;!DOCTYPE html></code> , а закрытие <code>&#x3C;/html></code> идет в конце страницы. Вот пример структуры страницы: 
<pre class="language-html"><code>&#x3C;!DOCTYPE html>
&#x3C;html>
  &#x3C;!-- Ваш HTML-код идет здесь -->
&#x3C;/html> </code></pre>
</p>
</section>

Declare the Doctype of an HTML Document

<section id="description">
<p>Задачи этого раздела призваны научить использовать CSS для "гибкого" позиционирования элементов. Вначале будет объяснена теорию. Затем нужно будет практически применить концепцию flexbox для оформления простого компонента твита. Применение CSS свойства <code>display: flex;</code> к элементу позволяет затем использовать другие свойства flex для создания отзывчивого дизайна страницы.</p></section>

Use display: flex to Position Two Boxes

<section id="description">
<p>Справа находится компонент твита, который будет использоваться в качестве практического примера. Некоторые его составные части выглядели бы лучше при другой компоновке. В предыдущей задаче вы познакомились со свойством <code>display: flex</code>. Здесь вы добавите его к нескольким составным частям компонента твита, чтобы начать настройку их позиционирования.</p></section>

Add Flex Superpowers to the Tweet Embed

<section id="description">
<p>Добавление <code>display: flex</code> к элементу превращает его в гибкий контейнер. Это позволяет разместить любые дочерние элементы этого элемента в строки или в столбцы. Чтобы сделать это, нужно добавить свойство <code>flex-direction</code> к родительскому элементу и устанавить ему значение row (строка) или column (столбец). Значение row выравнивает дочерние элементы по горизонтали, а значение column выравнивает дочерние элементы по вертикали. Другие варианты значений свойства <code>flex-direction</code> - row-reverse (обращённая строка) и column-reverse (обращённый столбец). <strong>Примечание</strong> <br> Значением по умолчанию для свойства <code>flex-direction</code> является row.</p></section>

Use the flex-direction Property to Make a Row

<section id="description">
<p>Элементы <code>header</code> и <code>footer</code> компонента твит имеют дочерние элементы, которые можно разместить в ряд используя свойство <code>flex-direction</code>. Это CSS свойство выровняет их по горизонтали.</p></section>

Apply the flex-direction Property to Create Rows in the Tweet Embed

<section id="description">
<p>В предыдущих задачах свойство <code>flex-direction</code> использовалось для создание рядов. С помощью этого свойства также можно создавать столбцы, размещая дочерние элементы "гибкого" контейнера вертикально один под другим.</p></section>

Use the flex-direction Property to Make a Column

<section id="description">
<p><code>header</code> и <code>footer</code> вставки твита ранее использовали свойство <code>flex-direction</code> со значением row. Схожим образом, элементы внутри <code>.profile-name</code> будут хорошо сгруппированы в виде столбца.</p></section>

Apply the flex-direction Property to Create a Column in the Tweet Embed

<section id="description">
<p>Иногда flex элементы в контейнере flex не заполняют все пространство в контейнере. Обычно хочется сказать CSS, как выровнять и раздвинуть элементы flex определенным образом. К счастью, свойство <code>justify-content</code> имеет несколько вариантов для этого. Но сначала, перед тем, как рассмотреть эти варианты, необходимо понять важную терминологию. <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Вот полезное изображение, показывающее строку, иллюстрирующую приведенные ниже концепции.</a> Напомним, что установка flex контейнера в качестве строки помещает flex элементы  бок о бок слева направо. Flex контейнер, установленный в качестве столбца, размещает flex элементы вертикально сверху вниз. Направление расположения flex элементов называется <strong>главной осью</strong> . Для строки это горизонтальная линия, проходящая через каждый элемент. А для столбца главная ось - вертикальная линия через элементы. Существует несколько вариантов того, как перемещать flex элементы вдоль линии,  являющейся главной осью. Одним из наиболее часто используемых является <code>justify-content: center;</code> , который выравнивает все flex элементы по центру внутри flex контейнера. Другие варианты включают: <ul><li> <code>flex-start</code> : располагает элементы к началу flex контейнера. Для строки это подталкивает элементы к левой стороне контейнера. Для столбца это подталкивает элементы к верхней стороне контейнера. </li><li> <code>flex-end</code> : располагает элементы к концу flex контейнера. Для строки это подталкивает элементы к правой части контейнера. Для столбца это подталкивает элементы к нижней части контейнера. </li><li> <code>space-between</code> : выравнивает элементы по центру главной оси, распеределяя оставшееся пространство между элементами. Первый и последний элементы располагаются вплотную к краям flex контейнера. Например, в строке первый элемент находится у левой стороны контейнера, последний элемент находится у правой стороны контейнера, а остальные элементы между ними расположены равномерно. </li><li> <code>space-around</code> : аналогично <code>space-between</code>, но первый и последний элементы не привязаны к краям контейнера, пространство распределяется вокруг всех элементов </li></ul></p>
</section>

Align Elements Using the justify-content Property

<section id="description">
<p>Последняя задача показала пример свойства <code>justify-content</code> . Для вставки tweet это свойство может применяться для выравнивания элементов в элементе <code>.profile-name</code> .</p></section>

Use the justify-content Property in the Tweet Embed

<section id="description">
<p>Свойство <code>align-items</code> похоже на <code>justify-content</code> . Напомним, что свойство <code>justify-content</code> выровняло элементы flex вдоль главной оси. Для рядов главная ось - горизонтальная линия, а для столбцов - вертикальная. Контейнеры Flex также имеют <strong>поперечную ось,</strong> являющуюся противоположностью основной оси. Для рядов поперечная ось вертикальна, а для столбцов поперечная ось горизонтальна. CSS предлагает свойство <code>align-items</code> для выравнивания элементов flex вдоль поперечной оси. Для строки он указывает CSS, как подвинуть элементы во всей строке вверх или вниз внутри контейнера. А для столбца, как подвинуть все элементы влево или вправо внутри контейнера. Различные значения, доступные для <code>align-items</code> включают: <ul><li> <code>flex-start</code> : двигает элементы к началу контейнера flex. Для строк это передвигает элементы в верхнюю часть контейнера. Для столбцов это передвигает элементы в левую часть контейнера. </li><li> <code>flex-end</code> : двигает элементы к концу контейнера flex. Для строк это передвигает элементы в нижнюю часть контейнера. Для столбцов это передвигает элементы в правую часть контейнера. </li><li> <code>center</code> : выравнивание элементов по центру. Для строк это вертикально выравнивает элементы (равное пространство выше и ниже элементов). Для столбцов это горизонтально выравнивает их (равное пространство слева и справа от элементов). </li><li> <code>stretch</code> : растягивает элементы, чтобы заполнить flex контейнер. Например, элементы строк растягиваются, чтобы заполнить flex контейнер сверху вниз. </li><li> <code>baseline</code> : выровнять элементы по их базовым линиям. Базовая линия - это текстовая концепция, думайте об этом как о линии, на которой сидят буквы. </li></ul></p>
</section>

Align Elements Using the align-items Property

<section id="description">
<p>Последняя задача привела свойство <code>align-items</code> и привела пример. Это свойство может быть применено к нескольким элементам вставки tweet для выравнивания элементов flex внутри них.</p></section>

Use the align-items Property in the Tweet Embed

<section id="description">
<p>CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство <code>flex-wrap</code> , он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса: <ul><li> <code>nowrap</code> : это значение по умолчанию и не переносит элементы. </li><li> <code>wrap</code> : обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. </li><li> <code>wrap-reverse</code> : обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце. </li></ul></p>
</section>

Use the flex-wrap Property to Wrap a Row or Column

<section id="description">
<p>До сих пор все свойства в задачах применимы к контейнеру flex (родительский элемент гибких элементов). Однако для гибких элементов существует несколько полезных свойств. Первый - свойство <code>flex-shrink</code> . Когда он используется, он позволяет сжимать элемент, если контейнер гибкого контейнера слишком мал. Элементы сокращаются, когда ширина родительского контейнера меньше, чем объединенная ширина всех элементов гибкости внутри него. Свойство <code>flex-shrink</code> принимает числа как значения. Чем больше число, тем больше он будет уменьшаться по сравнению с другими элементами в контейнере. Например, если один элемент имеет значение <code>flex-shrink</code> 1, а другое имеет значение <code>flex-shrink</code> 3, то значение со значением 3 будет уменьшаться в три раза больше, чем другое.</p></section>

Use the flex-shrink Property to Shrink Items

<section id="description">
<p>Противоположность <code>flex-shrink</code> - свойство <code>flex-grow</code> . Напомним, что <code>flex-shrink</code> контролирует размер предметов при сжатии контейнера. Свойство <code>flex-grow</code> управляет размером элементов, когда родительский контейнер расширяется. Используя аналогичный пример из последней задачи, если один элемент имеет значение <code>flex-grow</code> 1, а другое имеет значение <code>flex-grow</code> 3, то значение со значением 3 будет расти в три раза больше, чем другое.</p></section>

Use the flex-grow Property to Expand Items

<section id="description">
<p>Свойство <code>flex-basis</code> указывает начальный размер элемента до того, как CSS выполнит корректировки с <code>flex-shrink</code> или <code>flex-grow</code> . Единицы, используемые свойством <code>flex-basis</code> такие же, как и другие свойства размера ( <code>px</code> , <code>em</code> , <code>%</code> и т. Д.). Значение <code>auto</code> определяет размеры элементов на основе содержимого.</p></section>

Use the flex-basis Property to Set the Initial Size of an Item

<section id="description">
<p>Существует возможность быстрого выбора нескольких свойств гибкости сразу. Свойства <code>flex-grow</code> , <code>flex-shrink</code> и <code>flex-basis</code> можно объединить, используя свойство <code>flex</code> . Например, <code>flex: 1 0 10px;</code> установит элемент для <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , и <code>flex-basis: 10px;</code> , Настройки свойств по умолчанию - <code>flex: 0 1 auto;</code> ,</p></section>

Use the flex Shorthand Property

<section id="description">
<p>Свойство <code>order</code> используется для указания CSS порядка отображения элементов гибкости в контейнере flex. По умолчанию элементы будут отображаться в том же порядке, что и исходный HTML-код. Свойство принимает числа как значения, а отрицательные числа могут использоваться.</p></section>

Use the order Property to Rearrange Items

<section id="description">
<p>Конечным свойством для элементов flex является <code>align-self</code> . Это свойство позволяет настраивать выравнивание каждого элемента отдельно, вместо того, чтобы устанавливать их все одновременно. Это полезно, так как другие общие методы настройки с использованием свойств CSS <code>float</code> , <code>clear</code> и <code>vertical-align</code> не работают на гибких элементах. <code>align-self</code> принимает те же значения, что и <code>align-items</code> и отменяет любое значение, заданное свойством <code>align-items</code> .</p></section>

Use the align-self Property

<section id="description">
<p><strong>Цель:</strong> Создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если вы хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! <strong>Пользовательская история # 1:</strong> Я вижу заголовок с <code>id="title"</code> в формате H1. <strong>Пользовательская история # 2:</strong> Я вижу короткое описание с <code>id="description"</code> в формате P. <strong>Пользовательская история # 3:</strong> Я вижу элемент <code>form</code> с <code>id="survey-form"</code> . <strong>Пользовательская история # 4:</strong> Внутри элемента формы мне нужно ввести мое имя в поле с <code>id="name"</code> . <strong>Пользовательская история # 5:</strong> Внутри элемента формы мне нужно ввести электронную почту в поле с <code>id="email"</code> . <strong>Пользовательская история # 6:</strong> Если я введу электронную почту, которая не отформатирована правильно, я увижу HTML5 ошибку валидации. <strong>Пользовательская история # 7:</strong> Внутри формы я могу ввести число в поле с <code>id="number"</code> . <strong>Пользовательская история # 8:</strong> Если я введу нечисловое значение в поле ввода, я увижу HTML5 ошибку валидации. <strong>Пользовательская история # 9:</strong> Если я ввожу число за пределами диапазона ввода, которые определены атрибутами <code>min</code> и <code>max</code> , я увижу ошибку проверки HTML5. <strong>Пользовательская история # 10:</strong> Для полей ввода имени, электронной почты и числа внутри формы я могу видеть соответствующие метки, которые описывают назначение каждого поля со следующими идентификаторами: <code>id="name-label"</code> , <code>id="email-label"</code>  и <code>id="number-label"</code> . <strong>Пользовательская история # 11:</strong> Для полей ввода имени, электронной почты и ввода числа я вижу плейсхолдер, который дает мне описание или инструкции для каждого поля. <strong>Пользовательская история # 12:</strong> Внутри элемента формы я могу выбрать опцию из раскрывающегося списка, имеющего соответствующий <code>id="dropdown"</code> . <strong>Пользовательская история # 13:</strong> Внутри элемента формы я могу выбрать поле из одной или нескольких групп переключателей. Каждая группа должна быть сгруппирована с использованием атрибута <code>name</code> . <strong>Пользовательская история # 14:</strong> Внутри элемента формы я могу выбрать несколько полей из ряда флажков, каждый из которых должен иметь атрибут <code>value</code> . <strong>Пользовательская история # 15:</strong> Внутри элемента формы, в конце, я вижу <code>textarea</code> для дополнительных комментариев. <strong>Пользовательская история # 16:</strong> Внутри элемента формы есть кнопка с <code>id="submit"</code> для отправки всех моих введённых данных. Вы можете создать свой проект от данного <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">CodePen шаблона</a> . Или вы можете использовать ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес вашего рабочего проекта со всеми выполненными тестами. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask,</a> если вы зашли в тупик.</p></section>

Build a Survey Form

<section id="description">
<p><strong>Цель:</strong> Создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально похожее на это: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Выполните приведенные ниже <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B8" target="_blank">пользовательские истории</a> и пройдите все тесты. Сделайте приложение в своем стиле. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать чистый CSS, потому что он использовался в упражнениях, и вы должны получить некоторую практику работы с чистым CSS. Вы можете использовать Bootstrap или SASS, если хотите. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, но вы можете рискнуть их использовать. Другие проекты дадут вам возможность работать с различными пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливого кодирования! <strong>Пользовательская история # 1:</strong> Моя целевая страница продукта должна иметь элемент <code>header</code> с соответствующим <code>id="header"</code> . <strong>Пользовательская история # 2:</strong> Я вижу изображение внутри элемента <code>header</code> с соответствующим <code>id="header-img"</code> . У компании должен быть хороший логотип. <strong>Пользовательская история # 3:</strong> В элементе <code>#header</code> я вижу элемент <code>nav</code> с соответствующим <code>id="nav-bar"</code> . <strong>Пользовательская история # 4:</strong> Я вижу как минимум три элемента, которые можно щелкнуть внутри элемента <code>nav</code> , каждый с классом <code>nav-link</code> . <strong>Пользовательская история # 5:</strong> Когда я нажимаю кнопку <code>.nav-link</code> в элементе <code>nav</code> , я перемещаюсь в соответствующий раздел целевой страницы. <strong>Пользовательская история # 6:</strong> Я могу посмотреть встроенное видео с продуктом, с <code>id="video"</code> . <strong>Пользовательская история # 7:</strong> Моя целевая страница имеет элемент <code>form</code> с соответствующим <code>id="form"</code> . <strong>Пользовательская история # 8:</strong> В форме есть поле <code>input</code> с <code>id="email"</code> , где я могу ввести адрес электронной почты. <strong>Пользовательская история # 9:</strong> Поле ввода <code>#email</code> должно содержать плейсхолдер (текст заполнителя), чтобы пользователь знал, для чего это поле. <strong>Пользовательская история # 10:</strong> Поле ввода <code>#email</code> использует проверку HTML5, чтобы подтвердить, что введенный текст является адресом электронной почты. <strong>Пользовательская история # 11:</strong> В форме есть <code>input</code> с соответствующим <code>id="submit"</code> . <strong>Пользовательская история # 12:</strong> Когда я нажимаю на элемент <code>#submit</code> , электронная почта отправляется на статическую страницу (используйте этот фиктивный URL: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ), который подтверждает что адрес электронной почты был введен и отправлен успешно. <strong>Пользовательская история # 13:</strong> Навигационная панель всегда должна находиться в верхней части окна просмотра. <strong>Пользовательская история # 14:</strong> На целевой странице моего продукта должен быть хотя бы один мультимедийный запрос. <strong>Пользовательская история # 15:</strong> Моя целевая страница продукта должна использовать CSS flexbox хотя бы один раз. Вы можете создать свой проект от данного шаблона <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Как только вы закончите, отправьте URL-адрес своего рабочего проекта с прохождением всех тестов. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a> , если вы зашли в тупик.</p></section>

Build a Product Landing Page

<section id="description">
<p><strong>Цель:</strong> создать приложение <a href="https://codepen.io" target="_blank">CodePen.io</a> , функционально подобное этому: <a href="https://codepen.io/freeCodeCamp/full/NdrKKL" target="_blank">https://codepen.io/freeCodeCamp/full/NdrKKL</a> . Выполните приведенные ниже <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">истории пользователей</a> и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать HTML, JavaScript и CSS для завершения этого проекта. Рекомендуется использовать простой CSS, потому что это то, что до сих пор изучали уроки, и вы должны получить некоторую практику с простым CSS. Вы можете использовать Bootstrap или SASS, если вы выберете. Дополнительные технологии (например, jQuery, React, Angular или Vue) не рекомендуются для этого проекта, и использование их на свой страх и риск. Другие проекты дадут вам возможность работать с различными технологическими пакетами, такими как React. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! <strong>User Story # 1:</strong> Я вижу <code>main</code> элемент с соответствующим <code>id="main-doc"</code> , который содержит основное содержание страницы (техническая документация). <strong>User Story # 2:</strong> В элементе <code>#main-doc</code> я вижу несколько элементов <code>section</code> , каждый из которых имеет класс <code>main-section</code> . Должно быть не менее 5. <strong>User Story # 3:</strong> Первый элемент внутри каждого <code>.main-section</code> должен быть элементом <code>header</code> который содержит текст, описывающий тему этого раздела. <strong>User Story # 4:</strong> Каждый элемент <code>section</code> с классом <code>main-section</code> должен также иметь идентификатор, соответствующий тексту каждого содержащегося в нем <code>header</code> . Любые пробелы должны быть заменены символами подчеркивания (например, <code>section</code> который содержит заголовок «Javascript и Java», должен иметь соответствующий <code>id="Javascript_and_Java"</code> ). <strong>User Story # 5:</strong> <code>.main-section</code> должны содержать не менее 10 <code>p</code> элементов (не каждый). <strong>User Story # 6:</strong> <code>.main-section</code> должны содержать не менее 5 элементов <code>code</code> (не каждый). <strong>User Story # 7:</strong> <code>.main-section</code> должны содержать не менее 5 элементов <code>li</code> (не каждый). <strong>User Story # 8:</strong> Я вижу элемент <code>nav</code> с соответствующим <code>id="navbar"</code> . <strong>User Story # 9:</strong> элемент navbar должен содержать один элемент <code>header</code> который содержит текст, описывающий тему технической документации. <strong>User Story # 10:</strong> Кроме того, навигационная панель должна содержать элементы ссылки ( <code>a</code> ) с классом <code>nav-link</code> . Для каждого элемента с <code>main-section</code> классом класса должен быть один. <strong>User Story # 11:</strong> Элемент <code>header</code> на панели навигации должен появиться перед любыми элементами ссылки ( <code>a</code> ) на панели навигации. <strong>User Story # 12:</strong> Каждый элемент с классом <code>nav-link</code> должен содержать текст, соответствующий тексту <code>header</code> в каждом <code>section</code> (например, если у вас есть раздел / заголовок «Hello world», ваш навигатор должен иметь элемент, который содержит текст "Привет мир"). <strong>User Story # 13:</strong> Когда я нажимаю элемент navbar, страница должна перейти к соответствующему разделу элемента <code>main-doc</code> (например, если я нажму на элемент <code>nav-link</code> который содержит текст «Hello world», страница перемещается к элементу <code>section</code> который имеет этот идентификатор и содержит соответствующий <code>header</code> . <strong>User Story # 14:</strong> на устройствах с обычным размером (ноутбуки, настольные компьютеры) элемент с <code>id="navbar"</code> должен быть показан в левой части экрана и должен всегда быть видимым пользователю. <strong>Пользовательская</strong> страница <strong>№15:</strong> страница «Моя техническая документация» должна использовать по крайней мере один мультимедийный запрос. Вы можете создать свой проект, <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">нарисуя это перо CodePen</a> . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде, : <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> После того, как вы закончите, отправьте URL-адрес вашему рабочему проекту со всеми его прохождениями тестов. Не забудьте использовать <a href="https://www.freecodecamp.org/forum/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a> если вы застряли.</p></section>

Build a Technical Documentation Page

<section id="description">
<p>Медиа-запросы - это новый метод, введенный в CSS3, который изменяет представление контента на основе разных размеров видовых экранов. Окно просмотра - видимая область пользователя на веб-странице и отличается в зависимости от устройства, используемого для доступа к сайту. Медиа-запросы состоят из типа носителя, и если этот тип носителя соответствует типу устройства, на котором отображается документ, применяются стили. Вы можете иметь столько селекторов и стилей внутри вашего медиа-запроса, сколько хотите. Ниже приведен пример медиа-запроса, который возвращает содержимое, когда ширина устройства меньше или равна 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> и следующий медиа-запрос возвращает содержимое, когда Высота устройства больше или равна 350px: <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Помните, что CSS внутри медиа-запроса применяется только в том случае, если тип материала соответствует типу используемого устройства.</p></section>

Create a Media Query

<section id="description">
<p>Создание изображений с учетом CSS очень просто. Вместо применения абсолютной ширины к элементу: <code>img { width: 720px; }</code> Вы можете использовать: <blockquote> img { <br> max-width: 100%; <br> display: block; <br> высота: авто; <br> } </blockquote> Свойство <code>max-width</code> 100% масштабирует изображение в соответствии с шириной его контейнера, но изображение не будет растягиваться шире его первоначальной ширины. Установка свойства <code>display</code> для блокировки изменяет изображение с встроенного элемента (по умолчанию) на элемент блока в его собственной строке. Свойство <code>height</code> автоматически сохраняет исходное соотношение сторон изображения.</p></section>

Make an Image Responsive

<section id="description">
<p>Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев retina) - это определить их значения <code>width</code> и <code>height</code> как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины: <pre class="language-js"><code>&#x3C;style>
  img {
    height: 250px; 
    width: 250px; 
  } 
&#x3C;/style>
&#x3C;img src="coolPic500x500.jpg" alt = "Самая прекрасная картина" /> </code></pre></p>
</section>

Use a Retina Image for Higher Resolution Displays

<section id="description">
<p>Вместо использования текста <code>em</code> или <code>px</code> для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана: <ul><li> <code>vw: 10vw</code> будет составлять 10% от ширины <code>vw: 10vw</code> просмотра. </li><li> <code>vh: 3vh</code> будет 3% высоты просмотра. </li><li> <code>vmin: 70vmin</code> будет на 70% меньше размера <code>vmin: 70vmin</code> просмотра (высота и ширина). </li><li> <code>vmax: 100vmax</code> будет на 100% больше размера <code>vmax: 100vmax</code> просмотра (высота и ширина). </li></ul></p>
</section>

Make Typography Responsive

<section id="description">
<p>Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после <code>500ms</code> , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство <code>animation-fill-mode</code> <code>forwards</code> . Режим <code>animation-fill-mode</code> задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: <code>animation-fill-mode: forwards;</code></p>
</section>

Modify Fill Mode of an Animation

<section id="description">
<p>Вы использовали атрибуты <code>id</code> или <code>class</code> к элементам, чтобы задать им специфические стили. Эти атрибуты известны как селекторы <code>ID</code> и <code>class</code>. Существуют и другие селекторы, которые вы можете использовать в CSS для выбора пользовательских групп элементов. Давайте снова рассмотрим CatPhotoApp, чтобы использовать селекторы в CSS. Для этой задачи вы будете использовать селектор атрибутов <code>[attr=value]</code>, чтобы установить чекбоксы в CatPhotoApp. Этот селектор соответствует элементам стилей с определенным значением атрибута. Например, приведенный ниже код изменяет отступы всех элементов с атрибутом <code>type</code>, имеющим значение  <code>radio</code>: <pre class="language-css"><code>[type = 'radio'] {
  margin: 20px 0px 20px 0px;
}</code></pre></p>

<p>
  Заметка: более подробно этот момент разбирался: <a href="https://freecode.academy/learn/exercises/bad87fee1348bd9aecf08806/discuss/aa579dd7d7d5f402c7bfb4c16">здесь</a>.
</p>
</section>