chore(learn): Applied MDX format to Chinese curriculum files (#40462)
This commit is contained in:
Randell Dawson
GitHub
@ -1,92 +1,30 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: 给元素添加负外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
title: 给元素添加负外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
元素的<code>margin（外边距）</code>控制元素<code>border（边框）</code>与其他周围元素之间的距离大小。
|
||||
如果你把元素的<code>margin</code>设置为负值，元素会变得更大。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
尝试将蓝色框的<code>margin</code>设为负值，跟红色框一样大小。
|
||||
蓝色框的<code>margin</code>设置为<code>-15px</code>，它会填满与黄色框之间的距离。
|
||||
</section>
|
||||
元素的`margin（外边距）`控制元素`border（边框）`与其他周围元素之间的距离大小。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
如果你把元素的`margin`设置为负值，元素会变得更大。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class的<code>margin</code>应该设置为<code>-15px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "-15px");
|
||||
# --instructions--
|
||||
|
||||
尝试将蓝色框的`margin`设为负值，跟红色框一样大小。
|
||||
|
||||
蓝色框的`margin`设置为`-15px`，它会填满与黄色框之间的距离。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class的`margin`应该设置为`-15px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: 在元素周围添加边框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
title: 在元素周围添加边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属性。
|
||||
# --description--
|
||||
|
||||
CSS 边框具有`style`，`color`和`width`属性。
|
||||
|
||||
假如我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
|
||||
|
||||
```html
|
||||
@ -21,104 +22,49 @@ CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>thick-green-border</code> CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在猫咪照片上。
|
||||
记得在一个元素上可以同时应用多个<code>class</code>，通过使用空格来分隔。例子如下：
|
||||
<code><img class="class1 class2"></code>
|
||||
</section>
|
||||
创建一个`thick-green-border` CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在猫咪照片上。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
记得在一个元素上可以同时应用多个`class`，通过使用空格来分隔。例子如下：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: assert($("img").hasClass("smaller-image"));
|
||||
- text: '<code>img</code>元素应该含有<code>thick-green-border</code> class。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- 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);
|
||||
- text: '设置图片边框为<code>solid</code>实线。'
|
||||
testString: assert($("img").css("border-right-style") === "solid");
|
||||
- text: '<code>img</code>元素的边框颜色应该为绿色。'
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
|
||||
`<img class="class1 class2">`
|
||||
|
||||
# --hints--
|
||||
|
||||
`img`元素应该含有`smaller-image` class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`img`元素应该含有`thick-green-border` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">点击查看更多<a href="#">猫图</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
</div>
|
||||
设置图片边框为`10px`。
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
设置图片边框为`solid`实线。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
`img`元素的边框颜色应该为绿色。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,46 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: 给元素的每一侧添加不同的外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
title: 给元素的每一侧添加不同的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时候，你会想给一个元素每个方向的<code>margin</code>都设置成一个特定的值。
|
||||
CSS 允许你使用<code>margin-top</code>，<code>margin-right</code>，<code>margin-bottom</code>和<code>margin-left</code>属性来设置四个不同方向的<code>margin</code>值。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色框的顶部和左侧的<code>margin</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
有时候，你会想给一个元素每个方向的`margin`都设置成一个特定的值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
CSS 允许你使用`margin-top`，`margin-right`，`margin-bottom`和`margin-left`属性来设置四个不同方向的`margin`值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的右侧<code>margin</code>（上外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右侧<code>margin</code>（右外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的底部<code>margin</code>（下外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左侧<code>margin</code>（左外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
# --instructions--
|
||||
|
||||
```
|
||||
蓝色框的顶部和左侧的`margin`值设置为`40px`，底部和右侧设置为`20px`。
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
`blue-box` class 的右侧`margin`（上外边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`blue-box` class 的右侧`margin`（右外边距）值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的底部`margin`（下外边距）值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的左侧`margin`（左外边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,46 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: 给元素的每一侧添加不同的内边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
title: 给元素的每一侧添加不同的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时候，你会想给一个元素每个方向的<code>padding</code>都设置成一个特定的值
|
||||
CSS 允许你使用<code>padding-top</code>，<code>padding-right</code>， <code>padding-bottom</code>和<code>padding-left</code>属性来设置四个不同方向的<code>padding</code>值。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色框的顶部和左侧的<code>padding</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
有时候，你会想给一个元素每个方向的`padding`都设置成一个特定的值
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
CSS 允许你使用`padding-top`，`padding-right`， `padding-bottom`和`padding-left`属性来设置四个不同方向的`padding`值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的顶部<code>padding</code>（上内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右侧<code>padding</code>（右内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的底部<code>padding</code>（下内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左侧<code>padding</code>（左内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
# --instructions--
|
||||
|
||||
蓝色框的顶部和左侧的`padding`值设置为`40px`，底部和右侧设置为`20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的顶部`padding`（上内边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
`blue-box` class 的右侧`padding`（右内边距）值应为`20px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</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>
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
</div>
|
||||
`blue-box` class 的底部`padding`（下内边距）值应为`20px`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`blue-box` class 的左侧`padding`（左内边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,113 +1,39 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: 用 border-radius 添加圆角边框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
title: 用 border-radius 添加圆角边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
猫咪图片边角很尖锐，我们可以使用<code>border-radius</code>属性来让它变得圆润。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<code>border-radius</code>可以用<code>px</code>像素单位来赋值。给猫咪图片设置 10px 的<code>border-radius</code>。
|
||||
注意：这个挑战有多个解决方法。例如，添加<code>border-radius</code>属性到<code>.thick-green-border</code>class 或<code>.smaller-image</code>class 里都是可行的。
|
||||
</section>
|
||||
猫咪图片边角很尖锐，我们可以使用`border-radius`属性来让它变得圆润。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '图片元素应具有 "thick-green-border" class 属性。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: '图片应含有<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');
|
||||
`border-radius`可以用`px`像素单位来赋值。给猫咪图片设置 10px 的`border-radius`。
|
||||
|
||||
注意：这个挑战有多个解决方法。例如，添加`border-radius`属性到`.thick-green-border`class 或`.smaller-image`class 里都是可行的。
|
||||
|
||||
# --hints--
|
||||
|
||||
图片元素应具有 "thick-green-border" class 属性。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
</section>
|
||||
图片应含有`10px`的边框圆角。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
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'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,93 +1,30 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: 调整元素的外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
title: 调整元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>margin（外边距）</code>控制元素的边框与其他元素之间的距离。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的<code>margin</code>值要比蓝色框的大，让它看起来比蓝色框要小。
|
||||
当你增加蓝色的<code>margin</code>值，它会增加元素边框到其他周围元素的距离。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色的框<code>margin</code>的值要跟红色框的一样大小。
|
||||
</section>
|
||||
`margin（外边距）`控制元素的边框与其他元素之间的距离。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的`margin`值要比蓝色框的大，让它看起来比蓝色框要小。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的<code>margin</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "20px");
|
||||
当你增加蓝色的`margin`值，它会增加元素边框到其他周围元素的距离。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色的框`margin`的值要跟红色框的一样大小。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的`margin`值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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: 10px;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
@ -1,94 +1,36 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: 调整元素的内边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
title: 调整元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
我们先暂时把猫咪图片放在一边，让我们去学习更多 HTML 相关样式。
|
||||
|
||||
你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。
|
||||
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：<code>padding（内边距）</code>，<code>margin（外边距）</code>和<code>border（边框）</code>。
|
||||
<code>padding</code>控制着元素内容与<code>border</code>之间的空隙大小。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里面。可以发现，红色框比蓝色框有着更多的<code>padding</code>填充空间。
|
||||
当你增加蓝色框的<code>padding</code>值，文本内容与边框的距离会逐渐拉大。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色的框<code>padding</code>的值要跟红色框的一样大小。
|
||||
</section>
|
||||
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：`padding（内边距）`，`margin（外边距）`和`border（边框）`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`padding`控制着元素内容与`border`之间的空隙大小。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的<code>padding</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "20px");
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里面。可以发现，红色框比蓝色框有着更多的`padding`填充空间。
|
||||
|
||||
当你增加蓝色框的`padding`值，文本内容与边框的距离会逐渐拉大。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色的框`padding`的值要跟红色框的一样大小。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的`padding`值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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: 10px;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,269 +1,50 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: 给 CSS 变量附加回退值
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
title: 给 CSS 变量附加回退值
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
|
||||
|
||||
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。
|
||||
提示：这对调试会很有帮助。
|
||||
</section>
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。 提示：这对调试会很有帮助。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin-top</code>和<code>penguin-bottom</code>class 里面，<code>background</code>属性设置一个<code>black</code>的备用色。
|
||||
<strong>注意：</strong>因为 CSS 变量名拼写错了，所以备用值会被使用。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`penguin-top`和`penguin-bottom`class 里面，`background`属性设置一个`black`的备用色。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</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));
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应设置一个<code>black</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));
|
||||
**注意：** 因为 CSS 变量名拼写错了，所以备用值会被使用。
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* change code below */
|
||||
background: var(--pengiun-skin);
|
||||
/* change code above */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* change code below */
|
||||
background: var(--pengiun-skin);
|
||||
/* change code above */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`penguin-top` class 的`background`属性应设置一个`black`备用颜色。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`penguin-bottom` class 的`background`属性应设置一个`black`备用颜色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,260 +1,30 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: 更改特定区域的变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
title: 更改特定区域的变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当你在<code>:root</code>里创建变量时，这些变量的作用域是整个页面。
|
||||
如果在元素里创建相同的变量，会重写<code>:root</code>变量设置的值。
|
||||
# --description--
|
||||
|
||||
</section>
|
||||
当你在`:root`里创建变量时，这些变量的作用域是整个页面。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里，设置<code>--penguin-belly</code>的值为<code>white</code>。
|
||||
</section>
|
||||
如果在元素里创建相同的变量，会重写`:root`变量设置的值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '应该在<code>penguin</code>clas 里重定义<code>--penguin-belly</code>的变量值，且它的值为<code>white</code>。'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
|
||||
在`penguin`class 里，设置`--penguin-belly`的值为`white`。
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
应该在`penguin`clas 里重定义`--penguin-belly`的变量值，且它的值为`white`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,92 +1,46 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: 更改文本的颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
title: 更改文本的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
现在让我们来修改一下文本的颜色。
|
||||
我们通过修改<code>h2</code>元素的<code>style</code>属性的<code>color</code>值来改变文本颜色。
|
||||
以下是改变<code>h2</code>元素为蓝色的方法：
|
||||
<code><h2 style="color: blue;">CatPhotoApp</h2></code>
|
||||
请注意行内<code>style</code>最好以<code>;</code>来结束。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请把<code>h2</code>元素的文本颜色设置为红色。
|
||||
</section>
|
||||
我们通过修改`h2`元素的`style`属性的`color`值来改变文本颜色。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
以下是改变`h2`元素为蓝色的方法：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h2</code> 元素应该有一个<code>style</code>声明。
|
||||
testString: assert($("h2").attr('style'));
|
||||
- text: <code>h2</code>元素应该为<code>red</code>。
|
||||
testString: assert($("h2")[0].style.color === "red");
|
||||
- text: <code>style</code> 声明应该以 <code>;</code> 结尾。
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
|
||||
请注意行内`style`最好以`;`来结束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把`h2`元素的文本颜色设置为红色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素应该有一个`style`声明。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素应该为`red`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
</div>
|
||||
`style` 声明应该以 `;` 结尾。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: 更改元素的字体大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
title: 更改元素的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
字体大小由<code>font-size</code>属性控制，如下所示：
|
||||
# --description--
|
||||
|
||||
字体大小由`font-size`属性控制，如下所示：
|
||||
|
||||
```css
|
||||
h1 {
|
||||
@ -16,82 +16,17 @@ h1 {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在包含<code>red-text</code>class 选择器的<code><style></code>声明区域的里，创建一个<code>p</code>元素样式规则，并设置<code>font-size</code>为<code>16px</code>。
|
||||
</section>
|
||||
在包含`red-text`class 选择器的`<style>`声明区域的里，创建一个`p`元素样式规则，并设置`font-size`为`16px`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```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));
|
||||
在`style`样式声明区域里，`p`元素的`font-size`的值应为`16px`，浏览器和文本缩放应设置为 100％。
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,258 +1,34 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: 创建一个自定义的 CSS 变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
title: 创建一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
创建一个 CSS 变量，你只需要在变量名前添加两个<code>破折号</code>，并为其赋值，例子如下：
|
||||
# --description--
|
||||
|
||||
创建一个 CSS 变量，你只需要在变量名前添加两个`破折号`，并为其赋值，例子如下：
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
这样会创建一个<code>--penguin-skin</code>变量并赋值为<code>gray（灰色）</code>。
|
||||
现在，其他元素可通过该变量来设置为<code>gray（灰色）</code>。
|
||||
</section>
|
||||
这样会创建一个`--penguin-skin`变量并赋值为`gray（灰色）`。 现在，其他元素可通过该变量来设置为`gray（灰色）`。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里面，创建一个<code>--penguin-skin</code>变量，且赋值为<code>gray（灰色）</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`penguin`class 里面，创建一个`--penguin-skin`变量，且赋值为`gray（灰色）`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`penguin` class 里应声明`--penguin-skin`变量，且赋值为`gray`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: 给 div 元素添加背景色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
title: 给 div 元素添加背景色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>background-color</code>属性可以设置元素的背景颜色。
|
||||
例如，你想将一个元素的背景颜色改为<code>green</code>，可以在<code>style</code>里面这样写：
|
||||
# --description--
|
||||
|
||||
`background-color`属性可以设置元素的背景颜色。
|
||||
|
||||
例如，你想将一个元素的背景颜色改为`green`，可以在`style`里面这样写：
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
@ -17,107 +18,29 @@ title: 给 div 元素添加背景色
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>silver-background</code>class 并设置<code>background-color</code>为<code>silver</code>。 并用在<code>div</code>元素上。
|
||||
</section>
|
||||
创建一个`silver-background`class 并设置`background-color`为`silver`。 并用在`div`元素上。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code>元素应有<code>silver-background</code> class。'
|
||||
testString: assert($("div").hasClass("silver-background"));
|
||||
- text: '<code>div</code>元素背景颜色应设置为<code>silver</code>。'
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
|
||||
- text: 'class 名 <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*}/));
|
||||
`div`元素应有`silver-background` class。
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`div`元素背景颜色应设置为`silver`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
</div>
|
||||
class 名 `silver-background` 应该定义在 `style` 元素内，`silver` 的值应该指定 `background-color` 属性
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,108 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: 引入谷歌字体
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
title: 引入谷歌字体
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用<code>Google</code>字体库。
|
||||
<a href='https://fonts.google.com/' target='_blank'>Google 字体</a>是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
|
||||
因此，下一步，我们将引入和使用<code>Google</code>字体。
|
||||
引入<code>Google</code>字体，你需要复制<code>Google</code>字体的 URL，并粘贴到 HTML 里面。在这个挑战中，我们需要引入<code>Lobster</code>字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到<code>style</code>标签之前。
|
||||
<code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code>
|
||||
现在你可以设置<code>font-family</code>属性为<code>Lobster</code>，来使用<code>Lobster</code>字体。例子如下：<br><code>font-family: FAMILY_NAME, GENERIC_NAME;</code>.
|
||||
<code>GENERIC_NAME</code>是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
|
||||
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用<code>"Open Sans"</code>字体需要添加引号，而<code>Lobster</code>字体则不需要。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个 CSS 规则，<code>font-family</code>属性里设置为<code>Lobster</code>字体，并把这个字体应用到所有的<code>h2</code>元素。
|
||||
</section>
|
||||
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用`Google`字体库。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
[Google 字体](https://fonts.google.com/)是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '引入<code>Lobster</code>字体。'
|
||||
testString: assert(new RegExp("googleapis", "gi").test(code));
|
||||
- text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i));
|
||||
- text: '使用<code>h2</code>选择器去改变字体样式。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));'
|
||||
- text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").css("font-family").match(/monospace/i));
|
||||
因此，下一步，我们将引入和使用`Google`字体。
|
||||
|
||||
引入`Google`字体，你需要复制`Google`字体的 URL，并粘贴到 HTML 里面。在这个挑战中，我们需要引入`Lobster`字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到`style`标签之前。
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
|
||||
现在你可以设置`font-family`属性为`Lobster`，来使用`Lobster`字体。例子如下：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`.
|
||||
|
||||
`GENERIC_NAME`是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
|
||||
|
||||
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用`"Open Sans"`字体需要添加引号，而`Lobster`字体则不需要。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 CSS 规则，`font-family`属性里设置为`Lobster`字体，并把这个字体应用到所有的`h2`元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
引入`Lobster`字体。
|
||||
|
||||
```js
|
||||
assert(new RegExp('googleapis', 'gi').test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素必须使用`Lobster`字体。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
使用`h2`选择器去改变字体样式。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`p`元素应该保持使用`monospace`字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,78 +1,36 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: 通过浏览器降级提高兼容性
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
title: 通过浏览器降级提高兼容性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题就显得很重要。
|
||||
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个栗子，如果使用 CSS 变量来指定站点的背景色， IE 浏览器由于不支持 CSS 变量会忽视背景色。因此，浏览器会使用其它值。如果没有找到其它值，会使用默认值，也就是没有背景色。
|
||||
|
||||
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
看来已经使用了变量做为 <code>.red-box</code> class 的背景色。来通过在存在的声明前添加其它的值为 red 的 <code>background</code> 声明来提高浏览器的兼容性。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
看来已经使用了变量做为 `.red-box` class 的背景色。来通过在存在的声明前添加其它的值为 red 的 `background` 声明来提高浏览器的兼容性。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>.red-box</code> 应该通过在存在的 <code>background</code> 声明前添加其它的值为 red 的<code>background</code> 来提供降级。'
|
||||
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));
|
||||
# --hints--
|
||||
|
||||
`.red-box` 应该通过在存在的 `background` 声明前添加其它的值为 red 的`background` 来提供降级。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```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>
|
||||
|
||||
@ -1,256 +1,30 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: 继承 CSS 变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
title: 继承 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
当创建一个变量时，变量会在创建的选择器里可用。同时，在这个选择器的后代里面也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。<code>:root</code> 是一个 <dfn>pseudo-class</dfn> 选择器匹配文档的根选择器，通常指 <code>html</code> 元素。通过在 <code>:root</code> 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 <code>:root</code> 选择器里定义变量 <code>--penguin-belly</code> 并赋值 <code>pink</code>。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
|
||||
</section>
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。`:root` 是一个 <dfn>pseudo-class</dfn> 选择器匹配文档的根选择器，通常指 `html` 元素。通过在 `:root` 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '应该在 <code>:root</code> 里声明 <code>--penguin-belly</code> 变量并赋值 <code>pink</code>。'
|
||||
testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi));
|
||||
在 `:root` 选择器里定义变量 `--penguin-belly` 并赋值 `pink`。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
应该在 `:root` 里声明 `--penguin-belly` 变量并赋值 `pink`。
|
||||
|
||||
```js
|
||||
var code = ":root {--penguin-belly: pink;}"
|
||||
assert(
|
||||
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,74 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: 从 Body 元素继承样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
title: 从 Body 元素继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们已经证明每一个 HTML 页面都含有<code>body</code>元素，<code>body</code>元素也可以使用 CSS 样式。
|
||||
设置<code>body</code>元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到<code>body</code>设置的样式。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
首先，创建一个文本内容为<code>Hello World</code>的<code>h1</code>标签元素。
|
||||
接着，在<code>body</code>CSS 规则里面添加一句<code>color: green;</code>，改变页面其他元素的字体颜色为<code>green（绿色）</code>。
|
||||
最后，同样在<code>body</code>CSS 规则里面添加<code>font-family: monospace;</code>，设置其他元素字体为<code>font-family: monospace;</code>。
|
||||
</section>
|
||||
我们已经证明每一个 HTML 页面都含有`body`元素，`body`元素也可以使用 CSS 样式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
设置`body`元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到`body`设置的样式。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '创建一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length > 0));
|
||||
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
|
||||
- text: '确保<code>h1</code>元素具有结束标记。'
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
|
||||
- text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
|
||||
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)));
|
||||
- text: '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
|
||||
- text: '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
|
||||
# --instructions--
|
||||
|
||||
首先，创建一个文本内容为`Hello World`的`h1`标签元素。
|
||||
|
||||
接着，在`body`CSS 规则里面添加一句`color: green;`，改变页面其他元素的字体颜色为`green（绿色）`。
|
||||
|
||||
最后，同样在`body`CSS 规则里面添加`font-family: monospace;`，设置其他元素字体为`font-family: monospace;`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`h1`元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素的文本内容应该为`Hello World`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.text()
|
||||
.match(/hello world/i)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保`h1`元素具有结束标记。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h1>/g) &&
|
||||
code.match(/<h1/g) &&
|
||||
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`body`元素的`color`属性值应为`green`。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
`body`元素的`font-family`属性值应为`monospace`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('body')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素应该继承`body`的`monospace`字体属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色也应该继承`body`元素的绿色。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,113 +1,32 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: 用 border-radius 制作圆形图片
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
title: 用 border-radius 制作圆形图片
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
除像素外，你也可以使用百分比来指定<code>border-radius</code>的值。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
将<code>border-radius</code>的值设置为<code>50%</code>。
|
||||
</section>
|
||||
除像素外，你也可以使用百分比来指定`border-radius`的值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
|
||||
- text: '请确保百分值为<code>50%</code>。'
|
||||
testString: assert(code.match(/50%/g));
|
||||
将`border-radius`的值设置为`50%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你图片的边框圆角应设置为`50%`，让它看起来就像一个完整的圆。
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
</section>
|
||||
请确保百分值为`50%`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,86 +1,64 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Important 的优先级最高
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
title: Important 的优先级最高
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
耶！我们刚刚又证明了行内样式会覆盖<code>style</code>标签里面所有的 CSS 声明。
|
||||
# --description--
|
||||
|
||||
耶！我们刚刚又证明了行内样式会覆盖`style`标签里面所有的 CSS 声明。
|
||||
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖 CSS 样式。当你需要保证 CSS 样式不受影响，你可以使用<code>!important</code>。
|
||||
让我们回到<code>pink-text</code>class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖 CSS 样式。当你需要保证 CSS 样式不受影响，你可以使用`!important`。
|
||||
|
||||
在<code>pink-text</code>class 的<code>color</code>声明里面使用<code>!important</code>关键字，去确保<code>h1</code>元素的字体颜色一定为粉色。
|
||||
操作的方法大概如下：
|
||||
<code>color: red !important;</code>
|
||||
</section>
|
||||
让我们回到`pink-text`class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'
|
||||
testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
- text: '<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'
|
||||
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为粉色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
在`pink-text`class 的`color`声明里面使用`!important`关键字，去确保`h1`元素的字体颜色一定为粉色。 操作的方法大概如下： `color: red !important;`
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`元素应该包含一个名为`orange-text`的id。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h1`元素应该包含`color: white`的行内样式声明。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
`pink-text` class 声明应该含有`!important`关键字。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为粉色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: ID 选择器优先级高于 Class 选择器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
title: ID 选择器优先级高于 Class 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
通过给<code>h1</code>元素添加 id 属性，来覆盖 class 属性定义的同名样式。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>h1</code>元素添加 id 属性，属性值为<code>orange-text</code>。设置方式如下：
|
||||
<code><h1 id="orange-text"></code>
|
||||
<code>h1</code>元素继续保留<code>blue-text</code>和<code>pink-text</code>class。
|
||||
在<code>style</code>元素中创建名为<code>orange-text</code>的 id 选择器。例子如下：
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
|
||||
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
|
||||
通过给`h1`元素添加 id 属性，来覆盖 class 属性定义的同名样式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`h1`元素添加 id 属性，属性值为`orange-text`。设置方式如下：
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
|
||||
`h1`元素继续保留`blue-text`和`pink-text`class。
|
||||
|
||||
在`style`元素中创建名为`orange-text`的 id 选择器。例子如下：
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
@ -26,67 +30,51 @@ title: ID 选择器优先级高于 Class 选择器
|
||||
}
|
||||
```
|
||||
|
||||
注意：无论在<code>pink-text</code>class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
|
||||
</section>
|
||||
注意：无论在`pink-text`class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>的 id 属性值为<code>orange-text</code>。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '应该只有一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length === 1));
|
||||
- text: '创建名为<code>orange-text</code>的 id 选择器。'
|
||||
testString: assert(code.match(/#orange-text\s*{/gi));
|
||||
- text: '不要在<code>h1</code>元素里面使用<code>style（行内样式）</code>。'
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi));
|
||||
- text: '<code>h1</code>元素的字体颜色应为橘色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`的 id 属性值为`orange-text`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
应该只有一个`h1`元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
创建名为`orange-text`的 id 选择器。
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
不要在`h1`元素里面使用`style（行内样式）`。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应为橘色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,81 +1,56 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: 内联样式的优先级高于 ID 选择器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
title: 内联样式的优先级高于 ID 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们刚刚证明了，id 选择器无论在<code>style</code>标签哪里声明，都会覆盖 class 声明的样式，
|
||||
# --description--
|
||||
|
||||
我们刚刚证明了，id 选择器无论在`style`标签哪里声明，都会覆盖 class 声明的样式，
|
||||
|
||||
其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用行内样式尝试让<code>h1</code>的字体颜色变白。像下面这样使用：
|
||||
<code><h1 style="color: green"></code>
|
||||
<code>h1</code>元素需继续保留<code>blue-text</code>和<code>pink-text</code>class。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用行内样式尝试让`h1`的字体颜色变白。像下面这样使用：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该含有行内样式。'
|
||||
testString: assert(document.querySelector('h1[style]'));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为白色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
|
||||
`<h1 style="color: green">`
|
||||
|
||||
`h1`元素需继续保留`blue-text`和`pink-text`class。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">Hello World!</h1>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`元素应该包含一个名为`orange-text`的id。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h1`元素应该含有行内样式。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为白色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,76 +1,56 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Class 选择器的优先级高于继承样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
title: Class 选择器的优先级高于继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
"pink-text" class 覆盖了<code>body</code>元素的 CSS 声明。
|
||||
我们刚刚证明了我们的 class 会覆盖<code>body</code>的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的<code>pink-text</code>class？
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
"pink-text" class 覆盖了`body`元素的 CSS 声明。
|
||||
|
||||
我们刚刚证明了我们的 class 会覆盖`body`的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的`pink-text`class？
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个字体颜色为`blue`的`blue-text`CSS class，并确保它在`pink-text`下方声明。
|
||||
|
||||
在含有`pink-text`class 的`h1`元素里面，再添加一个`blue-text`class，这时候，我们将能看到到底是谁获胜。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个字体颜色为<code>blue</code>的<code>blue-text</code>CSS class，并确保它在<code>pink-text</code>下方声明。
|
||||
在含有<code>pink-text</code>class 的<code>h1</code>元素里面，再添加一个<code>blue-text</code>class，这时候，我们将能看到到底是谁获胜。
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
<code>class="class1 class2"</code>
|
||||
<strong>注意：</strong> HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
但是，在<code><style></code>标签里面声明的<code>class</code>顺序十分重要。第二个声明始终优于第一个声明。因为<code>.blue-text</code>在<code>.pink-text</code>的后面声明，所以<code>.blue-text</code>会覆盖<code>.pink-text</code>的样式。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`class="class1 class2"`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。'
|
||||
testString: assert($(".pink-text").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素的颜色应为蓝色。'
|
||||
testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
|
||||
**注意：** HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
|
||||
但是，在`<style>`标签里面声明的`class`顺序十分重要。第二个声明始终优于第一个声明。因为`.blue-text`在`.pink-text`的后面声明，所以`.blue-text`会覆盖`.pink-text`的样式。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`blue-text`和`pink-text`需同时应用于`h1`元素上。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h1`元素的颜色应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,68 +1,44 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: 样式中的优先级
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
title: 样式中的优先级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
有时候， HTML 元素的样式会跟其他样式发生冲突。
|
||||
就像，<code>h1</code>元素也不能同时设置<code>green</code>和<code>pink</code>两种样式。
|
||||
让我们尝试创建一个字体颜色为<code>pink</code>的 class，并应于用其中一个元素中。猜一猜，它会覆盖<code>body</code>元素设置的<code>color: green;</code>CSS 属性吗？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个能将元素的字体颜色改为<code>pink</code>的CSS class，并起名为<code>pink-text</code>。
|
||||
给<code>h1</code>元素添加<code>pink-text</code>class。
|
||||
</section>
|
||||
就像，`h1`元素也不能同时设置`green`和`pink`两种样式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
让我们尝试创建一个字体颜色为`pink`的 class，并应于用其中一个元素中。猜一猜，它会覆盖`body`元素设置的`color: green;`CSS 属性吗？
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该含有<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'
|
||||
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
# --instructions--
|
||||
|
||||
```
|
||||
创建一个能将元素的字体颜色改为`pink`的CSS class，并起名为`pink-text`。
|
||||
|
||||
</section>
|
||||
给`h1`元素添加`pink-text`class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
# --hints--
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
`h1`元素应该含有`pink-text` class。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`<style>`标签应该含有一个可以改变字体颜色的`pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为`pink（粉色）`。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: 设置元素的字体家族
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
title: 设置元素的字体家族
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
通过<code>font-family</code>属性，可以设置元素里面的字体样式。
|
||||
如果你想设置<code>h2</code>元素的字体为<code>sans-serif</code>，你可以用以下的 CSS 规则：
|
||||
# --description--
|
||||
|
||||
通过`font-family`属性，可以设置元素里面的字体样式。
|
||||
|
||||
如果你想设置`h2`元素的字体为`sans-serif`，你可以用以下的 CSS 规则：
|
||||
|
||||
```css
|
||||
h2 {
|
||||
@ -17,86 +18,22 @@ h2 {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
确保<code>p</code>元素使用<code>monospace</code>字体。
|
||||
</section>
|
||||
确保`p`元素使用`monospace`字体。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>p</code>元素应该使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i));
|
||||
`p`元素应该使用`monospace`字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.not('.red-text')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,119 +1,34 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: 设置元素的 id
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
title: 设置元素的 id
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
除了class属性，每一个 HTML 元素也都有<code>id</code>属性。
|
||||
使用<code>id</code>有几个好处：你可以通过<code>id</code>选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过<code>id</code>来选择元素和操作元素。
|
||||
<code>id</code>属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的<code>id</code>属性。
|
||||
设置<code>h2</code>元素的 id 为<code>cat-photo-app</code>的方法如下：
|
||||
<code><h2 id="cat-photo-app"></code>
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
设置<code>form</code>元素的 id 为<code>cat-photo-form</code>。
|
||||
</section>
|
||||
除了class属性，每一个 HTML 元素也都有`id`属性。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用`id`有几个好处：你可以通过`id`选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过`id`来选择元素和操作元素。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>form</code>元素的 id 应为<code>cat-photo-form</code>。'
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
`id`属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的`id`属性。
|
||||
|
||||
设置`h2`元素的 id 为`cat-photo-app`的方法如下：
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`form`元素的 id 应为`cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: 调整图片的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
title: 调整图片的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>width</code>宽度类似于字体的<code>px</code>（像素)值。
|
||||
假如，你想创建一个叫<code>larger-image</code>的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
|
||||
# --description--
|
||||
|
||||
CSS 的`width`属性可以控制元素的宽度。图片的`width`宽度类似于字体的`px`（像素)值。
|
||||
|
||||
假如，你想创建一个叫`larger-image`的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -19,95 +20,29 @@ CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>widt
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>smaller-image</code>的 CSS class，设置图片的宽度为 100px。
|
||||
<strong>注意：</strong><br>由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
|
||||
</section>
|
||||
创建一个`smaller-image`的 CSS class，设置图片的宽度为 100px。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
**注意：**
|
||||
由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
|
||||
- text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
|
||||
testString: assert($("img").width() === 100);
|
||||
# --hints--
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
`img`元素应该含有`smaller-image` class。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
);
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。
|
||||
|
||||
```js
|
||||
assert($('img').width() === 100);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: 字体如何优雅降级
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
title: 字体如何优雅降级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
所有浏览器都有几种默认字体。这些通用字体包括<code>monospace</code>，<code>serif</code>和<code>sans-serif</code>。
|
||||
# --description--
|
||||
|
||||
所有浏览器都有几种默认字体。这些通用字体包括`monospace`，`serif`和`sans-serif`。
|
||||
|
||||
当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
|
||||
例如，如果你想将一个元素的字体设置成<code>Helvetica</code>，当<code>Helvetica</code>不可用时，降级使用<code>sans-serif</code>字体，那么可以这样写：
|
||||
|
||||
例如，如果你想将一个元素的字体设置成`Helvetica`，当`Helvetica`不可用时，降级使用`sans-serif`字体，那么可以这样写：
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -19,100 +21,49 @@ p {
|
||||
```
|
||||
|
||||
通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
首先，添加<code>monospace</code>字体到<code>h2</code>元素里，它现在拥有着<code>Lobster</code>和<code>monospace</code>两种字体。
|
||||
在上一个挑战里，你已经通过<code>link</code>标签引入谷歌<code>Lobster</code>字体。现在让我们注释掉谷歌<code>Lobster</code>字体的引入（使用我们之前学过的<code>HTML</code>注释），使字体失效。你会发现<code>h2</code>元素降级到了<code>monospace</code>字体。
|
||||
<strong>注意：</strong><br>如果电脑已经安装了<code>Lobster</code>字体，你将看不到这个降级过程，因为浏览器会找到该字体。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
首先，添加`monospace`字体到`h2`元素里，它现在拥有着`Lobster`和`monospace`两种字体。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该含有<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
|
||||
- text: '当<code>Lobster</code>字体失效时，<code>h2</code>元素应该降级使用<code>monospace</code>字体。'
|
||||
testString: assert(/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(code));
|
||||
- text: '通过添加<code><!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。'
|
||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
|
||||
- text: '确保注释要以<code>--></code>结束。'
|
||||
testString: assert(new RegExp("[^fc]-->", "gi").test(code));
|
||||
在上一个挑战里，你已经通过`link`标签引入谷歌`Lobster`字体。现在让我们注释掉谷歌`Lobster`字体的引入（使用我们之前学过的`HTML`注释），使字体失效。你会发现`h2`元素降级到了`monospace`字体。
|
||||
|
||||
**注意：**
|
||||
如果电脑已经安装了`Lobster`字体，你将看不到这个降级过程，因为浏览器会找到该字体。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2`元素应该含有`Lobster`字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/^"?lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
当`Lobster`字体失效时，`h2`元素应该降级使用`monospace`字体。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
通过添加`<!--`，注释掉谷歌`Lobster`字体的引入。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
确保注释要以`-->`结束。
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,49 @@
|
||||
---
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: 使用 class 选择器设置多个元素的样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
title: 使用 class 选择器设置多个元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将<code>red-text</code>class 选择器应用在第一个<code>p</code>元素上。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将`red-text`class 选择器应用在第一个`p`元素上。
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该是红色的。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: '第一个<code>p</code>元素应该为红色。'
|
||||
testString: assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '第二和第三个<code>p</code>元素不应该为红色。'
|
||||
testString: assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));
|
||||
- text: '第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'
|
||||
testString: assert($("p:eq(0)").hasClass("red-text"));
|
||||
`h2`元素应该是红色的。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素应该含有`red-text` class 选择器。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
第一个`p`元素应该为红色。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
第二和第三个`p`元素不应该为红色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
|
||||
!($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
|
||||
);
|
||||
```
|
||||
|
||||
第一个`p`元素应该包含`red-text` class 选择器。
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: 给 HTML 的 Body 元素添加样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
title: 给 HTML 的 Body 元素添加样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
现在让我们来讨论一下 CSS 继承。
|
||||
每一个 HTML 页面都含有一个<code>body</code>元素。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
我们可以通过设置<code>background-color</code>为<code>black</code>，来证明<code>body</code>元素的存在。
|
||||
添加以下的代码到<code>style</code>标签里面：
|
||||
现在让我们来讨论一下 CSS 继承。
|
||||
|
||||
每一个 HTML 页面都含有一个`body`元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们可以通过设置`background-color`为`black`，来证明`body`元素的存在。
|
||||
|
||||
添加以下的代码到`style`标签里面：
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -23,47 +24,29 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code>元素的<code>background-color</code>应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '确保 CSS 规则格式书写正确，需要开关大括号。'
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
- text: '确保 CSS 规则要以分号结尾。'
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
`body`元素的`background-color`应该是黑色的。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
确保 CSS 规则格式书写正确，需要开关大括号。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保 CSS 规则要以分号结尾。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,93 +1,44 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: 理解绝对单位与相对单位
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
title: 理解绝对单位与相对单位
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
最近的几个挑战都是设置元素的内边距和外边距的<code>px</code>值。像素<code>px</code>是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。
|
||||
单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，<code>in</code>和<code>mm</code>分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
|
||||
相对单位长度，就像<code>em</code>和<code>rem</code>，它们会依赖其他长度的值。就好像<code>em</code>的大小基于元素的字体的<code>font-size</code>值，如果你使用<code>em</code>单位来设置<code>font-size</code>值，它的值会跟随父元素的<code>font-size</code>值来改变。
|
||||
<strong>注意：</strong><br>有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>red-box</code> class 添加<code>padding</code>属性，并设置为<code>1.5em</code>。
|
||||
</section>
|
||||
最近的几个挑战都是设置元素的内边距和外边距的`px`值。像素`px`是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，`in`和`mm`分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>red-box</code> class 应该含有<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');
|
||||
- text: '<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'
|
||||
testString: assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
相对单位长度，就像`em`和`rem`，它们会依赖其他长度的值。就好像`em`的大小基于元素的字体的`font-size`值，如果你使用`em`单位来设置`font-size`值，它的值会跟随父元素的`font-size`值来改变。
|
||||
|
||||
**注意：**
|
||||
有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`red-box` class 添加`padding`属性，并设置为`1.5em`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`red-box` class 应该含有`padding`属性。
|
||||
|
||||
```js
|
||||
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'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`red-box` class 的`padding`值应为 1.5em。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
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 green-box">padding</h5>
|
||||
</div>
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: 使用 class 选择器设置单个元素的样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
title: 使用 class 选择器设置单个元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 的<code>class</code>具有可重用性，可应用于各种 HTML 元素。
|
||||
一个 CSS<code>class</code>声明示例，如下所示：
|
||||
# --description--
|
||||
|
||||
CSS 的`class`具有可重用性，可应用于各种 HTML 元素。
|
||||
|
||||
一个 CSS`class`声明示例，如下所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -19,93 +20,39 @@ CSS 的<code>class</code>具有可重用性，可应用于各种 HTML 元素。
|
||||
</style>
|
||||
```
|
||||
|
||||
可以看到，我们在<code><style></code>样式声明区域里，创建了一个名为<code>blue-text</code>的<code>class</code>选择器。
|
||||
你可以将 CSS<code>class</code>选择器应用到一个HTML元素里，如下所示：
|
||||
<code><h2 class="blue-text">CatPhotoApp</h2></code>
|
||||
注意：在<code>style</code>样式区域声明里，<code>class</code>需以<code>.</code>开头。而在 HTML 元素里，<code>class</code>属性的前面不能添加<code>.</code>。
|
||||
</section>
|
||||
可以看到，我们在`<style>`样式声明区域里，创建了一个名为`blue-text`的`class`选择器。 你可以将 CSS`class`选择器应用到一个HTML元素里，如下所示： `<h2 class="blue-text">CatPhotoApp</h2>` 注意：在`style`样式区域声明里，`class`需以`.`开头。而在 HTML 元素里，`class`属性的前面不能添加`.`。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>style</code>样式声明里，把<code>h2</code>元素选择器改为<code>.red-text</code>class 选择器，同时将颜色<code>blue</code>变为<code>red</code>。
|
||||
在<code>h2</code>元素里，添加一个<code>class</code>属性，且值为<code>'red-text'</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`style`样式声明里，把`h2`元素选择器改为`.red-text`class 选择器，同时将颜色`blue`变为`red`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '<code>h2</code>元素应含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: '<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'
|
||||
testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
- text: '不要在<code>h2</code>元素里使用行内样式：<code>style="color: red"</code>。'
|
||||
testString: assert($("h2").attr("style") === undefined);
|
||||
在`h2`元素里，添加一个`class`属性，且值为`'red-text'`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2`元素应该为红色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素应含有`red-text` class 选择器。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`style`样式声明区域里应该包含一个`red-text` class 选择器，并且它的颜色应为红色。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
不要在`h2`元素里使用行内样式：`style="color: red"`。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,274 +1,66 @@
|
||||
---
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: 使用一个自定义的 CSS 变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
title: 使用一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
因为引用了<code>--penguin-skin</code>变量的值，使用了这个样式的元素背景颜色会是灰色。
|
||||
注意：如果变量名不匹配，样式不会生效。
|
||||
</section>
|
||||
因为引用了`--penguin-skin`变量的值，使用了这个样式的元素背景颜色会是灰色。 注意：如果变量名不匹配，样式不会生效。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<code>penguin-top</code>，<code>penguin-bottom</code>，<code>right-hand</code>和<code>left-hand</code>class 的<code>background</code>属性均使用<code>--penguin-skin</code>变量值。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`penguin-top`，`penguin-bottom`，`right-hand`和`left-hand`class 的`background`属性均使用`--penguin-skin`变量值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应使用<code>--penguin-skin</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));
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应使用<code>--penguin-skin</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));
|
||||
- text: '<code>right-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</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));
|
||||
- text: '<code>left-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* change code below */
|
||||
background: black;
|
||||
/* change code above */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* change code below */
|
||||
background: black;
|
||||
/* change code above */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
|
||||
/* change code below */
|
||||
background: black;
|
||||
/* change code above */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
|
||||
/* change code below */
|
||||
background: black;
|
||||
/* change code above */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`penguin-top` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`penguin-bottom` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`right-hand` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`left-hand` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,287 +1,42 @@
|
||||
---
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: 使用媒体查询更改变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
title: 使用媒体查询更改变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
CSS 变量可以简化媒体查询的方式。
|
||||
|
||||
例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>media query（媒体查询）</code>声明的<code>:root</code>选择器里，重定义<code>--penguin-size</code>的值为 200px，且重定义<code>--penguin-skin</code>的值为<code>black</code>，然后通过缩放页面来查看是否生效。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`media query（媒体查询）`声明的`:root`选择器里，重定义`--penguin-size`的值为 200px，且重定义`--penguin-skin`的值为`black`，然后通过缩放页面来查看是否生效。
|
||||
|
||||
```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));
|
||||
- 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));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-size: 300px;
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: white;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
:root {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.penguin {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: var(--penguin-size, 300px);
|
||||
height: var(--penguin-size, 300px);
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 5%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(130deg);
|
||||
z-index: -1;
|
||||
animation-duration: 3s;
|
||||
animation-name: wave;
|
||||
animation-iteration-count: infinite;
|
||||
transform-origin:0% 0%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
10% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left:-23%;
|
||||
background: white;
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`:root`中的`--penguin-size`值应为`200px`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`:root`中的`--penguin-skin`值应为`black`。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,92 +1,74 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08719
|
||||
title: 使用缩写的十六进制编码
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
title: 使用缩写的十六进制编码
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
许多人对超过 1600 万种颜色的可能性感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。
|
||||
例如，红色的<code>#FF0000</code>十六进制编码可以缩写成<code>#F00</code>。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
|
||||
这样，颜色的可能性减少到了大约 4000 种。且在浏览器里<code>#FF0000</code>和<code>#F00</code>完全是同一种颜色。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
例如，红色的`#FF0000`十六进制编码可以缩写成`#F00`。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
|
||||
|
||||
这样，颜色的可能性减少到了大约 4000 种。且在浏览器里`#FF0000`和`#F00`完全是同一种颜色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
接下来，使用缩写的十六进制编码给元素设置正确的颜色。
|
||||
<table class='table table-striped'><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></table>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: '要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>的十六进制编码。'
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。'
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
- text: '要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>的十六进制编码。'
|
||||
testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。'
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
- text: '要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>的十六进制编码。'
|
||||
testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
# --hints--
|
||||
|
||||
文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
要使用缩写的`red`的`十六进制编码`，而不是`#FF0000`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #000000;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #000000;
|
||||
}
|
||||
.green-text {
|
||||
color: #000000;
|
||||
}
|
||||
</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>
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
文本内容为`I am green!`的`h1`元素的字体颜色应该为`green`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
要使用缩写的`green`的`十六进制编码`，而不是`#00FF00`的十六进制编码。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am cyan!`的`h1`元素的字体颜色应该为`cyan`。
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
要使用缩写的`cyan`的`十六进制编码`，而不是`#00FFFF`的十六进制编码。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am fuchsia!`的`h1`元素的字体颜色应该为`fuchsia`。
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
要使用缩写的`fuchsia`的`十六进制编码`，而不是`#FF00FF`的十六进制编码。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
---
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: 使用 id 属性来设定元素的样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
title: 使用 id 属性来设定元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
通过<code>id</code>属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
|
||||
可是，<code>id</code>不可以重用，只应用于一个元素上。同时，在 CSS 里，<code>id</code>的优先级要高于<code>class</code>，如果一个元素同时应用了<code>class</code>和<code>id</code>，并设置样式有冲突，会优先应用<code>id</code>的样式。
|
||||
选择<code>id</code>为<code>cat-photo-element</code>的元素，并设置它的背景样式为<code>green</code>，可以在<code>style</code>标签里这样写：
|
||||
# --description--
|
||||
|
||||
通过`id`属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
|
||||
|
||||
可是，`id`不可以重用，只应用于一个元素上。同时，在 CSS 里，`id`的优先级要高于`class`，如果一个元素同时应用了`class`和`id`，并设置样式有冲突，会优先应用`id`的样式。
|
||||
|
||||
选择`id`为`cat-photo-element`的元素，并设置它的背景样式为`green`，可以在`style`标签里这样写：
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
@ -18,113 +20,40 @@ title: 使用 id 属性来设定元素的样式
|
||||
}
|
||||
```
|
||||
|
||||
注意在<code>style</code>标签里，声明 class 的时候必须在名字前插入<code>.</code>符号。同样，在声明 id 的时候，也必须在名字前插入<code>#</code>符号。
|
||||
</section>
|
||||
注意在`style`标签里，声明 class 的时候必须在名字前插入`.`符号。同样，在声明 id 的时候，也必须在名字前插入`#`符号。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
尝试给含有<code>cat-photo-form</code>id属性的<code>form</code>表单的背景颜色设置为<code>green</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
尝试给含有`cat-photo-form`id属性的`form`表单的背景颜色设置为`green`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '设置<code>form</code>元素的 id 为<code>cat-photo-form</code>。'
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
- text: '<code>form</code>元素应该含有<code>background-color</code>css 属性并且值为 <code>green</code>。'
|
||||
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
|
||||
- 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);
|
||||
- text: '不要在<code>form</code>元素上添加其他<code>class</code>属性或者<code>style</code>行内样式。'
|
||||
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
# --hints--
|
||||
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
</section>
|
||||
`form`元素应该含有`background-color`css 属性并且值为 `green`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
</div>
|
||||
确保`form`元素含有`id`属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(/<form.*cat-photo-form.*>/gi) &&
|
||||
code.match(/<form.*cat-photo-form.*>/gi).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
不要在`form`元素上添加其他`class`属性或者`style`行内样式。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
---
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: 使用属性选择器来设置元素的样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
title: 使用属性选择器来设置元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你已经通过设置元素的<code>id</code>和<code>class</code>，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
|
||||
# --description--
|
||||
|
||||
你已经通过设置元素的`id`和`class`，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
|
||||
|
||||
让我们再次通过猫咪图片项目来练习 CSS 选择器。
|
||||
在这个挑战里，你会使用<code>[attr=value]</code>属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有<code>type</code>为<code>radio</code>的元素的外边距。
|
||||
|
||||
在这个挑战里，你会使用`[attr=value]`属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有`type`为`radio`的元素的外边距。
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
@ -18,111 +20,53 @@ title: 使用属性选择器来设置元素的样式
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用<code>type</code>属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
|
||||
</section>
|
||||
使用`type`属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '使用<code>type</code>属性选择器来匹配复选框。'
|
||||
testString: assert(code.match(/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi));
|
||||
- text: '复选框的上外边距应为 10px。'
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()));
|
||||
- text: '复选框的下外边距应为 15px。'
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()));
|
||||
使用`type`属性选择器来匹配复选框。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
复选框的上外边距应为 10px。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginTop') === '10px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
复选框的下外边距应为 15px。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginBottom') === '15px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,97 +1,61 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: 使用顺时针方向指定元素的外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
title: 使用顺时针方向指定元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
让我们再试一次，不过这一次轮到<code>margin</code>了。
|
||||
同样，每个方向的外边距值可以在<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>
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的<code>margin</code>。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为<code>40px</code>，右外边距和下外边距则设置为<code>20px</code>。
|
||||
</section>
|
||||
让我们再试一次，不过这一次轮到`margin`了。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
同样，每个方向的外边距值可以在`margin`属性里面汇总声明，来代替分别声明`margin-top`，`margin-right`，`margin-bottom`和`margin-left`属性的方式，代码如下：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>blue-box</code> class 的上外边距应为<code>40px</code>。
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: <code>blue-box</code> class 的右外边距应为<code>20px</code>。
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px");
|
||||
- text: <code>blue-box</code> class 的下外边距应为<code>20px</code>。
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px");
|
||||
- text: <code>blue-box</code> class 的左外边距应为<code>40px</code>。
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
- text: 你应该沿顺时针方向设置<code>blue-box</code>的外边距。
|
||||
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())));
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的`margin`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为`40px`，右外边距和下外边距则设置为`20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的上外边距应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
`blue-box` class 的右外边距应为`20px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</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>
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
</div>
|
||||
`blue-box` class 的下外边距应为`20px`。
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`blue-box` class 的左外边距应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
你应该沿顺时针方向设置`blue-box`的外边距。
|
||||
|
||||
```js
|
||||
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())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,59 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: 使用顺时针方向指定元素的内边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
title: 使用顺时针方向指定元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
如果不想每次都要分别声明<code>padding-top</code>，<code>padding-right</code>，<code>padding-bottom</code>和<code>padding-left</code>属性，可以把它们汇总在<code>padding</code>属性里面声明，如下：
|
||||
<code>padding: 10px 20px 10px 20px;</code>
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的<code>padding</code>。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为<code>40px</code>，右内边距和下内边距则设置为<code>20px</code>。
|
||||
</section>
|
||||
如果不想每次都要分别声明`padding-top`，`padding-right`，`padding-bottom`和`padding-left`属性，可以把它们汇总在`padding`属性里面声明，如下：
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的上内边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右内边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的下内边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左内边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
- text: '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。'
|
||||
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())));
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的`padding`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为`40px`，右内边距和下内边距则设置为`20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的上内边距应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
`blue-box` class 的右内边距应为`20px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
}
|
||||
</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>
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
</div>
|
||||
`blue-box` class 的下内边距应为`20px`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`blue-box` class 的左内边距应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
你应该按照顺时针排序，汇总声明的方式来设置`blue-box`的`padding`值。
|
||||
|
||||
```js
|
||||
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())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08805
|
||||
title: 使用元素选择器来设置元素的样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
title: 使用元素选择器来设置元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。
|
||||
通过行内样式<code><h2 style="color: red;">CatPhotoApp</h2></code>，就可以修改<code>h2</code>元素的颜色为红色。
|
||||
当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，<code>层叠样式表</code>往往是一个更好的选择。
|
||||
在代码的顶部，创建一个<code>style</code>声明区域，如下方所示：
|
||||
|
||||
通过行内样式`<h2 style="color: red;">CatPhotoApp</h2>`，就可以修改`h2`元素的颜色为红色。
|
||||
|
||||
当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，`层叠样式表`往往是一个更好的选择。
|
||||
|
||||
在代码的顶部，创建一个`style`声明区域，如下方所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
在<code>style</code>样式声明区域内，可以创建一个<code>元素选择器</code>，应用于所有的<code>h2</code>元素。例如，如果你想所有<code>h2</code>元素变成红色，可以添加下方的样式规则：
|
||||
在`style`样式声明区域内，可以创建一个`元素选择器`，应用于所有的`h2`元素。例如，如果你想所有`h2`元素变成红色，可以添加下方的样式规则：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -28,85 +31,51 @@ title: 使用元素选择器来设置元素的样式
|
||||
</style>
|
||||
```
|
||||
|
||||
注意，在每个元素的样式声明区域里，左右花括号（<code>{</code> 和 <code>}</code>）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
</section>
|
||||
注意，在每个元素的样式声明区域里，左右花括号（`{` 和 `}`）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
删除<code>h2</code>元素的行内样式，然后创建<code>style</code>样式声明区域，最后添加 CSS 样式规则使<code>h2</code>元素变为蓝色。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
删除`h2`元素的行内样式，然后创建`style`样式声明区域，最后添加 CSS 样式规则使`h2`元素变为蓝色。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 删除<code>h2</code>元素的行内样式。
|
||||
testString: assert(!$("h2").attr("style"));
|
||||
- text: 创建一个<code>style</code>样式声明区域。
|
||||
testString: assert($("style") && $("style").length >= 1);
|
||||
- text: <code>h2</code>元素颜色应为蓝色。
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
|
||||
- text: 确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。
|
||||
testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
- 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);
|
||||
# --hints--
|
||||
|
||||
删除`h2`元素的行内样式。
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
```
|
||||
|
||||
</section>
|
||||
创建一个`style`样式声明区域。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('style') && $('style').length >= 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
`h2`元素颜色应为蓝色。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
确保`h2`选择器的内容被花括号所围绕，并且样式规则以分号结束。
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
```
|
||||
|
||||
所有`style`应该是有效的且有一个结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/style>/g) &&
|
||||
code.match(/<\/style>/g).length ===
|
||||
(
|
||||
code.match(
|
||||
/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
|
||||
) || []
|
||||
).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,259 +1,46 @@
|
||||
---
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: 使用 CSS 变量一次更改多个元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
title: 使用 CSS 变量一次更改多个元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
<dfn>CSS 变量</dfn>是一种仅更改一个值，来一次性更改多个 CSS 样式属性的强大方法。
|
||||
|
||||
按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里，将<code>black</code>改为<code>gray</code>，<code>gray</code>改为<code>white</code>，<code>yellow</code>改为<code>orange</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`penguin`class 里，将`black`改为`gray`，`gray`改为`white`，`yellow`改为`orange`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<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 声明的<code>--penguin-belly</code>变量的值应为<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 声明的<code>--penguin-beak</code>变量的值应为<code>orange</code>。'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* change code below */
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
/* change code above */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`penguin` class 声明的`--penguin-skin`变量的值应为`gray`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`penguin` class 声明的`--penguin-belly`变量的值应为`white`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class 声明的`--penguin-beak`变量的值应为`orange`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: 使用十六进制编码获得指定颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
title: 使用十六进制编码获得指定颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫做十六进制编码，简称<code>hex</code>。
|
||||
我们日常使用最多的计数方法，基于十进制，使用 0 到 9 数字来表示。而<code>十六进制编码</code>（<code>hex</code>）基于 16 位数字，它含有 16 种不同字符。十六进制与十进制一样，0-9 表示着 0 到 9 的值，不同的是，A，B，C，D，E，F 表示着十六进制 10 到 15 的值。总的来说，0 到 F 在<code>十六进制</code>里代表着数字，提供了 16 种可能性。你可以在<a target='_blank' href='https://zh.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6'>这里</a>找到更多的相关信息。
|
||||
在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，<code>#000000</code>代表着黑色，同时也是最小的值。你可以在<a target='_blank' href='https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F'>这里</a>找到更多的相关信息。
|
||||
# --description--
|
||||
|
||||
你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫做十六进制编码，简称`hex`。
|
||||
|
||||
我们日常使用最多的计数方法，基于十进制，使用 0 到 9 数字来表示。而`十六进制编码`（`hex`）基于 16 位数字，它含有 16 种不同字符。十六进制与十进制一样，0-9 表示着 0 到 9 的值，不同的是，A，B，C，D，E，F 表示着十六进制 10 到 15 的值。总的来说，0 到 F 在`十六进制`里代表着数字，提供了 16 种可能性。你可以在[这里](https://zh.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6)找到更多的相关信息。
|
||||
|
||||
在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，`#000000`代表着黑色，同时也是最小的值。你可以在[这里](https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F)找到更多的相关信息。
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -18,52 +20,27 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用<code>#000000</code>的十六进制编码来替换<code>body</code>元素的黑色背景。
|
||||
</section>
|
||||
使用`#000000`的十六进制编码来替换`body`元素的黑色背景。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '使用<code>十六进制编码</code>来替换<code>black</code>的写法。'
|
||||
testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
|
||||
`body`元素的背景颜色应该是黑色。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
使用`十六进制编码`来替换`black`的写法。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,94 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: 使用十六进制编码混合颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
title: 使用十六进制编码混合颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
回顾一下，<code>hex</code>使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
|
||||
# --description--
|
||||
|
||||
回顾一下，`hex`使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
|
||||
|
||||
通过三原色，我们可以创建 1600 万种不同颜色！
|
||||
例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为<code>#FFA500</code>。
|
||||
<code>0</code>是十六进制里面最小的数字，表示着没有颜色。
|
||||
<code>F</code>是十六进制里面最大的数字，表示着最高的亮度。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把<code>style</code>标签里面的颜色值用正确的十六进制编码替换。
|
||||
<table class='table table-striped'><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></table>
|
||||
</section>
|
||||
例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为`#FFA500`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`0`是十六进制里面最小的数字，表示着没有颜色。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>red</code>关键词。'
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>green</code>关键词。'
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am dodger blue!</code>的<code>h1</code>元素的字体颜色应该为<code>dodger blue</code>。'
|
||||
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'
|
||||
testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
- text: '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。'
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>orange</code>关键词。'
|
||||
testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
`F`是十六进制里面最大的数字，表示着最高的亮度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把`style`标签里面的颜色值用正确的十六进制编码替换。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
使用`十六进制编码`替换`red`关键词。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: black;
|
||||
}
|
||||
.green-text {
|
||||
color: black;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: black;
|
||||
}
|
||||
.orange-text {
|
||||
color: black;
|
||||
}
|
||||
</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>
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
文本内容为`I am green!`的`h1`元素的字体颜色应该为`green`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
使用`十六进制编码`替换`green`关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am dodger blue!`的`h1`元素的字体颜色应该为`dodger blue`。
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`替换`dodgerblue`关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am orange!`的`h1`元素的字体颜色应该为`orange`。
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`替换`orange`关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,90 +1,86 @@
|
||||
---
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: 使用 RGB 混合颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
title: 使用 RGB 混合颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
就像使用十六进制编码一样，你可以通过不同值的组合，来混合得到不同的 RGB 颜色。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
将<code>style</code>标签里面中的十六进制编码替换为正确的 RGB 值。
|
||||
<table class='table table-striped'><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></table>
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
将`style`标签里面中的十六进制编码替换为正确的 RGB 值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '<code>red</code>颜色应使用<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));
|
||||
- text: '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。'
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
- text: '<code>orchid</code>颜色应使用<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));
|
||||
- text: '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。'
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
- text: '<code>blue</code>颜色应使用<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));
|
||||
- text: '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。'
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
- text: '<code>sienna</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
```
|
||||
# --hints--
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.orchid-text {
|
||||
color: #000000;
|
||||
}
|
||||
.sienna-text {
|
||||
color: #000000;
|
||||
}
|
||||
.blue-text {
|
||||
color: #000000;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`red`颜色应使用`RGB`值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为`I am orchid!`的`h1`元素的字体颜色应该为`orchid`。
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
`orchid`颜色应使用`RGB`值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为`I am blue!`的`h1`元素的字体颜色应该为`blue`。
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
`blue`颜色应使用`RGB`值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为`I am sienna!`的`h1`元素的字体颜色应该为`sienna`。
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
`sienna`颜色应使用`RGB`值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,20 +1,27 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: 使用 RGB 值为元素上色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
title: 使用 RGB 值为元素上色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。
|
||||
|
||||
黑色的 RGB 值声明如下：
|
||||
<code>rgb(0, 0, 0)</code>
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
|
||||
白色的 RGB 值声明如下：
|
||||
<code>rgb(255, 255, 255)</code>
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
|
||||
RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。
|
||||
|
||||
在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。
|
||||
|
||||
下面是通过使用 RGB 值设置背景颜色为橘色的例子：
|
||||
|
||||
```css
|
||||
@ -23,52 +30,23 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
让我们用<code>rgb(0, 0, 0)</code>的 RGB 值替换<code>body</code>元素背景颜色的十六进制编码。
|
||||
</section>
|
||||
让我们用`rgb(0, 0, 0)`的 RGB 值替换`body`元素背景颜色的十六进制编码。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。'
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
|
||||
`body`元素的背景颜色应该是黑色的。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
`body`元素的背景颜色的黑色值应该为`RGB`值。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #F00;
|
||||
}
|
||||
</style>
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user