fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@@ -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>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: Specify How Fonts Should Degrade
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Укажите какие шрифты должны использоваться'
|
||||
videoUrl: https://scrimba.com/c/cpVKBfQ
|
||||
forumTopicId: 18304
|
||||
localeTitle: Укажите какие шрифты должны использоваться
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Существует несколько стандартных шрифтов, доступных во всех браузерах. Эти типовые семейства шрифтов включают в себя <code>monospace</code> , <code>serif</code> и <code>sans-serif</code> Когда один шрифт недоступен, вы можете сказать браузеру «использовать другой шрифт. Например, если вы хотите, чтобы элемент использовал шрифт <code>Helvetica</code> , но когда <code>Helvetica</code> недоступен использовался шрифт <code>sans-serif</code>, вы можете указать следующее: <blockquote> p { <br> font-family: Helvetica, sans-serif; <br> } </blockquote> Имена общих имен шрифтов не чувствительны к регистру. Кроме того, им не нужны кавычки, потому что они являются ключевыми словами CSS. </section>
|
||||
<section id='description'>
|
||||
Существует несколько стандартных шрифтов, доступных во всех браузерах. Эти типовые семейства шрифтов включают в себя <code>monospace</code> , <code>serif</code> и <code>sans-serif</code> Когда один шрифт недоступен, вы можете сказать браузеру «использовать другой шрифт. Например, если вы хотите, чтобы элемент использовал шрифт <code>Helvetica</code> , но когда <code>Helvetica</code> недоступен использовался шрифт <code>sans-serif</code>, вы можете указать следующее: <blockquote> p { <br> font-family: Helvetica, sans-serif; <br> } </blockquote> Имена общих имен шрифтов не чувствительны к регистру. Кроме того, им не нужны кавычки, потому что они являются ключевыми словами CSS.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Для начала примените <code>monospace</code> шрифт к элементу <code>h2</code> , так чтобы он имел два шрифта - <code>Lobster</code> и <code>monospace</code> . В последнем вызове вы импортировали шрифт <code>Lobster</code> используя тег <code>link</code> . Теперь закомментируйте импорт шрифта <code>Lobster</code> (используя HTML-комментарии, о которых вы узнали ранее) из Google Fonts, чтобы он больше не был доступен. Обратите внимание, как ваш элемент <code>h2</code> может заменяться <code>monospace</code> шрифтом. <strong>Заметка</strong> <br> Если на вашем компьютере установлен шрифт Lobster, вы не увидите замены шрифта, потому что ваш браузер сможет найти этот шрифт. </section>
|
||||
<section id='instructions'>
|
||||
Для начала примените <code>monospace</code> шрифт к элементу <code>h2</code> , так чтобы он имел два шрифта - <code>Lobster</code> и <code>monospace</code> . В последнем вызове вы импортировали шрифт <code>Lobster</code> используя тег <code>link</code> . Теперь закомментируйте импорт шрифта <code>Lobster</code> (используя HTML-комментарии, о которых вы узнали ранее) из Google Fonts, чтобы он больше не был доступен. Обратите внимание, как ваш элемент <code>h2</code> может заменяться <code>monospace</code> шрифтом. <strong>Заметка</strong> <br> Если на вашем компьютере установлен шрифт Lobster, вы не увидите замены шрифта, потому что ваш браузер сможет найти этот шрифт.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш элемент h2 должен использовать шрифт <code>Lobster</code> .
|
||||
testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
|
||||
- text: 'Ваш h2-элемент должен деградировать до <code>monospace</code> шрифта, если <code>Lobster</code> недоступен.'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");'
|
||||
- text: 'Прокомментируйте свой звонок в Google для шрифта <code>Lobster</code> , поставив <code><!--</code> перед ним.'
|
||||
testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.");'
|
||||
- text: 'Обязательно закройте свой комментарий, добавив <code>--></code> .'
|
||||
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--></code>.");'
|
||||
- text: Your h2 element should use the font <code>Lobster</code>.
|
||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
|
||||
- text: Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.
|
||||
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
|
||||
- text: Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.
|
||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
|
||||
- text: Be sure to close your comment by adding <code>-->!</code>.
|
||||
testString: assert(new RegExp("[^fc]-->", "gi").test(code));
|
||||
|
||||
```
|
||||
|
||||
@@ -88,14 +93,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;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
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,15 +2,19 @@
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: Style Multiple Elements with a CSS Class
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cRkVbsQ
|
||||
forumTopicId: 18311
|
||||
localeTitle: Стиль нескольких элементов с классом CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Классы позволяют использовать одни и те же стили CSS для нескольких элементов HTML. Вы можете увидеть это, применив свой класс <code>red-text</code> к первому элементу <code>p</code> . </section>
|
||||
<section id='description'>
|
||||
Классы позволяют использовать одни и те же стили CSS для нескольких элементов HTML. Вы можете увидеть это, применив свой класс <code>red-text</code> к первому элементу <code>p</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -18,16 +22,16 @@ localeTitle: Стиль нескольких элементов с классо
|
||||
|
||||
```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>h2</code> должен иметь <code>red-text</code> .
|
||||
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
|
||||
- text: Ваш первый элемент <code>p</code> должен быть красным.
|
||||
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", "Your first <code>p</code> element should be red.");'
|
||||
- text: Ваш второй и третий элементы <code>p</code> не должны быть красными.
|
||||
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), "Your second and third <code>p</code> elements should not be red.");'
|
||||
- text: Ваш первый элемент <code>p</code> должен иметь <code>red-text</code> класса.
|
||||
testString: 'assert($("p:eq(0)").hasClass("red-text"), "Your first <code>p</code> element should have the class <code>red-text</code>.");'
|
||||
- text: Your <code>h2</code> element should be red.
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: Your <code>h2</code> element should have the class <code>red-text</code>.
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: Your first <code>p</code> element should be red.
|
||||
testString: assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");
|
||||
- text: Your second and third <code>p</code> elements should not be red.
|
||||
testString: assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));
|
||||
- text: Your first <code>p</code> element should have the class <code>red-text</code>.
|
||||
testString: assert($("p:eq(0)").hasClass("red-text"));
|
||||
|
||||
```
|
||||
|
||||
@@ -81,14 +85,49 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</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,27 +2,32 @@
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: Style the HTML Body Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cB77PHW
|
||||
forumTopicId: 18313
|
||||
localeTitle: Стиль HTML-элемента body
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Теперь давайте поговорим о наследовании в CSS. На каждой странице HTML есть элемент <code>body</code> . </section>
|
||||
<section id='description'>
|
||||
Теперь давайте поговорим о наследовании в CSS. На каждой странице HTML есть элемент <code>body</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Мы можем доказать, что элемент <code>body</code> присутствует здесь, задавая ему черный <code>background-color</code> . Мы можем сделать это, добавив следующее к нашему <code>style</code> : <blockquote> body { <br> background-color: black; <br> } </blockquote></section>
|
||||
<section id='instructions'>
|
||||
Мы можем доказать, что элемент <code>body</code> присутствует здесь, задавая ему черный <code>background-color</code> . Мы можем сделать это, добавив следующее к нашему <code>style</code> : <blockquote> body { <br> background-color: black; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Дайте вашему <code>body</code> элемент <code>background-color</code> черного цвета.
|
||||
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your <code>body</code> element the <code>background-color</code> of black.");'
|
||||
- text: 'Убедитесь, что правило CSS правильно отформатировано как с открывающимися, так и закрывающимися фигурными скобками.'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.");'
|
||||
- text: 'Убедитесь, что правило CSS заканчивается точкой с запятой.'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), "Make sure your CSS rule ends with a semi-colon.");'
|
||||
- text: Give your <code>body</code> element the <code>background-color</code> of black.
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: Make sure your CSS rule is properly formatted with both opening and closing curly brackets.
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
- text: Make sure your CSS rule ends with a semi-colon.
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
|
||||
```
|
||||
|
||||
@@ -42,14 +47,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Understand Absolute versus Relative Units
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cN66JSL
|
||||
forumTopicId: 301089
|
||||
localeTitle: Понимание разницы между абсолютными и относительными единицами
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В нескольких последних задачах вы задавали внутренние или внешние отступы элементов в пикселях ( <code>px</code> ). Пиксели - это тип единицы длины, что говорит браузеру о том, как размер или пространство элемента. В дополнение к <code>px</code> , CSS имеет несколько различных единиц измерения длины, которые вы можете использовать. Два основных типа единиц длины являются абсолютными и относительными. Абсолютные единицы привязываются к физическим единицам длины. Так , например, <code>in</code> и <code>mm</code> см дюймов и миллиметров, соответственно. Единицы абсолютной длины приближаются к фактическому измерению на экране, но есть некоторые различия в зависимости от разрешения экрана. Относительные единицы, такие как <code>em</code> или <code>rem</code> , относятся к другому значению длины. Например, <code>em</code> основывается на размере шрифта элемента. Если вы используете его для установки самого свойства <code>font-size</code> , оно относится к <code>font-size</code> родительского <code>font-size</code> . <strong>Заметка</strong> <br> Существует несколько относительных параметров единицы, которые привязаны к размеру окна просмотра. Они описаны в разделе «Ревизионные принципы веб-дизайна». </section>
|
||||
<section id='description'>
|
||||
В нескольких последних задачах вы задавали внутренние или внешние отступы элементов в пикселях ( <code>px</code> ). Пиксели - это тип единицы длины, что говорит браузеру о том, как размер или пространство элемента. В дополнение к <code>px</code> , CSS имеет несколько различных единиц измерения длины, которые вы можете использовать. Два основных типа единиц длины являются абсолютными и относительными. Абсолютные единицы привязываются к физическим единицам длины. Так , например, <code>in</code> и <code>mm</code> см дюймов и миллиметров, соответственно. Единицы абсолютной длины приближаются к фактическому измерению на экране, но есть некоторые различия в зависимости от разрешения экрана. Относительные единицы, такие как <code>em</code> или <code>rem</code> , относятся к другому значению длины. Например, <code>em</code> основывается на размере шрифта элемента. Если вы используете его для установки самого свойства <code>font-size</code> , оно относится к <code>font-size</code> родительского <code>font-size</code> . <strong>Заметка</strong> <br> Существует несколько относительных параметров единицы, которые привязаны к размеру окна просмотра. Они описаны в разделе «Ревизионные принципы веб-дизайна».
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>padding</code> к элементу с классом <code>red-box</code> и установите его значение в <code>1.5em</code> . </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство <code>padding</code> к элементу с классом <code>red-box</code> и установите его значение в <code>1.5em</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Класс <code>red-box</code> должен иметь свойство <code>padding</code> .
|
||||
testString: 'assert($(".red-box").css("padding-top") != "0px" && $(".red-box").css("padding-right") != "0px" && $(".red-box").css("padding-bottom") != "0px" && $(".red-box").css("padding-left") != "0px", "Your <code>red-box</code> class should have a <code>padding</code> property.");'
|
||||
- text: Ваш <code>red-box</code> класс должен дать элементы 1.5em из <code>padding</code> .
|
||||
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.");'
|
||||
- text: Your <code>red-box</code> class should have a <code>padding</code> property.
|
||||
testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px');
|
||||
- text: Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.
|
||||
testString: assert(code.match(/\.red-box\s*?{(\s|.)*?padding:\s*?1\.5em/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -72,14 +77,47 @@ 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: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: Use a CSS Class to Style an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c2MvDtV
|
||||
forumTopicId: 18337
|
||||
localeTitle: Используйте селектор класса в CSS для стилизации элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS: <blockquote> <style> <br> .blue-text { <br> color: blue; <br> } <br> </ style> </blockquote> Вы можете видеть, что мы создали класс CSS, который назвали <code>blue-text</code> в <code><style></code> . Вы можете применить класс к HTML-элементу следующим образом: <code><h2 class="blue-text">CatPhotoApp</h2></code> Обратите внимание, что в элементе <code>style</code> CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку. </section>
|
||||
<section id='description'>
|
||||
Классы - многоразовые стили, которые можно добавить к элементам HTML. Вот пример объявления класса CSS: <blockquote> <style> <br> .blue-text { <br> color: blue; <br> } <br> </ style> </blockquote> Вы можете видеть, что мы создали класс CSS, который назвали <code>blue-text</code> в <code><style></code> . Вы можете применить класс к HTML-элементу следующим образом: <code><h2 class="blue-text">CatPhotoApp</h2></code> Обратите внимание, что в элементе <code>style</code> CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Внутри элемента <code>style</code> измените селектор <code>h2</code> на <code>.red-text</code> и обновите значение цвета с <code>blue</code> на <code>red</code> . Задайте вашему элементу <code>h2</code> атрибут <code>class</code> со значением <code>'red-text'</code> . </section>
|
||||
<section id='instructions'>
|
||||
Внутри элемента <code>style</code> измените селектор <code>h2</code> на <code>.red-text</code> и обновите значение цвета с <code>blue</code> на <code>red</code> . Задайте вашему элементу <code>h2</code> атрибут <code>class</code> со значением <code>'red-text'</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>h2</code> должен иметь <code>red-text</code> .
|
||||
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
|
||||
- text: В вашей таблице стилей должен быть объявлен класс <code>red-text</code> и его цвет будет красным.
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.");'
|
||||
- text: 'Не используйте встроенные объявления стиля, такие как <code>style="color: red"</code> в вашем элементе <code>h2</code> .'
|
||||
testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like <code>style="color: red"</code> in your <code>h2</code> element.");'
|
||||
- text: Your <code>h2</code> element should be red.
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: Your <code>h2</code> element should have the class <code>red-text</code>.
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.
|
||||
testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
- text: Do not use inline style declarations like <code>style="color: red"</code> in your <code>h2</code> element.
|
||||
testString: assert($("h2").attr("style") === undefined);
|
||||
|
||||
```
|
||||
|
||||
@@ -78,14 +83,49 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">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,29 +2,34 @@
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: Use a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cM989ck
|
||||
forumTopicId: 301090
|
||||
localeTitle: Используйте настраиваемую переменную CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> После создания вашей переменной вы можете присвоить ее значение другим свойствам CSS, указав имя, которое вы ему дали. <blockquote> фон: var (- пингвин-скин); </blockquote> Это изменит фон любого элемента, на который вы нацеливаетесь, на серый, поскольку это значение переменной <code>--penguin-skin</code> . Обратите внимание: стили не будут применяться, если имена переменных не будут точно совпадать. </section>
|
||||
<section id='description'>
|
||||
После создания вашей переменной вы можете присвоить ее значение другим свойствам CSS, указав имя, которое вы ему дали. <blockquote> фон: var (- пингвин-скин); </blockquote> Это изменит фон любого элемента, на который вы нацеливаетесь, на серый, поскольку это значение переменной <code>--penguin-skin</code> . Обратите внимание: стили не будут применяться, если имена переменных не будут точно совпадать.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Примените переменную <code>--penguin-skin</code> к свойству <code>background</code> <code>--penguin-skin</code> <code>penguin-top</code> , <code>penguin-bottom</code> , <code>right-hand</code> и <code>left-hand</code> . </section>
|
||||
<section id='instructions'>
|
||||
Примените переменную <code>--penguin-skin</code> к свойству <code>background</code> <code>--penguin-skin</code> <code>penguin-top</code> , <code>penguin-bottom</code> , <code>right-hand</code> и <code>left-hand</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Примените переменную <code>--penguin-skin</code> к свойству <code>background</code> класса <code>penguin-top</code> .
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.");'
|
||||
- text: Примените переменную <code>--penguin-skin</code> к свойству <code>background</code> класса <code>penguin-bottom</code> .
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
|
||||
- text: Примените переменную <code>--penguin-skin</code> к свойству <code>background</code> для <code>right-hand</code> класса.
|
||||
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.");'
|
||||
- text: Примените переменную <code>--penguin-skin</code> к свойству <code>background</code> для <code>left-hand</code> класса.
|
||||
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.");'
|
||||
- text: Apply the <code>--penguin-skin</code> variable 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*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: Apply the <code>--penguin-skin</code> variable 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*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
|
||||
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.
|
||||
testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
|
||||
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.
|
||||
testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -251,14 +256,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: Use a media query to change a variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cWmL8UP
|
||||
forumTopicId: 301091
|
||||
localeTitle: Использование медиа-запроса для изменения переменной
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется. </section>
|
||||
<section id='description'>
|
||||
Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В <code>:root</code> селекторе <code>media query</code> измените его так: <code>--penguin-size</code> переопределяется и задается значение <code>200px</code> . Кроме того, переопределите <code>--penguin-skin</code> и придайте ему значение <code>black</code> . Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии. </section>
|
||||
<section id='instructions'>
|
||||
В <code>:root</code> селекторе <code>media query</code> измените его так: <code>--penguin-size</code> переопределяется и задается значение <code>200px</code> . Кроме того, переопределите <code>--penguin-skin</code> и придайте ему значение <code>black</code> . Затем измените размер предварительного просмотра, чтобы увидеть это изменение в действии.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>:root</code> должен переназначить переменную <code>--penguin-size</code> до <code>200px</code> .'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.");'
|
||||
- text: '<code>:root</code> должен переназначить переменную <code>--penguin-skin</code> на <code>black</code> .'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.");'
|
||||
- text: <code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.
|
||||
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));
|
||||
- text: <code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.
|
||||
testString: assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -267,14 +272,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = "@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,37 +2,42 @@
|
||||
id: bad87fee1348bd9aedf08719
|
||||
title: Use Abbreviated Hex Code
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cRkpKAm
|
||||
forumTopicId: 18338
|
||||
localeTitle: Используйте сокращенный шестнадцатеричный код
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Многие люди чувствуют себя в замешательстве, когда им предоставляется возможность использовать более 16 миллионов цветов. И очень сложно запомнить шестнадцатеричный код. К счастью, вы можете сократить его. Например, шестнадцатеричный код красного цвета <code>#FF0000</code> можно сократить до <code>#F00</code> . Эта сокращенная форма дает одну цифру для красного, одну цифру для зеленого и одну цифру для синего. Это уменьшает общее количество возможных цветов примерно до 4000. Но браузеры будут интерпретировать <code>#FF0000</code> и <code>#F00</code> как один и тот же цвет. </section>
|
||||
<section id='description'>
|
||||
Многие люди чувствуют себя в замешательстве, когда им предоставляется возможность использовать более 16 миллионов цветов. И очень сложно запомнить шестнадцатеричный код. К счастью, вы можете сократить его. Например, шестнадцатеричный код красного цвета <code>#FF0000</code> можно сократить до <code>#F00</code> . Эта сокращенная форма дает одну цифру для красного, одну цифру для зеленого и одну цифру для синего. Это уменьшает общее количество возможных цветов примерно до 4000. Но браузеры будут интерпретировать <code>#FF0000</code> и <code>#F00</code> как один и тот же цвет.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Вперед, попробуйте использовать сокращенные шестнадцатеричные коды, чтобы покрасить правильные элементы. <table class="table table-striped"><tbody><tr><th> цвет </th><th> Короткие шестнадцатеричные коды </th></tr><tr><td> Cyan </td><td> <code>#0FF</code> </td> </tr><tr><td> зеленый </td><td> <code>#0F0</code> </td> </tr><tr><td> красный </td><td> <code>#F00</code> </td> </tr><tr><td> фуксия </td><td> <code>#F0F</code> </td> </tr></tbody></table></section>
|
||||
<section id='instructions'>
|
||||
Вперед, попробуйте использовать сокращенные шестнадцатеричные коды, чтобы покрасить правильные элементы. <table class="table table-striped"><tbody><tr><th> цвет </th><th> Короткие шестнадцатеричные коды </th></tr><tr><td> Cyan </td><td> <code>#0FF</code> </td> </tr><tr><td> зеленый </td><td> <code>#0F0</code> </td> </tr><tr><td> красный </td><td> <code>#F00</code> </td> </tr><tr><td> фуксия </td><td> <code>#F0F</code> </td> </tr></tbody></table>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am red!</code> <code>color</code> красный.'
|
||||
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
|
||||
- text: 'Используйте сокращенный <code>hex code</code> для красного цвета вместо шестнадцатеричного кода <code>#FF0000</code> .'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am green!</code> <code>color</code> зеленый.'
|
||||
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
|
||||
- text: 'Используйте сокращенный <code>hex code</code> для зеленого цвета вместо шестнадцатеричного кода <code>#00FF00</code> .'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am cyan!</code> <code>color</code> голубой.'
|
||||
testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.");'
|
||||
- text: 'Используйте сокращенный <code>hex code</code> для цвета cyan вместо шестнадцатеричного кода <code>#00FFFF</code> .'
|
||||
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am fuchsia!</code> <code>color</code> фуксии.'
|
||||
testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.");'
|
||||
- text: 'Используйте сокращенный <code>hex code</code> для цветной фуксии вместо шестнадцатеричного кода <code>#FF00FF</code> .'
|
||||
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.");'
|
||||
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
- text: Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.
|
||||
testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
- text: Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.
|
||||
testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -71,14 +76,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #F00;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #F0F;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #0FF;
|
||||
}
|
||||
.green-text {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: Use an id Attribute to Style an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cakyZfL
|
||||
forumTopicId: 18339
|
||||
localeTitle: Использовать атрибут id для стилирования элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Одной из замечательных особенностей атрибутов <code>id</code> является то, что, подобно классам, вы можете создавать их с помощью CSS. Однако <code>id</code> не может использоваться повторно и должен применяться только к одному элементу. <code>id</code> также имеет более высокую специфичность (важность), чем класс, поэтому, если оба применяются к одному и тому же элементу и имеют конфликтующие стили, применяются стили <code>id</code> . Вот пример того, как вы можете взять свой элемент с атрибутом <code>id</code> <code>cat-photo-element</code> и присвоить ему зеленый цвет фона. В вашем элементе <code>style</code> : <blockquote> # cat-photo-element { <br> фон-цвет: зеленый; <br> } </blockquote> Обратите внимание, что внутри вашего элемента <code>style</code> вы всегда ссылаетесь на классы, помещая a <code>.</code> перед их именами. Вы всегда ссылаетесь на идентификаторы, помещая <code>#</code> перед их именами. </section>
|
||||
<section id='description'>
|
||||
Одной из замечательных особенностей атрибутов <code>id</code> является то, что, подобно классам, вы можете создавать их с помощью CSS. Однако <code>id</code> не может использоваться повторно и должен применяться только к одному элементу. <code>id</code> также имеет более высокую специфичность (важность), чем класс, поэтому, если оба применяются к одному и тому же элементу и имеют конфликтующие стили, применяются стили <code>id</code> . Вот пример того, как вы можете взять свой элемент с атрибутом <code>id</code> <code>cat-photo-element</code> и присвоить ему зеленый цвет фона. В вашем элементе <code>style</code> : <blockquote> # cat-photo-element { <br> фон-цвет: зеленый; <br> } </blockquote> Обратите внимание, что внутри вашего элемента <code>style</code> вы всегда ссылаетесь на классы, помещая a <code>.</code> перед их именами. Вы всегда ссылаетесь на идентификаторы, помещая <code>#</code> перед их именами.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Попробуйте дать свою форму, которая теперь имеет атрибут <code>id</code> <code>cat-photo-form</code> , зеленый фон. </section>
|
||||
<section id='instructions'>
|
||||
Попробуйте дать свою форму, которая теперь имеет атрибут <code>id</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: Элемент <code>form</code> должен иметь зеленый <code>background-color</code> .
|
||||
testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", "Your <code>form</code> element should have the <code>background-color</code> of green.");'
|
||||
- text: 'Убедитесь, что ваш элемент <code>form</code> имеет атрибут <code>id</code> .'
|
||||
testString: 'assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, "Make sure your <code>form</code> element has an <code>id</code> attribute.");'
|
||||
- text: Не придайте вашей <code>form</code> никаких атрибутов <code>class</code> или <code>style</code> .
|
||||
testString: 'assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.");'
|
||||
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
- text: Your <code>form</code> element should have the <code>background-color</code> of green.
|
||||
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
|
||||
- text: Make sure your <code>form</code> element has an <code>id</code> attribute.
|
||||
testString: assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0);
|
||||
- text: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.
|
||||
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -103,14 +108,78 @@ 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;
|
||||
}
|
||||
|
||||
#cat-photo-form {
|
||||
background-color: green;
|
||||
}
|
||||
</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,27 +2,32 @@
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: Use Attribute Selectors to Style Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cnpymfJ
|
||||
forumTopicId: 301092
|
||||
localeTitle: Используйте атрибуты селекторов для стилизации элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы <code>id</code> атрибуты <code>id</code> или <code>class</code> к элементам, которые вы хотите специально создать. Они известны как идентификаторы и селектора классов. Существуют и другие селектора CSS, которые вы можете использовать для выбора пользовательских групп элементов в стиле. Давайте снова рассмотрим CatPhotoApp, чтобы использовать CSS Selectors. Для этой задачи вы будете использовать селектор атрибутов <code>[attr=value]</code> , чтобы установить чекбоксы в CatPhotoApp. Этот селектор соответствует элементам стилей с определенным значением атрибута. Например, приведенный ниже код изменяет поля всех элементов с <code>type</code> атрибута и соответствующим значением <code>radio</code> : <blockquote> [type = 'radio'] { <br> margin: 20px 0px 20px 0px; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Вы <code>id</code> атрибуты <code>id</code> или <code>class</code> к элементам, которые вы хотите специально создать. Они известны как идентификаторы и селектора классов. Существуют и другие селектора CSS, которые вы можете использовать для выбора пользовательских групп элементов в стиле. Давайте снова рассмотрим CatPhotoApp, чтобы использовать CSS Selectors. Для этой задачи вы будете использовать селектор атрибутов <code>[attr=value]</code> , чтобы установить чекбоксы в CatPhotoApp. Этот селектор соответствует элементам стилей с определенным значением атрибута. Например, приведенный ниже код изменяет поля всех элементов с <code>type</code> атрибута и соответствующим значением <code>radio</code> : <blockquote> [type = 'radio'] { <br> margin: 20px 0px 20px 0px; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используя селектор атрибутов <code>type</code>, присвойте чекбоксам в CatPhotoApp верхний марджин 10px и нижний марджин 15px. </section>
|
||||
<section id='instructions'>
|
||||
Используя селектор атрибутов <code>type</code>, присвойте чекбоксам в CatPhotoApp верхний марджин 10px и нижний марджин 15px.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Селектор атрибутов <code>type</code> должен использоваться для выбора флажков.
|
||||
testString: 'assert(code.match(/<style>[\s\S]*?\[type=("|")checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),"The <code>type</code> attribute selector should be used to select the checkboxes.");'
|
||||
- text: Верхние поля флажков должны быть 10 пикселей.
|
||||
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginTop") === "10px") {count++;}});return (count===3)}()),"The top margins of the checkboxes should be 10px.");'
|
||||
- text: Нижние поля флажков должны быть 15px.
|
||||
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginBottom") === "15px") {count++;}});return (count===3)}()),"The bottom margins of the checkboxes should be 15px.");'
|
||||
- text: The <code>type</code> attribute selector should be used to select the checkboxes.
|
||||
testString: assert(code.match(/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi));
|
||||
- text: The top margins of the checkboxes should be 10px.
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()));
|
||||
- text: The bottom margins of the checkboxes should be 15px.
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()));
|
||||
|
||||
```
|
||||
|
||||
@@ -101,14 +106,78 @@ 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;
|
||||
}
|
||||
[type='checkbox'] {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</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,29 +2,36 @@
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: Use Clockwise Notation to Specify the Margin of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Используйте обозначение по часовой стрелке, чтобы указать маржу элемента'
|
||||
videoUrl: https://scrimba.com/c/cnpybAd
|
||||
forumTopicId: 18345
|
||||
localeTitle: Используйте обозначение по часовой стрелке, чтобы указать маржу элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Давайте попробуем это снова, но с <code>margin</code> в этот раз. Вместо того, чтобы указывать свойства <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> отдельно, вы можете указать их все в одной строке, например: <code>margin: 10px 20px 10px 20px;</code> Эти четыре значения работают как часы: верхний, правый, нижний, левый и будут давать тот же результат, что и при использовании отдельных margin свойств. </section>
|
||||
<section id='description'>
|
||||
Давайте попробуем это снова, но с <code>margin</code> в этот раз. Вместо того, чтобы указывать свойства <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> отдельно, вы можете указать их все в одной строке, например: <code>margin: 10px 20px 10px 20px;</code> Эти четыре значения работают как часы: верхний, правый, нижний, левый и будут давать тот же результат, что и при использовании отдельных margin свойств.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>Clockwise Notation</code> чтобы дать элементу класса <code>blue-box</code> margin <code>40px</code> на его верхней и левой сторонах, и только 20 <code>20px</code> на нижней и правой стороне. </section>
|
||||
<section id='instructions'>
|
||||
Используйте <code>Clockwise Notation</code> чтобы дать элементу класса <code>blue-box</code> margin <code>40px</code> на его верхней и левой сторонах, и только 20 <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");
|
||||
- text: You should use the clockwise notation to set the margin of <code>blue-box</code> class.
|
||||
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
|
||||
|
||||
```
|
||||
|
||||
@@ -76,14 +83,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: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin: 40px 20px 20px 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,31 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: Use Clockwise Notation to Specify the Padding of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cB7mBS9
|
||||
forumTopicId: 18346
|
||||
localeTitle: Использовать по часовой стрелке для указания заполнения элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вместо того, чтобы отдельно указывать свойства <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> , вы можете указать их все в одной строке, например: <code>padding: 10px 20px 10px 20px;</code> Эти четыре значения работают как часы: верх, правый, нижний, левый и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны. </section>
|
||||
<section id='description'>
|
||||
Вместо того, чтобы отдельно указывать свойства <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> , вы можете указать их все в одной строке, например: <code>padding: 10px 20px 10px 20px;</code> Эти четыре значения работают как часы: верх, правый, нижний, левый и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте «По часовой стрелке», чтобы присвоить классу «.blue-box» <code>padding</code> <code>40px</code> на верхней и левой стороне, но только 20 <code>20px</code> на нижней и правой стороне. </section>
|
||||
<section id='instructions'>
|
||||
Используйте «По часовой стрелке», чтобы присвоить классу «.blue-box» <code>padding</code> <code>40px</code> на верхней и левой стороне, но только 20 <code>20px</code> на нижней и правой стороне.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш <code>blue-box</code> класс должен дать верхнюю часть элементов <code>40px</code> из <code>padding</code> .
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: Ваш класс с <code>blue-box</code> должен давать право на элементы <code>20px</code> <code>padding</code> .
|
||||
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: Ваш класс <code>blue-box</code> должен дать основание элементов <code>20px</code> <code>padding</code> .
|
||||
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: Ваш <code>blue-box</code> класс должен дать слева от элементов <code>40px</code> из <code>padding</code> .
|
||||
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: 'Вы должны использовать обозначение по часовой стрелке, чтобы установить заполнение класса <code>blue-box</code> .'
|
||||
testString: 'assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), "You should use the clockwise notation to set the padding of <code>blue-box</code> class.");'
|
||||
- text: Your <code>blue-box</code> class should give the top of 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 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 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 elements <code>40px</code> of <code>padding</code>.
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
- text: You should use the clockwise notation to set the padding of <code>blue-box</code> class.
|
||||
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
|
||||
|
||||
```
|
||||
|
||||
@@ -78,14 +83,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: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 40px 20px 20px 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,32 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08805
|
||||
title: Use CSS Selectors to Style Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cJKMBT2
|
||||
forumTopicId: 18349
|
||||
localeTitle: Используйте селекторы CSS для изменения стилизации элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> В CSS есть сотни <code>properties</code> CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <code><h2 style="color: red;">CatPhotoApp</h2></code> , вы стали стилизовать этот отдельный элемент <code>h2</code> со <code>inline CSS</code> , который обозначает <code>Cascading Style Sheets</code> . Это один из способов указать стиль элемента, но есть лучший способ применить <code>CSS</code> . В верхней части кода создайте блок <code>style</code> следующим образом: <blockquote> <style> <br> </ style> </blockquote> Внутри этого блока стиля вы можете создать <code>CSS selector</code> для всех элементов <code>h2</code> . Например, если вы хотите, чтобы все элементы <code>h2</code> были красными, вы можете добавить правило CSS, которое выглядит так: <blockquote> <style> <br> h2 {color: red;} <br> </ style> </blockquote> Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( <code>{</code> и <code>}</code> ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора. </section>
|
||||
<section id='description'>
|
||||
В CSS есть сотни <code>properties</code> CSS, которые вы можете использовать, чтобы изменить способ поиска элемента на вашей странице. Когда вы ввели <code><h2 style="color: red;">CatPhotoApp</h2></code> , вы стали стилизовать этот отдельный элемент <code>h2</code> со <code>inline CSS</code> , который обозначает <code>Cascading Style Sheets</code> . Это один из способов указать стиль элемента, но есть лучший способ применить <code>CSS</code> . В верхней части кода создайте блок <code>style</code> следующим образом: <blockquote> <style> <br> </ style> </blockquote> Внутри этого блока стиля вы можете создать <code>CSS selector</code> для всех элементов <code>h2</code> . Например, если вы хотите, чтобы все элементы <code>h2</code> были красными, вы можете добавить правило CSS, которое выглядит так: <blockquote> <style> <br> h2 {color: red;} <br> </ style> </blockquote> Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( <code>{</code> и <code>}</code> ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Удалите атрибут стиля элемента <code>h2</code> и вместо этого создайте блок <code>style</code> CSS. Добавьте необходимые правила CSS, чтобы все элементы <code>h2</code> стали синими. </section>
|
||||
<section id='instructions'>
|
||||
Удалите атрибут стиля элемента <code>h2</code> и вместо этого создайте блок <code>style</code> CSS. Добавьте необходимые правила CSS, чтобы все элементы <code>h2</code> стали синими.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Удалите атрибут стиля из вашего элемента <code>h2</code> .
|
||||
testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your <code>h2</code> element.");'
|
||||
- text: Создайте элемент <code>style</code> .
|
||||
testString: 'assert($("style") && $("style").length > 1, "Create a <code>style</code> element.");'
|
||||
- text: Ваш элемент <code>h2</code> должен быть синим.
|
||||
testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your <code>h2</code> element should be blue.");'
|
||||
- text: 'Убедитесь, что объявление вашей таблицы стилей <code>h2</code> действительно с точкой с запятой и закрывающей скобкой.'
|
||||
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.");'
|
||||
- text: 'Убедитесь, что все ваши элементы <code>style</code> действительны и имеют закрывающий тег.'
|
||||
testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length, "Make sure all your <code>style</code> elements are valid and have a closing tag.");'
|
||||
- text: Remove the style attribute from your <code>h2</code> element.
|
||||
testString: assert(!$("h2").attr("style"));
|
||||
- text: Create a <code>style</code> element.
|
||||
testString: assert($("style") && $("style").length >= 1);
|
||||
- text: Your <code>h2</code> element should be blue.
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
|
||||
- text: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.
|
||||
testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
- text: Make sure all your <code>style</code> elements are valid and have a closing tag.
|
||||
testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length);
|
||||
|
||||
```
|
||||
|
||||
@@ -75,14 +79,48 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h2>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,27 +2,32 @@
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: Use CSS Variables to change several elements at once
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c6bDECm
|
||||
forumTopicId: 301093
|
||||
localeTitle: Используйте переменные CSS для изменения сразу нескольких элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <dfn>Переменные CSS</dfn> - это мощный способ изменить сразу несколько свойств стиля CSS, изменив только одно значение. Следуйте инструкциям ниже, чтобы увидеть, как изменение только трех значений может изменить стиль многих элементов. </section>
|
||||
<section id='description'>
|
||||
<dfn>Переменные CSS</dfn> - это мощный способ изменить сразу несколько свойств стиля CSS, изменив только одно значение. Следуйте инструкциям ниже, чтобы увидеть, как изменение только трех значений может изменить стиль многих элементов.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В классе <code>penguin</code> измените значение <code>black</code> на <code>gray</code> , значение <code>gray</code> на <code>white</code> , а <code>yellow</code> на <code>orange</code> . </section>
|
||||
<section id='instructions'>
|
||||
В классе <code>penguin</code> измените значение <code>black</code> на <code>gray</code> , значение <code>gray</code> на <code>white</code> , а <code>yellow</code> на <code>orange</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> должен объявить переменную <code>--penguin-belly</code> и назначить ее <code>white</code> .
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.");'
|
||||
- text: класс <code>penguin</code> должен объявить переменную <code>--penguin-beak</code> и присвоить ее <code>orange</code> .
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</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));
|
||||
- text: <code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
|
||||
- text: <code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -239,14 +244,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: Use Hex Code for Specific Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/c8W9mHM
|
||||
forumTopicId: 18350
|
||||
localeTitle: Использовать шестнадцатеричный код для конкретных цветов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Знаете ли вы, что существуют другие способы представления цветов в CSS? Один из этих способов называется шестнадцатеричным кодом или <code>hex code</code> для краткости. Обычно мы используем <code>decimals</code> или базовые 10 чисел, которые используют символы от 0 до 9 для каждой цифры. <code>Hexadecimals</code> (или <code>hex</code> ) - это базовые 16 чисел. Это означает, что он использует шестнадцать различных символов. Как десятичные знаки, символы 0-9 представляют значения от нуля до девяти. Затем A, B, C, D, E, F представляют значения от десяти до пятнадцати. В целом, от 0 до F может представлять цифру в <code>hexadecimal</code> форме, что дает нам 16 возможных значений. Здесь вы можете найти более подробную информацию о <a target="_blank" href="https://en.wikipedia.org/wiki/Hexadecimal">шестнадцатеричных числах</a> . В CSS мы можем использовать 6 шестнадцатеричных цифр для представления цветов, по два для красных (R), зеленых (G) и синих (B) компонентов. Например, <code>#000000</code> является черным и также является наименьшим возможным значением. Здесь вы можете найти более подробную информацию о <a target="_blank" href="https://en.wikipedia.org/wiki/RGB_color_model">цветовой системе RGB</a> . <blockquote> body { <br> цвет: # 000000; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Знаете ли вы, что существуют другие способы представления цветов в CSS? Один из этих способов называется шестнадцатеричным кодом или <code>hex code</code> для краткости. Обычно мы используем <code>decimals</code> или базовые 10 чисел, которые используют символы от 0 до 9 для каждой цифры. <code>Hexadecimals</code> (или <code>hex</code> ) - это базовые 16 чисел. Это означает, что он использует шестнадцать различных символов. Как десятичные знаки, символы 0-9 представляют значения от нуля до девяти. Затем A, B, C, D, E, F представляют значения от десяти до пятнадцати. В целом, от 0 до F может представлять цифру в <code>hexadecimal</code> форме, что дает нам 16 возможных значений. Здесь вы можете найти более подробную информацию о <a target="_blank" href="https://en.wikipedia.org/wiki/Hexadecimal">шестнадцатеричных числах</a> . В CSS мы можем использовать 6 шестнадцатеричных цифр для представления цветов, по два для красных (R), зеленых (G) и синих (B) компонентов. Например, <code>#000000</code> является черным и также является наименьшим возможным значением. Здесь вы можете найти более подробную информацию о <a target="_blank" href="https://en.wikipedia.org/wiki/RGB_color_model">цветовой системе RGB</a> . <blockquote> body { <br> цвет: # 000000; <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Замените слово <code>black</code> в фоновом цвете элемента <code>body</code> с его <code>hex code</code> , <code>#000000</code> . </section>
|
||||
<section id='instructions'>
|
||||
Замените слово <code>black</code> в фоновом цвете элемента <code>body</code> с его <code>hex code</code> , <code>#000000</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Дайте вашему <code>body</code> элемент фона черного цвета.
|
||||
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your <code>body</code> element the background-color of black.");'
|
||||
- text: Используйте <code>hex code</code> для черного цвета вместо слова <code>black</code> .
|
||||
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi), "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.");'
|
||||
- text: Give your <code>body</code> element the background-color of black.
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: Use the <code>hex code</code> for the color black instead of the word <code>black</code>.
|
||||
testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -42,14 +47,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,37 +2,42 @@
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: Use Hex Code to Mix Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cK89PhP
|
||||
forumTopicId: 18359
|
||||
localeTitle: Используйте шестнадцатеричный код для смешивания цветов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Для представления цвета шестнадцатеричные коды используют 6 шестнадцатеричных цифр, по две для красного (R), зеленого (G) и синего (B) компонентов. Для этих трех чистых цветов (красный, зеленый и синий) мы можем варьировать количество каждого из них, чтобы создать более 16 миллионов других цветов! Например, оранжевый чистый красный, смешанный с каким-то зеленым, и не синий. В шестнадцатеричном коде это означает, что это <code>#FFA500</code> . Цифра <code>0</code> является наименьшим числом в шестнадцатеричном коде и представляет полное отсутствие цвета. Цифра <code>F</code> является наивысшим числом в шестнадцатеричном коде и представляет максимально возможную яркость. </section>
|
||||
<section id='description'>
|
||||
Для представления цвета шестнадцатеричные коды используют 6 шестнадцатеричных цифр, по две для красного (R), зеленого (G) и синего (B) компонентов. Для этих трех чистых цветов (красный, зеленый и синий) мы можем варьировать количество каждого из них, чтобы создать более 16 миллионов других цветов! Например, оранжевый чистый красный, смешанный с каким-то зеленым, и не синий. В шестнадцатеричном коде это означает, что это <code>#FFA500</code> . Цифра <code>0</code> является наименьшим числом в шестнадцатеричном коде и представляет полное отсутствие цвета. Цифра <code>F</code> является наивысшим числом в шестнадцатеричном коде и представляет максимально возможную яркость.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Замените цветные слова в нашем элементе <code>style</code> на их правильные шестнадцатеричные коды. <table class="table table-striped"><tbody><tr><th> цвет </th><th> Шестнадцатеричный код </th></tr><tr><td> Dodger Blue </td><td> <code>#1E90FF</code> </td> </tr><tr><td> зеленый </td><td> <code>#00FF00</code> </td> </tr><tr><td> оранжевый </td><td> <code>#FFA500</code> </td> </tr><tr><td> красный </td><td> <code>#FF0000</code> </td> </tr></tbody></table></section>
|
||||
<section id='instructions'>
|
||||
Замените цветные слова в нашем элементе <code>style</code> на их правильные шестнадцатеричные коды. <table class="table table-striped"><tbody><tr><th> цвет </th><th> Шестнадцатеричный код </th></tr><tr><td> Dodger Blue </td><td> <code>#1E90FF</code> </td> </tr><tr><td> зеленый </td><td> <code>#00FF00</code> </td> </tr><tr><td> оранжевый </td><td> <code>#FFA500</code> </td> </tr><tr><td> красный </td><td> <code>#FF0000</code> </td> </tr></tbody></table>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Дайте вашему текстовому <code>h1</code> элементу <code>I am red!</code> <code>color</code> красный.'
|
||||
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
|
||||
- text: Используйте <code>hex code</code> для красного цвета вместо слова <code>red</code> .
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.");'
|
||||
- text: 'Дайте вашему текстовому <code>h1</code> элементу <code>I am green!</code> <code>color</code> зеленый.'
|
||||
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
|
||||
- text: Используйте <code>hex code</code> для зеленого цвета вместо слова <code>green</code> .
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.");'
|
||||
- text: 'Дайте вашему текстовому <code>h1</code> элементу <code>I am dodger blue!</code> <code>color</code> утка синий.'
|
||||
testString: 'assert($(".dodger-blue-text").css("color") === "rgb(30, 144, 255)", "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.");'
|
||||
- text: Используйте <code>hex code</code> для синтаксиса цвета вместо слова <code>dodgerblue</code> .
|
||||
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am orange!</code> <code>color</code> оранжевый.'
|
||||
testString: 'assert($(".orange-text").css("color") === "rgb(255, 165, 0)", "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.");'
|
||||
- text: Используйте <code>hex code</code> для оранжевого цвета вместо слова « <code>orange</code> .
|
||||
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.");'
|
||||
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: Use the <code>hex code</code> for the color red instead of the word <code>red</code>.
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: Use the <code>hex code</code> for the color green instead of the word <code>green</code>.
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.
|
||||
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
- text: Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.
|
||||
testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
- text: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.
|
||||
testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -71,14 +76,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #FF0000;
|
||||
}
|
||||
.green-text {
|
||||
color: #00FF00;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: #1E90FF;
|
||||
}
|
||||
.orange-text {
|
||||
color: #FFA500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,37 +2,42 @@
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: Use RGB to Mix Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cm24JU6
|
||||
forumTopicId: 18368
|
||||
localeTitle: Используйте RGB для смешивания цветов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Как и с шестнадцатеричным кодом, вы можете смешивать цвета в RGB, используя комбинации разных значений. </section>
|
||||
<section id='description'>
|
||||
Как и с шестнадцатеричным кодом, вы можете смешивать цвета в RGB, используя комбинации разных значений.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Замените шестнадцатеричные коды в нашем элементе <code>style</code> с их правильными значениями RGB. <table class="table table-striped"><tbody><tr><th> цвет </th><th> RGB </th></tr><tr><td> синий </td><td> <code>rgb(0, 0, 255)</code> </td> </tr><tr><td> красный </td><td> <code>rgb(255, 0, 0)</code> </td> </tr><tr><td> орхидея </td><td> <code>rgb(218, 112, 214)</code> </td> </tr><tr><td> охра </td><td> <code>rgb(160, 82, 45)</code> </td> </tr></tbody></table></section>
|
||||
<section id='instructions'>
|
||||
Замените шестнадцатеричные коды в нашем элементе <code>style</code> с их правильными значениями RGB. <table class="table table-striped"><tbody><tr><th> цвет </th><th> RGB </th></tr><tr><td> синий </td><td> <code>rgb(0, 0, 255)</code> </td> </tr><tr><td> красный </td><td> <code>rgb(255, 0, 0)</code> </td> </tr><tr><td> орхидея </td><td> <code>rgb(218, 112, 214)</code> </td> </tr><tr><td> охра </td><td> <code>rgb(160, 82, 45)</code> </td> </tr></tbody></table>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am red!</code> <code>color</code> красный.'
|
||||
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
|
||||
- text: Используйте <code>rgb</code> для красного цвета.
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color red.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am orchid!</code> <code>color</code> орхидеи.'
|
||||
testString: 'assert($(".orchid-text").css("color") === "rgb(218, 112, 214)", "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.");'
|
||||
- text: Используйте <code>rgb</code> для цветной орхидеи.
|
||||
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color orchid.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am blue!</code> <code>color</code> синий.'
|
||||
testString: 'assert($(".blue-text").css("color") === "rgb(0, 0, 255)", "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.");'
|
||||
- text: Используйте <code>rgb</code> для синего цвета.
|
||||
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color blue.");'
|
||||
- text: 'Дайте вашему элементу <code>h1</code> текст, который <code>I am sienna!</code> <code>color</code> сиена.'
|
||||
testString: 'assert($(".sienna-text").css("color") === "rgb(160, 82, 45)", "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.");'
|
||||
- text: Используйте <code>rgb</code> для цвета sienna.
|
||||
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color sienna.");'
|
||||
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: Use <code>rgb</code> for the color red.
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
- text: Use <code>rgb</code> for the color orchid.
|
||||
testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
- text: Use <code>rgb</code> for the color blue.
|
||||
testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
- text: Use <code>rgb</code> for the color sienna.
|
||||
testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -71,14 +76,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.orchid-text {
|
||||
color: rgb(218, 112, 214);
|
||||
}
|
||||
.sienna-text {
|
||||
color: rgb(160, 82, 45);
|
||||
}
|
||||
.blue-text {
|
||||
color:rgb(0, 0, 255);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: Use RGB values to Color Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/c/cRkp2fr
|
||||
forumTopicId: 18369
|
||||
localeTitle: Используйте значения RGB для цветных элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Еще один способ отображения цветов в CSS - использование значений <code>RGB</code> . Значение RGB для черного выглядит так: <code>rgb(0, 0, 0)</code> Значение RGB для белого выглядит следующим образом: <code>rgb(255, 255, 255)</code> Вместо того, чтобы использовать шесть шестнадцатеричных цифр, например, с шестнадцатеричным кодом, с <code>RGB</code> вы укажете яркость каждого цвета числом от 0 до 255. Если вы правильно посчитаете, две цифры для одного цвета равные 16 на 16, что дает нам всего 256 значений. Таким образом, <code>RGB</code> , начинает отсчет с нуля, и имеет то же количество возможных значений, что и шестнадцатеричный код. Вот пример того, как изменить фон тела на оранжевый, используя его код RGB. <blockquote> body { <br> background-color: rgb (255, 165, 0); <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
Еще один способ отображения цветов в CSS - использование значений <code>RGB</code> . Значение RGB для черного выглядит так: <code>rgb(0, 0, 0)</code> Значение RGB для белого выглядит следующим образом: <code>rgb(255, 255, 255)</code> Вместо того, чтобы использовать шесть шестнадцатеричных цифр, например, с шестнадцатеричным кодом, с <code>RGB</code> вы укажете яркость каждого цвета числом от 0 до 255. Если вы правильно посчитаете, две цифры для одного цвета равные 16 на 16, что дает нам всего 256 значений. Таким образом, <code>RGB</code> , начинает отсчет с нуля, и имеет то же количество возможных значений, что и шестнадцатеричный код. Вот пример того, как изменить фон тела на оранжевый, используя его код RGB. <blockquote> body { <br> background-color: rgb (255, 165, 0); <br> } </blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Давайте заменим шестнадцатеричный код в цвете фона нашего <code>body</code> на значение RGB для черного: <code>rgb(0, 0, 0)</code> </section>
|
||||
<section id='instructions'>
|
||||
Давайте заменим шестнадцатеричный код в цвете фона нашего <code>body</code> на значение RGB для черного: <code>rgb(0, 0, 0)</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент вашего <code>body</code> должен иметь черный фон.
|
||||
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Your <code>body</code> element should have a black background.");'
|
||||
- text: Используйте <code>rgb</code> чтобы дать вашему <code>body</code> черный цвет.
|
||||
testString: 'assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), "Use <code>rgb</code> to give your <code>body</code> element a color of black.");'
|
||||
- text: Your <code>body</code> element should have a black background.
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: Use <code>rgb</code> to give your <code>body</code> element a color of black.
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
|
||||
|
||||
```
|
||||
|
||||
@@ -42,14 +47,17 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user