fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@ -1,32 +1,31 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
|
||||
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cPp7VfD
|
||||
forumTopicId: 16628
|
||||
localeTitle: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
|
||||
---
|
||||
## Description (Описание)
|
||||
<section id="description"> Вероятно, вы уже встречали атрибут <code>alt</code> в теге <code>img</code> в других задачах. <code>Alt</code> описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
|
||||
Например: <code><img src="importantLogo.jpeg" alt="Company logo"></code>
|
||||
Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание <code>alt</code> должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута <code>alt</code> для каждого изображения. </section>
|
||||
|
||||
|
||||
## Instructions (Задание)
|
||||
<section id="instructions"> Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.) </section>
|
||||
## Description
|
||||
<section id="description"> Вероятно, вы видели атрибут <code>alt</code> в теге <code>img</code> в других задачах. Текст <code>Alt</code> описывает содержимое изображения и предоставляет текстовую альтернативу. Это помогает в случае, если изображение не загружается или не может быть замечено пользователем. Он также используется поисковыми системами, чтобы понять, что содержит изображение, чтобы включить его в результаты поиска. Вот пример: <code><img src="importantLogo.jpeg" alt="Company logo"></code> Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не получат информацию, если они представлены только визуально. Для изображений экранные программы могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для сообщения ключевой информации. Хороший <code>alt</code> представляет из себя короткий текст, который передает основной смысл изоражения. Вы всегда должны использовать атрибут <code>alt</code> для своих изображений. По спецификации HTML5 это считается обязательным. </section>
|
||||
<section id='description'>
|
||||
Вероятно, вы уже встречали атрибут <code>alt</code> в теге <code>img</code> в других задачах. <code>Alt</code> описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
|
||||
Например: <code><img src="importantLogo.jpeg" alt="Company logo"></code>
|
||||
Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание <code>alt</code> должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута <code>alt</code> для каждого изображения.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat оказался как ниндзя кодером, так и настоящим ниндзя, и создает веб-сайт, чтобы поделиться своими знаниями. Изображение профиля, которое он хочет использовать, показывает его навыки и должно быть оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> , который объясняет, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.) </section>
|
||||
|
||||
## Tests (Тесты)
|
||||
<section id='instructions'>
|
||||
Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.)
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш тег <code>img</code> должен иметь атрибут <code>alt</code>, и он не должен быть пустым.'
|
||||
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
|
||||
- text: Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty.
|
||||
testString: assert($('img').attr('alt'));
|
||||
|
||||
```
|
||||
|
||||
@ -44,14 +43,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution (Решение)
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// здесь должно быть ваше решение
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,34 +2,34 @@
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Add an Accessible Date Picker
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
|
||||
videoUrl: https://scrimba.com/c/cR3bRbCV
|
||||
forumTopicId: 301008
|
||||
localeTitle: Добавить возможность выбора даты
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> <label for = "input1"> Введите дату: </ label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote>
|
||||
</section>
|
||||
|
||||
## Description (Описание)
|
||||
<section id="description"> Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> <label for = "input1"> Введите дату: </ label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote></section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата».
|
||||
</section>
|
||||
|
||||
|
||||
## Instructions (Задание)
|
||||
<section id="instructions"> Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата». </section>
|
||||
|
||||
|
||||
## Tests (Тесты)
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
|
||||
- text: Вы должны добавить один тег <code>input</code> для поля выбора даты.
|
||||
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
|
||||
- text: Тег <code>input</code> должен иметь атрибут <code>type</code> со значением date.
|
||||
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
|
||||
- text: Ваш тег <code>input</code> должен иметь атрибут <code>id</code> со значением pickdate.
|
||||
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
|
||||
- text: Ваш тег <code>input</code> должен иметь атрибут <code>name</code> со значением date.
|
||||
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
|
||||
- text: Your code should add one <code>input</code> tag for the date selector field.
|
||||
testString: assert($('input').length == 2);
|
||||
- text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
|
||||
testString: assert($('input').attr('type') == 'date');
|
||||
- text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.
|
||||
testString: assert($('input').attr('id') == 'pickdate');
|
||||
- text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
|
||||
testString: assert($('input').attr('name') == 'date');
|
||||
|
||||
```
|
||||
|
||||
@ -52,11 +52,11 @@ tests:
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Добавьте ваш код под этой линией -->
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Добавьте ваш код над этой линией -->
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
@ -69,14 +69,29 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution (Решение)
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// здесь должно быть ваше решение
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
<input type="date" id="pickdate" name="date">
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации'
|
||||
videoUrl: https://scrimba.com/c/c437as3
|
||||
forumTopicId: 301011
|
||||
localeTitle: Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации
|
||||
---
|
||||
## Description (Описание)
|
||||
<section id="description"> Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими. </section>
|
||||
|
||||
|
||||
## Description
|
||||
<section id="description"> Существуют различные формы слепоты. Они могут варьироваться от пониженной чувствительности к определенной длины волны света до невозможности видеть цвет вообще. Наиболее распространенной формой является снижение чувствительности к обнаружению зеленого цвета. Например, если два похожих зеленых цвета являются цветом переднего плана и фона вашего контента, пользователь с цветовой слепотой может не распознать их. Близкие цвета можно рассматривать как соседей на цветовом колесе, и эти комбинации следует избегать при передаче важной информации. <strong>Заметка</strong> <br> Некоторые онлайн-инструменты для выбора цвета включают визуальное моделирование того, как появляются цвета для разных типов слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста. </section>
|
||||
<section id='description'>
|
||||
Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat тестирует различные стили для важной кнопки, но желтый ( <code>#FFFF33</code> ) <code>background-color</code> и зеленый ( <code>#33FF33</code> ) текст <code>color</code> соседствующие оттенки на цветовом колесе и практически неразличимы для некоторых пользователей с дальтонизмом. (Их аналогичная легкость также не позволяет проверить коэффициент контрастности). Измените <code>color</code> текста на синий ( <code>#003366</code> ), чтобы решить обе проблемы. </section>
|
||||
|
||||
<section id='instructions'>
|
||||
Camper Cat тестирует различные стили для важной кнопки, но желтый ( <code>#FFFF33</code> ) <code>background-color</code> и зеленый ( <code>#33FF33</code> ) текст <code>color</code> соседствующие оттенки на цветовом колесе и практически неразличимы для некоторых пользователей с дальтонизмом. (Их аналогичная легкость также не позволяет проверить коэффициент контрастности). Измените <code>color</code> текста на синий ( <code>#003366</code> ), чтобы решить обе проблемы.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен изменить цвет <code>color</code> текста для <code>button</code> на синий.
|
||||
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
|
||||
- text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.
|
||||
testString: assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
|
||||
```
|
||||
|
||||
@ -56,14 +56,28 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution (Решение)
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// здесь должно быть ваше решение
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #003366;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать'
|
||||
videoUrl: https://scrimba.com/c/cmzMEUw
|
||||
forumTopicId: 301012
|
||||
localeTitle: Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый. </section>
|
||||
<section id='description'>
|
||||
Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи программ чтения с экрана его не увидят. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различением цветов, могли отличать их. Предыдущие задачи курса охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором случае. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно по оттенку, но иногда и по яркости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и осветления светлого с помощью анализатора цветного контраста. Более темными цветами на цветовом круге считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого <code>background-color</code> с <code>color</code> текстом в темно-коричневом <code>color</code> имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, яркость), изменив третий аргумент. Увеличьте значение яркости <code>background-color</code> с 35% до 55% и уменьшите значение яркости <code>color</code> с 20% до 15%. Это улучшает контрастность до 5.9: 1. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого <code>background-color</code> с <code>color</code> текстом в темно-коричневом <code>color</code> имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, яркость), изменив третий аргумент. Увеличьте значение яркости <code>background-color</code> с 35% до 55% и уменьшите значение яркости <code>color</code> с 20% до 15%. Это улучшает контрастность до 5.9: 1.
|
||||
</section>
|
||||
|
||||
## Tests (Тесты)
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен только изменить значение яркости для свойства <code>color</code> текста на значение 15%.
|
||||
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
|
||||
- text: Ваш код должен только изменить значение яркости для свойства <code>background-color</code> на значение 55%.
|
||||
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
|
||||
- text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.
|
||||
testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
- text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.
|
||||
testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -55,14 +60,30 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution (Решение)
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// здесь должно быть ваше решение
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 15%);
|
||||
background-color: hsl(120, 25%, 55%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,30 @@
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Give Links Meaning by Using Descriptive Link Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Определите ссылку при помощи описания'
|
||||
videoUrl: https://scrimba.com/c/c437DcV
|
||||
forumTopicId: 301013
|
||||
localeTitle: Определите ссылку при помощи описания
|
||||
---
|
||||
|
||||
|
||||
## Description
|
||||
<section id="description"> У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( <code>a</code> ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами <code>a</code>. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.</section>
|
||||
<section id='description'>
|
||||
У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( <code>a</code> ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами <code>a</code>. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( <code>a</code> ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»). </section>
|
||||
|
||||
<section id='instructions'>
|
||||
Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( <code>a</code> ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
|
||||
- text: 'Ваш код должен переместить теги от словосочетания «Нажмите здесь» , к словосочетанию «информация об акумуляторах. <code>a</code>'
|
||||
|
||||
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
|
||||
- text: 'Убедитесь , что вы не забыли закрывающий тег. <code>a</code>'
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
- text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
|
||||
testString: assert($('a').text().match(/^(information about batteries)$/g));
|
||||
- text: Make sure your <code>a</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@ -50,14 +51,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution (Решение)
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// здесь должно быть ваше решение
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,37 +2,40 @@
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Improve Accessibility of Audio Content with the audio Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cVJVkcZ
|
||||
forumTopicId: 301014
|
||||
localeTitle: Улучшаем доступность аудиоконтента
|
||||
---
|
||||
|
||||
|
||||
## Description
|
||||
<section id="description"> В HTML5 <code>audio</code> элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. <code>audio</code> тег поддерживает атрибут <code>controls</code> . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <blockquote> <audio id = "meowClip" элементы управления> <br> <источник src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <источник src = "audio / meow.ogg" type = "audio / ogg" /> <br> </ Аудио> <br></blockquote> <strong>Заметка</strong> <br> Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать. </section>
|
||||
<section id='description'>
|
||||
В HTML5 <code>audio</code> элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. <code>audio</code> тег поддерживает атрибут <code>controls</code> . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <blockquote> <audio id = "meowClip" элементы управления> <br> <источник src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <источник src = "audio / meow.ogg" type = "audio / ogg" /> <br> </ Аудио> <br></blockquote> <strong>Заметка</strong> <br> Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте <code>audio</code> элемент после <code>p</code> . Включите атрибут <code>controls</code> . Затем поместите <code>source</code> тег внутри <code>audio</code> тегов с атрибутом <code>src</code> установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и <code>type</code> атрибут «audio / mpeg». <strong>Заметка</strong> <br> Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана. </section>
|
||||
<section id='instructions'>
|
||||
Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте <code>audio</code> элемент после <code>p</code> . Включите атрибут <code>controls</code> . Затем поместите <code>source</code> тег внутри <code>audio</code> тегов с атрибутом <code>src</code> установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и <code>type</code> атрибут «audio / mpeg». <strong>Заметка</strong> <br> Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана.
|
||||
</section>
|
||||
|
||||
|
||||
## Tests (Тесты)
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем коде должен быть один <code>audio</code> тег.
|
||||
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
|
||||
- text: 'Убедитесь, что ваш <code>audio</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
|
||||
- text: <code>audio</code> тег должен иметь атрибут <code>controls</code> .
|
||||
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
|
||||
- text: Ваш код должен иметь один тег <code>source</code> .
|
||||
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
|
||||
- text: Ваш тег <code>source</code> должен находиться внутри <code>audio</code> тегов.
|
||||
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
|
||||
- text: Значение атрибута <code>src</code> в теге <code>source</code> должно точно соответствовать ссылке в инструкциях.
|
||||
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
|
||||
- text: Ваш код должен включать атрибут <code>type</code> в тег <code>source</code> со значением audio / mpeg.
|
||||
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
|
||||
- text: Your code should have one <code>audio</code> tag.
|
||||
testString: assert($('audio').length === 1);
|
||||
- text: Make sure your <code>audio</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
|
||||
- text: The <code>audio</code> tag should have the <code>controls</code> attribute.
|
||||
testString: assert($('audio').attr('controls'));
|
||||
- text: Your code should have one <code>source</code> tag.
|
||||
testString: assert($('source').length === 1);
|
||||
- text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
|
||||
testString: assert($('audio').children('source').length === 1);
|
||||
- text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
|
||||
testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
|
||||
- text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
|
||||
testString: assert($('source').attr('type') === 'audio/mpeg');
|
||||
|
||||
```
|
||||
|
||||
@ -60,14 +63,23 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// здесь должно быть ваше решение
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
<audio controls>
|
||||
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||
</audio>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,37 +2,38 @@
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Improve Chart Accessibility with the figure Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cGJMqtE
|
||||
forumTopicId: 301015
|
||||
localeTitle: Улучшите читаемость диаграммы
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> HTML5 представил элемент <code>figure</code> вместе со связанной <code>figcaption</code>. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту <code>figure</code>. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что <code>figcaption</code> идет внутри <code>figure</code> тегов и может быть объединен с другими элементами: <blockquote> <Цифра> <br> <img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота"> <br> <br> <br> <Figcaption> <br> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. <br> </ Figcaption> <br> </ Цифра> <br></blockquote></section>
|
||||
<section id='description'>
|
||||
HTML5 представил элемент <code>figure</code> вместе со связанной <code>figcaption</code>. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту <code>figure</code>. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что <code>figcaption</code> идет внутри <code>figure</code> тегов и может быть объединен с другими элементами: <blockquote> <Цифра> <br> <img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота"> <br> <br> <br> <Figcaption> <br> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. <br> </ Figcaption> <br> </ Цифра> <br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег <code>div</code> который он использовал для тега <code>figure</code>, и тэг <code>p</code> который окружает подпись к тегу <code>figcaption</code>. </section>
|
||||
|
||||
<section id='instructions'>
|
||||
Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег <code>div</code> который он использовал для тега <code>figure</code>, и тэг <code>p</code> который окружает подпись к тегу <code>figcaption</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен иметь один <code>figure</code> тег.
|
||||
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
|
||||
- text: В вашем коде должен быть один тег <code>figcaption</code> .
|
||||
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
|
||||
- text: Ваш код не должен иметь каких - либо <code>p</code> - тегов.
|
||||
|
||||
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
|
||||
- text: <code>figcaption</code> должен быть дочерним элементом тега <code>figure</code> .
|
||||
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
|
||||
- text: 'Убедитесь, что ваш <code>figure</code> элемент имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
|
||||
- text: Your code should have one <code>figure</code> tag.
|
||||
testString: assert($('figure').length == 1);
|
||||
- text: Your code should have one <code>figcaption</code> tag.
|
||||
testString: assert($('figcaption').length == 1);
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: assert($('div').length == 0);
|
||||
- text: Your code should not have any <code>p</code> tags.
|
||||
testString: assert($('p').length == 0);
|
||||
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
|
||||
testString: assert($('figure').children('figcaption').length == 1);
|
||||
- text: Make sure your <code>figure</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@ -58,13 +59,13 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Добавьте ваш код под этой строкой -->
|
||||
<!-- Add your code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Добавьте ваш код над этой строкой -->
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
@ -90,14 +91,53 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution (Решение)
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// ваше решение должно быть здесь
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<figure>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Improve Form Field Accessibility with the label Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cGJMMAN
|
||||
forumTopicId: 301016
|
||||
localeTitle: Улучшить доступность поля формы с помощью элемента Element
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Улучшение доступности с семантической разметкой 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> <Форма> <br> <label for = "name"> Имя: </ label> <br> <input type = "text" id = "name" name = "name"> <br> </ Форма> <br></blockquote></section>
|
||||
<section id='description'>
|
||||
Улучшение доступности с семантической разметкой 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> <Форма> <br> <label for = "name"> Имя: </ label> <br> <input type = "text" id = "name" name = "name"> <br> </ Форма> <br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat рассчитывает на большой интерес к его вдумчивым сообщениям в блоге и хочет включить форму для регистрации электронной почты. Добавьте <code>for</code> атрибут к <code>label</code> электронной почты, которая соответствует <code>id</code> на его <code>input</code> поле. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat рассчитывает на большой интерес к его вдумчивым сообщениям в блоге и хочет включить форму для регистрации электронной почты. Добавьте <code>for</code> атрибут к <code>label</code> электронной почты, которая соответствует <code>id</code> на его <code>input</code> поле.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен иметь атрибут <code>for</code> в теге <code>label</code>, который не является пустым.'
|
||||
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
|
||||
- text: 'Значение атрибута <code>for</code> должно соответствовать значению <code>id</code> электронной почты <code>input</code>.'
|
||||
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
|
||||
- text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
|
||||
testString: assert($('label').attr('for'));
|
||||
- text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
|
||||
testString: assert($('label').attr('for') == 'email');
|
||||
|
||||
```
|
||||
|
||||
@ -69,14 +74,44 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Improve Readability with High Contrast Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cKb3nCq
|
||||
forumTopicId: 301017
|
||||
localeTitle: Улучшить читаемость с помощью текста с высоким контрастом
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение. </section>
|
||||
<section id='description'>
|
||||
Низкий контраст между цветами текста и фона может затруднить чтение текста. Достаточный контраст улучшает читаемость вашего текста, но что именно означает «достаточный»? Рекомендации по доступности веб-содержимого (WCAG) рекомендуют коэффициент контрастности не ниже 4,5:1 для обычного текста. Отношение рассчитывается путем сравнения относительных значений яркости двух цветов. Оно колеблется от 1:1 для того же цвета или без контраста до 21:1 для белого против черного, самого сильного контраста. В Интернете доступно множество инструментов для проверки контраста, которые вычисляют это соотношение.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat выбрал светло-серый текст на белом фоне для его недавнего сообщения в блоге, такая пара имеет коэффициент контрастности 1,5:1, что затрудняет чтение текста. Измените <code>color</code> текста с текущего серого ( <code>#D3D3D3</code> ) на более темный серый ( <code>#636363</code> ), чтобы улучшить коэффициент контрастности до 6:1. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat выбрал светло-серый текст на белом фоне для его недавнего сообщения в блоге, такая пара имеет коэффициент контрастности 1,5:1, что затрудняет чтение текста. Измените <code>color</code> текста с текущего серого ( <code>#D3D3D3</code> ) на более темный серый ( <code>#636363</code> ), чтобы улучшить коэффициент контрастности до 6:1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен изменить <code>color</code> текста для <code>body</code> на темный серый цвет.
|
||||
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
|
||||
- text: Ваш код не должен изменять <code>background-color</code> для <code>body</code> .
|
||||
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
|
||||
- text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.
|
||||
testString: assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
- text: Your code should not change the <code>background-color</code> for the <code>body</code>.
|
||||
testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
|
||||
```
|
||||
|
||||
@ -55,14 +60,30 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #636363;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,28 +2,31 @@
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Jump Straight to the Content Using the main Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cPp7zuE
|
||||
forumTopicId: 301018
|
||||
localeTitle: Перейти прямо к контенту, используя элемент main
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code> и <code>section</code>, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному <code>div</code> . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации.
|
||||
Элемент <code>main</code> используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. <code>main</code> тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега <code>main</code> автоматически предоставляет вспомогательные устройства, которые имеют функциональность. </section>
|
||||
<section id='description'>
|
||||
В HTML5 появилось несколько новых элементов, которые предоставляют разработчикам больше опций, а также включают функции доступности. Эти теги включают в себя <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code> и <code>section</code>, среди прочих. По умолчанию браузер отображает эти элементы аналогично традиционному <code>div</code> . Однако использование их в соответствующих случаях дает дополнительный смысл в вашей разметке. Имя тега может указывать на тип информации, который он содержит, что добавляет семантический смысл этому контенту. Вспомогательные технологии могут получить доступ к этой информации, чтобы предоставить пользователям более подробные сведения о странице или вариантах навигации.
|
||||
Элемент <code>main</code> используется для обертывания (как вы уже догадались) основного содержимого, и на странице должно быть только один такой элемент. Он предназначен для того, чтобы обертывать информацию, связанную с центральной темой вашей страницы. Он не должен включать элементы, которые повторяются на разных страницах, например, ссылки на навигацию или баннеры. <code>main</code> тег также имеет встроенную ориентирную функцию, которую вспомогательные технологии могут использовать для быстрого перехода к основному контенту. Если вы когда-либо видели ссылку «Перейти к основному содержимому» в верхней части страницы, использование тега <code>main</code> автоматически предоставляет вспомогательные устройства, которые имеют функциональность.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat имеет несколько больших идей для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие <code>main</code>-теги между <code>header</code> и <code>footer</code> (из других задач). Пока не оставляйте тег <code>main</code> пустым. </section>
|
||||
|
||||
<section id='instructions'>
|
||||
Camper Cat имеет несколько больших идей для своей страницы оружия ниндзя. Помогите ему настроить свою разметку, добавив открывающие и закрывающие <code>main</code>-теги между <code>header</code> и <code>footer</code> (из других задач). Пока не оставляйте тег <code>main</code> пустым.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем коде должен быть один <code>main</code> тег.
|
||||
testString: 'assert($("main").length == 1, "В вашем коде должен быть один <code>main</code> тег.");'
|
||||
- text: <code>main</code> теги должны быть между закрывающем тегом <code>header</code> и открывающим тегом <code>footer</code>.
|
||||
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "<code>main</code> теги должны быть между закрывающем тегом <code>header</code> и открывающим тегом <code>footer</code>.");'
|
||||
- text: Your code should have one <code>main</code> tag.
|
||||
testString: assert($('main').length == 1);
|
||||
- text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
|
||||
testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -47,14 +50,19 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Know When Alt Text Should be Left Blank
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Знать, когда Alt-текст должен оставаться пустым'
|
||||
videoUrl: https://scrimba.com/c/cM9P4t2
|
||||
forumTopicId: 301019
|
||||
localeTitle: Знать, когда Alt-текст должен оставаться пустым
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В последней задаче вы узнали, что включение атрибута <code>alt</code> в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях <code>alt</code> текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, <code>img</code> прежнему нуждается в атрибуте <code>alt</code>, но его можно установить в пустую строку. Вот пример: <code><img src="visualDecoration.jpeg" alt=""></code> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. <strong>Заметка</strong> <br> Для изображений с надписью вы можете захотеть включить текст <code>alt</code>, так как он помогает поисковым системам вносить в каталог содержимое изображения. </section>
|
||||
<section id='description'>
|
||||
В последней задаче вы узнали, что включение атрибута <code>alt</code> в теги img является обязательным. Однако иногда изображения сгруппированы с надписью, уже описывающей их, или используются только для украшения. В этих случаях <code>alt</code> текст может показаться излишним или ненужным. В ситуациях, когда изображение уже объясняется текстовым контентом или не добавляет значения для страницы, <code>img</code> прежнему нуждается в атрибуте <code>alt</code>, но его можно установить в пустую строку. Вот пример: <code><img src="visualDecoration.jpeg" alt=""></code> Фоновые изображения обычно подпадают под «декоративную» метку. Тем не менее, они обычно применяются с правилами CSS и, следовательно, не являются частью процесса чтения расшифровок экрана. <strong>Заметка</strong> <br> Для изображений с надписью вы можете захотеть включить текст <code>alt</code>, так как он помогает поисковым системам вносить в каталог содержимое изображения.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat закодировал каркас страницы для части блога своего сайта. Он планирует добавить визуальный разрыв между двумя статьями с декоративным изображением самурайского меча. Добавьте атрибут <code>alt</code> в тег <code>img</code> и установите его в пустую строку. (Обратите внимание, что изображение <code>src</code> не связано с фактическим файлом - не беспокойтесь, что на дисплее нет мечей.) </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat закодировал каркас страницы для части блога своего сайта. Он планирует добавить визуальный разрыв между двумя статьями с декоративным изображением самурайского меча. Добавьте атрибут <code>alt</code> в тег <code>img</code> и установите его в пустую строку. (Обратите внимание, что изображение <code>src</code> не связано с фактическим файлом - не беспокойтесь, что на дисплее нет мечей.)
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш тег <code>img</code> должен иметь атрибут <code>alt</code>.
|
||||
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
|
||||
- text: Атрибут <code>alt</code> должен быть установлен в пустую строку.
|
||||
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
|
||||
- text: Your <code>img</code> tag should have an <code>alt</code> attribute.
|
||||
testString: assert(!($('img').attr('alt') == undefined));
|
||||
- text: The <code>alt</code> attribute should be set to an empty string.
|
||||
testString: assert($('img').attr('alt') == '');
|
||||
|
||||
```
|
||||
|
||||
@ -49,14 +54,24 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cJ8QGkhJ
|
||||
forumTopicId: 301020
|
||||
localeTitle: Сделать элементы доступными только для чтения с экрана с помощью пользовательского CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы заметили, что все прикладные проблемы доступности до сих пор не использовали 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></section>
|
||||
<section id='description'>
|
||||
Вы заметили, что все прикладные проблемы доступности до сих пор не использовали 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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс <code>sr-only</code> , но правила CSS еще не заполнены. Дайте <code>position</code> абсолютное значение, <code>left</code> значение a -10000px, а также <code>width</code> и <code>height</code> как значения 1px. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat создал действительно классную стеклянную гистограмму для своей учебной страницы и помещал данные в таблицу для своих слабовидящих пользователей. В таблице уже есть класс <code>sr-only</code> , но правила CSS еще не заполнены. Дайте <code>position</code> абсолютное значение, <code>left</code> значение a -10000px, а также <code>width</code> и <code>height</code> как значения 1px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен установить для свойства <code>sr-only</code> свойство <code>position</code> значение абсолютное.
|
||||
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
|
||||
- text: Ваш код должен установить свойство <code>left</code> класса <code>sr-only</code> равным -10000px.
|
||||
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
|
||||
- text: Ваш код должен установить свойство <code>width</code> класса <code>sr-only</code> равным 1 пикселю.
|
||||
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||
- text: Ваш код должен установить свойство <code>height</code> класса <code>sr-only</code> равным 1 пикселю.
|
||||
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||
- text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.
|
||||
testString: assert($('.sr-only').css('position') == 'absolute');
|
||||
- text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.
|
||||
testString: assert($('.sr-only').css('left') == '-10000px');
|
||||
- text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.
|
||||
testString: assert(code.match(/width:\s*?1px/gi));
|
||||
- text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.
|
||||
testString: assert(code.match(/height:\s*?1px/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -125,14 +130,96 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training-->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ localeTitle: Сделать ссылки навигационными с клю
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML предлагает атрибут <code>accesskey</code> для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <code><button accesskey="b">Important Button</button></code> </section>
|
||||
<section id='description'>
|
||||
HTML предлагает атрибут <code>accesskey</code> для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <code><button accesskey="b">Important Button</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут <code>accesskey</code> к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris). </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут <code>accesskey</code> к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -18,14 +22,13 @@ localeTitle: Сделать ссылки навигационными с клю
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «first».
|
||||
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
|
||||
testString: assert($('#first').attr('accesskey'));
|
||||
- text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «второй».
|
||||
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
|
||||
testString: assert($('#second').attr('accesskey'));
|
||||
- text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «first» до «g». Обратите внимание, что дело имеет значение.'
|
||||
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
|
||||
testString: assert($('#first').attr('accesskey') == 'g');
|
||||
- text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «second» до «c». Обратите внимание, что дело имеет значение.'
|
||||
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
|
||||
|
||||
testString: assert($('#second').attr('accesskey') == 'c');
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -63,14 +66,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Make Screen Reader Navigation Easier with the footer Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/crVrDh8
|
||||
forumTopicId: 301022
|
||||
localeTitle: Улучшение навигации в Screen Reader с помощью нижнего колонтитула Landmark
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Подобно <code>header</code> и <code>nav</code>, элемент <code>footer</code> имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы. </section>
|
||||
<section id='description'>
|
||||
Подобно <code>header</code> и <code>nav</code>, элемент <code>footer</code> имеет встроенную функцию ориентира, которая позволяет вспомогательным устройствам быстро перейти к ней. Он в основном используется для хранения информации об авторских правах или ссылок на связанные документы, которые обычно располагаются внизу страницы.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Учебная страница Camper Cat продвигается вперед. Измените <code>div</code>, который он использовал, чтобы связать свою информацию об авторских правах в нижней части страницы с элементом нижнего <code>footer</code>. </section>
|
||||
<section id='instructions'>
|
||||
Учебная страница Camper Cat продвигается вперед. Измените <code>div</code>, который он использовал, чтобы связать свою информацию об авторских правах в нижней части страницы с элементом нижнего <code>footer</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем коде должен быть один <code>footer</code> тег.
|
||||
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code>.
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Ваш код должен иметь тег открытия и закрытия <code>footer</code> .
|
||||
testString: 'assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
|
||||
- text: Your code should have one <code>footer</code> tag.
|
||||
testString: assert($('footer').length == 1);
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: assert($('div').length == 0);
|
||||
- text: Your code should have an opening and closing <code>footer</code> tag.
|
||||
testString: assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
|
||||
```
|
||||
|
||||
@ -73,14 +78,46 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Make Screen Reader Navigation Easier with the header Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cB76vtv
|
||||
forumTopicId: 301023
|
||||
localeTitle: Сделать экранную навигацию проще с заголовком Landmark
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом <code>header</code> . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. <code>header</code> разделяет встроенную функцию ориентира, которую вы видели с <code>main</code> , позволяя вспомогательным технологиям быстро перейти к этому контенту. <strong>Заметка</strong> <br> <code>header</code> предназначен для использования в теге <code>body</code> вашего HTML-документа. Это отличается от <code>head</code> элемента, который содержит заголовок страницы, мета - информации и т.д. </section>
|
||||
<section id='description'>
|
||||
Следующий элемент HTML5, который добавляет смысловое значение и улучшает доступность, является тегом <code>header</code> . Он используется для обертывания вводной информации или навигационных ссылок для своего родительского тега и хорошо работает вокруг контента, который повторяется вверху на нескольких страницах. <code>header</code> разделяет встроенную функцию ориентира, которую вы видели с <code>main</code> , позволяя вспомогательным технологиям быстро перейти к этому контенту. <strong>Заметка</strong> <br> <code>header</code> предназначен для использования в теге <code>body</code> вашего HTML-документа. Это отличается от <code>head</code> элемента, который содержит заголовок страницы, мета - информации и т.д.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat пишет отличные статьи о тренировках ниндзя и хочет добавить страницу на свой сайт. Измените верхний <code>div</code> который в настоящее время содержит <code>h1</code> для тега <code>header</code> . </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat пишет отличные статьи о тренировках ниндзя и хочет добавить страницу на свой сайт. Измените верхний <code>div</code> который в настоящее время содержит <code>h1</code> для тега <code>header</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен иметь один тег <code>header</code> .
|
||||
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
|
||||
- text: Ваши теги <code>header</code> должны обернуться вокруг <code>h1</code> .
|
||||
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>header</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
|
||||
- text: Your code should have one <code>header</code> tag.
|
||||
testString: assert($('header').length == 1);
|
||||
- text: Your <code>header</code> tags should wrap around the <code>h1</code>.
|
||||
testString: assert($('header').children('h1').length == 1);
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: assert($('div').length == 0);
|
||||
- text: Make sure your <code>header</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@ -66,14 +71,37 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Make Screen Reader Navigation Easier with the nav Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/czVwWSv
|
||||
forumTopicId: 301024
|
||||
localeTitle: Сделать навигацию с помощью экрана лучше с помощью навигационной системы Landmark
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Элемент <code>nav</code> - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега <code>nav</code> . Использование <code>footer</code> (в следующей задаче) достаточно. </section>
|
||||
<section id='description'>
|
||||
Элемент <code>nav</code> - это еще один элемент HTML5 со встроенной функцией ориентира для удобной навигации на экране. Этот тег предназначен для обхода основных ссылок навигации на вашей странице. Если в нижней части страницы повторяются ссылки на сайты, нет необходимости разметки тегов с помощью тега <code>nav</code> . Использование <code>footer</code> (в следующей задаче) достаточно.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat включил навигационные ссылки в верхней части своей учебной страницы, но завернул их в <code>div</code> . Измените <code>div</code> на тег <code>nav</code> чтобы улучшить доступность на его странице. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat включил навигационные ссылки в верхней части своей учебной страницы, но завернул их в <code>div</code> . Измените <code>div</code> на тег <code>nav</code> чтобы улучшить доступность на его странице.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: В вашем коде должен быть один тег <code>nav</code> .
|
||||
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
|
||||
- text: Теги вашего <code>nav</code> должны быть обернуты вокруг <code>ul</code> и элементов списка.
|
||||
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>nav</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
|
||||
- text: Your code should have one <code>nav</code> tag.
|
||||
testString: assert($('nav').length == 1);
|
||||
- text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
|
||||
testString: assert($('nav').children('ul').length == 1);
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: assert($('div').length == 0);
|
||||
- text: Make sure your <code>nav</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
|
||||
|
||||
```
|
||||
|
||||
@ -72,14 +77,43 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardize Times with the HTML5 datetime Attribute
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cmzMgtz
|
||||
forumTopicId: 301025
|
||||
localeTitle: Стандартизировать время с атрибутом datetime HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Продолжая тему даты, HTML5 также представил элемент <code>time</code> вместе с атрибутом <code>datetime</code> для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты <code>datetime</code> атрибутом <code>datetime</code> . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <code><p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p></code> </section>
|
||||
<section id='description'>
|
||||
Продолжая тему даты, HTML5 также представил элемент <code>time</code> вместе с атрибутом <code>datetime</code> для стандартизации времени. Это встроенный элемент, который может привязывать дату или время на странице. Действительный формат этой даты <code>datetime</code> атрибутом <code>datetime</code> . Это значение, доступное с помощью вспомогательных устройств. Это помогает избежать путаницы, заявляя стандартизированную версию времени, даже если она написана неформальным или разговорным образом в тексте. Вот пример: <code><p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Результаты опроса Camter Cat's Mortal Kombat в! Обведите тег <code>time</code> вокруг текста «Четверг, 15 сентября <sup> th </ sup>» и добавьте к нему атрибут <code>datetime</code> установленный в «2016-09-15». </section>
|
||||
<section id='instructions'>
|
||||
Результаты опроса Camter Cat's Mortal Kombat в! Обведите тег <code>time</code> вокруг текста «Четверг, 15 сентября <sup> th </ sup>» и добавьте к нему атрибут <code>datetime</code> установленный в «2016-09-15».
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваши теги <code>time</code> должны обтекать текст «Четверг, 15 сентября <sup> th </ sup>».'
|
||||
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".");'
|
||||
- text: Ваш тег <code>time</code> должен иметь атрибут <code>datetime</code> который не является пустым.
|
||||
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
|
||||
- text: Ваш атрибут <code>datetime</code> должен быть установлен в значение 2016-09-15.
|
||||
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>time</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
|
||||
- text: Your code should have a <code>p</code> element which includes the text "Thank you to everyone for responding to Master Camper Cat's survey." and include a <code>time</code> element.
|
||||
testString: assert(timeElement.length);
|
||||
- text: Your added <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".
|
||||
testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15<sup>th</sup>");
|
||||
- text: Your added <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.
|
||||
testString: assert(datetimeAttr && datetimeAttr.length);
|
||||
- text: Your added <code>datetime</code> attribute should be set to a value of 2016-09-15.
|
||||
testString: assert(datetimeAttr === "2016-09-15");
|
||||
|
||||
```
|
||||
|
||||
@ -72,14 +77,58 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
### After Tests
|
||||
<div id='html-teardown'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = $("article > p")
|
||||
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||
const datetimeAttr = $(timeElement).attr("datetime");
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,34 @@
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Use Headings to Show Hierarchical Relationships of Content
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cqVEktm
|
||||
forumTopicId: 301026
|
||||
localeTitle: Использовать заголовки для отображения иерархических отношений содержимого
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Заголовки (элементы от <code>h1</code> до <code>h6</code> ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. <em>Семантическое значение</em> – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом <code>h2</code> под которым идут несколько подразделов с элементом <code>h4</code> будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент <code>h1</code>, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице. </section>
|
||||
<section id='description'>
|
||||
Заголовки (элементы от <code>h1</code> до <code>h6</code> ) являются основными тегами, которые помогают сформировать структуру и заголовки вашего контента. Программы экранного доступа (скринридеры) могут быть настроены только на чтение заголовков на странице, так пользователь получит краткое содержание страницы. Поэтому важно, чтобы теги-заголовки в разметке имели семантическое значение и отношение друг к другу, а не просто использовались на основе размера заголовка. <em>Семантическое значение</em> – это когда тег, в который вы обернули содержимое, указывает на тип информации внутри него. Если бы вы писали статью с введением, основной частью и заключением, то не имело бы смысла поместить заключение в виде подраздела к основной части вашей статьи. Это должен быть отдельный раздел. Точно так же теги заголовков на веб-странице должны идти в определенном порядке и отражать иерархию вашего контента. Заголовки с равным (или более высоким) рангом озаглавливают новые разделы, заголовки с меньшим рангом являются их подразделами. Например, страница с элементом <code>h2</code> под которым идут несколько подразделов с элементом <code>h4</code> будет сбивать с толку пользователя, который использует программу экранного доступа (скринридер). С шестью вариантами заголовков заманчиво выбирать тег, только потому, что он лучше выглядит в браузере, но для изменения размеров заголовков вы можете использоваться CSS. И последнее, на каждой странице всегда должен быть один (и только один) элемент <code>h1</code>, который является главным заголовком для всего вашего контента. Этот и другие заголовки частично используются поисковыми системами, чтобы понять, что находится на странице.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги <code>h5</code> на соответствующий уровень заголовка, чтобы указать, что они являются подразделами <code>h2</code> . </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat хочет, чтобы страница на его сайте была посвящена тому, как стать ниндзя. Помогите ему исправить заголовки так, чтобы его разметка придавала семантический смысл содержанию и показывала правильные отношения между родительскими и дочерними элементами его разделов. Измените все теги <code>h5</code> на соответствующий уровень заголовка, чтобы указать, что они являются подразделами <code>h2</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен иметь шесть тегов <code>h3</code> .
|
||||
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
|
||||
- text: В вашем коде не должно быть тегов <code>h5</code> .
|
||||
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
|
||||
- text: Your code should have 6 <code>h3</code> tags.
|
||||
testString: assert($("h3").length === 6);
|
||||
- text: Your code should have 6 <code>h3</code> closing tags.
|
||||
testString: assert((code.match(/\/h3/g) || []).length===6);
|
||||
- text: Your code should not have any <code>h5</code> tags.
|
||||
testString: assert($("h5").length === 0);
|
||||
- text: Your code should not have any <code>h5</code> closing tags.
|
||||
testString: assert(/\/h5/.test(code)===false);
|
||||
|
||||
```
|
||||
|
||||
@ -51,14 +60,26 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h3>How to Hide in Plain Sight</h3>
|
||||
<h3>How to Climb a Wall</h3>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h3>How to Strengthen your Body</h3>
|
||||
<h3>How to Fight like a Ninja</h3>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h3>How to Breathe Properly</h3>
|
||||
<h3>How to Simplify your Life</h3>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Use tabindex to Add Keyboard Focus to an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cmzMDHW
|
||||
forumTopicId: 301027
|
||||
localeTitle: Использование tabindex для добавления фокуса клавиатуры к элементу
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>tabindex</code> HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена другим элементам, таким как <code>div</code> , <code>span</code> и <code>p</code> , поместив на них <code>tabindex="0"</code> . Вот пример: <code><div tabindex="0">I need keyboard focus!</div></code> <strong>Примечание.</strong> <br> Отрицательное значение <code>tabindex</code> (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется <code>div</code> для всплывающего окна) и выходит за рамки этих задач. </section>
|
||||
<section id='description'>
|
||||
<code>tabindex</code> HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена другим элементам, таким как <code>div</code> , <code>span</code> и <code>p</code> , поместив на них <code>tabindex="0"</code> . Вот пример: <code><div tabindex="0">I need keyboard focus!</div></code> <strong>Примечание.</strong> <br> Отрицательное значение <code>tabindex</code> (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется <code>div</code> для всплывающего окна) и выходит за рамки этих задач.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут <code>tabindex</code> к тегу <code>p</code> и установите его значение «0». Бонус - использование <code>tabindex</code> также позволяет псевдо-классу CSS <code>:focus</code> работать <code>p</code> тегом <code>p</code> . </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут <code>tabindex</code> к тегу <code>p</code> и установите его значение «0». Бонус - использование <code>tabindex</code> также позволяет псевдо-классу CSS <code>:focus</code> работать <code>p</code> тегом <code>p</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить атрибут <code>tabindex</code> к тегу <code>p</code> который содержит инструкции формы.
|
||||
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
|
||||
- text: Ваш код должен установить атрибут <code>tabindex</code> в теге <code>p</code> равным 0.
|
||||
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
|
||||
- text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.
|
||||
testString: assert($('p').attr('tabindex'));
|
||||
- text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.
|
||||
testString: assert($('p').attr('tabindex') == '0');
|
||||
|
||||
```
|
||||
|
||||
@ -84,14 +89,59 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
videoUrl: https://scrimba.com/c/cmzRRcb
|
||||
forumTopicId: 301028
|
||||
localeTitle: Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов
|
||||
---
|
||||
|
||||
@ -26,14 +27,14 @@ Camper Cat имеет поле поиска на странице Вдохнов
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен добавить к тегу <code>input</code> атрибут <code>tabindex</code>.'
|
||||
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
|
||||
- text: 'Ваш код должен добавить атрибут <code>tabindex</code> в тег submit <code>input</code>.'
|
||||
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
|
||||
- text: 'Ваш код должен установить атрибут <code>tabindex</code> в теге <code>input</code> для поиска <значение> к значению 1.'
|
||||
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
|
||||
- text: 'Ваш код должен установить атрибут <code>tabindex</code> в теге отправки <code>input</code> значение 2.'
|
||||
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
|
||||
- text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
|
||||
testString: assert($('#search').attr('tabindex'));
|
||||
- text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
|
||||
testString: assert($('#submit').attr('tabindex'));
|
||||
- text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
|
||||
testString: assert($('#search').attr('tabindex') == '1');
|
||||
- text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
|
||||
testString: assert($('#submit').attr('tabindex') == '2');
|
||||
|
||||
```
|
||||
|
||||
@ -81,14 +82,43 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input tabindex="1" type="search" name="search" id="search">
|
||||
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Wrap Content in the article Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
videoUrl: https://scrimba.com/c/cPp79S3
|
||||
forumTopicId: 301029
|
||||
localeTitle: Оборачивание контента в элемент article
|
||||
---
|
||||
|
||||
@ -16,17 +17,19 @@ localeTitle: Оборачивание контента в элемент article
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat использовал теги <code>article</code> для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег <code>div</code> чтобы вместо этого использовать тег <code>article</code>. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat использовал теги <code>article</code> для обертывания сообщений на своей странице блога, но он забыл использовать их в верхней части. Измените тег <code>div</code> чтобы вместо этого использовать тег <code>article</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен содержать три тега <code>article</code>.
|
||||
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code>.
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: Your code should have three <code>article</code> tags.
|
||||
testString: assert($('article').length == 3);
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: assert($('div').length == 0);
|
||||
|
||||
```
|
||||
|
||||
@ -64,14 +67,33 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,36 @@
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cVJVefw
|
||||
forumTopicId: 301030
|
||||
localeTitle: Обтекание переключателей в элементе Fieldset для лучшей доступности
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Следующая тема охватывает доступность переключателей. Каждый выбор дается <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> <form> <br> <fieldset> <br> <legend> Выберите один из этих трех элементов: </ legend> <br> <input id = "one" type = "radio" name = "items" value = "one"> <br> <label for = "one"> Выбор 1 </ label> <br> <br> <input id = "two" type = "radio" name = "items" value = "two"> <br> <label for = "two"> Выбор 2 </ label> <br> <br> <input id = "three" type = "radio" name = "items" value = "three"> <br> <label for = "three"> Choice Three </ label> <br> </ fieldset> <br> </ form> <br></blockquote></section>
|
||||
<section id='description'>
|
||||
Следующая тема охватывает доступность переключателей. Каждый выбор дается <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> <form> <br> <fieldset> <br> <legend> Выберите один из этих трех элементов: </ legend> <br> <input id = "one" type = "radio" name = "items" value = "one"> <br> <label for = "one"> Выбор 1 </ label> <br> <br> <input id = "two" type = "radio" name = "items" value = "two"> <br> <label for = "two"> Выбор 2 </ label> <br> <br> <input id = "three" type = "radio" name = "items" value = "three"> <br> <label for = "three"> Choice Three </ label> <br> </ fieldset> <br> </ form> <br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток <code>for</code> атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег <code>div</code> окружающий радиокнопки, на тег <code>fieldset</code> и измените тег <code>p</code> внутри него на <code>legend</code>. </section>
|
||||
<section id='instructions'>
|
||||
Camper Cat хочет получить информацию о уровне ниндзя своих пользователей, когда они регистрируются в его списке электронной почты. Он добавил набор переключателей и узнал из нашего последнего урока, чтобы использовать метки меток <code>for</code> атрибутов для каждого выбора. Вперед Camper Cat! Однако его код по-прежнему нуждается в некоторой помощи. Измените тег <code>div</code> окружающий радиокнопки, на тег <code>fieldset</code> и измените тег <code>p</code> внутри него на <code>legend</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен иметь тег <code>fieldset</code> вокруг установленного переключателя.
|
||||
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>fieldset</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
|
||||
- text: 'Ваш код должен иметь тег <code>legend</code> вокруг текста, спрашивающий, какой уровень ниндзя является пользователем.'
|
||||
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code>.
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 'В вашем коде больше нет тега <code>p</code> вокруг текста, спрашивающего, какой уровень ниндзя является пользователем.'
|
||||
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
|
||||
- text: Your code should have a <code>fieldset</code> tag around the radio button set.
|
||||
testString: assert($('fieldset').length == 1);
|
||||
- text: Make sure your <code>fieldset</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length);
|
||||
- text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.
|
||||
testString: assert($('legend').length == 1);
|
||||
- text: Your code should not have any <code>div</code> tags.
|
||||
testString: assert($('div').length == 0);
|
||||
- text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.
|
||||
testString: assert($('p').length == 4);
|
||||
|
||||
```
|
||||
|
||||
@ -86,14 +91,55 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</fieldset>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,30 @@
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: Add a box-shadow to a Card-like Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cvVZdUd
|
||||
forumTopicId: 301031
|
||||
localeTitle: Добавьте тень к карточному элементу
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
|
||||
<section id="description"> Свойство <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></section>
|
||||
|
||||
<section id='description'>
|
||||
Свойство <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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Элемент теперь имеет идентификатор <code>thumbnail</code>. С помощью этого селектора используйте приведенные выше примеры CSS, чтобы применить <code>box-shadow</code> к карточке. </section>
|
||||
<section id='instructions'>
|
||||
Элемент теперь имеет идентификатор <code>thumbnail</code>. С помощью этого селектора используйте приведенные выше примеры CSS, чтобы применить <code>box-shadow</code> к карточке.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
|
||||
|
||||
- text: Ваш код должен добавить свойство <code>box-shadow</code> для идентификатора <code>thumbnail</code>.
|
||||
|
||||
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
|
||||
- text: Вы должны использовать данный CSS для значения <code>box-shadow</code>.
|
||||
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
|
||||
- text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.
|
||||
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
- text: You should use the given CSS for the <code>box-shadow</code> value.
|
||||
testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -87,14 +86,56 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Adjust the background-color Property of Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cEDqwA6
|
||||
forumTopicId: 301032
|
||||
localeTitle: Отрегулируйте фоновый цвет Свойство текста
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить <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. </section>
|
||||
<section id='description'>
|
||||
Вместо исправления общего фона или цвета текста, для читаемости переднего плана вы можете добавить <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.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Чтобы текст сильнее выделялся, отрегулируйте <code>background-color</code> элемента <code>h4</code> на заданное значение <code>rgba()</code> . Также для <code>h4</code> удалите свойство <code>height</code> и добавьте <code>padding</code> 10px. </section>
|
||||
<section id='instructions'>
|
||||
Чтобы текст сильнее выделялся, отрегулируйте <code>background-color</code> элемента <code>h4</code> на заданное значение <code>rgba()</code> . Также для <code>h4</code> удалите свойство <code>height</code> и добавьте <code>padding</code> 10px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен добавить свойство <code>background-color</code> к элементу <code>h4</code> установленному в <code>rgba(45, 45, 45, 0.1)</code> .'
|
||||
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
|
||||
- text: Ваш код должен добавить свойство <code>padding</code> к элементу <code>h4</code> и установить его на 10 пикселей.
|
||||
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'
|
||||
- text: Свойство <code>height</code> в элементе <code>h4</code> должно быть удалено.
|
||||
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");'
|
||||
- text: Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.
|
||||
testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi));
|
||||
- text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.
|
||||
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
|
||||
- text: The <code>height</code> property on the <code>h4</code> element should be removed.
|
||||
testString: assert(!($('h4').css('height') == '25px'));
|
||||
|
||||
```
|
||||
|
||||
@ -80,14 +85,52 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Adjust the Color of Various Elements to Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cWmPpud
|
||||
forumTopicId: 301033
|
||||
localeTitle: Отрегулируйте цвет различных элементов для дополнительных цветов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице. </section>
|
||||
<section id='description'>
|
||||
Задача «Дополнительные цвета» показала, что противоположные цвета на цветовом круге могут сделать друг друга более сочными, когда они расположены бок о бок. Однако сильный визуальный контраст может быть слишком резким, если он чрезмерно используется на веб-сайте и иногда может сделать текст более трудным для чтения, если он размещен на фоне дополнительного цвета. На практике один из цветов обычно доминирует, а дополнительный используется для привлечения внимания к определенному контенту на странице.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Эта страница будет использовать сине-зеленый оттенок ( <code>#09A7A1</code> ) в качестве доминирующего цвета, а дополняющий его оранжевый ( <code>#FF790E</code> ) для визуального выделения кнопок sign-up. Измените <code>background-color</code> обоих элементов <code>header</code> и <code>footer</code> с черного на сине-зеленый. Затем также измените <code>color</code> текста <code>h2</code> на сине-зеленый. Наконец, измените <code>background-color</code> <code>button</code> на оранжевый цвет. </section>
|
||||
<section id='instructions'>
|
||||
Эта страница будет использовать сине-зеленый оттенок ( <code>#09A7A1</code> ) в качестве доминирующего цвета, а дополняющий его оранжевый ( <code>#FF790E</code> ) для визуального выделения кнопок sign-up. Измените <code>background-color</code> обоих элементов <code>header</code> и <code>footer</code> с черного на сине-зеленый. Затем также измените <code>color</code> текста <code>h2</code> на сине-зеленый. Наконец, измените <code>background-color</code> <code>button</code> на оранжевый цвет.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>header</code> должен иметь <code>background-color</code> # 09A7A1.'
|
||||
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||
- text: 'Элемент нижнего <code>footer</code> должен иметь <code>background-color</code> # 09A7A1.'
|
||||
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||
- text: 'Элемент <code>h2</code> должен иметь <code>color</code> # 09A7A1.'
|
||||
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
|
||||
- text: 'Элемент <code>button</code> должен иметь <code>background-color</code> # FF790E.'
|
||||
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
|
||||
- text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'
|
||||
testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
- text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'
|
||||
testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
- text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
|
||||
testString: assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
- text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.'
|
||||
testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
|
||||
```
|
||||
|
||||
@ -79,14 +84,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: #09A7A1;
|
||||
}
|
||||
button {
|
||||
background-color: #FF790E;
|
||||
}
|
||||
footer {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Adjust the Height of an Element Using the height Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cEDaDTN
|
||||
forumTopicId: 301034
|
||||
localeTitle: Отрегулируйте высоту элемента с помощью свойства height
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете указать высоту элемента, используя свойство <code>height</code> в CSS, подобное свойству <code>width</code> . Вот пример, который изменяет высоту изображения на 20 пикселей: <blockquote> img { <br> height: 20 px; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете указать высоту элемента, используя свойство <code>height</code> в CSS, подобное свойству <code>width</code> . Вот пример, который изменяет высоту изображения на 20 пикселей: <blockquote> img { <br> height: 20 px; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>height</code> в тег <code>h4</code> и установите его на 25 пикселей. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство <code>height</code> в тег <code>h4</code> и установите его на 25 пикселей.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен изменить свойство <code>h4</code> <code>height</code> на значение 25 пикселей.
|
||||
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");'
|
||||
- text: Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.
|
||||
testString: assert($('h4').css('height') === '25px' && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
|
||||
|
||||
```
|
||||
|
||||
@ -70,14 +75,47 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,30 @@
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Adjust the Hover State of an Anchor Tag
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cakRGcm
|
||||
forumTopicId: 301035
|
||||
localeTitle: Отрегулируйте состояние ссылок при наведении курсора
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса <code>:hover</code> . Вот CSS, чтобы изменить <code>color</code> привязанного тега на красный во время наведения на него: <blockquote> a: hover { <br> красный цвет; <br> } </blockquote></section>
|
||||
|
||||
<section id='description'>
|
||||
Эта проблема будет касаться использования псевдоклассов. Псевдокласс - это ключевое слово, которое можно добавить в селектор, чтобы выбрать конкретное состояние элемента. Например, стиль тега привязки может быть изменен для его состояния зависания с помощью селектора псевдо-класса <code>:hover</code> . Вот CSS, чтобы изменить <code>color</code> привязанного тега на красный во время наведения на него: <blockquote> a: hover { <br> красный цвет; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Редактор кода имеет правило CSS в стиле все <code>a</code> теги черный. Добавьте правила, так чтобы когда пользователь наводит на <code>a</code> тег, то <code>color</code> становился синим. </section>
|
||||
<section id='instructions'>
|
||||
Редактор кода имеет правило CSS в стиле все <code>a</code> теги черный. Добавьте правила, так чтобы когда пользователь наводит на <code>a</code> тег, то <code>color</code> становился синим.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>color</code> метки привязки должен оставаться черным, добавьте только правила CSS для состояния <code>:hover</code>.'
|
||||
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
|
||||
- text: Якорная метка должна иметь <code>color</code> синего цвета при наведении.
|
||||
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
|
||||
- text: The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.
|
||||
testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
- text: The anchor tag should have a <code>color</code> of blue on hover.
|
||||
testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -48,14 +51,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(0,0,255,1);
|
||||
}
|
||||
</style>
|
||||
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,38 @@
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Adjust the Hue of a Color
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cPp38TZ
|
||||
forumTopicId: 301036
|
||||
localeTitle: Отрегулируйте оттенок цвета
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. 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></section>
|
||||
<section id='description'>
|
||||
Цвета имеют несколько характеристик, включая оттенок, насыщенность и легкость. 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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>background-color</code> каждого элемента <code>div</code> на основе имен классов ( <code>green</code>, <code>cyan</code> или <code>blue</code> ) с помощью <code>hsl()</code>. Все три должны иметь полную насыщенность и нормальную легкость. </section>
|
||||
<section id='instructions'>
|
||||
Измените <code>background-color</code> каждого элемента <code>div</code> на основе имен классов ( <code>green</code>, <code>cyan</code> или <code>blue</code> ) с помощью <code>hsl()</code>. Все три должны иметь полную насыщенность и нормальную легкость.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать <code>hsl()</code> чтобы объявить зеленый цвет.
|
||||
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");'
|
||||
- text: Ваш код должен использовать <code>hsl()</code> для объявления цвета морской волны.
|
||||
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");'
|
||||
- text: Ваш код должен использовать <code>hsl()</code> для объявления синего цвета.
|
||||
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");'
|
||||
- text: '<code>div</code> элемент с классом <code>green</code> должен иметь <code>background-color</code> зеленый.'
|
||||
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");'
|
||||
- text: '<code>div</code> элемент с классом <code>green</code> должен иметь <code>background-color</code> морской волны.'
|
||||
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||
- text: '<code>div</code> элемент с классом <code>green</code> должен иметь <code>background-color</code> синий.'
|
||||
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||
- text: Your code should use the <code>hsl()</code> property to declare the color green.
|
||||
testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: Your code should use the <code>hsl()</code> property to declare the color cyan.
|
||||
testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: Your code should use the <code>hsl()</code> property to declare the color blue.
|
||||
testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.
|
||||
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
```
|
||||
|
||||
@ -72,14 +77,38 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: hsl(120, 100%, 50%);
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: hsl(180, 100%, 50%);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c3bRPTz
|
||||
forumTopicId: 301037
|
||||
localeTitle: Отрегулируйте размер заголовка в сравнении с тегом абзаца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Размер шрифта тегов заголовков (от <code>h1</code> до <code>h6</code> ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство <code>font-size</code>. </section>
|
||||
<section id='description'>
|
||||
Размер шрифта тегов заголовков (от <code>h1</code> до <code>h6</code> ) обычно должен быть больше размера шрифта тегов абзаца. Это облегчает пользователю визуальное понимание макета и уровня важности всего содержимого на странице. Для изменения размера текста в элементе используется свойство <code>font-size</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Чтобы заголовок был значительно больше абзаца, измените <code>font-size</code> тега <code>h4</code> на 27 пикселей. </section>
|
||||
<section id='instructions'>
|
||||
Чтобы заголовок был значительно больше абзаца, измените <code>font-size</code> тега <code>h4</code> на 27 пикселей.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить свойство <code>font-size</code> к элементу <code>h4</code> установленному в 27 пикселей.
|
||||
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");'
|
||||
- text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.
|
||||
testString: assert($('h4').css('font-size') == '27px');
|
||||
|
||||
```
|
||||
|
||||
@ -76,14 +81,53 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Adjust the Tone of a Color
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cEDJvT7
|
||||
forumTopicId: 301038
|
||||
localeTitle: Отрегулируйте тон цвета
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Опция <code>hsl()</code> в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что 's' и 'l' в <code>hsl()</code> означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты. </section>
|
||||
<section id='description'>
|
||||
Опция <code>hsl()</code> в CSS также упрощает настройку тона цвета. Смешение белого цвета с чистым оттенком создает оттенок этого цвета, а добавление черного оттенка сделает оттенок. В качестве альтернативы, тон создается путем добавления серого или как под тонировку, так и как затенение. Напомним, что 's' и 'l' в <code>hsl()</code> означают насыщенность и легкость соответственно. Процент насыщения изменяет количество серого, а процент света определяет, сколько белого или черного цвета. Это полезно, когда у вас есть базовый оттенок, который вам нравится, но ему нужны разные варианты.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Навигационная панель на этом сайте в настоящее время наследует свой <code>background-color</code> от элемента <code>header</code>. Начиная с этого цвета в качестве базы, добавьте <code>background-color</code> к элементу <code>nav</code> так чтобы он использовал тот же голубой оттенок, но имел 80% насыщенности и 25% значения яркости, чтобы изменить его тон и оттенок. </section>
|
||||
<section id='instructions'>
|
||||
Навигационная панель на этом сайте в настоящее время наследует свой <code>background-color</code> от элемента <code>header</code>. Начиная с этого цвета в качестве базы, добавьте <code>background-color</code> к элементу <code>nav</code> так чтобы он использовал тот же голубой оттенок, но имел 80% насыщенности и 25% значения яркости, чтобы изменить его тон и оттенок.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>nav</code> должен иметь <code>background-color</code> настроенного голубого тона с использованием <code>hsl()</code>.
|
||||
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");'
|
||||
- text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.
|
||||
testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -76,14 +81,52 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: hsl(180, 80%, 25%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Adjust the Width of an Element Using the width Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cvVLPtN
|
||||
forumTopicId: 301039
|
||||
localeTitle: Настройка ширины элемента с помощью свойства width
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете указать ширину элемента, используя свойство <code>width</code> в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям: <blockquote> img { <br> width: 220px; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете указать ширину элемента, используя свойство <code>width</code> в CSS. Значения могут быть указаны в единицах относительной длины (например, em), единицах абсолютной длины (например, px) или в процентах от содержащего его родительского элемента. Вот пример, который задаёт ширину изображения равной 220 пикселям: <blockquote> img { <br> width: 220px; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>width</code> ко всей карточке и установите абсолютное значение 245px. Используйте класс <code>fullCard</code> чтобы выбрать элемент. </section>
|
||||
<section id="instructions">
|
||||
Добавьте свойство <code>width</code> ко всей карточке и установите абсолютное значение 245px. Используйте класс <code>fullCard</code> чтобы выбрать элемент.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен изменить свойство <code>width</code> карточки на 245 пикселей, используя селектор класса <code>fullCard</code> .'
|
||||
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");'
|
||||
- text: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.
|
||||
testString: assert($('.fullCard').css('width') === '245px' && /\.fullCard{\S*width:245px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
|
||||
|
||||
```
|
||||
|
||||
@ -69,14 +74,46 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animate Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cZ89WA4
|
||||
forumTopicId: 301040
|
||||
localeTitle: Анимационные элементы по переменным ценам
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства <code>animation-iteration-count</code> и установки правил <code>@keyframes</code> . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле <code>@keyframes</code> , что создает анимацию мерцания. Вы можете изменить правило <code>@keyframes</code> для одного из элементов, чтобы звезды мерцали с разной скоростью. </section>
|
||||
<section id='description'>
|
||||
Существует множество способов изменить скорость анимации похожих анимированных элементов. До сих пор это было достигнуто путем применения свойства <code>animation-iteration-count</code> и установки правил <code>@keyframes</code> . Чтобы проиллюстрировать, анимация справа состоит из двух «звезд», каждая из которых уменьшает размер и непрозрачность на 20% в правиле <code>@keyframes</code> , что создает анимацию мерцания. Вы можете изменить правило <code>@keyframes</code> для одного из элементов, чтобы звезды мерцали с разной скоростью.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените коэффициент анимации для элемента с именем класса <code>star-1</code> , изменив его правило <code>@keyframes</code> на 50%. </section>
|
||||
<section id='instructions'>
|
||||
Измените коэффициент анимации для элемента с именем класса <code>star-1</code> , изменив его правило <code>@keyframes</code> на 50%.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Правило <code>@keyframes</code> для класса <code>star-1</code> должно быть 50%.
|
||||
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'
|
||||
- text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.
|
||||
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
|
||||
```
|
||||
|
||||
@ -87,14 +92,63 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animate Elements Continually Using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Анимация элементов, постоянно использующих бесконечный подсчет анимации'
|
||||
videoUrl: https://scrimba.com/c/cVJDVfq
|
||||
forumTopicId: 301041
|
||||
localeTitle: Анимация элементов, постоянно использующих бесконечный подсчет анимации
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Предыдущие проблемы касались использования некоторых свойств анимации и правила <code>@keyframes</code> . Другим свойством анимации является <code>animation-iteration-count</code> , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: <code>animation-iteration-count: 3;</code> В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное. </section>
|
||||
<section id='description'>
|
||||
Предыдущие проблемы касались использования некоторых свойств анимации и правила <code>@keyframes</code> . Другим свойством анимации является <code>animation-iteration-count</code> , который позволяет вам контролировать, сколько раз вы хотели бы прокручивать анимацию. Вот пример: <code>animation-iteration-count: 3;</code> В этом случае анимация остановится после запуска 3 раза, но можно сделать анимацию непрерывной, установив это значение в бесконечное.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Чтобы держать мяч подпрыгивая справа в непрерывном цикле, измените свойство <code>animation-iteration-count</code> на бесконечность. </section>
|
||||
<section id='instructions'>
|
||||
Чтобы держать мяч подпрыгивая справа в непрерывном цикле, измените свойство <code>animation-iteration-count</code> на бесконечность.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Свойство <code>animation-iteration-count</code> должно иметь значение бесконечное.
|
||||
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");'
|
||||
- text: The <code>animation-iteration-count</code> property should have a value of infinite.
|
||||
testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
```
|
||||
|
||||
@ -68,14 +73,44 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animate Multiple Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cnpWZc9
|
||||
forumTopicId: 301042
|
||||
localeTitle: Анимация нескольких элементов при переменных значениях
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила <code>@keyframes</code> . Вы можете достичь той же цели, манипулируя <code>animation-duration</code> нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства <code>animation-duration</code> для разных значений для каждого элемента. </section>
|
||||
<section id='description'>
|
||||
В предыдущей задаче вы изменили скорость анимации для двух одинаково анимированных элементов, изменив их правила <code>@keyframes</code> . Вы можете достичь той же цели, манипулируя <code>animation-duration</code> нескольких элементов. В анимации, запущенной в редакторе кода, в небе есть три «звезды», которые мерцают с одинаковой скоростью в непрерывном цикле. Чтобы заставить их мерцать с разной скоростью, вы можете установить для свойства <code>animation-duration</code> для разных значений для каждого элемента.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите <code>animation-duration</code> элементов с классами <code>star-1</code> , <code>star-2</code> и <code>star-3</code> на 1s, 0.9s и 1.1s соответственно. </section>
|
||||
<section id='instructions'>
|
||||
Установите <code>animation-duration</code> элементов с классами <code>star-1</code> , <code>star-2</code> и <code>star-3</code> на 1s, 0.9s и 1.1s соответственно.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Свойство <code>animation-duration</code> для звезды с классом <code>star-1</code> должно оставаться на уровне 1 с.
|
||||
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");'
|
||||
- text: 'Свойство <code>animation-duration</code> для звезды с классом <code>star-2</code> должно быть 0,9 с.'
|
||||
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");'
|
||||
- text: 'Свойство <code>animation-duration</code> для звезды с классом <code>star-3</code> должно быть 1,1 с.'
|
||||
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");'
|
||||
- text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.
|
||||
testString: assert($('.star-1').css('animation-duration') == '1s');
|
||||
- text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.
|
||||
testString: assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
- text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.
|
||||
testString: assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
|
||||
```
|
||||
|
||||
@ -92,14 +97,64 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 0.9s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1.1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Center an Element Horizontally Using the margin Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cyLJqU4
|
||||
forumTopicId: 301043
|
||||
localeTitle: Центрировать элемент горизонтально Использование поля Свойства
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить <code>margin</code> в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство <code>display</code> для блокировки. </section>
|
||||
<section id='description'>
|
||||
Другой метод позиционирования - центрировать элемент блока горизонтально. Один из способов сделать это - установить <code>margin</code> в значение auto. Этот метод работает и для изображений. Изображения являются встроенными элементами по умолчанию, но могут быть изменены на блокирующие элементы, когда вы устанавливаете свойство <code>display</code> для блокировки.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> <code>div</code> на странице, добавив свойство <code>margin</code> со значением auto. </section>
|
||||
<section id='instructions'>
|
||||
<code>div</code> на странице, добавив свойство <code>margin</code> со значением auto.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: У <code>div</code> должен быть установлен <code>margin</code> в auto.
|
||||
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");'
|
||||
- text: The <code>div</code> should have a <code>margin</code> set to auto.
|
||||
testString: assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
```
|
||||
|
||||
@ -44,14 +49,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: Change an Element's Relative Position
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/czVmMtZ
|
||||
forumTopicId: 301044
|
||||
localeTitle: Изменение относительного положения элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> 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 должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту. </section>
|
||||
<section id='description'>
|
||||
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 должна быть организована и иметь смысл при чтении сверху вниз. Это то, как пользователи с нарушениями зрения (которые полагаются на вспомогательные устройства, такие как устройства чтения с экрана) получают доступ к вашему контенту.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>position</code> <code>h2</code> на <code>relative</code> и используйте смещение CSS, чтобы переместить его на 15 пикселей от <code>top</code> где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p. </section>
|
||||
<section id='instructions'>
|
||||
Измените <code>position</code> <code>h2</code> на <code>relative</code> и используйте смещение CSS, чтобы переместить его на 15 пикселей от <code>top</code> где он находится в нормальном потоке. Обратите внимание, что нет никакого влияния на позиции окружающих элементов h1 и p.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>h2</code> должен иметь свойство <code>position</code> заданное <code>relative</code> .
|
||||
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
|
||||
- text: Ваш код должен использовать смещение CSS для относительно позиционирования <code>h2</code> 15px от <code>top</code> где он обычно сидит.
|
||||
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
|
||||
- text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.
|
||||
testString: assert($('h2').css('position') == 'relative');
|
||||
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.
|
||||
testString: assert($('h2').css('top') == '15px');
|
||||
|
||||
```
|
||||
|
||||
@ -48,14 +53,23 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: Change Animation Timing with Keywords
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cJKvwCM
|
||||
forumTopicId: 301045
|
||||
localeTitle: Изменение времени анимации с помощью ключевых слов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В анимации 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> , что накладывает постоянную скорость анимации. </section>
|
||||
<section id='description'>
|
||||
В анимации 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> , что накладывает постоянную скорость анимации.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
<section id='instructions'>
|
||||
For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <code>animation-timing-function</code> property to each, and set <code>#ball1</code> to <code>linear</code>, and <code>#ball2</code> to <code>ease-out</code>. Notice the difference between how the elements move during the animation but end together, since they share the same <code>animation-duration</code> of 2 seconds.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
|
||||
- text: ''
|
||||
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
|
||||
testString: assert($('#ball1').css('animation-timing-function') == 'linear');
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
|
||||
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
|
||||
|
||||
```
|
||||
|
||||
@ -58,14 +63,14 @@ tests:
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -76,14 +81,48 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: Change the Position of Overlapping Elements with the z-index Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cM94aHk
|
||||
forumTopicId: 301046
|
||||
localeTitle: Изменение позиции перекрывающихся элементов с помощью свойства z-index
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство <code>z-index</code> может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства <code>z-index</code> элемента перемещают его выше в стеке, чем те, у которых более низкие значения. </section>
|
||||
<section id='description'>
|
||||
Когда элементы расположены для перекрытия, элемент, следующий позже в разметке HTML, по умолчанию будет отображаться поверх других элементов. Однако свойство <code>z-index</code> может указывать порядок расположения элементов друг над другом. Он должен быть целым числом (то есть целым числом, а не десятичным), а более высокие значения для свойства <code>z-index</code> элемента перемещают его выше в стеке, чем те, у которых более низкие значения.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>z-index</code> к элементу с именем класса <code>first</code> (красный прямоугольник) и установите для него значение 2, чтобы он покрывал другой элемент (синий прямоугольник). </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство <code>z-index</code> к элементу с именем класса <code>first</code> (красный прямоугольник) и установите для него значение 2, чтобы он покрывал другой элемент (синий прямоугольник).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент с классом <code>first</code> должен иметь значение <code>z-index</code> 2.
|
||||
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");'
|
||||
- text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
|
||||
testString: assert($('.first').css('z-index') == '2');
|
||||
|
||||
```
|
||||
|
||||
@ -58,14 +63,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: Create a Gradual CSS Linear Gradient
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cg4dpt9
|
||||
forumTopicId: 301047
|
||||
localeTitle: Создать линейный градиент линейного CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Применение цвета на элементах 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> </section>
|
||||
<section id='description'>
|
||||
Применение цвета на элементах 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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>linear-gradient()</code> для <code>background</code> элемента <code>div</code> и установите его в направлении 35 градусов, чтобы изменить цвет с <code>#CCFFFF</code> на <code>#FFCCCC</code> . <strong>Заметка</strong> <br> Хотя есть другие способы указать значение цвета, например <code>rgb()</code> или <code>hsl()</code> , используйте шестнадцатеричные значения для этой задачи. </section>
|
||||
<section id='instructions'>
|
||||
Используйте <code>linear-gradient()</code> для <code>background</code> элемента <code>div</code> и установите его в направлении 35 градусов, чтобы изменить цвет с <code>#CCFFFF</code> на <code>#FFCCCC</code> . <strong>Заметка</strong> <br> Хотя есть другие способы указать значение цвета, например <code>rgb()</code> или <code>hsl()</code> , используйте шестнадцатеричные значения для этой задачи.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>div</code> должен иметь <code>background</code> с <code>linear-gradient</code> с заданным направлением и цветами.
|
||||
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
|
||||
- text: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.
|
||||
testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -31,8 +36,7 @@ tests:
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
@ -48,14 +52,22 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: Create a Graphic Using CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cEDWPs6
|
||||
forumTopicId: 301048
|
||||
localeTitle: Создать графику с помощью CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством <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> необязательны. </section>
|
||||
<section id='description'>
|
||||
Управляя различными селекторами и свойствами, вы можете создавать интересные фигуры. Один из самых простых способов - полумесяц. Для этой задачи вам нужно работать с свойством <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> необязательны.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Манипулируйте квадратный элемент в редакторе, чтобы создать форму луны. Сначала измените <code>background-color</code> на прозрачный, затем установите для свойства <code>border-radius</code> значение 50%, чтобы сделать круглую форму. Наконец, измените свойство <code>box-shadow</code> чтобы установить <code>offset-x</code> в 25px, <code>offset-y</code> до 10px, <code>blur-radius</code> до 0, <code>spread-radius</code> до 0 и цвет в синий. </section>
|
||||
<section id='instructions'>
|
||||
Манипулируйте квадратный элемент в редакторе, чтобы создать форму луны. Сначала измените <code>background-color</code> на прозрачный, затем установите для свойства <code>border-radius</code> значение 50%, чтобы сделать круглую форму. Наконец, измените свойство <code>box-shadow</code> чтобы установить <code>offset-x</code> в 25px, <code>offset-y</code> до 10px, <code>blur-radius</code> до 0, <code>spread-radius</code> до 0 и цвет в синий.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Значение свойства <code>background-color</code> должно быть установлено на <code>transparent</code> .
|
||||
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
|
||||
- text: Значение свойства <code>border-radius</code> должно быть установлено на <code>50%</code> .
|
||||
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
|
||||
- text: 'Значение свойства <code>box-shadow</code> должно быть установлено равным 25px для <code>offset-x</code> , 10px для <code>offset-y</code> , 0 для <code>blur-radius</code> , 0 для <code>spread-radius</code> и, наконец, синего цвета.'
|
||||
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
|
||||
- text: The value of the <code>background-color</code> property should be set to <code>transparent</code>.
|
||||
testString: assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
- text: The value of the <code>border-radius</code> property should be set to <code>50%</code>.
|
||||
testString: assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
- text: The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.
|
||||
testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -35,8 +40,7 @@ tests:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center
|
||||
{
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
@ -48,7 +52,7 @@ tests:
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
@ -57,14 +61,28 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-shadow: 25px 10px 0 0 blue;
|
||||
}
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Create a Horizontal Line Using the hr Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c3bR8t7
|
||||
forumTopicId: 301049
|
||||
localeTitle: Создание горизонтальной линии с использованием элемента hr
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете использовать тег <code>hr</code> чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента. </section>
|
||||
<section id='description'>
|
||||
Вы можете использовать тег <code>hr</code> чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>hr</code> тег под <code>h4</code> который содержит название карты. <strong>Заметка</strong> <br> В HTML <code>hr</code> является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте <code>hr</code> тег под <code>h4</code> который содержит название карты. <strong>Заметка</strong> <br> В HTML <code>hr</code> является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить метку <code>hr</code> к разметке.
|
||||
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
|
||||
- text: Тег <code>hr</code> должен находиться между заголовком и абзацем.
|
||||
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'
|
||||
- text: Your code should add an <code>hr</code> tag to the markup.
|
||||
testString: assert($('hr').length == 1);
|
||||
- text: The <code>hr</code> tag should come between the title and the paragraph.
|
||||
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -76,14 +81,51 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: Create a More Complex Shape Using CSS and HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cPpz4fr
|
||||
forumTopicId: 301050
|
||||
localeTitle: Создание более сложной формы с использованием CSS и HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый 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> частью элемента. </section>
|
||||
<section id='description'>
|
||||
Одна из самых популярных фигур в мире - это форма сердца, и в этой задаче вы создадите один, используя чистый 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> частью элемента.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Преобразуйте элемент на экране в сердце. В <code>heart::after</code> селектора измените <code>background-color</code> на розовый и <code>border-radius</code> до 50%. Затем задайте элемент с <code>heart</code> класса (просто <code>heart</code> ) и заполните свойство <code>transform</code> . Используйте функцию <code>rotate()</code> с -45 градусов. ( <code>rotate()</code> работает так же, как <code>skewX()</code> и <code>skewY()</code> do). Наконец, в <code>heart::before</code> селектором установите его свойство <code>content</code> в пустую строку. </section>
|
||||
<section id='instructions'>
|
||||
Преобразуйте элемент на экране в сердце. В <code>heart::after</code> селектора измените <code>background-color</code> на розовый и <code>border-radius</code> до 50%. Затем задайте элемент с <code>heart</code> класса (просто <code>heart</code> ) и заполните свойство <code>transform</code> . Используйте функцию <code>rotate()</code> с -45 градусов. ( <code>rotate()</code> работает так же, как <code>skewX()</code> и <code>skewY()</code> do). Наконец, в <code>heart::before</code> селектором установите его свойство <code>content</code> в пустую строку.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Свойство <code>background-color</code> для <code>heart::after</code> селектора должно быть розовым.'
|
||||
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
|
||||
- text: Свойство <code>transform</code> для класса <code>heart</code> должно использовать функцию <code>rotate()</code> установленную на -45 градусов.
|
||||
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
|
||||
- text: '<code>content</code> <code>heart::before</code> селектором должна быть пустая строка.'
|
||||
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
|
||||
- text: The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.
|
||||
testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
|
||||
- text: The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.
|
||||
testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
- text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
|
||||
testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
- text: The <code>content</code> of the <code>heart::before</code> selector should be an empty string.
|
||||
testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -37,7 +42,7 @@ tests:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
@ -48,8 +53,8 @@ tests:
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
@ -58,8 +63,8 @@ tests:
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
@ -68,22 +73,55 @@ tests:
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class = "heart"></div>
|
||||
<div class="heart"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.heart::after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: Create Movement Using CSS Animation
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c7amZfW
|
||||
forumTopicId: 301051
|
||||
localeTitle: Создание движения с использованием анимации CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда элементы имеют заданную <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></section>
|
||||
<section id='description'>
|
||||
Когда элементы имеют заданную <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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте горизонтальное движение в анимацию <code>div</code> . Используя свойство <code>left</code> offset, добавьте правило <code>@keyframes</code> так что радуга начинается с 0 пикселей на <code>0%</code> , перемещается до 25 пикселей с <code>50%</code> и заканчивается на -25 пикселей при <code>100%</code> . Не заменяйте <code>top</code> свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте горизонтальное движение в анимацию <code>div</code> . Используя свойство <code>left</code> offset, добавьте правило <code>@keyframes</code> так что радуга начинается с 0 пикселей на <code>0%</code> , перемещается до 25 пикселей с <code>50%</code> и заканчивается на -25 пикселей при <code>100%</code> . Не заменяйте <code>top</code> свойство в редакторе - анимация должна иметь как вертикальное, так и горизонтальное движение.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Правило <code>@keyframes</code> для <code>0%</code> должно использовать <code>left</code> смещение 0px.
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
|
||||
- text: Правило <code>@keyframes</code> для <code>50%</code> должно использовать <code>left</code> смещение 25px.
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
|
||||
- text: Правило <code>@keyframes</code> для <code>100%</code> должно использовать <code>left</code> смещение -25px.
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
|
||||
- text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.
|
||||
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
|
||||
- text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.
|
||||
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
|
||||
- text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -44,12 +49,12 @@ tests:
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
@ -65,7 +70,7 @@ tests:
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
@ -74,14 +79,46 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: Create Texture by Adding a Subtle Pattern as a Background Image
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cQdwJC8
|
||||
forumTopicId: 301052
|
||||
localeTitle: Создание текстуры путем добавления тонкого шаблона в качестве фонового изображения
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство <code>background</code> поддерживает функцию <code>url()</code> , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок. </section>
|
||||
<section id='description'>
|
||||
Один из способов добавить текстуру и интерес к фону и подчеркнуть ее - добавить тонкий узор. Ключом является баланс, так как вы не хотите, чтобы фон выделялся слишком много, и убирайте с переднего плана. Свойство <code>background</code> поддерживает функцию <code>url()</code> , чтобы ссылаться на изображение выбранной текстуры или рисунка. Адрес ссылки заключен в кавычки внутри круглых скобок.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Использование URL в <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code> , установить <code>background</code> всей страницы с <code>body</code> селектором. </section>
|
||||
<section id='instructions'>
|
||||
Использование URL в <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code> , установить <code>background</code> всей страницы с <code>body</code> селектором.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент вашего <code>body</code> должен иметь свойство <code>background</code> установленное в <code>url()</code> с указанной ссылкой.
|
||||
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");'
|
||||
- text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
|
||||
testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -40,14 +45,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Create Visual Balance Using the text-align Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c3b4EAp
|
||||
forumTopicId: 301053
|
||||
localeTitle: Создание визуального баланса Использование свойства text-align
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. 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> (по умолчанию) выравнивает текст по левому краю. </section>
|
||||
<section id='description'>
|
||||
Этот раздел учебной программы посвящен прикладному визуальному дизайну. Первая группа задач основывается на данном макете карты, чтобы показать ряд основных принципов. Текст часто является большой частью веб-контента. 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> (по умолчанию) выравнивает текст по левому краю.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Совместите текст тега <code>h4</code> , в котором говорится «Google», в центр. Затем оправдайте тег абзаца, который содержит информацию о том, как Google был основан. </section>
|
||||
<section id='instructions'>
|
||||
Совместите текст тега <code>h4</code> , в котором говорится «Google», в центр. Затем оправдайте тег абзаца, который содержит информацию о том, как Google был основан.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен использовать свойство text-align для тега <code>h4</code> чтобы установить его в центр.
|
||||
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
|
||||
- text: Ваш код должен использовать свойство text-align на тэге <code>p</code> чтобы установить его для оправдания.
|
||||
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'
|
||||
- text: Your code should use the text-align property on the <code>h4</code> tag to set it to center.
|
||||
testString: assert($('h4').css('text-align') == 'center');
|
||||
- text: Your code should use the text-align property on the <code>p</code> tag to set it to justify.
|
||||
testString: assert($('p').css('text-align') == 'justify');
|
||||
|
||||
```
|
||||
|
||||
@ -70,14 +75,45 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: Create Visual Direction by Fading an Element from Left to Right
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Создать визуальное направление, затухая элемент слева направо'
|
||||
videoUrl: https://scrimba.com/c/cGJqqAE
|
||||
forumTopicId: 301054
|
||||
localeTitle: Создать визуальное направление, затухая элемент слева направо
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Для этой задачи вы измените <code>opacity</code> анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу <code>@keyframes</code> . </section>
|
||||
<section id='description'>
|
||||
Для этой задачи вы измените <code>opacity</code> анимированного элемента, чтобы он постепенно исчезал, когда он достиг правой стороны экрана. В отображаемой анимации круглый элемент с фоном градиента перемещается вправо на 50% метки анимации по правилу <code>@keyframes</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте элемент с идентификатором <code>ball</code> и добавьте свойство <code>opacity</code> равное 0.1, равное <code>50%</code> , поэтому элемент исчезает, когда он перемещается вправо. </section>
|
||||
<section id='instructions'>
|
||||
Задайте элемент с идентификатором <code>ball</code> и добавьте свойство <code>opacity</code> равное 0.1, равное <code>50%</code> , поэтому элемент исчезает, когда он перемещается вправо.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Правило <code>keyframes</code> для fade должно установить свойство <code>opacity</code> 0,1 на 50%.'
|
||||
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");'
|
||||
- text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
|
||||
testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -63,14 +68,37 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Decrease the Opacity of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c7aKqu4
|
||||
forumTopicId: 301055
|
||||
localeTitle: Уменьшить непрозрачность элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>opacity</code> в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента. <blockquote> Значение 1 непрозрачно, что совсем не прозрачно. <br> Значение 0,5 равно половине видимости. <br> Значение 0 полностью прозрачно. </blockquote> Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста. </section>
|
||||
<section id='description'>
|
||||
Свойство <code>opacity</code> в CSS используется для настройки непрозрачности или, наоборот, прозрачности для элемента. <blockquote> Значение 1 непрозрачно, что совсем не прозрачно. <br> Значение 0,5 равно половине видимости. <br> Значение 0 полностью прозрачно. </blockquote> Приведенное значение будет применяться ко всему элементу, будь то изображение с некоторой прозрачностью или цвета переднего плана и фона для блока текста.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите <code>opacity</code> тегов привязки на 0.7, используя класс <code>links</code> чтобы выбрать их. </section>
|
||||
<section id='instructions'>
|
||||
Установите <code>opacity</code> тегов привязки на 0.7, используя класс <code>links</code> чтобы выбрать их.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен установить свойство <code>opacity</code> 0,7 в тегах привязки, выбрав класс <code>links</code> .'
|
||||
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
|
||||
- text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.
|
||||
testString: assert(/\.links\s*\{[^}]+opacity\s*:\s*0.7;/.test(code));
|
||||
|
||||
```
|
||||
|
||||
@ -80,14 +85,57 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: Learn about Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MD3Tr
|
||||
forumTopicId: 301056
|
||||
localeTitle: Узнайте о дополнительных цветах
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами: <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> Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности. </section>
|
||||
<section id='description'>
|
||||
Теория цвета и его влияние на дизайн являются глубокой темой, и только основные вопросы рассматриваются в следующих задачах. На веб-сайте цвет может привлекать внимание к контенту, вызывать эмоции или создавать визуальную гармонию. Использование различных комбинаций цветов может действительно изменить внешний вид веб-сайта, и многие мысли могут пойти на подбор цветовой палитры, которая работает с вашим контентом. Цветовое колесо - полезный инструмент для визуализации того, как соотносятся цвета друг с другом - это круг, где похожие оттенки соседствуют, а разные оттенки находятся дальше друг от друга. Когда два цвета противоположны друг другу на колесе, их называют дополнительными цветами. У них есть характеристика, что если они объединены, они «отменяют» друг друга и создают серый цвет. Однако при размещении бок о бок эти цвета выглядят более яркими и создают сильный визуальный контраст. Некоторые примеры дополнительных цветов с шестнадцатеричными кодами: <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> Для всех цветовых задач: использование цвета может стать мощным способом добавить визуальный интерес к странице. Тем не менее, только цвет не должен использоваться как единственный способ передачи важной информации, поскольку пользователи с нарушениями зрения могут не понимать этот контент. Эта проблема будет рассмотрена более подробно в задачах прикладной доступности.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените свойство <code>background-color</code> <code>blue</code> и <code>yellow</code> классов на соответствующие цвета. Обратите внимание, как цвета выглядят по-разному рядом друг с другом, чем они сравниваются с белым фоном. </section>
|
||||
<section id='instructions'>
|
||||
Измените свойство <code>background-color</code> <code>blue</code> и <code>yellow</code> классов на соответствующие цвета. Обратите внимание, как цвета выглядят по-разному рядом друг с другом, чем они сравниваются с белым фоном.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>div</code> с <code>blue</code> должен иметь синий <code>background-color</code> .
|
||||
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||
- text: Элемент <code>div</code> с <code>yellow</code> классом должен иметь желтый <code>background-color</code> .
|
||||
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");'
|
||||
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
- text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.
|
||||
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
|
||||
```
|
||||
|
||||
@ -55,14 +60,30 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,34 @@
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: Learn about Tertiary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c3bRDAb
|
||||
forumTopicId: 301057
|
||||
localeTitle: Узнайте о третичных цветах
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель 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></section>
|
||||
<section id='description'>
|
||||
Компьютерные мониторы и экраны устройств создают разные цвета, комбинируя количество красного, зеленого и синего света. Это известно как цветовая модель 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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените свойство <code>background-color</code> классов <code>orange</code> , <code>cyan</code> и <code>raspberry</code> цветов на соответствующие цвета. Обязательно используйте шестнадцатеричные коды как оранжевые, а малины не являются признанными в браузере именами цветов. </section>
|
||||
<section id='instructions'>
|
||||
Измените свойство <code>background-color</code> классов <code>orange</code> , <code>cyan</code> и <code>raspberry</code> цветов на соответствующие цвета. Обязательно используйте шестнадцатеричные коды как оранжевые, а малины не являются признанными в браузере именами цветов.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>div</code> с <code>orange</code> класса должен иметь оранжевый <code>background-color</code> .
|
||||
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");'
|
||||
- text: Элемент <code>div</code> с классом <code>cyan</code> должен иметь <code>background-color</code> cyan.
|
||||
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||
- text: Элемент <code>div</code> с классом <code>raspberry</code> должен иметь <code>background-color</code> малины.
|
||||
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");'
|
||||
- text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.
|
||||
testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
- text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.
|
||||
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
- text: All <code>background-color</code> values for the color classes should be hex codes and not color names.
|
||||
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
|
||||
```
|
||||
|
||||
@ -66,14 +73,38 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #FF7F00;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #FF007F;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: Learn How Bezier Curves Work
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Узнайте, как работают кривые Безье'
|
||||
videoUrl: https://scrimba.com/c/c9bDrs8
|
||||
forumTopicId: 301058
|
||||
localeTitle: Узнайте, как работают кривые Безье
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача <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> ключевого слова. Другими словами, он изменяется с постоянной скоростью. </section>
|
||||
<section id='description'>
|
||||
Последняя задача <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> ключевого слова. Другими словами, он изменяется с постоянной скоростью.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Для элемента с идентификатором <code>ball1</code> измените значение свойства <code>animation-timing-function</code> от <code>linear</code> до его эквивалентного значения функции <code>cubic-bezier</code> . Используйте значения точек, приведенные в примере выше. </section>
|
||||
<section id='instructions'>
|
||||
Для элемента с идентификатором <code>ball1</code> измените значение свойства <code>animation-timing-function</code> от <code>linear</code> до его эквивалентного значения функции <code>cubic-bezier</code> . Используйте значения точек, приведенные в примере выше.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Значение свойства <code>animation-timing-function</code> для элемента с <code>ball1</code> должно быть линейно-эквивалентной функцией кубического безье.
|
||||
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");'
|
||||
- text: Значение свойства <code>animation-timing-function</code> для элемента с id <code>ball2</code> не должно меняться.
|
||||
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");'
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.
|
||||
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
|
||||
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
|
||||
|
||||
```
|
||||
|
||||
@ -58,14 +63,14 @@ tests:
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -76,14 +81,49 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,38 @@
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: Learn How the CSS @keyframes and animation Properties Work
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Узнайте, как работают CSS-файлы и анимация CSS'
|
||||
videoUrl: https://scrimba.com/c/cakprhv
|
||||
forumTopicId: 301059
|
||||
localeTitle: Узнайте, как работают CSS-файлы и анимация CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы анимировать элемент, вам нужно знать свойства анимации и правило <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%. </section>
|
||||
<section id='description'>
|
||||
Чтобы анимировать элемент, вам нужно знать свойства анимации и правило <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%.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте анимацию для элемента с id <code>rect</code> , установив <code>animation-name</code> на радугу и <code>animation-duration</code> до 4 секунд. Затем объявите правило <code>@keyframes</code> и установите <code>background-color</code> в начале анимации ( <code>0%</code> ) на синий, середина анимации ( <code>50%</code> ) на зеленый, а конец анимации ( <code>100%</code> ) на желтый. </section>
|
||||
<section id='instructions'>
|
||||
Создайте анимацию для элемента с id <code>rect</code> , установив <code>animation-name</code> на радугу и <code>animation-duration</code> до 4 секунд. Затем объявите правило <code>@keyframes</code> и установите <code>background-color</code> в начале анимации ( <code>0%</code> ) на синий, середина анимации ( <code>50%</code> ) на зеленый, а конец анимации ( <code>100%</code> ) на желтый.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент с идентификатором <code>rect</code> должен иметь свойство <code>animation-name</code> со значением радуги.
|
||||
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
|
||||
- text: Элемент с идентификатором <code>rect</code> должен иметь свойство <code>animation-duration</code> со значением 4s.
|
||||
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
|
||||
- text: Правило <code>@keyframes</code> должно использовать <code>animation-name</code> радуги.
|
||||
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
|
||||
- text: Правило <code>@keyframes</code> для радуги должно использовать <code>background-color</code> синего цвета при 0%.
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
|
||||
- text: Правило <code>@keyframes</code> для радуги должно использовать зеленый <code>background-color</code> на 50%.
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
|
||||
- text: Правило <code>@keyframes</code> для радуги должно использовать <code>background-color</code> желтого цвета на 100%.
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
|
||||
- text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
|
||||
testString: assert($('#rect').css('animation-name') == 'rainbow');
|
||||
- text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
|
||||
testString: assert($('#rect').css('animation-duration') == '4s');
|
||||
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
|
||||
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
|
||||
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
|
||||
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -64,14 +69,39 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: Lock an Element to its Parent with Absolute Positioning
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cyLJ7c3
|
||||
forumTopicId: 301060
|
||||
localeTitle: Блокировка элемента для его родителя с абсолютным позиционированием
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Следующая опция для свойства <code>position</code> CSS является <code>absolute</code> , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от <code>relative</code> положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего <em>расположенного</em> предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием <code>position: relative;</code> ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body. </section>
|
||||
<section id='description'>
|
||||
Следующая опция для свойства <code>position</code> CSS является <code>absolute</code> , которая блокирует элемент на месте относительно его родительского контейнера. В отличие от <code>relative</code> положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего <em>расположенного</em> предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием <code>position: relative;</code> ), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Заблокируйте элемент <code>#searchbar</code> в верхнем правом углу родительского <code>section</code> , объявив его <code>position</code> <code>absolute</code> . Дайте ему <code>top</code> и <code>right</code> смещения по 50 пикселей каждый. </section>
|
||||
<section id='instructions'>
|
||||
Заблокируйте элемент <code>#searchbar</code> в верхнем правом углу родительского <code>section</code> , объявив его <code>position</code> <code>absolute</code> . Дайте ему <code>top</code> и <code>right</code> смещения по 50 пикселей каждый.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#searchbar</code> должен иметь <code>absolute</code> <code>position</code> .'
|
||||
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
|
||||
- text: 'Ваш код должен использовать <code>top</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .'
|
||||
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||
- text: 'Ваш код должен использовать <code>right</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .'
|
||||
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||
- text: The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.
|
||||
testString: assert($('#searchbar').css('position') == 'absolute');
|
||||
- text: Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
|
||||
testString: assert($('#searchbar').css('top') == '50px');
|
||||
- text: Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
|
||||
testString: assert($('#searchbar').css('right') == '50px');
|
||||
|
||||
```
|
||||
|
||||
@ -59,14 +64,32 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: Lock an Element to the Browser Window with Fixed Positioning
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MDNUR
|
||||
forumTopicId: 301061
|
||||
localeTitle: Блокировка элемента в окне браузера с фиксированным позиционированием
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Следующая схема компоновки, которую предлагает CSS, - это <code>fixed</code> позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между <code>fixed</code> и <code>absolute</code> позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается. </section>
|
||||
<section id='description'>
|
||||
Следующая схема компоновки, которую предлагает CSS, - это <code>fixed</code> позиция, которая является типом абсолютного позиционирования, который блокирует элемент относительно окна браузера. Подобно абсолютному позиционированию, он используется со свойствами смещения CSS, а также удаляет элемент из обычного потока документа. Другие предметы больше не «реализуют», где они позиционируются, что может потребовать некоторых корректировок компоновки в другом месте. Одно ключевое различие между <code>fixed</code> и <code>absolute</code> позициями состоит в том, что элемент с фиксированной позицией не будет перемещаться, когда пользователь прокручивается.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Навигационная панель в коде помечена идентификатором <code>navbar</code> . Измените его <code>position</code> на <code>fixed</code> и смещайте его на 0 пикселей <code>top</code> и на 0 пикселей <code>left</code> . Обратите внимание на (отсутствие) воздействия на позицию <code>h1</code> , оно не было сдвинуто вниз, чтобы разместить панель навигации, и ее необходимо будет отрегулировать отдельно. </section>
|
||||
<section id='instructions'>
|
||||
Навигационная панель в коде помечена идентификатором <code>navbar</code> . Измените его <code>position</code> на <code>fixed</code> и смещайте его на 0 пикселей <code>top</code> и на 0 пикселей <code>left</code> . Обратите внимание на (отсутствие) воздействия на позицию <code>h1</code> , оно не было сдвинуто вниз, чтобы разместить панель навигации, и ее необходимо будет отрегулировать отдельно.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#navbar</code> элемент должен иметь <code>position</code> набор для <code>fixed</code> .'
|
||||
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
|
||||
- text: 'Ваш код должен использовать <code>top</code> сдвиг CSS в 0 пикселей в элементе <code>#navbar</code> .'
|
||||
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||
- text: 'Ваш код должен использовать <code>left</code> сдвиг CSS в 0 пикселей на элементе <code>#navbar</code> .'
|
||||
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||
- text: The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.
|
||||
testString: assert($('#navbar').css('position') == 'fixed');
|
||||
- text: Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.
|
||||
testString: assert($('#navbar').css('top') == '0px');
|
||||
- text: Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.
|
||||
testString: assert($('#navbar').css('left') == '0px');
|
||||
|
||||
```
|
||||
|
||||
@ -71,14 +76,44 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: Make a CSS Heartbeat using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cDZpDUr
|
||||
forumTopicId: 301062
|
||||
localeTitle: Сделайте Heartbeat с использованием бесконечного количества анимации
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вот еще один пример непрерывной анимации с свойством <code>animation-iteration-count</code> которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы <code>heart</code> (включая <code>:before</code> и <code>:after</code> фрагментов) анимируются, чтобы изменить размер с помощью свойства <code>transform</code> , а фоновый <code>div</code> анимирован, чтобы изменить его цвет, используя свойство <code>background</code> . </section>
|
||||
<section id='description'>
|
||||
Вот еще один пример непрерывной анимации с свойством <code>animation-iteration-count</code> которое использует сердце, которое вы разработали в предыдущем задании. Односекундная анимация сердечного ритма состоит из двух анимированных фигур. Элементы <code>heart</code> (включая <code>:before</code> и <code>:after</code> фрагментов) анимируются, чтобы изменить размер с помощью свойства <code>transform</code> , а фоновый <code>div</code> анимирован, чтобы изменить его цвет, используя свойство <code>background</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
<section id='instructions'>
|
||||
Keep the heart beating by adding the <code>animation-iteration-count</code> property for both the <code>back</code> class and the <code>heart</code> class and setting the value to infinite. The <code>heart:before</code> and <code>heart:after</code> selectors do not need any animation properties.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
|
||||
- text: ''
|
||||
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'
|
||||
- text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.
|
||||
testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
- text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.
|
||||
testString: assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
```
|
||||
|
||||
@ -106,14 +111,80 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: Make Motion More Natural Using a Bezier Curve
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Сделать движение более естественным, используя кривую Безье'
|
||||
videoUrl: https://scrimba.com/c/c7akWUv
|
||||
forumTopicId: 301063
|
||||
localeTitle: Сделать движение более естественным, используя кривую Безье
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали <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 может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования. </section>
|
||||
<section id='description'>
|
||||
Этот вызов оживляет элемент для репликации движения шарика, который жонглирует. Предыдущие проблемы охватывали <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 может быть установлено на числа, большие, чем единицы. Это приводит к прыгающему движению, которое идеально подходит для имитации шара жонглирования.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените значение функции <code>animation-timing-function</code> элемента с идентификатором <code>green</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0,311, 0,441, 0,444, 1,649. </section>
|
||||
<section id='instructions'>
|
||||
Измените значение функции <code>animation-timing-function</code> элемента с идентификатором <code>green</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0,311, 0,441, 0,444, 1,649.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Значение свойства <code>animation-timing-function</code> для элемента с <code>green</code> идентификатором должно быть функцией <code>cubic-bezier</code> с значениями x1, y1, x2, y2, как указано.'
|
||||
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.
|
||||
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
|
||||
|
||||
```
|
||||
|
||||
@ -71,14 +76,48 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: Modify Fill Mode of an Animation
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cVJDmcE
|
||||
forumTopicId: 301064
|
||||
localeTitle: Изменить режим заполнения анимации
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после <code>500ms</code> , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство <code>animation-fill-mode</code> <code>forwards</code> . Режим <code>animation-fill-mode</code> задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: <code>animation-fill-mode: forwards;</code> </section>
|
||||
<section id='description'>
|
||||
Это здорово, но пока это не работает. Обратите внимание, как сбрасывается анимация после <code>500ms</code> , и кнопка возвращается к исходному цвету. Вы хотите, чтобы кнопка оставалась подсвеченной. Это можно сделать, установив свойство <code>animation-fill-mode</code> <code>forwards</code> . Режим <code>animation-fill-mode</code> задает стиль, применяемый к элементу, когда анимация завершена. Вы можете установить его так: <code>animation-fill-mode: forwards;</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте свойство <code>animation-fill-mode</code> <code>button:hover</code> <code>forwards</code> чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор. </section>
|
||||
<section id='instructions'>
|
||||
Задайте свойство <code>animation-fill-mode</code> <code>button:hover</code> <code>forwards</code> чтобы кнопка оставалась выделенной, когда пользователь наводил на нее курсор.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
|
||||
- text: <code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.
|
||||
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -56,14 +61,31 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: Move a Relatively Positioned Element with CSS Offsets
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c9bQEA4
|
||||
forumTopicId: 301065
|
||||
localeTitle: Перемещение Относительно Позиционированного Элемента с помощью смещений CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Смещение 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 <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'</code> </pre></section><h2> Сезон испытания </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html"><head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body></code> </pre></div></section><h2> Решение </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section>
|
||||
<section id='description'>
|
||||
Смещение 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 <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'</code> </pre></section><h2> Сезон испытания </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html"><head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body></code> </pre></div></section><h2> Решение </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх. </section>
|
||||
<section id='instructions'>
|
||||
Используйте смещения CSS для перемещения <code>h2</code> 15 пикселей вправо и 10 пикселей вверх.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен использовать смещение CSS для относительно позиционирования <code>h2</code> 10px вверх. Другими словами, переместите его на расстоянии 10 пикселей от <code>bottom</code> где он обычно сидит.'
|
||||
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
|
||||
- text: 'Ваш код должен использовать смещение CSS, чтобы относительно позиционировать <code>h2</code> 15px вправо. Другими словами, переместите его на 15 пикселей <code>left</code> от места, где он обычно сидит.'
|
||||
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
|
||||
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.
|
||||
testString: assert($('h2').css('bottom') == '10px');
|
||||
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.
|
||||
testString: assert($('h2').css('left') == '15px');
|
||||
|
||||
```
|
||||
|
||||
@ -51,14 +56,26 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: Push Elements Left or Right with the float Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MDqu2
|
||||
forumTopicId: 301066
|
||||
localeTitle: Нажатие элементов влево или вправо с помощью свойства float
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Следующий инструмент позиционирования фактически не использует <code>position</code> , а устанавливает свойство <code>float</code> элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются <code>left</code> или <code>right</code> от содержащего их родительского элемента. Он обычно используется с свойством <code>width</code> чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой. </section>
|
||||
<section id='description'>
|
||||
Следующий инструмент позиционирования фактически не использует <code>position</code> , а устанавливает свойство <code>float</code> элемента. Плавающие элементы удаляются из нормального потока документа и перемещаются <code>left</code> или <code>right</code> от содержащего их родительского элемента. Он обычно используется с свойством <code>width</code> чтобы указать, сколько горизонтального пространства требуется для элемента с плавающей точкой.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Данная разметка будет хорошо работать в качестве макета из двух столбцов, с <code>section</code> и в <code>aside</code> элементов рядом друг с другом. Дайте элементу <code>#left</code> <code>float</code> <code>left</code> а элемент <code>#right</code> - <code>float</code> <code>right</code> . </section>
|
||||
<section id='instructions'>
|
||||
Данная разметка будет хорошо работать в качестве макета из двух столбцов, с <code>section</code> и в <code>aside</code> элементов рядом друг с другом. Дайте элементу <code>#left</code> <code>float</code> <code>left</code> а элемент <code>#right</code> - <code>float</code> <code>right</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент с id <code>left</code> должен иметь значение <code>float</code> <code>left</code> .
|
||||
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
|
||||
- text: Элемент с <code>right</code> id должен иметь значение <code>float</code> <code>right</code> .
|
||||
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'
|
||||
- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
|
||||
testString: assert($('#left').css('float') == 'left');
|
||||
- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
|
||||
testString: assert($('#right').css('float') == 'right');
|
||||
|
||||
```
|
||||
|
||||
@ -66,14 +71,41 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,38 @@
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: Set the font-size for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cPpQNT3
|
||||
forumTopicId: 301067
|
||||
localeTitle: Установите размер шрифта для нескольких элементов заголовка
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>font-size</code> используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов <code>h1</code> <code>h6</code> чтобы сбалансировать размеры заголовков. </section>
|
||||
<section id='description'>
|
||||
Свойство <code>font-size</code> используется для указания того, насколько большой текст в данном элементе. Это правило может использоваться для нескольких элементов для создания визуальной согласованности текста на странице. В этой задаче вы установите значения для всех тегов <code>h1</code> <code>h6</code> чтобы сбалансировать размеры заголовков.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
<section id='instructions'>
|
||||
<ul><li>Set the <code>font-size</code> of the <code>h1</code> tag to 68px.</li><li>Set the <code>font-size</code> of the <code>h2</code> tag to 52px.</li><li>Set the <code>font-size</code> of the <code>h3</code> tag to 40px.</li><li>Set the <code>font-size</code> of the <code>h4</code> tag to 32px.</li><li>Set the <code>font-size</code> of the <code>h5</code> tag to 21px.</li><li>Set the <code>font-size</code> of the <code>h6</code> tag to 14px.</li></ul>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");'
|
||||
- text: Ваш код должен установить свойство <code>font-size</code> для тега <code>h3</code> до 40 пикселей.
|
||||
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");'
|
||||
- text: ''
|
||||
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");'
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.
|
||||
testString: assert($('h1').css('font-size') == '68px');
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.
|
||||
testString: assert($('h2').css('font-size') == '52px');
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.
|
||||
testString: assert($('h3').css('font-size') == '40px');
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.
|
||||
testString: assert($('h4').css('font-size') == '32px');
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.
|
||||
testString: assert($('h5').css('font-size') == '21px');
|
||||
- text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
|
||||
testString: assert($('h6').css('font-size') == '14px');
|
||||
|
||||
```
|
||||
|
||||
@ -59,14 +64,38 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: Set the font-size of Paragraph Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cVJ36Cr
|
||||
forumTopicId: 301068
|
||||
localeTitle: Установите размер шрифта текста абзаца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>font-size</code> в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст. </section>
|
||||
<section id='description'>
|
||||
Свойство <code>font-size</code> в CSS не ограничивается заголовками, оно может применяться к любому элементу, содержащему текст.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените значение свойства <code>font-size</code> для абзаца на 16 пикселей, чтобы сделать его более видимым. </section>
|
||||
<section id='instructions'>
|
||||
Измените значение свойства <code>font-size</code> для абзаца на 16 пикселей, чтобы сделать его более видимым.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш тег <code>p</code> должен иметь <code>font-size</code> 16 пикселей.
|
||||
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");'
|
||||
- text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.
|
||||
testString: assert($('p').css('font-size') == '16px');
|
||||
|
||||
```
|
||||
|
||||
@ -43,14 +48,20 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,38 @@
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: Set the font-weight for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/crVWRHq
|
||||
forumTopicId: 301069
|
||||
localeTitle: Установите вес шрифта для нескольких элементов заголовка
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы устанавливаете <code>font-size</code> для каждого заголовка в последнем вызове, здесь вы настраиваете <code>font-weight</code> . Свойство <code>font-weight</code> устанавливает, как толстые или тонкие символы находятся в разделе текста. </section>
|
||||
<section id='description'>
|
||||
Вы устанавливаете <code>font-size</code> для каждого заголовка в последнем вызове, здесь вы настраиваете <code>font-weight</code> . Свойство <code>font-weight</code> устанавливает, как толстые или тонкие символы находятся в разделе текста.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"><ul><li> Установите <code>font-weight</code> тега <code>h1</code> равным 800. </li><li> Установите <code>font-weight</code> тега <code>h2</code> равным 600. </li><li> Установите <code>font-weight</code> тега <code>h3</code> равным 500. </li><li> Установите <code>font-weight</code> тега <code>h4</code> равным 400. </li><li> Установите <code>font-weight</code> тега <code>h5</code> равным 300. </li><li> Установите <code>font-weight</code> тега <code>h6</code> равным 200. </li></ul></section>
|
||||
<section id='instructions'>
|
||||
<ul><li> Установите <code>font-weight</code> тега <code>h1</code> равным 800. </li><li> Установите <code>font-weight</code> тега <code>h2</code> равным 600. </li><li> Установите <code>font-weight</code> тега <code>h3</code> равным 500. </li><li> Установите <code>font-weight</code> тега <code>h4</code> равным 400. </li><li> Установите <code>font-weight</code> тега <code>h5</code> равным 300. </li><li> Установите <code>font-weight</code> тега <code>h6</code> равным 200. </li></ul>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h1</code> равным 800.
|
||||
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");'
|
||||
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h2</code> равным 600.
|
||||
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");'
|
||||
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h3</code> равным 500.
|
||||
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");'
|
||||
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h4</code> равным 400.
|
||||
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");'
|
||||
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h5</code> равным 300.
|
||||
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");'
|
||||
- text: Ваш код должен установить свойство <code>font-weight</code> для тега <code>h6</code> равным 200.
|
||||
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");'
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.
|
||||
testString: assert($('h1').css('font-weight') == '800');
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.
|
||||
testString: assert($('h2').css('font-weight') == '600');
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.
|
||||
testString: assert($('h3').css('font-weight') == '500');
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.
|
||||
testString: assert($('h4').css('font-weight') == '400');
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.
|
||||
testString: assert($('h5').css('font-weight') == '300');
|
||||
- text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.
|
||||
testString: assert($('h6').css('font-weight') == '200');
|
||||
|
||||
```
|
||||
|
||||
@ -77,14 +82,44 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 800;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: Set the line-height of Paragraphs
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/crVWdcv
|
||||
forumTopicId: 301070
|
||||
localeTitle: Задайте высоту строки абзацев
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS предлагает свойство <code>line-height</code> для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста. </section>
|
||||
<section id='description'>
|
||||
CSS предлагает свойство <code>line-height</code> для изменения высоты каждой строки в блоке текста. Как следует из названия, он изменяет количество вертикального пространства, которое получает каждая строка текста.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>line-height</code> в тег <code>p</code> и установите его на 25 пикселей. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство <code>line-height</code> в тег <code>p</code> и установите его на 25 пикселей.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен установить <code>line-height</code> тега <code>p</code> до 25 пикселей.
|
||||
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");'
|
||||
- text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.
|
||||
testString: assert($('p').css('line-height') == '25px');
|
||||
|
||||
```
|
||||
|
||||
@ -44,14 +49,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: Use a Bezier Curve to Move a Graphic
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c6bnRCK
|
||||
forumTopicId: 301071
|
||||
localeTitle: Используйте кривую Безье для перемещения графика
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В предыдущем задании обсуждалось ключевое слово <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, что делает изменения анимации медленнее по сравнению с продолжительность анимации. </section>
|
||||
<section id='description'>
|
||||
В предыдущем задании обсуждалось ключевое слово <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, что делает изменения анимации медленнее по сравнению с продолжительность анимации.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Чтобы увидеть эффект этой кривой Безье в действии, измените <code>animation-timing-function</code> элемента с id <code>red</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом. </section>
|
||||
<section id='instructions'>
|
||||
Чтобы увидеть эффект этой кривой Безье в действии, измените <code>animation-timing-function</code> элемента с id <code>red</code> на функцию <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Значение свойства <code>animation-timing-function</code> элемента с <code>red</code> id должно быть функцией <code>cubic-bezier</code> с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0,58, 1.'
|
||||
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
|
||||
- text: Элемент с <code>red</code> идентификатором должен больше не обладать свойством <code>animation-timing-function</code> линейным.
|
||||
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
|
||||
- text: Значение свойства <code>animation-timing-function</code> для элемента с <code>blue</code> не должно изменяться.
|
||||
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
|
||||
- text: The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
|
||||
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
|
||||
- text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.
|
||||
testString: assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
|
||||
testString: assert($('#blue').css('animation-timing-function') == 'ease-out');
|
||||
|
||||
```
|
||||
|
||||
@ -71,14 +76,44 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,38 @@
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: Use a CSS Linear Gradient to Create a Striped Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c6bmQh2
|
||||
forumTopicId: 301072
|
||||
localeTitle: Используйте линейный градиент CSS для создания полосатого элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Функция <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> Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску. </section>
|
||||
<section id='description'>
|
||||
Функция <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> Если каждые два значения останова цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, так что вы попадаете в полоску.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Сделайте полосы, изменив <code>repeating-linear-gradient()</code> чтобы использовать градиентный угол <code>45deg</code> , затем установите, чтобы первые два цвета остановились на <code>yellow</code> , и, наконец, второй цвет прекратился до <code>black</code> . </section>
|
||||
<section id='instructions'>
|
||||
Сделайте полосы, изменив <code>repeating-linear-gradient()</code> чтобы использовать градиентный угол <code>45deg</code> , затем установите, чтобы первые два цвета остановились на <code>yellow</code> , и, наконец, второй цвет прекратился до <code>black</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Угол <code>repeating-linear-gradient()</code> должен быть 45deg.
|
||||
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
|
||||
- text: Угол <code>repeating-linear-gradient()</code> должен превышать 90 градусов
|
||||
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
|
||||
- text: Остановка цвета в 0 пикселях должна быть <code>yellow</code> .
|
||||
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
|
||||
- text: Одна остановка цвета на 40 пикселей должна быть <code>yellow</code> .
|
||||
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
|
||||
- text: Вторая остановка цвета на 40 пикселей должна быть <code>black</code> .
|
||||
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
|
||||
- text: Последняя остановка цвета на 80 пикселей должна быть <code>black</code> .
|
||||
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'
|
||||
- text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
|
||||
testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
- text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
|
||||
testString: assert(!code.match(/90deg/gi));
|
||||
- text: The color stop at 0 pixels should be <code>yellow</code>.
|
||||
testString: assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
- text: One color stop at 40 pixels should be <code>yellow</code>.
|
||||
testString: assert(code.match(/yellow\s+?40px/gi));
|
||||
- text: The second color stop at 40 pixels should be <code>black</code>.
|
||||
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
- text: The last color stop at 80 pixels should be <code>black</code>.
|
||||
testString: assert(code.match(/black\s+?80px/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -64,14 +69,28 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
yellow 0px,
|
||||
yellow 40px,
|
||||
black 40px,
|
||||
black 80px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: Use CSS Animation to Change the Hover State of a Button
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cg4vZAa
|
||||
forumTopicId: 301073
|
||||
localeTitle: Использование анимации CSS для изменения состояния наведения кнопки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете использовать CSS <code>@keyframes</code> для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении: <blockquote> <Стиль> <br> img: hover { <br> animation-name: width; <br> продолжительность анимации: 500 мс; <br> } <br><br> Ширина @keyframes { <br> 100% { <br> ширина: 40 пикселей; <br> } <br> } <br> </ Стиль> <br><br> <img src = "https://bit.ly/smallgooglelogo" alt = "Логотип Google" /> </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете использовать CSS <code>@keyframes</code> для изменения цвета кнопки в состоянии зависания. Ниже приведен пример изменения ширины изображения при наведении: <blockquote> <Стиль> <br> img: hover { <br> animation-name: width; <br> продолжительность анимации: 500 мс; <br> } <br><br> Ширина @keyframes { <br> 100% { <br> ширина: 40 пикселей; <br> } <br> } <br> </ Стиль> <br><br> <img src = "https://bit.ly/smallgooglelogo" alt = "Логотип Google" /> </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Обратите внимание, что <code>ms</code> обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS <code>@keyframes</code> чтобы изменить <code>background-color</code> элемента <code>button</code> чтобы он стал <code>#4791d0</code> когда пользователь <code>#4791d0</code> на него курсор. Правило <code>@keyframes</code> должно содержать только запись на <code>100%</code> . </section>
|
||||
<section id='instructions'>
|
||||
Обратите внимание, что <code>ms</code> обозначает миллисекунды, где 1000 мс равно 1 с. Используйте CSS <code>@keyframes</code> чтобы изменить <code>background-color</code> элемента <code>button</code> чтобы он стал <code>#4791d0</code> когда пользователь <code>#4791d0</code> на него курсор. Правило <code>@keyframes</code> должно содержать только запись на <code>100%</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Правило @keyframes должно использовать фоновый цвет <code>animation-name</code> .
|
||||
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
|
||||
- text: 'В разделе <code>@keyframes</code> должно быть одно правило, которое изменяет <code>background-color</code> на <code>#4791d0</code> на 100%.'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
|
||||
- text: The @keyframes rule should use the <code>animation-name</code> background-color.
|
||||
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
- text: There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -54,14 +59,32 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cyLP8Sr
|
||||
forumTopicId: 301074
|
||||
localeTitle: Используйте свойство преобразования CSS Transform для искажения элемента по оси X
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Следующей функцией свойства <code>transform</code> является <code>skewX()</code> , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X. <blockquote> п { <br> transform: skewX (-32deg); <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Следующей функцией свойства <code>transform</code> является <code>skewX()</code> , которая искажает выбранный элемент вдоль его оси X (горизонтальной) на заданную степень. Следующий код перекосит элемент абзаца на -32 градуса по оси X. <blockquote> п { <br> transform: skewX (-32deg); <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Перекосите элемент с <code>bottom</code> на 24 градуса по оси X, используя свойство <code>transform</code> . </section>
|
||||
<section id='instructions'>
|
||||
Перекосите элемент с <code>bottom</code> на 24 градуса по оси X, используя свойство <code>transform</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент с <code>bottom</code> id должен быть перекошен на 24 градуса по оси X.
|
||||
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");'
|
||||
- text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
|
||||
testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
|
||||
```
|
||||
|
||||
@ -52,14 +57,28 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MZ2uB
|
||||
forumTopicId: 301075
|
||||
localeTitle: Используйте свойство CSS Transform Property skewY для искажения элемента по оси Y
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Учитывая, что <code>skewX()</code> выделенный элемент вдоль оси X на заданную степень, неудивительно, что <code>skewY()</code> элемент вдоль оси Y (по вертикали). </section>
|
||||
<section id='description'>
|
||||
Учитывая, что <code>skewX()</code> выделенный элемент вдоль оси X на заданную степень, неудивительно, что <code>skewY()</code> элемент вдоль оси Y (по вертикали).
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Перекосите элемент с идентификатором <code>top</code> -10 градусов по оси Y, используя свойство <code>transform</code> . </section>
|
||||
<section id='instructions'>
|
||||
Перекосите элемент с идентификатором <code>top</code> -10 градусов по оси Y, используя свойство <code>transform</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент с <code>top</code> id должен быть перекошен на -10 градусов по оси Y.
|
||||
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");'
|
||||
- text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.
|
||||
testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
|
||||
```
|
||||
|
||||
@ -53,14 +58,29 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
transform: skewY(-10deg);
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: Use the CSS Transform scale Property to Change the Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MZVSg
|
||||
forumTopicId: 301076
|
||||
localeTitle: Используйте свойство масштабирования CSS Transform для изменения размера элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы изменить масштаб элемента, CSS имеет свойство <code>transform</code> , а также функцию <code>scale()</code> . Следующий пример кода удваивает размер всех элементов абзаца на странице: <blockquote> п { <br> преобразования: масштаб (2); <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Чтобы изменить масштаб элемента, CSS имеет свойство <code>transform</code> , а также функцию <code>scale()</code> . Следующий пример кода удваивает размер всех элементов абзаца на странице: <blockquote> п { <br> преобразования: масштаб (2); <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Увеличьте размер элемента с идентификатором <code>ball2</code> до его первоначального размера в 1,5 раза. </section>
|
||||
<section id='instructions'>
|
||||
Увеличьте размер элемента с идентификатором <code>ball2</code> до его первоначального размера в 1,5 раза.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Установите свойство <code>transform</code> для <code>#ball2</code> чтобы увеличить его размер в 1,5 раза.'
|
||||
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
|
||||
- text: Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.
|
||||
testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -61,14 +66,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
</style>
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: Use the CSS Transform scale Property to Scale an Element on Hover
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cyLPJuM
|
||||
forumTopicId: 301077
|
||||
localeTitle: Используйте свойство масштабирования CSS Transform для масштабирования элемента при наведении
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>transform</code> имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как <code>:hover</code> которые определяют определенное состояние элемента, свойство <code>transform</code> может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит: <blockquote> p: hover { <br> transform: масштаб (2.1); <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Свойство <code>transform</code> имеет множество функций, которые позволяют масштабировать, перемещать, вращать, перекосить и т. Д. Ваши элементы. При использовании с псевдоклассами, такими как <code>:hover</code> которые определяют определенное состояние элемента, свойство <code>transform</code> может легко добавлять интерактивность к вашим элементам. Ниже приведен пример масштабирования элементов абзаца в 2.1 раза по сравнению с их первоначальным размером, когда пользователь на них наводит: <blockquote> p: hover { <br> transform: масштаб (2.1); <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте правило CSS для состояния <code>hover</code> <code>div</code> и используйте свойство <code>transform</code> для масштабирования элемента <code>div</code> до 1,1 раз по сравнению с его первоначальным размером, когда пользователь на него наводится. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте правило CSS для состояния <code>hover</code> <code>div</code> и используйте свойство <code>transform</code> для масштабирования элемента <code>div</code> до 1,1 раз по сравнению с его первоначальным размером, когда пользователь на него наводится.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Размер элемента <code>div</code> должен масштабироваться в 1,1 раза, когда пользователь на него нависает.'
|
||||
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
|
||||
- text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
|
||||
testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -52,14 +57,28 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: Use the em Tag to Italicize Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cVJRBtp
|
||||
forumTopicId: 301078
|
||||
localeTitle: Используйте тег em для текста курсива
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы подчеркнуть текст, вы можете использовать тег <code>em</code> . Это отображает текст как курсив, так как браузер применяет CSS стиля <code>font-style: italic;</code> к элементу. </section>
|
||||
<section id='description'>
|
||||
Чтобы подчеркнуть текст, вы можете использовать тег <code>em</code> . Это отображает текст как курсив, так как браузер применяет CSS стиля <code>font-style: italic;</code> к элементу.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Оберните тег <code>em</code> вокруг содержимого тега абзаца, чтобы подчеркнуть его. </section>
|
||||
<section id='instructions'>
|
||||
Оберните тег <code>em</code> вокруг содержимого тега абзаца, чтобы подчеркнуть его.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить тег <code>em</code> в разметку.
|
||||
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");'
|
||||
- text: Тег <code>em</code> должен обертывать содержимое тега <code>p</code> но не сам тег <code>p</code> .
|
||||
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");'
|
||||
- text: Your code should add an <code>em</code> tag to the markup.
|
||||
testString: assert($('em').length == 1);
|
||||
- text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.
|
||||
testString: assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
|
||||
```
|
||||
|
||||
@ -75,14 +80,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -3,26 +3,31 @@ id: 587d781b367417b2b2512aba
|
||||
title: Use the s Tag to Strikethrough Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301079
|
||||
localeTitle: Используйте тег s для текста зачеркивания
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег <code>s</code> . Он показывает, что часть текста больше не действительна. С помощью тега <code>s</code> браузер применяет CSS <code>text-decoration: line-through;</code> к элементу. </section>
|
||||
<section id='description'>
|
||||
Чтобы зачеркнуть текст, когда горизонтальная линия пересекает символы, вы можете использовать тег <code>s</code> . Он показывает, что часть текста больше не действительна. С помощью тега <code>s</code> браузер применяет CSS <code>text-decoration: line-through;</code> к элементу.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Оберните тег <code>s</code> вокруг «Google» внутри тега <code>h4</code> а затем добавьте слово «Алфавит» рядом с ним, в котором не должно быть форматирования зачеркивания. </section>
|
||||
<section id='instructions'>
|
||||
Оберните тег <code>s</code> вокруг «Google» внутри тега <code>h4</code> а затем добавьте слово «Алфавит» рядом с ним, в котором не должно быть форматирования зачеркивания.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить к метке один тег <code>s</code> .
|
||||
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
|
||||
- text: Тег <code>s</code> должен обтекать текст Google в теге <code>h4</code> . Он не должен содержать слово «Алфавит».
|
||||
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
|
||||
- text: 'Включите слово «Алфавит» в тег <code>h4</code> , без форматирования зачеркиванием.'
|
||||
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
|
||||
- text: Your code should add one <code>s</code> tag to the markup.
|
||||
testString: assert($('s').length == 1);
|
||||
- text: A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.
|
||||
testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
|
||||
- text: Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.
|
||||
testString: assert($('h4').html().match(/Alphabet/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -77,14 +82,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s> Alphabet</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: Use the strong Tag to Make Text Bold
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Используйте сильный тег, чтобы сделать текст полужирным'
|
||||
videoUrl: https://scrimba.com/c/ceJNBSb
|
||||
forumTopicId: 301080
|
||||
localeTitle: Используйте сильный тег, чтобы сделать текст полужирным
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы сделать текст полужирным, вы можете использовать <code>strong</code> тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С <code>strong</code> тегом браузер применяет CSS <code>font-weight: bold;</code> к элементу. </section>
|
||||
<section id='description'>
|
||||
Чтобы сделать текст полужирным, вы можете использовать <code>strong</code> тег. Это часто используется, чтобы привлечь внимание к тексту и символизировать, что это важно. С <code>strong</code> тегом браузер применяет CSS <code>font-weight: bold;</code> к элементу.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Оберните <code>strong</code> бирку вокруг «Стэнфордского университета» внутри тега <code>p</code> . </section>
|
||||
<section id='instructions'>
|
||||
Оберните <code>strong</code> бирку вокруг «Стэнфордского университета» внутри тега <code>p</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить один <code>strong</code> тег к разметке.
|
||||
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");'
|
||||
- text: <code>strong</code> тег должен находиться внутри тега <code>p</code> .
|
||||
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");'
|
||||
- text: <code>strong</code> бирка должна охватывать слова «Стэнфордский университет».
|
||||
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");'
|
||||
- text: Your code should add one <code>strong</code> tag to the markup.
|
||||
testString: assert($('strong').length == 1);
|
||||
- text: The <code>strong</code> tag should be inside the <code>p</code> tag.
|
||||
testString: assert($('p').children('strong').length == 1);
|
||||
- text: The <code>strong</code> tag should wrap around the words "Stanford University".
|
||||
testString: assert($('strong').text().match(/^Stanford University$/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -77,14 +82,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: Use the text-transform Property to Make Text Uppercase
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cvVZQSP
|
||||
forumTopicId: 301081
|
||||
localeTitle: Используйте свойство text-transform для создания текста в верхнем регистре
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <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></section>
|
||||
<section id='description'>
|
||||
Свойство <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>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Преобразуйте текст <code>h4</code> в верхний регистр, используя свойство <code>text-transform</code> . </section>
|
||||
<section id='instructions'>
|
||||
Преобразуйте текст <code>h4</code> в верхний регистр, используя свойство <code>text-transform</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Текст <code>h4</code> должен быть прописным.
|
||||
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
|
||||
- text: Исходный текст h4 не должен изменяться.
|
||||
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
|
||||
- text: The <code>h4</code> text should be uppercase.
|
||||
testString: assert($('h4').css('text-transform') === 'uppercase');
|
||||
- text: The original text of the h4 should not be changed.
|
||||
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
|
||||
|
||||
```
|
||||
|
||||
@ -83,14 +88,58 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: Use the u Tag to Underline Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cN6aQCL
|
||||
forumTopicId: 301082
|
||||
localeTitle: Используйте тег u для подчеркивания текста
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы подчеркнуть текст, вы можете использовать тег <code>u</code> . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом <code>u</code> браузер применяет CSS <code>text-decoration: underline;</code> к элементу. </section>
|
||||
<section id='description'>
|
||||
Чтобы подчеркнуть текст, вы можете использовать тег <code>u</code> . Это часто используется для обозначения важности раздела текста или чего-то, что нужно запомнить. С тегом <code>u</code> браузер применяет CSS <code>text-decoration: underline;</code> к элементу.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Оберните тег <code>u</code> только вокруг текста «Ph.D. students». <strong>Заметка</strong> <br> Старайтесь избегать использования тега <code>u</code> когда его можно путать для ссылки. Якорные теги также имеют стандартное подчеркнутое форматирование. </section>
|
||||
<section id='instructions'>
|
||||
Оберните тег <code>u</code> только вокруг текста «Ph.D. students». <strong>Заметка</strong> <br> Старайтесь избегать использования тега <code>u</code> когда его можно путать для ссылки. Якорные теги также имеют стандартное подчеркнутое форматирование.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен добавить тег <code>u</code> в разметку.
|
||||
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");'
|
||||
- text: Тег <code>u</code> должен обернуться вокруг текста «Ph.D. students».
|
||||
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");'
|
||||
- text: Your code should add a <code>u</code> tag to the markup.
|
||||
testString: assert($('u').length === 1);
|
||||
- text: The <code>u</code> tag should wrap around the text "Ph.D. students".
|
||||
testString: assert($('u').text() === 'Ph.D. students');
|
||||
|
||||
```
|
||||
|
||||
@ -75,14 +80,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Add a Negative Margin to an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cnpyGs3
|
||||
forumTopicId: 16166
|
||||
localeTitle: Добавить отрицательные поля к элементу
|
||||
---
|
||||
|
||||
## Описание
|
||||
<section id="description">Значение <code>margin</code> (поле) элемента контролирует объем пространства между значением <code>border</code> (границей) элемента и окружающими элементами. Если вы установите значение <code>margin</code> отрицательным, то размер элемента увеличится. </section>
|
||||
## Description
|
||||
<section id='description'>
|
||||
Значение <code>margin</code> (поле) элемента контролирует объем пространства между значением <code>border</code> (границей) элемента и окружающими элементами. Если вы установите значение <code>margin</code> отрицательным, то размер элемента увеличится.
|
||||
</section>
|
||||
|
||||
## Инструкции
|
||||
<section id="instructions"> Попытайтесь установить значение <code>margin</code> отрицательным, как у красного окна. Установите <code>margin</code> синего окна равным <code>-15px</code>, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него. </section>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Попытайтесь установить значение <code>margin</code> отрицательным, как у красного окна. Установите <code>margin</code> синего окна равным <code>-15px</code>, чтобы он заполнил всю горизонтальную ширину желтой рамки вокруг него.
|
||||
</section>
|
||||
|
||||
## Тесты
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш класс <code>blue-box</code> должен иметь значение <code>margin</code> равное <code>-15px</code>.
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
|
||||
- text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
|
||||
testString: assert($(".blue-box").css("margin-top") === "-15px");
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Исходной код
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@ -72,14 +77,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Решение
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// впишите ваш код решения
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,32 +2,36 @@
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Add Borders Around Your Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
|
||||
videoUrl: https://scrimba.com/c/c2MvnHZ
|
||||
forumTopicId: 16630
|
||||
localeTitle: Добавьте рамки вокруг ваших элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Рамки в CSS имеют такие свойства, как <code>style</code> , <code>color</code> и <code>width</code> Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот класс: <blockquote> <Стиль> <br> .thin-red-border { <br> border-color: red; <br> border-width: 5px; <br> border-style: solid; <br> } <br> </ Стиль> </blockquote></section>
|
||||
<section id='description'>
|
||||
Рамки в CSS имеют такие свойства, как <code>style</code> , <code>color</code> и <code>width</code> Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот класс: <blockquote> <Стиль> <br> .thin-red-border { <br> border-color: red; <br> border-width: 5px; <br> border-style: solid; <br> } <br> </ Стиль> </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте класс под названием « <code>thick-green-border</code> . Этот класс должен добавить сплошную зелёную рамку шириной 10px вокруг элемента HTML. Примените этот класс к фотографии вашего кота. Помните, что вы можете применять несколько классов к элементу с помощью его атрибута <code>class</code>, вставляя пробелы между классами. Например: <code><img class="class1 class2"></code> </section>
|
||||
<section id='instructions'>
|
||||
Создайте класс под названием « <code>thick-green-border</code> . Этот класс должен добавить сплошную зелёную рамку шириной 10px вокруг элемента HTML. Примените этот класс к фотографии вашего кота. Помните, что вы можете применять несколько классов к элементу с помощью его атрибута <code>class</code>, вставляя пробелы между классами. Например: <code><img class="class1 class2"></code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||
- text: Ваш элемент <code>img</code> должен обладать классом <code>thick-green-border</code> .
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
|
||||
- text: Задайте вашему изображению ширину границы <code>10px</code> .
|
||||
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of <code>10px</code>.");'
|
||||
- text: Задайте вашему изображению стиль границы <code>solid</code> .
|
||||
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
|
||||
- text: Граница вокруг вашего элемента <code>img</code> должна быть зеленой.
|
||||
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
|
||||
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
|
||||
testString: assert($("img").hasClass("smaller-image"));
|
||||
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: Give your image a border width of <code>10px</code>.
|
||||
testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
|
||||
- text: Give your image a border style of <code>solid</code>.
|
||||
testString: assert($("img").css("border-right-style") === "solid");
|
||||
- text: The border around your <code>img</code> element should be green.
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
|
||||
|
||||
```
|
||||
|
||||
@ -95,14 +99,69 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-width: 10px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Add Different Margins to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cg4RWh4
|
||||
forumTopicId: 16633
|
||||
localeTitle: Добавление разных полей в каждую сторону элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда вам нужно настроить элемент таким образом, чтобы он имел разный <code>margin</code> на каждой из сторон. CSS позволяет вам контролировать <code>margin</code> всех четырех отдельных сторон элемента с параметрами <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> . </section>
|
||||
<section id='description'>
|
||||
Иногда вам нужно настроить элемент таким образом, чтобы он имел разный <code>margin</code> на каждой из сторон. CSS позволяет вам контролировать <code>margin</code> всех четырех отдельных сторон элемента с параметрами <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Дайте синей коробке <code>margin</code> <code>40px</code> на ее верхней и левой стороне, но только <code>20px</code> на нижней и правой стороне. </section>
|
||||
<section id='instructions'>
|
||||
Дайте синей коробке <code>margin</code> <code>40px</code> на ее верхней и левой стороне, но только <code>20px</code> на нижней и правой стороне.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш <code>blue-box</code> класс должен дать верхнюю часть элементов <code>40px</code> из <code>margin</code> .
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: Ваш класс <code>blue-box</code> должен предоставить право элементов <code>20px</code> <code>margin</code> .
|
||||
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: Ваш класс с <code>blue-box</code> должен дать нижнюю часть <code>20px</code> <code>margin</code> .
|
||||
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: Ваш класс с <code>blue-box</code> должен оставить слева от элементов <code>40px</code> <code>margin</code> .
|
||||
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px");
|
||||
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px");
|
||||
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
|
||||
```
|
||||
|
||||
@ -79,14 +84,54 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Add Different Padding to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cB7mwUw
|
||||
forumTopicId: 16634
|
||||
localeTitle: Добавьте разные внутренние отступы к каждой стороне элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - <code>padding</code> . CSS позволяет вам управлять <code>padding</code> всех четырех отдельных сторон элемента с помощью свойств <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> . </section>
|
||||
<section id='description'>
|
||||
Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - <code>padding</code> . CSS позволяет вам управлять <code>padding</code> всех четырех отдельных сторон элемента с помощью свойств <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте синему квадрату <code>padding</code> <code>40px</code> на его верхней и левой стороне, но только <code>20px</code> на его нижней и правой стороне. </section>
|
||||
<section id='instructions'>
|
||||
Задайте синему квадрату <code>padding</code> <code>40px</code> на его верхней и левой стороне, но только <code>20px</code> на его нижней и правой стороне.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> сверху <code>40px</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> справа <code>20px</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> снизу <code>20px</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: Ваш класс <code>blue-box</code> должен содержать <code>padding</code> слева <code>40px</code>.
|
||||
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px");
|
||||
- text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px");
|
||||
- text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px");
|
||||
- text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
|
||||
```
|
||||
|
||||
@ -79,14 +84,54 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Add Rounded Corners with border-radius
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cbZm2hg
|
||||
forumTopicId: 16649
|
||||
localeTitle: Добавить закругленные углы при помощи свойства border-radius
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого <code>border-radius</code> . </section>
|
||||
<section id='description'>
|
||||
Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого <code>border-radius</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Вы можете указать <code>border-radius</code> в пикселях. Задайте вашей фотографии кошки <code>border-radius</code> <code>10px</code> . Примечание: эта задача позволяет использовать несколько возможных решений. Например, вы можете добавить <code>border-radius</code> для <code>.thick-green-border</code> или класса <code>.smaller-image</code> . </section>
|
||||
<section id='instructions'>
|
||||
Вы можете указать <code>border-radius</code> в пикселях. Задайте вашей фотографии кошки <code>border-radius</code> <code>10px</code> . Примечание: эта задача позволяет использовать несколько возможных решений. Например, вы можете добавить <code>border-radius</code> для <code>.thick-green-border</code> или класса <code>.smaller-image</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент изображения должен иметь класс «толсто-зеленая граница».
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
|
||||
- text: Ваше изображение должно иметь радиус границы <code>10px</code>
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
|
||||
- text: Your image element should have the class "thick-green-border".
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: Your image should have a border radius of <code>10px</code>
|
||||
testString: assert($("img").css("border-top-left-radius") === '10px' && $("img").css("border-top-right-radius") === '10px' && $("img").css("border-bottom-left-radius") === '10px' && $("img").css("border-bottom-right-radius") === '10px');
|
||||
|
||||
```
|
||||
|
||||
@ -94,14 +99,70 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Adjust the Margin of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cVJarHW
|
||||
forumTopicId: 16654
|
||||
localeTitle: Отрегулируйте маржу элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Элемент по <code>margin</code> контролирует объем пространства между элементом в <code>border</code> и окружающих элементами. Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красный ящик имеет больший <code>margin</code> чем синий квадрат, что делает его меньше. Когда вы увеличите <code>margin</code> синего <code>margin</code> , это увеличит расстояние между его границей и окружающими элементами. </section>
|
||||
<section id='description'>
|
||||
Элемент по <code>margin</code> контролирует объем пространства между элементом в <code>border</code> и окружающих элементами. Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красный ящик имеет больший <code>margin</code> чем синий квадрат, что делает его меньше. Когда вы увеличите <code>margin</code> синего <code>margin</code> , это увеличит расстояние между его границей и окружающими элементами.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>margin</code> синего квадрата так, чтобы он был красным. </section>
|
||||
<section id='instructions'>
|
||||
Измените <code>margin</code> синего квадрата так, чтобы он был красным.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш класс с <code>blue-box</code> должен давать элементы <code>20px</code> <code>margin</code> .
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.
|
||||
testString: assert($(".blue-box").css("margin-top") === "20px");
|
||||
|
||||
```
|
||||
|
||||
@ -73,14 +78,50 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Adjust the Padding of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cED8ZC2
|
||||
forumTopicId: 301083
|
||||
localeTitle: Отрегулируйте прокладку элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теперь давайте немного отложим наше приложение для фотоаппарата Cat, и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: <code>padding</code> , <code>margin</code> и <code>border</code> . Элемент в <code>padding</code> контролирует объем пространства между содержимым элемента и его <code>border</code> . Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красное поле имеет больше <code>padding</code> чем синий. При увеличении синей коробке в <code>padding</code> , это увеличит расстояние ( <code>padding</code> ) между текстом и границей вокруг него. </section>
|
||||
<section id='description'>
|
||||
Теперь давайте немного отложим наше приложение для фотоаппарата Cat, и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: <code>padding</code> , <code>margin</code> и <code>border</code> . Элемент в <code>padding</code> контролирует объем пространства между содержимым элемента и его <code>border</code> . Здесь мы видим, что синий ящик и красный ящик вложены в желтый квадрат. Обратите внимание, что красное поле имеет больше <code>padding</code> чем синий. При увеличении синей коробке в <code>padding</code> , это увеличит расстояние ( <code>padding</code> ) между текстом и границей вокруг него.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените <code>padding</code> синего квадрата в соответствии с вашим красным полем. </section>
|
||||
<section id='instructions'>
|
||||
Измените <code>padding</code> синего квадрата в соответствии с вашим красным полем.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш класс <code>blue-box</code> должен давать элементы <code>20px</code> <code>padding</code> .
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
|
||||
testString: assert($(".blue-box").css("padding-top") === "20px");
|
||||
|
||||
```
|
||||
|
||||
@ -71,14 +76,48 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Attach a Fallback value to a CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c6bDNfp
|
||||
forumTopicId: 301084
|
||||
localeTitle: Прикрепите значение возврата к переменной CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. <strong>Примечание.</strong> Этот резерв не используется для повышения совместимости браузера, и он не будет работать в браузерах IE. Скорее, он используется, чтобы браузер отображал цвет, если он не может найти вашу переменную. Вот как вы это делаете: <blockquote> фон: var (- пингвин-кожа, черный); </blockquote> Это установит фон в черный, если ваша переменная не была установлена. Обратите внимание, что это может быть полезно для отладки. </section>
|
||||
<section id='description'>
|
||||
При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. <strong>Примечание.</strong> Этот резерв не используется для повышения совместимости браузера, и он не будет работать в браузерах IE. Скорее, он используется, чтобы браузер отображал цвет, если он не может найти вашу переменную. Вот как вы это делаете: <blockquote> фон: var (- пингвин-кожа, черный); </blockquote> Это установит фон в черный, если ваша переменная не была установлена. Обратите внимание, что это может быть полезно для отладки.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Похоже, что существует проблема с переменными, <code>.penguin-top</code> в <code>.penguin-top</code> и <code>.penguin-bottom</code> . Вместо того, чтобы исправить опечатку, добавьте запасное значение <code>black</code> в свойство <code>background</code> <code>.penguin-top</code> и <code>.penguin-bottom</code> . </section>
|
||||
<section id='instructions'>
|
||||
Похоже, что существует проблема с переменными, <code>.penguin-top</code> в <code>.penguin-top</code> и <code>.penguin-bottom</code> . Вместо того, чтобы исправить опечатку, добавьте запасное значение <code>black</code> в свойство <code>background</code> <code>.penguin-top</code> и <code>.penguin-bottom</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Примените запасное значение <code>black</code> к свойству <code>background</code> класса <code>penguin-top</code> .
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
|
||||
- text: Примените запасное значение <code>black</code> к свойству <code>background</code> класса <code>penguin-bottom</code> .
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
|
||||
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -241,14 +246,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -7,10 +7,14 @@ localeTitle: Каскадные переменные CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как <dfn>каскадный</dfn> . Из-за каскадирования переменные CSS часто определяются в <dfn>корневом</dfn> элементе. <code>:root</code> - это селектор <dfn>псевдокласса</dfn> , который соответствует корневому элементу документа, обычно <code></code> элемент. Создав переменные в <code>:root</code> , они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей. </section>
|
||||
<section id='description'>
|
||||
Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как <dfn>каскадный</dfn> . Из-за каскадирования переменные CSS часто определяются в <dfn>корневом</dfn> элементе. <code>:root</code> - это селектор <dfn>псевдокласса</dfn> , который соответствует корневому элементу документа, обычно <code></code> элемент. Создав переменные в <code>:root</code> , они будут доступны по всему миру и могут быть доступны из любого другого селектора позже в таблице стилей.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Определите переменную с именем <code>--penguin-belly</code> в селекторе <code>:root</code> и придайте ей значение <code>pink</code> . Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная. </section>
|
||||
<section id='instructions'>
|
||||
Определите переменную с именем <code>--penguin-belly</code> в селекторе <code>:root</code> и придайте ей значение <code>pink</code> . Затем вы можете увидеть, как значение будет каскадно вниз, чтобы изменить значение на розовый, где бы ни была эта переменная.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@ -19,7 +23,6 @@ localeTitle: Каскадные переменные CSS
|
||||
tests:
|
||||
- text: 'объявите переменную <code>--penguin-belly</code> в <code>:root</code> и назначьте ее <code>pink</code> .'
|
||||
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -237,14 +240,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Change a variable for a specific area
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cdRwbuW
|
||||
forumTopicId: 301085
|
||||
localeTitle: Изменение переменной для определенной области
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда вы создаете переменные в <code>:root</code> они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента. </section>
|
||||
<section id='description'>
|
||||
Когда вы создаете переменные в <code>:root</code> они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените значение <code>--penguin-belly</code> на <code>white</code> в классе <code>penguin</code> . </section>
|
||||
<section id='instructions'>
|
||||
Измените значение <code>--penguin-belly</code> на <code>white</code> в классе <code>penguin</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Класс <code>penguin</code> должен переназначить переменную <code>--penguin-belly</code> на <code>white</code> .
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
|
||||
- text: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -239,14 +244,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".penguin {--penguin-belly: white;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Change the Color of Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cRkVmSm
|
||||
forumTopicId: 16775
|
||||
localeTitle: Изменение цвета текста
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив <code>style</code> вашего элемента <code>h2</code> . Свойство, отвечающее за цвет текста элемента, является свойством стиля <code>color</code> . Вот как вы можете задать цвет текста вашего элемента <code>h2</code> синим: <code><h2 style="color: blue;">CatPhotoApp</h2></code> Обратите внимание, что хорошей практикой является прекращение объявлений в <code>style</code> inline с помощью <code>;</code> , </section>
|
||||
<section id='description'>
|
||||
Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив <code>style</code> вашего элемента <code>h2</code> . Свойство, отвечающее за цвет текста элемента, является свойством стиля <code>color</code> . Вот как вы можете задать цвет текста вашего элемента <code>h2</code> синим: <code><h2 style="color: blue;">CatPhotoApp</h2></code> Обратите внимание, что хорошей практикой является прекращение объявлений в <code>style</code> inline с помощью <code>;</code> ,
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените свой стиль элемента <code>h2</code> так, чтобы его цвет текста был красным. </section>
|
||||
<section id='instructions'>
|
||||
Измените свой стиль элемента <code>h2</code> так, чтобы его цвет текста был красным.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h2</code> должен быть красным.
|
||||
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
|
||||
- text: 'Ваше объявление <code>style</code> должно заканчиваться на <code>;</code> ,'
|
||||
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
|
||||
- text: Your <code>h2</code> element should have a <code>style</code> declaration.
|
||||
testString: assert($("h2").attr('style'));
|
||||
- text: Your <code>h2</code> element should be red.
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: Your <code>style</code> declaration should end with a <code>;</code> .
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
|
||||
```
|
||||
|
||||
@ -68,14 +75,43 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Change the Font Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c3bvDc8
|
||||
forumTopicId: 16777
|
||||
localeTitle: Изменение размера шрифта элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Размер шрифта контролируется свойством CSS <code>font-size</code> , например: <blockquote> h1 { <br> font-size: 30 px; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Размер шрифта контролируется свойством CSS <code>font-size</code> , например: <blockquote> h1 { <br> font-size: 30 px; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Внутри тега <code><style></code>, который уже содержит класс <code>red-text</code>, создайте правило для <code>p</code> элементов и установите <code>font-size</code> 16 пикселей ( <code>16px</code> ). </section>
|
||||
<section id='instructions'>
|
||||
Внутри тега <code><style></code>, который уже содержит класс <code>red-text</code>, создайте правило для <code>p</code> элементов и установите <code>font-size</code> 16 пикселей ( <code>16px</code> ).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Между тегами <code>style</code> дайте <code>p</code> элементам <code>font-size</code> <code>16px</code> . Увеличение браузера и текста должно составлять 100%.
|
||||
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
|
||||
- text: Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.
|
||||
testString: assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
|
||||
```
|
||||
|
||||
@ -72,14 +77,52 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Create a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cQd27Hr
|
||||
forumTopicId: 301086
|
||||
localeTitle: Создание пользовательской переменной CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы создать переменную CSS, вам просто нужно дать ей <code>name</code> с <code>two dashes</code> перед ним и присвоить ему <code>value</code> подобное этому: <blockquote> - пингвин-кожа: серый; </blockquote> Это создаст переменную с именем <code>--penguin-skin</code> и присвоит ей значение <code>gray</code> . Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый. </section>
|
||||
<section id='description'>
|
||||
Чтобы создать переменную CSS, вам просто нужно дать ей <code>name</code> с <code>two dashes</code> перед ним и присвоить ему <code>value</code> подобное этому: <blockquote> - пингвин-кожа: серый; </blockquote> Это создаст переменную с именем <code>--penguin-skin</code> и присвоит ей значение <code>gray</code> . Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В классе <code>penguin</code> создайте переменное имя <code>--penguin-skin</code> и придайте ему значение <code>gray</code> </section>
|
||||
<section id='instructions'>
|
||||
В классе <code>penguin</code> создайте переменное имя <code>--penguin-skin</code> и придайте ему значение <code>gray</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>penguin</code> должен объявить переменную <code>--penguin-skin</code> и назначить ее <code>gray</code> .
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
|
||||
- text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -232,14 +237,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".penguin {--penguin-skin: gray;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Give a Background Color to a div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cdRKMCk
|
||||
forumTopicId: 18190
|
||||
localeTitle: Задайте цвет фона элементу div
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете установить цвет фона элемента при помощи свойства <code>background-color</code> . Например, если вы хотите, чтобы цвет фона элемента был <code>green</code> , вы должны поместить его в элемент <code>style</code> : <blockquote> .green-background { <br> background-color: green; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете установить цвет фона элемента при помощи свойства <code>background-color</code> . Например, если вы хотите, чтобы цвет фона элемента был <code>green</code> , вы должны поместить его в элемент <code>style</code> : <blockquote> .green-background { <br> background-color: green; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте класс с именем <code>silver-background</code> с <code>background-color</code> и присвойте ему значение <code>silver</code>. Назначьте этот класс вашему элементу <code>div</code> . </section>
|
||||
<section id='instructions'>
|
||||
Создайте класс с именем <code>silver-background</code> с <code>background-color</code> и присвойте ему значение <code>silver</code>. Назначьте этот класс вашему элементу <code>div</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Дайте вашему элементу <code>div</code> класс <code>silver-background</code> .
|
||||
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
|
||||
- text: Ваш элемент <code>div</code> должен иметь серебряный фон.
|
||||
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
|
||||
- text: Определите класс с именем <code>silver-background</code> в элементе <code>style</code> и присвойте значение <code>silver</code> свойству <code>background-color</code> .
|
||||
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
|
||||
- text: Give your <code>div</code> element the class <code>silver-background</code>.
|
||||
testString: assert($("div").hasClass("silver-background"));
|
||||
- text: Your <code>div</code> element should have a silver background.
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
|
||||
- text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.
|
||||
testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
|
||||
```
|
||||
|
||||
@ -97,14 +102,74 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Import a Google Font
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cM9MRsJ
|
||||
forumTopicId: 18200
|
||||
localeTitle: Импорт шрифта Google
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт <code>Lobster</code>. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом <code>style</code>): <code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code> Теперь вы можете использовать шрифт <code>Lobster</code> в своем CSS, используя <code>Lobster</code> как FAMILY_NAME, как в следующем примере: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code>, GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен. Это будет рассматриваться в следующей задаче. Имена шрифтов чувствительны к регистру и должны быть указаны в кавычках, если в имени есть пробел. Например, вам нужны кавычки, чтобы использовать шрифт <code>"Open Sans"</code>, но не для шрифта <code>Lobster</code>. </section>
|
||||
<section id='description'>
|
||||
В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт <code>Lobster</code>. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом <code>style</code>): <code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code> Теперь вы можете использовать шрифт <code>Lobster</code> в своем CSS, используя <code>Lobster</code> как FAMILY_NAME, как в следующем примере: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code>, GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен. Это будет рассматриваться в следующей задаче. Имена шрифтов чувствительны к регистру и должны быть указаны в кавычках, если в имени есть пробел. Например, вам нужны кавычки, чтобы использовать шрифт <code>"Open Sans"</code>, но не для шрифта <code>Lobster</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте правило CSS <code>font-family</code> шрифтов, которое использует шрифт <code>Lobster</code>, и убедитесь, что оно будет применено к вашему элементу <code>h2</code>. </section>
|
||||
<section id='instructions'>
|
||||
Создайте правило CSS <code>font-family</code> шрифтов, которое использует шрифт <code>Lobster</code>, и убедитесь, что оно будет применено к вашему элементу <code>h2</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Импортируйте шрифт <code>Lobster</code> .
|
||||
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
|
||||
- text: Ваш элемент <code>h2</code> должен использовать шрифт <code>Lobster</code> .
|
||||
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
|
||||
- text: С помощью селектора <code>h2</code> CSS измените шрифт.
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
|
||||
- text: Ваш элемент <code>p</code> все равно должен использовать шрифт <code>monospace</code> .
|
||||
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
|
||||
- text: Import the <code>Lobster</code> font.
|
||||
testString: assert(new RegExp("googleapis", "gi").test(code));
|
||||
- text: Your <code>h2</code> element should use the font <code>Lobster</code>.
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i));
|
||||
- text: Use an <code>h2</code> CSS selector to change the font.
|
||||
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));
|
||||
- text: Your <code>p</code> element should still use the font <code>monospace</code>.
|
||||
testString: assert($("p").css("font-family").match(/monospace/i));
|
||||
|
||||
```
|
||||
|
||||
@ -83,14 +88,59 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -3,22 +3,27 @@ id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Improve Compatibility with Browser Fallbacks
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
localeTitle: Улучшение совместимости с отказами браузера
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент. Вот почему важно обеспечить резервные копии браузера, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить резервную копию браузера, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде. </section>
|
||||
<section id='description'>
|
||||
При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент. Вот почему важно обеспечить резервные копии браузера, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить резервную копию браузера, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Похоже, что переменная используется для установки цвета фона класса <code>.red-box</code> . Давайте улучшим совместимость с браузером, добавив еще одно <code>background</code> объявление прямо перед существующим объявлением и установив его значение в красный цвет. </section>
|
||||
<section id='instructions'>
|
||||
Похоже, что переменная используется для установки цвета фона класса <code>.red-box</code> . Давайте улучшим совместимость с браузером, добавив еще одно <code>background</code> объявление прямо перед существующим объявлением и установив его значение в красный цвет.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>.red-box</code> должно включать <code>.red-box</code> с <code>background</code> установленным на красный, непосредственно перед существующей декларацией <code>background</code> .'
|
||||
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
|
||||
- text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
|
||||
testString: assert(code.replace(/\s/g, "").match(/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi));
|
||||
|
||||
```
|
||||
|
||||
@ -47,14 +52,24 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,35 +2,40 @@
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Inherit Styles from the Body Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c9bmdtR
|
||||
forumTopicId: 18204
|
||||
localeTitle: Наследовать стили из элемента тела
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теперь мы доказали, что каждая HTML-страница имеет элемент <code>body</code> , а ее элемент <code>body</code> также может быть связан с CSS. Помните, вы можете стилизовать свой элемент <code>body</code> же, как любой другой элемент HTML, и все ваши другие элементы наследуют стили вашего <code>body</code> . </section>
|
||||
<section id='description'>
|
||||
Теперь мы доказали, что каждая HTML-страница имеет элемент <code>body</code> , а ее элемент <code>body</code> также может быть связан с CSS. Помните, вы можете стилизовать свой элемент <code>body</code> же, как любой другой элемент HTML, и все ваши другие элементы наследуют стили вашего <code>body</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Во-первых, создайте элемент <code>h1</code> с текстом <code>Hello World</code> Затем дадим все элементы на вашей странице цвета <code>green</code> , добавив <code>color: green;</code> к объявлению стиля вашего <code>body</code> . Наконец, придайте вашему <code>body</code> элемент семейства шрифтов <code>monospace</code> , добавив <code>font-family: monospace;</code> к объявлению стиля вашего <code>body</code> . </section>
|
||||
<section id='instructions'>
|
||||
Во-первых, создайте элемент <code>h1</code> с текстом <code>Hello World</code> Затем дадим все элементы на вашей странице цвета <code>green</code> , добавив <code>color: green;</code> к объявлению стиля вашего <code>body</code> . Наконец, придайте вашему <code>body</code> элемент семейства шрифтов <code>monospace</code> , добавив <code>font-family: monospace;</code> к объявлению стиля вашего <code>body</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Создайте элемент <code>h1</code> .
|
||||
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь текст <code>Hello World</code> .
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>h1</code> имеет закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");'
|
||||
- text: Дайте элементу своего <code>body</code> свойство <code>color</code> <code>green</code> .
|
||||
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");'
|
||||
- text: Дайте вашему элементу <code>body</code> свойство <code>font-family</code> <code>monospace</code> .
|
||||
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен наследовать шрифт <code>monospace</code> от вашего элемента <code>body</code> .
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");'
|
||||
- text: Ваш элемент <code>h1</code> должен наследовать зеленый цвет от вашего элемента <code>body</code> .
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");'
|
||||
- text: Create an <code>h1</code> element.
|
||||
testString: assert(($("h1").length > 0));
|
||||
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
|
||||
- text: Make sure your <code>h1</code> element has a closing tag.
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
|
||||
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
|
||||
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)));
|
||||
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
|
||||
- text: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
|
||||
|
||||
```
|
||||
|
||||
@ -53,14 +58,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Make Circular Images with a border-radius
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MvrcB
|
||||
forumTopicId: 18229
|
||||
localeTitle: Создание изображения формы - круг с помощью border-radius
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">В дополнение к пикселям вы также можете задать <code>border-radius</code> в процентном соотношении. </section>
|
||||
<section id='description'>
|
||||
В дополнение к пикселям вы также можете задать <code>border-radius</code> в процентном соотношении.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте вашей фотографии кошки <code>border-radius</code> <code>50%</code> . </section>
|
||||
<section id='instructions'>
|
||||
Задайте вашей фотографии кошки <code>border-radius</code> <code>50%</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваше изображение должно иметь радиус границы <code>50%</code> , что делает его идеально круглым.'
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Ваше изображение должно иметь радиус границы <code>50%</code> , что делает его идеально круглым.");'
|
||||
- text: 'Обязательно используйте процентное объявление <code>50%</code>.'
|
||||
testString: 'assert(code.match(/50%/g), "Обязательно используйте процентное объявление <code>50%</code>.");'
|
||||
- text: Your image should have a border radius of <code>50%</code>, making it perfectly circular.
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
|
||||
- text: Be sure to use a percentage value of <code>50%</code>.
|
||||
testString: assert(code.match(/50%/g));
|
||||
|
||||
```
|
||||
|
||||
@ -95,14 +100,71 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,38 @@
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Override All Other Styles by using Important
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Переопределите все остальные стили, используя важные'
|
||||
videoUrl: https://scrimba.com/c/cm24rcp
|
||||
forumTopicId: 18249
|
||||
localeTitle: Переопределите все остальные стили, используя важные
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе <code>style</code> . Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать <code>!important</code> Давайте вернемся к нашему объявлению класса <code>pink-text</code> . Помните, что наш класс <code>pink-text</code> был переопределен последующими объявлениями классов, декларациями id и встроенными стилями. </section>
|
||||
<section id='description'>
|
||||
Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе <code>style</code> . Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать <code>!important</code> Давайте вернемся к нашему объявлению класса <code>pink-text</code> . Помните, что наш класс <code>pink-text</code> был переопределен последующими объявлениями классов, декларациями id и встроенными стилями.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Давайте добавим ключевое слово <code>!important</code> для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент <code>h1</code> будет розовым. Пример того, как это сделать: <code>color: red !important;</code> </section>
|
||||
<section id='instructions'>
|
||||
Давайте добавим ключевое слово <code>!important</code> для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент <code>h1</code> будет розовым. Пример того, как это сделать: <code>color: red !important;</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> .
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> .
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь идентификатор <code>orange-text</code> .
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: 'Ваш элемент <code>h1</code> должен иметь встроенный стиль <code>color: white</code> .'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color: white</code>.");'
|
||||
- text: 'В объявлении класса <code>pink-text</code> должно быть ключевое слово <code>!important</code> Important, чтобы переопределить все другие объявления.'
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
|
||||
- text: Ваш элемент <code>h1</code> должен быть розовым.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: Your <code>h1</code> element should have the inline style of <code>color: white</code>.
|
||||
testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
- text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
|
||||
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
|
||||
- text: Your <code>h1</code> element should be pink.
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
|
||||
```
|
||||
|
||||
@ -62,14 +67,29 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink !important;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,35 +2,40 @@
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Override Class Declarations by Styling ID Attributes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cRkpDhB
|
||||
forumTopicId: 18251
|
||||
localeTitle: Переопределить объявления классов с помощью атрибутов идентификатора стилизации
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с <code>pink-text</code> и <code>blue-text</code> и сделаем ваш элемент <code>h1</code> оранжевым, предоставив элементу <code>h1</code> идентификатор, а затем стиль этого идентификатора. </section>
|
||||
<section id='description'>
|
||||
Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с <code>pink-text</code> и <code>blue-text</code> и сделаем ваш элемент <code>h1</code> оранжевым, предоставив элементу <code>h1</code> идентификатор, а затем стиль этого идентификатора.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Дайте элементу <code>h1</code> атрибут <code>id</code> <code>orange-text</code> . Помните, что стили id выглядят следующим образом: <code><h1 id="orange-text"></code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> . Создайте объявление CSS для вашего <code>orange-text</code> в элементе <code>style</code> . Вот пример того, как это выглядит: <blockquote> # brown-text { <br> коричневый цвет; <br> } </blockquote> Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет. </section>
|
||||
<section id='instructions'>
|
||||
Дайте элементу <code>h1</code> атрибут <code>id</code> <code>orange-text</code> . Помните, что стили id выглядят следующим образом: <code><h1 id="orange-text"></code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> . Создайте объявление CSS для вашего <code>orange-text</code> в элементе <code>style</code> . Вот пример того, как это выглядит: <blockquote> # brown-text { <br> коричневый цвет; <br> } </blockquote> Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> .
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> .
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: Дайте элементу <code>h1</code> идентификатор <code>orange-text</code> .
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
|
||||
- text: Должен быть только один элемент <code>h1</code> .
|
||||
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
|
||||
- text: Создайте объявление CSS для вашего идентификатора <code>orange-text</code>
|
||||
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
|
||||
- text: Не <code>h1</code> никаких атрибутов <code>style</code> .
|
||||
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
|
||||
- text: Ваш элемент <code>h1</code> должен быть оранжевым.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: Give your <code>h1</code> element the id of <code>orange-text</code>.
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: There should be only one <code>h1</code> element.
|
||||
testString: assert(($("h1").length === 1));
|
||||
- text: Create a CSS declaration for your <code>orange-text</code> id
|
||||
testString: assert(code.match(/#orange-text\s*{/gi));
|
||||
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi));
|
||||
- text: Your <code>h1</code> element should be orange.
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
|
||||
|
||||
```
|
||||
|
||||
@ -61,14 +66,29 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,36 @@
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Override Class Declarations with Inline Styles
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cGJDRha
|
||||
forumTopicId: 18252
|
||||
localeTitle: Переопределить объявления классов со встроенными стилями
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Таким образом, мы доказали, что объявления id переопределяют объявления классов, независимо от того, где они объявлены в вашем элементе <code>style</code> CSS. Существуют и другие способы переопределения CSS. Вы помните встроенные стили? </section>
|
||||
<section id='description'>
|
||||
Таким образом, мы доказали, что объявления id переопределяют объявления классов, независимо от того, где они объявлены в вашем элементе <code>style</code> CSS. Существуют и другие способы переопределения CSS. Вы помните встроенные стили?
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>inline style</code> чтобы сделать наш элемент <code>h1</code> белым. Помните, что в стилях строк выглядит так: <code><h1 style="color: green;"></code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> . </section>
|
||||
<section id='instructions'>
|
||||
Используйте <code>inline style</code> чтобы сделать наш элемент <code>h1</code> белым. Помните, что в стилях строк выглядит так: <code><h1 style="color: green;"></code> Оставьте классы <code>blue-text</code> и <code>pink-text</code> на вашем элементе <code>h1</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> .
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> .
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь идентификатор <code>orange-text</code> .
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: Дайте вашему элементу <code>h1</code> встроенный стиль.
|
||||
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
|
||||
- text: Ваш элемент <code>h1</code> должен быть белым.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: Give your <code>h1</code> element an inline style.
|
||||
testString: assert(document.querySelector('h1[style]'));
|
||||
- text: Your <code>h1</code> element should be white.
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
|
||||
|
||||
```
|
||||
|
||||
@ -60,14 +65,29 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Override Styles in Subsequent CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cGJDQug
|
||||
forumTopicId: 18253
|
||||
localeTitle: Переопределить стили, записав их ниже в последующем CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Наш класс <code>pink-text</code> переопределил декларацию CSS в <code>body</code> элементе! Мы просто доказали, что наши классы переопределяют CSS элемента <code>body</code> . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс <code>pink-text</code> ? </section>
|
||||
<section id='description'>
|
||||
Наш класс <code>pink-text</code> переопределил декларацию CSS в <code>body</code> элементе! Мы просто доказали, что наши классы переопределяют CSS элемента <code>body</code> . Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш класс <code>pink-text</code> ?
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте дополнительный класс CSS <code>blue-text</code>, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса <code>pink-text</code>. Примените класс <code>blue-text</code> к вашему элементу <code>h1</code> в дополнение к вашему классу <code>pink-text</code>, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: <code>class="class1 class2"</code> Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений <code>class</code> в разделе <code><style></code> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку <code>.blue-text</code> объявлен вторым, он переопределяет атрибуты <code>.pink-text</code> </section>
|
||||
<section id='instructions'>
|
||||
Создайте дополнительный класс CSS <code>blue-text</code>, который задает элементу синий цвет. Убедитесь, что оно ниже вашего объявления класса <code>pink-text</code>. Примените класс <code>blue-text</code> к вашему элементу <code>h1</code> в дополнение к вашему классу <code>pink-text</code>, и давайте посмотрим, какой из них выиграет. Применение нескольких атрибутов класса к элементу HTML выполняется с пространством между ними следующим образом: <code>class="class1 class2"</code> Примечание. Не имеет значения, какой порядок классов указан в элементе HTML. Тем не менее, порядок объявлений <code>class</code> в разделе <code><style></code> - это то, что важно. Вторая декларация всегда будет иметь приоритет над первой. Поскольку <code>.blue-text</code> объявлен вторым, он переопределяет атрибуты <code>.pink-text</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> .
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен иметь <code>blue-text</code> .
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: И <code>blue-text</code> и <code>pink-text</code> должны принадлежать одному и тому же элементу <code>h1</code> .
|
||||
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
|
||||
- text: Ваш элемент <code>h1</code> должен быть синим.
|
||||
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.
|
||||
testString: assert($(".pink-text").hasClass("blue-text"));
|
||||
- text: Your <code>h1</code> element should be blue.
|
||||
testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
|
||||
|
||||
```
|
||||
|
||||
@ -52,14 +57,27 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Prioritize One Style Over Another
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cZ8wnHv
|
||||
forumTopicId: 18258
|
||||
localeTitle: Приоритет одного стиля над другим
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда ваши HTML-элементы получат несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент <code>h1</code> не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим класс, который делает текст розовым, а затем примените его к элементу. Будет ли наш класс <em>переопределять</em> <code>color: green;</code> элемента <code>body</code> <code>color: green;</code> Свойство CSS? </section>
|
||||
<section id='description'>
|
||||
Иногда ваши HTML-элементы получат несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент <code>h1</code> не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим класс, который делает текст розовым, а затем примените его к элементу. Будет ли наш класс <em>переопределять</em> <code>color: green;</code> элемента <code>body</code> <code>color: green;</code> Свойство CSS?
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте класс CSS, называемый <code>pink-text</code> который дает элементу цвет розовый. Дайте вашему элементу <code>h1</code> класс <code>pink-text</code> . </section>
|
||||
<section id='instructions'>
|
||||
Создайте класс CSS, называемый <code>pink-text</code> который дает элементу цвет розовый. Дайте вашему элементу <code>h1</code> класс <code>pink-text</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>h1</code> должен иметь класс <code>pink-text</code> .
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: Ваш <code><style></code> должен иметь класс CSS с <code>pink-text</code> который изменяет <code>color</code> .
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
|
||||
- text: Ваш элемент <code>h1</code> должен быть розовым.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.
|
||||
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
- text: Your <code>h1</code> element should be pink.
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
|
||||
```
|
||||
|
||||
@ -47,14 +52,23 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Set the Font Family of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c3bvpCg
|
||||
forumTopicId: 18278
|
||||
localeTitle: Изменение семейства шрифтов элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство <code>font-family</code> . Например, если вы хотите чтобы шрифтом элемента <code>h2</code> был шрифт под названием <code>sans-serif</code>, то вы должны использовать следующий CSS: <blockquote> h2 { <br> font-family: sans-serif; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство <code>font-family</code> . Например, если вы хотите чтобы шрифтом элемента <code>h2</code> был шрифт под названием <code>sans-serif</code>, то вы должны использовать следующий CSS: <blockquote> h2 { <br> font-family: sans-serif; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените стиль всех <code>p</code> элементов данной программы на <code>monospace</code>. </section>
|
||||
<section id='instructions'>
|
||||
Измените стиль всех <code>p</code> элементов данной программы на <code>monospace</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваши элементы <code>p</code> должны использовать шрифт <code>monospace</code> .
|
||||
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
|
||||
- text: Your <code>p</code> elements should use the font <code>monospace</code>.
|
||||
testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i));
|
||||
|
||||
```
|
||||
|
||||
@ -76,14 +81,54 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,28 @@
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: Set the id of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cN6MEc2
|
||||
forumTopicId: 18279
|
||||
localeTitle: Установите идентификатор элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В дополнение к классам каждый элемент HTML также может иметь атрибут <code>id</code> . Существует несколько преимуществ использования атрибутов <code>id</code>: вы можете использовать <code>id</code> для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты <code>id</code> должны быть уникальными. Браузеры не будут применять это, но это широко согласованная передовая практика. Поэтому, пожалуйста, не указывайте одного и того же значения для атрибута <code>id</code> . Вот пример того, как вы присваиваете элементу <code>h2</code> идентификатор <code>cat-photo-app</code> : <code><h2 id="cat-photo-app"></code> </section>
|
||||
<section id='description'>
|
||||
В дополнение к классам каждый элемент HTML также может иметь атрибут <code>id</code> . Существует несколько преимуществ использования атрибутов <code>id</code>: вы можете использовать <code>id</code> для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты <code>id</code> должны быть уникальными. Браузеры не будут применять это, но это широко согласованная передовая практика. Поэтому, пожалуйста, не указывайте одного и того же значения для атрибута <code>id</code> . Вот пример того, как вы присваиваете элементу <code>h2</code> идентификатор <code>cat-photo-app</code> : <code><h2 id="cat-photo-app"></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте элементу <code>form</code> идентификатор <code>cat-photo-form</code> . </section>
|
||||
<section id='instructions'>
|
||||
Задайте элементу <code>form</code> идентификатор <code>cat-photo-form</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Дайте элементу <code>form</code> идентификатор <code>cat-photo-form</code> .
|
||||
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
|
||||
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
|
||||
```
|
||||
|
||||
@ -97,14 +102,74 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: Size Your Images
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cM9MmCP
|
||||
forumTopicId: 18282
|
||||
localeTitle: Управляйте размером ваших изображений
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS имеет свойство под названием <code>width</code>, которое управляет шириной элемента. Как и в случае с шрифтами, мы будем использовать пиксели <code>px</code> (pixels), чтобы указать ширину изображения. Например, если мы хотим создать класс CSS с именем <code>larger-image</code>, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать: <blockquote> <style> <br> .larger-image { <br> width: 500px; <br> } <br> </ style> </blockquote></section>
|
||||
<section id='description'>
|
||||
CSS имеет свойство под названием <code>width</code>, которое управляет шириной элемента. Как и в случае с шрифтами, мы будем использовать пиксели <code>px</code> (pixels), чтобы указать ширину изображения. Например, если мы хотим создать класс CSS с именем <code>larger-image</code>, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать: <blockquote> <style> <br> .larger-image { <br> width: 500px; <br> } <br> </ style> </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображения, чтобы оно было всего 100 пикселей в ширину. <strong>Заметка</strong> <br> Из-за различий в реализации браузера, вам может потребоваться 100% масштабирование для прохождения тестов в этом задании. </section>
|
||||
<section id='instructions'>
|
||||
Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображения, чтобы оно было всего 100 пикселей в ширину. <strong>Заметка</strong> <br> Из-за различий в реализации браузера, вам может потребоваться 100% масштабирование для прохождения тестов в этом задании.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент <code>img</code> должен иметь класс <code>smaller-image</code> .
|
||||
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||
- text: Ваше изображение должно быть 100 пикселей в ширину. Увеличение браузера должно составлять 100%.
|
||||
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
|
||||
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
|
||||
testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
|
||||
- text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
|
||||
testString: assert($("img").width() === 100);
|
||||
|
||||
```
|
||||
|
||||
@ -84,14 +89,63 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user