fix(i18n): update chinese translation of basic css
This commit is contained in:
Zhicheng Chen
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
85164b3cd9
commit
8c1834badb
@ -2,23 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Add a Negative Margin to an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 向元素添加负边距
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
localTitle: 给元素添加负外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">元素的<code>margin</code>控制元素<code>border</code>与周围元素之间的空间量。如果将元素的<code>margin</code>设置为负值，则元素将变大。 </section>
|
||||
<section id='description'>
|
||||
元素的<code>margin（外边距）</code>控制元素边框与其他周围元素之间的距离大小。
|
||||
如果你设置元素<code>margin</code>为负值，元素会变得更大。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">尝试将<code>margin</code>设置为负值，如红色框的值。将蓝色框的<code>margin</code>更改为<code>-15px</code> ，因此它会填充其周围黄色框的整个水平宽度。 </section>
|
||||
<section id='instructions'>
|
||||
尝试设置蓝色盒子的<code>margin</code>为负值，跟红色盒子一样大小。
|
||||
蓝色盒子的<code>margin</code>设置为<code>-15px</code>，它会填满与黄色盒子之间的距离。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>-15px</code>的<code>margin</code>元素。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
|
||||
- text: '你的<code>blue-box</code> class的<code>margin</code>应该设置为<code>-15px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "-15px", '你的<code>blue-box</code> class的<code>margin</code>应该设置为<code>-15px</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -67,7 +74,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -79,7 +85,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,50 @@
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Add Borders Around Your Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 添加元素周围的边框
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
localTitle: 在元素周围添加边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS边框具有<code>style</code> ， <code>color</code>和<code>width</code>等属性。例如，如果我们想要在HTML元素周围创建一个红色的5像素边框，我们可以使用此类： <blockquote> <风格> <br> .thin-red-border { <br>边框颜色：红色; <br> border-width：5px; <br>边框式：坚固; <br> } <br> </样式> </blockquote></section>
|
||||
<section id='description'>
|
||||
CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属性。
|
||||
假如，我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>thick-green-border</code> 。这个类应该在HTML元素周围添加一个10px的实心绿色边框。将课程应用于您的猫照片。请记住，您可以使用其<code>class</code>属性将多个类应用于元素，方法是使用空格分隔每个类名。例如： <code><img class="class1 class2"></code> </section>
|
||||
<section id='instructions'>
|
||||
创建一个<code>thick-green-border</code> CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在你的猫咪照片上。
|
||||
记得，在一个元素上可以同时应用多个<code>class</code>，通过使用空格来分隔。例子如下：
|
||||
<code><img class="class1 class2"></code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>img</code>元素应该具有<code>smaller-image</code>类。
|
||||
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||
- text: 你的<code>img</code>元素应该有类<code>thick-green-border</code> 。
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
|
||||
- text: 为图像提供<code>10px</code>的边框宽度。
|
||||
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of <code>10px</code>.");'
|
||||
- text: 为您的图像提供<code>solid</code>的边框样式。
|
||||
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
|
||||
- text: <code>img</code>元素周围的边框应为绿色。
|
||||
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
|
||||
- text: '你的<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: assert($("img").hasClass("smaller-image"), '你的<code>img</code>元素应该含有<code>smaller-image</code> class。');
|
||||
- text: '同时，你的<code>img</code>元素应该含有<code>thick-green-border</code> class。'
|
||||
testString: assert($("img").hasClass("thick-green-border"), '同时，你的<code>img</code>元素应该含有<code>thick-green-border</code> class。');
|
||||
- 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, '设置你的图片边框为<code>10px</code>。');
|
||||
- text: '设置你的图片边框为<code>solid</code>实线。'
|
||||
testString: assert($("img").css("border-right-style") === "solid", '设置你的图片边框为<code>solid</code>实线。');
|
||||
- text: '<code>img</code>元素的边框颜色应该为绿色。'
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)", '<code>img</code>元素的边框颜色应该为绿色。');
|
||||
|
||||
```
|
||||
|
||||
@ -60,48 +79,46 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,35 @@
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Add Different Margins to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在元素的每一侧添加不同的边距
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
localTitle: 给元素的每一侧添加不同的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时您会想要自定义元素，使其每边都有不同的<code>margin</code> 。 CSS允许您控制的<code>margin</code>与元素的所有四个单项两侧<code>margin-top</code> ， <code>margin-right</code> ， <code>margin-bottom</code> ，和<code>margin-left</code>属性。 </section>
|
||||
<section id='description'>
|
||||
有时候，你会想给一个元素每个方向的<code>margin</code>都设置成一个特定的值。
|
||||
CSS 允许你使用<code>margin-top</code>，<code>margin-right</code>，<code>margin-bottom</code>和<code>margin-left</code>属性来设置四个不同方向的<code>margin</code>值。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">蓝色框的顶部和左侧<code>margin</code>为<code>40px</code> ，底部和右侧仅为<code>20px</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
蓝色盒子的顶部和左侧的<code>margin</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给元素顶部<code>40px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: 您的<code>blue-box</code>类应该赋予元素<code>20px</code> <code>margin</code>的权利。
|
||||
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素的底部提供<code>20px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素左边<code>40px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: '你的<code>blue-box</code> class 的右侧<code>margin</code>（上外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px", '你的<code>blue-box</code> class 的顶部<code>margin</code>（上外边距）值应为<code>40px</code>。');
|
||||
- text: '你的<code>blue-box</code> class 的右侧<code>margin</code>（右外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px", '你的<code>blue-box</code> class 的右侧<code>margin</code>（右外边距）值应为<code>20px</code>。');
|
||||
- text: '你的<code>blue-box</code> class 的底部<code>margin</code>（下外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px", '你的<code>blue-box</code> class 的底部<code>margin</code>（下外边距）值应为<code>20px</code>。');
|
||||
- text: '你的<code>blue-box</code> class 的左侧<code>margin</code>（左外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px", '你的<code>blue-box</code> class 的左侧<code>margin</code>（左外边距）值应为<code>40px</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -74,7 +80,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -89,4 +94,6 @@ tests:
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,35 @@
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Add Different Padding to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在元素的每一侧添加不同的填充
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
localTitle: 给元素的每一侧添加不同的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时您会想要自定义一个元素，使其每边都有不同数量的<code>padding</code> 。 CSS允许您控制的<code>padding</code>与元素的所有四个单项两侧<code>padding-top</code> ， <code>padding-right</code> ， <code>padding-bottom</code> ，并<code>padding-left</code>属性。 </section>
|
||||
<section id='description'>
|
||||
有时候，你会想给一个元素每个方向的<code>padding</code>都设置成一个特定的值
|
||||
CSS 允许你使用<code>padding-top</code>，<code>padding-right</code>， <code>padding-bottom</code>和<code>padding-left</code>属性来设置四个不同方向的<code>padding</code>值。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在蓝色框的顶部和左侧给出<code>40px</code>的<code>padding</code> ，但在其底部和右侧只有<code>20px</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
蓝色盒子的顶部和左侧的<code>padding</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>40px</code> <code>padding</code>元素的顶部。
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code> <code>padding</code>元素的权利。
|
||||
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code> <code>padding</code>元素的底部。
|
||||
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素左边<code>padding</code> <code>40px</code> 。
|
||||
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: '你的<code>blue-box</code> class 的顶部<code>padding</code>（上内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px", '你的<code>blue-box</code> class 的顶部<code>padding</code>（上内边距）值应为<code>40px</code>。');
|
||||
- text: '你的<code>blue-box</code> class 的右侧<code>padding</code>（右内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px", '你的<code>blue-box</code> class 的右侧<code>padding</code>（右内边距）值应为<code>20px</code>。');
|
||||
- text: '你的<code>blue-box</code> class 的底部<code>padding</code>（下内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px", '你的<code>blue-box</code> class 的底部<code>padding</code>（下内边距）值应为<code>20px</code>。');
|
||||
- text: '你的<code>blue-box</code> class 的左侧<code>padding</code>（左内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px", '你的<code>blue-box</code> class 的左侧<code>padding</code>（左内边距）值应为<code>40px</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -74,7 +80,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -86,7 +91,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,31 @@
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Add Rounded Corners with border-radius
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 添加带有border-radius的圆角
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
localTitle: 用 border-radius 添加圆角边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">你的猫照片目前有尖角。我们可以使用名为<code>border-radius</code>的CSS属性来舍入这些角。 </section>
|
||||
<section id='description'>
|
||||
你的猫咪图片边角很尖锐，我们可以使用<code>border-radius</code>属性来让它变得圆润。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">您可以使用像素指定<code>border-radius</code> 。给你的猫照片<code>border-radius</code> <code>10px</code> 。注意：此挑战允许多种可能的解决方案。例如，您可以将<code>border-radius</code>添加到<code>.thick-green-border</code>类或<code>.smaller-image</code>类。 </section>
|
||||
<section id='instructions'>
|
||||
<code>border-radius</code>可以用<code>px</code>像素单位来赋值。给你的猫咪图片设置 10px 的<code>border-radius</code>。
|
||||
注意：这个挑战有多个解决方法。例如，添加<code>border-radius</code>属性到<code>.thick-green-border</code>class 或<code>.smaller-image</code>class 里都是可行的。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的图片元素应该具有“thick-green-border”类。
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
|
||||
- text: 您的图像的边框半径应为<code>10px</code>
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
|
||||
- text: '你的图片元素应具有 "thick-green-border" class 属性。'
|
||||
testString: assert($("img").hasClass("thick-green-border"), '你的图片元素应具有 "thick-green-border" class 属性。');
|
||||
- text: '你的图片应含有<code>10px</code>的边框圆角。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 8, '你的图片应含有<code>10px</code>的边框圆角。');
|
||||
|
||||
```
|
||||
|
||||
@ -60,36 +66,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -101,7 +106,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Adjust the Margin of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整元素的边距
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
localTitle: 调整元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">元素的<code>margin</code>控制元素<code>border</code>与周围元素之间的空间量。在这里，我们可以看到蓝色框和红色框嵌套在黄色框中。请注意，红色框的<code>margin</code>大于蓝色框，使其看起来更小。当您增加蓝框的<code>margin</code> ，它将增加其边框与周围元素之间的距离。 </section>
|
||||
<section id='description'>
|
||||
<code>margin（外边距）</code>控制元素的边框与其他元素之间的距离。
|
||||
在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的<code>margin</code>值要比蓝色盒子的大，让它看起来比蓝色盒子要小。
|
||||
当你增加蓝色的<code>margin</code>值，它会增加元素边框到其他周围元素的距离。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改蓝色框的<code>margin</code>以匹配红色框的<code>margin</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
蓝色的盒子<code>margin</code>的值要跟红色盒子的一样大小。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code>的<code>margin</code>元素。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: '你的<code>blue-box</code> class 的<code>margin</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "20px", '你的<code>blue-box</code> class 的<code>margin</code>值应为<code>20px</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -68,7 +75,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -84,3 +90,4 @@ tests:
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,33 @@
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Adjust the Padding of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整元素的填充
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
localTitle: 调整元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们将我们的Cat Photo App放一段时间，了解更多关于样式HTML的信息。您可能已经注意到了这一点，但所有HTML元素基本上都是小矩形。三个重要属性控制每个HTML元素周围的空间： <code>padding</code> ， <code>margin</code>和<code>border</code> 。元素的<code>padding</code>控制元素内容与其<code>border</code>之间的空间量。在这里，我们可以看到蓝色框和红色框嵌套在黄色框中。请注意，红色框具有比蓝色框更多的<code>padding</code> 。当您增加蓝框的<code>padding</code> ，它将增加文本与其周围边框之间的距离（ <code>padding</code> ）。 </section>
|
||||
<section id='description'>
|
||||
我们先暂时把猫咪图片放在一边，让我们去学习更多 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>以匹配红色框的<code>padding</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
蓝色的盒子<code>padding</code>的值要跟红色盒子的一样大小。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code>的<code>padding</code>元素。
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: '你的<code>blue-box</code> class 的<code>padding</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "20px", '你的<code>blue-box</code> class 的<code>padding</code>值应为<code>20px</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -66,7 +76,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -78,7 +87,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,39 @@
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Attach a Fallback value to a CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将Fallback值附加到CSS变量
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
localTitle: 给 CSS 变量附加回退值
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">将变量用作CSS属性值时，如果给定变量无效，则可以附加浏览器将恢复的回退值。 <strong>注意：</strong>此回退不用于增加浏览器兼容性，并且它不适用于IE浏览器。而是使用它，以便浏览器在无法找到变量时显示颜色。这是你如何做到的： <blockquote>背景：var（ - 企鹅皮，黑色）; </blockquote>如果未设置变量，则会将背景设置为黑色。请注意，这对于调试很有用。 </section>
|
||||
<section id='description'>
|
||||
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
|
||||
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
这样，当你的变量有问题的时候，它会设置你的背景颜色为黑色。
|
||||
提示：这对调试会很有帮助。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">它看起来提供给<code>.penguin-top</code>和<code>.penguin-bottom</code>类的变量存在问题。而不是修复拼写错误，将<code>.penguin-top</code>值的<code>black</code>添加到<code>.penguin-top</code>和<code>.penguin-bottom</code>类的<code>background</code>属性中。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>penguin-top</code>和<code>penguin-bottom</code>class 里面，<code>background</code>属性设置一个<code>black</code>的备用色。
|
||||
<strong>注意：</strong>因为 CSS 变量名拼写错了，所以备用值会被使用。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 的后退值应用于<code>black</code>为<code>background</code>的财产<code>penguin-top</code>班。
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
|
||||
- text: 将<code>black</code>的后备值应用于<code>penguin-bottom</code>类的<code>background</code>属性。
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
|
||||
- text: '<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), ''<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'');'
|
||||
- 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), ''<code>penguin-bottom</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -236,7 +250,6 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -248,7 +261,10 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,30 @@
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Change a variable for a specific area
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改特定区域的变量
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
localTitle: 更改特定区域的变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当您在创建变量<code>:root</code> ，他们将设置可变整个页面的价值。然后，您可以通过在特定元素中再次设置它们来覆盖这些变量。 </section>
|
||||
<section id='description'>
|
||||
当你在<code>:root</code>里创建变量时，这些变量的作用域是整个页面。
|
||||
如果在元素里创建相同的变量，会重写<code>:root</code>变量设置的值。
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>penguin</code>类<code>--penguin-belly</code>的值更改为<code>white</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里，设置<code>--penguin-belly</code>的值为<code>white</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>penguin</code>类应该将<code>--penguin-belly</code>变量重新分配为<code>white</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
|
||||
- text: '应该在<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), ''应该在<code>penguin</code>clas 里重定义<code>--penguin-belly</code>的变量值，且它的值为<code>white</code>。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -234,7 +241,6 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -246,7 +252,10 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,36 @@
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Change the Color of Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改文本的颜色
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
localTitle: 更改文本的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们改变一些文字的颜色。我们可以通过改变你的<code>h2</code>元素的<code>style</code>来做到这一点。负责元素文本<code>color</code>属性是<code>color</code>样式属性。以下是将<code>h2</code>元素的文本颜色设置为蓝色的方法： <code><h2 style="color: blue;">CatPhotoApp</h2></code>请注意，最好使用<code>;</code>结束内联<code>style</code>声明<code>;</code> 。 </section>
|
||||
<section id='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>
|
||||
<section id='instructions'>
|
||||
请把<code>h2</code>元素的文本颜色设置为红色。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h2</code>元素应该是红色的。
|
||||
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
|
||||
- text: 你的<code>style</code>声明应以a结尾<code>;</code> 。
|
||||
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)", '<code>h2</code>元素应该为红色。');
|
||||
- text: '<code>h2</code>元素的<code>style</code>属性值应该以<code>;</code>结束。'
|
||||
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/),''<code>h2</code>元素的<code>style</code>属性值应该以<code>;</code>结束。'');'
|
||||
- text: '<code>style</code> 声明应该以 <code>;</code> 结尾'
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
|
||||
```
|
||||
|
||||
@ -34,36 +45,35 @@ tests:
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -75,7 +85,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,35 @@
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Change the Font Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改元素的字体大小
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
localTitle: 更改元素的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">字体大小由<code>font-size</code> CSS属性控制，如下所示： <blockquote> h1 { <br> font-size：30px; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
字体大小由<code>font-size</code>属性控制，如下所示：
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">里面的相同<code><style></code>包含您的标记<code>red-text</code>类，创建一个条目<code>p</code>元素和设置<code>font-size</code>为16个像素（ <code>16px</code> ）。 </section>
|
||||
<section id='instructions'>
|
||||
在包含<code>red-text</code>class 选择器的<code><style></code>声明区域的里，创建一个<code>p</code>元素样式规则，并设置<code>font-size</code>为<code>16px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 在<code>style</code>标记之间，给出<code>p</code>元素<code>font-size</code>为<code>16px</code> 。浏览器和文本缩放应为100％。
|
||||
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
|
||||
- text: '在<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), ''在<code>style</code>样式声明区域里，<code>p</code>元素的<code>font-size</code>的值应为<code>16px</code>，浏览器和文本缩放应设置为 100％。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -38,36 +50,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -79,7 +90,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,35 @@
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Create a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建自定义CSS变量
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
localTitle: 创建一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要创建一个CSS变量，你只需要给它一个<code>name</code>有<code>two dashes</code>在它前面，并为其分配一个<code>value</code>是这样的： <blockquote> - penguin-skin：灰色; </blockquote>这将创建一个名为<code>--penguin-skin</code>的变量，并为其赋值为<code>gray</code> 。现在，您可以在CSS中的其他位置使用该变量将其他元素的值更改为灰色。 </section>
|
||||
<section id='description'>
|
||||
创建一个 CSS 变量，你只需要在变量名前添加两个<code>破折号</code>，并为其赋值，例子如下：
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
这样会创建一个<code>--penguin-skin</code>变量并赋值为<code>gray（灰色）</code>。
|
||||
现在，其他元素可通过该变量来设置为<code>gray（灰色）</code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>penguin</code>类中，创建一个变量名称<code>--penguin-skin</code>并赋予它一个<code>gray</code>值</section>
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里面，创建一个<code>--penguin-skin</code>变量，且赋值为<code>gray（灰色）</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>penguin</code>类应声明<code>--penguin-skin</code>变量并将其指定为<code>gray</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
|
||||
- text: '<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -227,7 +239,6 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -239,7 +250,10 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,40 @@
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Give a Background Color to a div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 为div元素提供背景颜色
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
localTitle: 给 div 元素添加背景色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>background-color</code>属性设置元素的背景颜色。例如，如果您希望元素的背景颜色为<code>green</code> ，则将其放在<code>style</code>元素中： <blockquote> .green-background { <br>背景颜色：绿色; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
<code>background-color</code>属性可以设置元素的背景颜色。
|
||||
例如，你想将一个元素的背景颜色改为<code>green</code>，可以在你的<code>style</code>里面这样写：
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>silver-background</code>的类， <code>background-color</code>为银色。将此类分配给<code>div</code>元素。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个<code>silver-background</code>class 并设置<code>background-color</code>为<code>silver</code>。 并用在<code>div</code>元素上。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>div</code>元素类<code>silver-background</code> 。
|
||||
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
|
||||
- text: 你的<code>div</code>元素应该有银色背景。
|
||||
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
|
||||
- text: 定义一个类名为<code>silver-background</code>的内<code>style</code>元素的值赋给<code>silver</code>的<code>background-color</code>属性。
|
||||
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
|
||||
- text: '<code>div</code>元素应有<code>silver-background</code> class。'
|
||||
testString: assert($("div").hasClass("silver-background"), '<code>div</code>元素应有<code>silver-background</code> class。');
|
||||
- text: '<code>div</code>元素背景颜色应设置为<code>silver</code>。'
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)", '<code>div</code>元素背景颜色应设置为<code>silver</code>。');
|
||||
- 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*}/));
|
||||
|
||||
```
|
||||
|
||||
@ -63,36 +76,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -104,7 +116,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,41 @@
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Import a Google Font
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 导入Google字体
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
localTitle: 引入谷歌字体
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">除了指定在大多数操作系统上找到的常用字体外，我们还可以指定在我们的网站上使用的非标准自定义Web字体。互联网上有各种网络字体来源，但在本例中，我们将重点关注Google字体库。 <a href="https://fonts.google.com/" target="_blank">Google字体</a>是一个免费的网络字体库，您可以通过引用字体的URL在CSS中使用它。因此，让我们继续导入并应用Google字体（请注意，如果Google在您所在的国家/地区被屏蔽，则需要跳过此挑战）。要导入Google字体，您可以从Google字体库中复制字体网址，然后将其粘贴到HTML中。对于这个挑战，我们将导入<code>Lobster</code>字体。为此，请复制以下代码段并将其粘贴到代码编辑器的顶部（在开始<code>style</code>元素之前）： <code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code>现在，您可以使用<code>Lobster</code>作为FAMILY_NAME在CSS中使用<code>Lobster</code>字体，如下例所示： <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code> 。 GENERIC_NAME是可选的，如果其他指定的字体不可用，则为后备字体。这将在下一个挑战中得到体现。系列名称区分大小写，如果名称中有空格，则需要用引号括起来。例如，您需要引号才能使用<code>"Open Sans"</code>字体，但不能使用<code>Lobster</code>字体。 </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建使用<code>Lobster</code>字体的<code>font-family</code> CSS规则，并确保它将应用于您的<code>h2</code>元素。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个 CSS 规则，<code>font-family</code>属性里设置为<code>Lobster</code>字体，并把这个字体应用到所有的<code>h2</code>元素。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 导入<code>Lobster</code>字体。
|
||||
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
|
||||
- text: 你的<code>h2</code>元素应该使用字体<code>Lobster</code> 。
|
||||
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
|
||||
- text: 使用<code>h2</code> CSS选择器更改字体。
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
|
||||
- text: 你的<code>p</code>元素仍然应该使用字体<code>monospace</code> 。
|
||||
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
|
||||
- text: '引入<code>Lobster</code>字体。'
|
||||
testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code), '引入<code>Lobster</code>字体。');
|
||||
- text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i), '<code>h2</code>元素必须使用<code>Lobster</code>字体。');
|
||||
- text: '使用<code>h2</code>选择器去改变字体样式。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code), ''使用<code>h2</code>选择器去改变字体样式。'');'
|
||||
- text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").css("font-family").match(/monospace/i), '<code>p</code>元素应该保持使用<code>monospace</code>字体。');
|
||||
|
||||
```
|
||||
|
||||
@ -49,36 +61,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -90,7 +101,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -3,22 +3,29 @@ id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Improve Compatibility with Browser Fallbacks
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 改善与浏览器回退的兼容性
|
||||
forumTopicId: 301087
|
||||
localTitle: 通过浏览器降级提高兼容性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用CSS时，您可能会在某些时候遇到浏览器兼容性问题。这就是为什么提供浏览器回退以避免潜在问题的重要性。当您的浏览器解析网页的CSS时，它会忽略它无法识别或支持的任何属性。例如，如果使用CSS变量在站点上分配背景颜色，Internet Explorer将忽略背景颜色，因为它不支持CSS变量。在这种情况下，浏览器将使用它对该属性的任何值。如果找不到该属性的任何其他值集，它将恢复为默认值，这通常不理想。这意味着如果您确实希望提供浏览器回退，那么就像在声明之前提供另一个更广泛支持的值一样简单。这样，较旧的浏览器将有一些东西可以依赖，而较新的浏览器只会解释级联后期的任何声明。 </section>
|
||||
<section id='description'>
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题就显得很重要。
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个栗子，如果使用 CSS 变量来指定站点的背景色， IE 浏览器由于不支持 CSS 变量会忽视背景色。因此，浏览器会使用其它值。如果没有找到其它值，会使用默认值，也就是没有背景色。
|
||||
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">它看起来像一个变量用于设置<code>.red-box</code>类的背景颜色。让我们通过在现有声明之前添加另一个<code>background</code>声明来提高我们的浏览器兼容性，并将其值设置为红色。 </section>
|
||||
<section id='instructions'>
|
||||
看来已经使用了变量做为 <code>.red-box</code> class 的背景色。来通过在存在的声明前添加其它的值为 red 的 <code>background</code> 声明来提高浏览器的兼容性。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>.red-box</code>规则应包括在现有<code>background</code>声明之前立即将<code>background</code>设置为红色的后备。
|
||||
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
|
||||
- text: '<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));
|
||||
|
||||
```
|
||||
|
||||
@ -42,7 +49,6 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -54,7 +60,20 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,24 +1,30 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Cascading CSS variables
|
||||
title: Inherit CSS Variables
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 级联CSS变量
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
localTitle: 继承 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">创建变量时，您可以在创建变量的元素内使用它。它也可以在嵌套在其中的任何元素中使用。这种效应称为<dfn>级联</dfn> 。由于级联，CSS变量通常在<dfn>：root</dfn>元素中定义。 <code>:root</code>是一个<dfn>伪类</dfn>选择器，它匹配文档的根元素，通常是<code></code>元件。通过在<code>:root</code>创建变量，它们将在全局可用，并且可以在样式表中的任何其他选择器中访问。 </section>
|
||||
<section id='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> 。然后，您可以在任何使用该变量的位置查看该值将如何级联以将值更改为粉红色。 </section>
|
||||
<section id='instructions'>
|
||||
在 <code>:root</code> 选择器里定义变量 <code>--penguin-belly</code> 并赋值 <code>pink</code>。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
|
||||
- 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));
|
||||
|
||||
```
|
||||
|
||||
@ -232,7 +238,6 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -244,7 +249,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
var code = ":root {--penguin-belly: pink;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
@ -2,35 +2,43 @@
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Inherit Styles from the Body Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 从Body元素继承样式
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
localTitle: 从 Body 元素继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在我们已经证明每个HTML页面都有一个<code>body</code>元素，并且它的<code>body</code>元素也可以用CSS设置样式。记住，你可以风格你<code>body</code>元素，就像任何其他HTML元素，和所有其他元素将继承你的<code>body</code>元素的样式。 </section>
|
||||
<section id='description'>
|
||||
我们已经证明每一个 HTML 页面都含有<code>body</code>元素，<code>body</code>元素也可以使用 CSS 样式。
|
||||
设置<code>body</code>元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到<code>body</code>设置的样式。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">首先，创建一个<code>h1</code>与文本元素<code>Hello World</code>然后，让我们给您的网页上的所有元素的颜色<code>green</code>中加入<code>color: green;</code>你的<code>body</code>元素的风格声明。最后，通过添加<code>font-family: monospace;</code> ，为你的<code>body</code>元素提供<code>monospace</code>的<code>font-family: monospace;</code>你的<code>body</code>元素的风格声明。 </section>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 创建一个<code>h1</code>元素。
|
||||
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");'
|
||||
- text: 你的<code>h1</code>元素应该有文本<code>Hello World</code> 。
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");'
|
||||
- text: 确保您的<code>h1</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");'
|
||||
- text: 为你的<code>body</code>元素赋予<code>green</code>的<code>color</code>属性。
|
||||
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");'
|
||||
- text: 为<code>body</code>元素提供<code>monospace</code>的<code>font-family</code>属性。
|
||||
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该从你的<code>body</code>元素继承font <code>monospace</code> 。
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");'
|
||||
- text: 您的<code>h1</code>元素应该从您的<code>body</code>元素继承绿色。
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");'
|
||||
- text: '创建一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length > 0), '创建一个<code>h1</code>元素。');
|
||||
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。');
|
||||
- text: '确保你的<code>h1</code>元素具有结束标记。'
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, '确保你的<code>h1</code>元素具有结束标记。');
|
||||
- text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"), '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。');
|
||||
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)), '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。');
|
||||
- text: '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。');
|
||||
- text: '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。');
|
||||
|
||||
```
|
||||
|
||||
@ -48,7 +56,6 @@ tests:
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -60,7 +67,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,30 @@
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Make Circular Images with a border-radius
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用border-radius制作圆形图像
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
localTitle: 用 border-radius 制作圆形图片
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">除像素外，您还可以使用百分比指定<code>border-radius</code> 。 </section>
|
||||
<section id='description'>
|
||||
除像素外，你也可以使用百分比来指定<code>border-radius</code>的值。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">给你的猫照片<code>border-radius</code>为<code>50%</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
将<code>border-radius</code>的值设置为<code>50%</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的图像应具有<code>50%</code>的边框半径，使其完美呈圆形。
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
|
||||
- text: 请务必使用<code>50%</code>的百分比值。
|
||||
testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
|
||||
- text: '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48, '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。');
|
||||
- text: '请确保百分值为<code>50%</code>。'
|
||||
testString: assert(code.match(/50%/g), '请确保百分值为<code>50%</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -61,36 +66,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -102,7 +106,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,33 +2,44 @@
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Override All Other Styles by using Important
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用重要覆盖所有其他样式
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
localTitle: Important 的优先级最高
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">好极了！我们刚刚证明了内联样式将覆盖<code>style</code>元素中的所有CSS声明。可是等等。有一种覆盖CSS的最后一种方法。这是所有人中最强大的方法。但在我们这样做之前，让我们谈谈为什么你想要覆盖CSS。在许多情况下，您将使用CSS库。这些可能会意外地覆盖您自己的CSS。所以当你绝对需要确定一个元素有特定的CSS时，你可以使用<code>!important</code>让我们一直回到我们的<code>pink-text</code>类声明。请记住，我们的<code>pink-text</code>类被后续的类声明，id声明和内联样式覆盖。 </section>
|
||||
<section id='description'>
|
||||
耶！我们刚刚又证明了行内样式会覆盖<code>style</code>标签里面所有的 CSS 声明。
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖你的 CSS 样式。当你需要保证你的 CSS 样式不受影响，你可以使用<code>!important</code>。
|
||||
让我们回到<code>pink-text</code>class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">让我们在粉红色文本元素的颜色声明中添加关键字<code>!important</code> ，以100％确定你的<code>h1</code>元素是粉红色的。如何执行此操作的示例是： <code>color: red !important;</code> </section>
|
||||
<section id='instructions'>
|
||||
|
||||
在<code>pink-text</code>class 的<code>color</code>声明里面使用<code>!important</code>关键字，去确保<code>h1</code>元素的字体颜色一定为粉色。
|
||||
操作的方法大概如下：
|
||||
<code>color: red !important;</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: 您的<code>h1</code>元素应具有<code>orange-text</code>的ID。
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: '您的<code>h1</code>元素应具有内联样式的<code>color: white</code> 。'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color: white</code>.");'
|
||||
- text: 你的<code>pink-text</code>类声明应该有<code>!important</code>关键字来覆盖所有其他声明。
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
|
||||
- text: 你的<code>h1</code>元素应该是粉红色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text", '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。');
|
||||
- text: '<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), ''<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'');'
|
||||
- text: '<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'');'
|
||||
- text: '<code>h1</code>元素的字体颜色应该为粉色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", '<code>h1</code>元素的字体颜色应该为粉色。');
|
||||
|
||||
```
|
||||
|
||||
@ -57,7 +68,6 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -69,7 +79,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,35 +2,53 @@
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Override Class Declarations by Styling ID Attributes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过样式ID属性覆盖类声明
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
localTitle: ID 选择器优先级高于 Class 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们刚刚证明了浏览器从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的CSS声明。但我们还没有完成。还有其他方法可以覆盖CSS。你还记得id属性吗？让我们覆盖你的<code>pink-text</code>和<code>blue-text</code>类，并通过给<code>h1</code>元素一个id然后设置那个id样式，使你的<code>h1</code>元素变成橙色。 </section>
|
||||
<section id='description'>
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
通过给<code>h1</code>元素添加 id 属性，来覆盖 class 属性定义的同名样式。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为你的<code>h1</code>元素提供<code>orange-text</code>的<code>id</code>属性。请记住，id样式如下所示： <code><h1 id="orange-text"></code>在<code>h1</code>元素上保留<code>blue-text</code>和<code>pink-text</code>类。在<code>style</code>元素中为您的<code>orange-text</code> id创建一个CSS声明。这是一个示例： <blockquote> ＃brown-text { <br>颜色：棕色; <br> } </blockquote>注意：无论您是在粉红色文本类之上还是之下声明此CSS都无关紧要，因为id属性始终优先。 </section>
|
||||
<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
|
||||
#brown-text {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
注意：无论在<code>pink-text</code>class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: 为你的<code>h1</code>元素提供<code>orange-text</code>的id。
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
|
||||
- text: 应该只有一个<code>h1</code>元素。
|
||||
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
|
||||
- text: 为您的<code>orange-text</code> ID创建一个CSS声明
|
||||
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
|
||||
- text: 不要给你的<code>h1</code>任何<code>style</code>属性。
|
||||
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
|
||||
- text: 你的<code>h1</code>元素应该是橙色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
- text: '<code>h1</code>的 id 属性值为<code>orange-text</code>。'
|
||||
testString: assert($("h1").attr("id") === "orange-text", '<code>h1</code>的 id 属性值为<code>orange-text</code>。');
|
||||
- text: '应该只有一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length === 1), '应该只有一个<code>h1</code>元素。');
|
||||
- text: '创建名为<code>orange-text</code>的 id 选择器。'
|
||||
testString: assert(code.match(/#orange-text\s*{/gi), '创建名为<code>orange-text</code>的 id 选择器。');
|
||||
- text: '不要在<code>h1</code>元素里面使用<code>style（行内样式）</code>。'
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi), '不要在<code>h1</code>元素里面使用<code>style（行内样式）</code>。');
|
||||
- text: '<code>h1</code>元素的字体颜色应为橘色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)", '<code>h1</code>元素的字体颜色应为橘色。');
|
||||
|
||||
```
|
||||
|
||||
@ -56,7 +74,6 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -68,7 +85,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,39 @@
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Override Class Declarations with Inline Styles
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用内联样式覆盖类声明
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
localTitle: 内联样式的优先级高于 ID 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">所以我们已经证明了id声明覆盖了类声明，无论它们在<code>style</code>元素CSS中的声明位置如何。还有其他方法可以覆盖CSS。你还记得内联样式吗？ </section>
|
||||
<section id='description'>
|
||||
我们刚刚证明了，id 选择器无论在<code>style</code>标签哪里声明，都会覆盖 class 声明的样式，
|
||||
其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>inline style</code>尝试使我们的<code>h1</code>元素变白。请记住，在线条样式中如下所示： <code><h1 style="color: green;"></code>在<code>h1</code>元素上保留<code>blue-text</code>和<code>pink-text</code>类。 </section>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: 您的<code>h1</code>元素应具有<code>orange-text</code>的ID。
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: 为您的<code>h1</code>元素提供内联样式。
|
||||
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
|
||||
- text: 你的<code>h1</code>元素应该是白色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text", '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。');
|
||||
- text: '<code>h1</code>元素应该含有行内样式。'
|
||||
testString: assert(document.querySelector('h1[style]'), '<code>h1</code>元素应该含有行内样式。');
|
||||
- text: '<code>h1</code>元素的字体颜色应该为白色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)", '<code>h1</code>元素的字体颜色应该为白色。');
|
||||
|
||||
```
|
||||
|
||||
@ -55,7 +63,6 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -67,7 +74,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,40 @@
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Override Styles in Subsequent CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 覆盖后续CSS中的样式
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
localTitle: Class 选择器的优先级高于继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们的“粉红色文本”类覆盖了我们的<code>body</code>元素的CSS声明！我们刚刚证明我们的类将覆盖<code>body</code>元素的CSS。所以下一个合乎逻辑的问题是，我们可以做些什么来覆盖我们的<code>pink-text</code>类？ </section>
|
||||
<section id='description'>
|
||||
"pink-text" class 覆盖了<code>body</code>元素的 CSS 声明。
|
||||
我们刚刚证明了我们的 class 会覆盖<code>body</code>的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的<code>pink-text</code>class？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>blue-text</code>的附加CSS类，它为元素提供蓝色。确保它低于<code>pink-text</code>类声明。除了<code>pink-text</code>类之外，将<code>blue-text</code>类应用于<code>h1</code>元素，让我们看看哪个获胜。将多个类属性应用于HTML元素是通过它们之间的空格完成的，如下所示： <code>class="class1 class2"</code>注意：HTML元素中列出的类的顺序无关紧要。但是， <code><style></code>部分中的<code>class</code>声明的顺序是重要的。第二个声明将始终优先于第一个声明。因为<code>.blue-text</code>被声明为第二个，所以它会覆盖<code>.pink-text</code>的属性</section>
|
||||
<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>
|
||||
注意：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'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: <code>blue-text</code>和<code>pink-text</code>都应属于同一个<code>h1</code>元素。
|
||||
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
|
||||
- text: 你的<code>h1</code>元素应该是蓝色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
- text: '<code>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。'
|
||||
testString: assert($(".pink-text").hasClass("blue-text"), '<code>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。');
|
||||
- text: '<code>h1</code>元素的颜色应为蓝色。'
|
||||
testString: assert($("h1").css("color") === "rgb(0, 0, 255)", '<code>h1</code>元素的颜色应为蓝色。');
|
||||
|
||||
```
|
||||
|
||||
@ -47,7 +58,6 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -59,7 +69,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,35 @@
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Prioritize One Style Over Another
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将一种风格优先于另一种风格
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
localTitle: 样式中的优先级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时，您的HTML元素将收到多个彼此冲突的样式。例如，您的<code>h1</code>元素不能同时为绿色和粉红色。让我们看看当我们创建一个使文本变为粉红色的类，然后将其应用于元素时会发生什么。我们的类<em>会覆盖</em> <code>body</code>元素的<code>color: green;</code> CSS属性？ </section>
|
||||
<section id='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-text</code>的CSS类，它为元素提供粉红色。为你的<code>h1</code>元素提供<code>pink-text</code>类。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个能将元素的字体颜色改为<code>pink</code>的CSS class，并起名为<code>pink-text</code>。
|
||||
给你的<code>h1</code>元素添加<code>pink-text</code>class。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code><style></code>应该有一个改变<code>color</code>的<code>pink-text</code> CSS类。
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该是粉红色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
- text: '<code>h1</code>元素应该含有<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该含有<code>pink-text</code> class。');
|
||||
- text: '<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), ''<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'');'
|
||||
- text: '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -42,7 +50,6 @@ tests:
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -57,4 +64,6 @@ tests:
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,36 @@
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Set the Font Family of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置元素的字体系列
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
localTitle: 设置元素的字体家族
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>font-family</code>属性设置元素应使用的<code>font-family</code> 。例如，如果要将<code>h2</code>元素的字体设置为<code>sans-serif</code> ，则可以使用以下CSS： <blockquote> h2 { <br> font-family：sans-serif; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
通过<code>font-family</code>属性，可以设置元素里面的字体样式。
|
||||
如果你想设置<code>h2</code>元素的字体为<code>sans-serif</code>，你可以用以下的 CSS 规则：
|
||||
|
||||
```css
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使所有<code>p</code>元素都使用<code>monospace</code>字体。 </section>
|
||||
<section id='instructions'>
|
||||
确保<code>p</code>元素使用<code>monospace</code>字体。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>p</code>元素应该使用字体<code>monospace</code> 。
|
||||
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
|
||||
- text: '<code>p</code>元素应该使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i), '<code>p</code>元素应该使用<code>monospace</code>字体。');
|
||||
|
||||
```
|
||||
|
||||
@ -42,36 +55,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -83,7 +95,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,23 +2,32 @@
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: Set the id of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置元素的id
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
localTitle: 设置元素的 id
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">除了类之外，每个HTML元素还可以具有<code>id</code>属性。使用<code>id</code>属性有几个好处：您可以使用<code>id</code>来设置单个元素的样式，稍后您将学习如何使用它来使用JavaScript选择和修改特定元素。 <code>id</code>属性应该是唯一的。浏览器不会强制执行此操作，但这是广泛认可的最佳实践。所以请不要给多个元素赋予相同的<code>id</code>属性。这里有一个例子，说明如何为你的<code>h2</code>元素提供<code>cat-photo-app</code> <code><h2 id="cat-photo-app"></code> ： <code><h2 id="cat-photo-app"></code> </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为<code>form</code>元素添加id <code>cat-photo-form</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
设置<code>form</code>元素的 id 为<code>cat-photo-form</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 为<code>form</code>元素添加<code>cat-photo-form</code>的id。
|
||||
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
|
||||
- text: '你的<code>form</code>元素的 id 应为<code>cat-photo-form</code>。'
|
||||
testString: assert($("form").attr("id") === "cat-photo-form", '你的<code>form</code>元素的 id 应为<code>cat-photo-form</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -63,36 +72,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -104,7 +112,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,41 @@
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: Size Your Images
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整图像大小
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
localTitle: 调整图片的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS有一个名为<code>width</code>的属性，用于控制元素的宽度。就像字体一样，我们将使用<code>px</code> （像素）来指定图像的宽度。例如，如果我们想要创建一个名为<code>larger-image</code>的CSS类，它给HTML元素的宽度为500像素，我们将使用： <blockquote> <风格> <br> .larger-image { <br>宽度：500px; <br> } <br> </样式> </blockquote></section>
|
||||
<section id='description'>
|
||||
CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>width</code>宽度类似于字体的<code>px</code>（像素)值。
|
||||
假如，你想创建一个叫<code>larger-image</code>的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
.larger-image {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>smaller-image</code>的类，并使用它来调整图像大小，使其只有100像素宽。 <strong>注意</strong> <br>由于浏览器实现的差异，您可能需要100％缩放才能通过此挑战的测试。 </section>
|
||||
<section id='instructions'>
|
||||
创建一个<code>smaller-image</code>的 CSS class，设置图片的宽度为 100px。
|
||||
<strong>注意：</strong><br>由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>img</code>元素应该具有<code>smaller-image</code>类。
|
||||
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||
- text: 您的图片应为100像素宽。浏览器缩放应为100％。
|
||||
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image", ''<code>img</code>元素应该含有<code>smaller-image</code> class。'');'
|
||||
- text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
|
||||
testString: assert($("img").width() === 100, '你的图片应为 100px（像素），且浏览器缩放应为默认 100%。');
|
||||
|
||||
```
|
||||
|
||||
@ -50,36 +66,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -92,56 +107,7 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,46 @@
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: Specify How Fonts Should Degrade
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 指定字体应如何降级
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
localTitle: 字体如何优雅降级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">所有浏览器都有几种默认字体。这些通用字体系列包括<code>monospace</code> ， <code>serif</code>和<code>sans-serif</code>当一个字体不可用时，您可以告诉浏览器“降级”为另一种字体。例如，如果您希望元素使用<code>Helvetica</code>字体，但在<code>Helvetica</code>不可用时降级为<code>sans-serif</code>字体，则将按如下方式指定： <blockquote> p { <br> font-family：Helvetica，sans-serif; <br> } </blockquote>通用字体系列名称不区分大小写。此外，它们不需要引号，因为它们是CSS关键字。 </section>
|
||||
<section id='description'>
|
||||
所有浏览器都有几种默认字体。这些通用字体包括<code>monospace</code>，<code>serif</code>和<code>sans-serif</code>。
|
||||
当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
|
||||
例如，如果你想将一个元素的字体设置成<code>Helvetica</code>，当<code>Helvetica</code>不可用时，降级使用<code>sans-serif</code>字体，那么可以这样写：
|
||||
|
||||
```css
|
||||
p {
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 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>字体（使用之前学过的HTML评论），以便它不再可用。注意你的<code>h2</code>元素如何降级为<code>monospace</code>字体。 <strong>注意</strong> <br>如果您的计算机上安装了Lobster字体，您将看不到降级，因为您的浏览器能够找到该字体。 </section>
|
||||
<section id='instructions'>
|
||||
首先，添加<code>monospace</code>字体到<code>h2</code>元素里，它现在拥有着<code>Lobster</code>和<code>monospace</code>两种字体。
|
||||
在上一个挑战里，你已经通过<code>link</code>标签引入谷歌<code>Lobster</code>字体。现在让我们注释掉谷歌<code>Lobster</code>字体的引入（使用我们之前学过的<code>HTML</code>注释），使字体失效。你会发现你的<code>h2</code>元素降级到了<code>monospace</code>字体。
|
||||
<strong>注意：</strong><br>如果你的电脑已经安装了<code>Lobster</code>字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的h2元素应该使用字体<code>Lobster</code> 。
|
||||
testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
|
||||
- text: 当<code>Lobster</code>不可用时，你的h2元素会降级为<code>monospace</code>字体。
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");'
|
||||
- text: 通过在其前面放置<code><!--</code>来注释您对Google的<code>Lobster</code>字体的调用。
|
||||
testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.");'
|
||||
- text: 请务必通过添加<code>--></code>来关闭您的评论。
|
||||
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--></code>.");'
|
||||
- text: '<code>h2</code>元素应该含有<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i), '<code>h2</code>元素应该含有<code>Lobster</code>字体。');
|
||||
- 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), ''当<code>Lobster</code>字体失效时，<code>h2</code>元素应该降级使用<code>monospace</code>字体。'');'
|
||||
- text: '通过添加<code><!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。'
|
||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code), '通过添加<code><!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。');
|
||||
- text: '确保注释要以<code>--></code>结束。'
|
||||
testString: assert(new RegExp("[^fc]-->", "gi").test(code), '确保注释要以<code>--></code>结束。');
|
||||
|
||||
```
|
||||
|
||||
@ -54,36 +71,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -95,7 +111,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,15 +2,19 @@
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: Style Multiple Elements with a CSS Class
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS类设置多个元素的样式
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
localTitle: 使用 class 选择器设置多个元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">类允许您在多个HTML元素上使用相同的CSS样式。您可以通过将<code>red-text</code>类应用于第一个<code>p</code>元素来查看。 </section>
|
||||
<section id='description'>
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将<code>red-text</code>class 选择器应用在第一个<code>p</code>元素上。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -18,16 +22,16 @@ localeTitle: 使用CSS类设置多个元素的样式
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h2</code>元素应该是红色的。
|
||||
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
|
||||
- text: 你的<code>h2</code>元素应该有<code>red-text</code>类。
|
||||
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
|
||||
- text: 你的第一个<code>p</code>元素应该是红色的。
|
||||
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", "Your first <code>p</code> element should be red.");'
|
||||
- text: 你的第二和第三个<code>p</code>元素不应该是红色的。
|
||||
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), "Your second and third <code>p</code> elements should not be red.");'
|
||||
- text: 你的第一个<code>p</code>元素应该有<code>red-text</code>类。
|
||||
testString: 'assert($("p:eq(0)").hasClass("red-text"), "Your first <code>p</code> element should have the class <code>red-text</code>.");'
|
||||
- text: '<code>h2</code>元素应该是红色的。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)", '<code>h2</code>元素应该是红色的。');
|
||||
- text: '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"), '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。');
|
||||
- text: '第一个<code>p</code>元素应该为红色。'
|
||||
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", ''第一个<code>p</code>元素应该为红色。'');'
|
||||
- text: '第二和第三个<code>p</code>元素不应该为红色。'
|
||||
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), ''第二和第三个<code>p</code>元素不应该为红色。'');'
|
||||
- text: '第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'
|
||||
testString: 'assert($("p:eq(0)").hasClass("red-text"), ''第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -47,36 +51,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -88,7 +91,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,41 @@
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: Style the HTML Body Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置HTML Body Element的样式
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
localTitle: 给 HTML 的 Body 元素添加样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们重新开始讨论CSS继承。每个HTML页面都有一个<code>body</code>元素。 </section>
|
||||
<section id='description'>
|
||||
现在让我们来讨论一下 CSS 继承。
|
||||
每一个 HTML 页面都含有一个<code>body</code>元素。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">我们可以通过给它一个黑色的<code>background-color</code>来证明<code>body</code>元素存在。我们可以通过在<code>style</code>元素中添加以下内容来实现： <blockquote>身体 { <br>背景颜色：黑色; <br> } </blockquote></section>
|
||||
<section id='instructions'>
|
||||
我们可以通过设置<code>background-color</code>为<code>black</code>，来证明<code>body</code>元素的存在。
|
||||
添加以下的代码到<code>style</code>标签里面：
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>body</code>元素黑色的<code>background-color</code> 。
|
||||
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your <code>body</code> element the <code>background-color</code> of black.");'
|
||||
- text: 确保您的CSS规则使用左右大括号正确格式化。
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.");'
|
||||
- text: 确保您的CSS规则以分号结尾。
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), "Make sure your CSS rule ends with a semi-colon.");'
|
||||
- text: '<code>body</code>元素的<code>background-color</code>应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)", '<code>body</code>元素的<code>background-color</code>应该是黑色的。');
|
||||
- text: '确保你的 CSS 规则格式书写正确，需要开关大括号。'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), ''确保你的 CSS 规则格式书写正确，需要开关大括号。'');'
|
||||
- text: '确保你的 CSS 规则要以分号结尾。'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), ''确保你的 CSS 规则要以分号结尾。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -37,7 +51,6 @@ tests:
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -49,7 +62,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,33 @@
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Understand Absolute versus Relative Units
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 了解绝对与相对单位
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
localTitle: 理解绝对单位与相对单位
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">最后几个挑战都设置元素的边距或填充像素（ <code>px</code> ）。像素是一种长度单位，它告诉浏览器如何调整项目的大小或空间。除了<code>px</code> ，CSS还有许多不同的长度单位选项供您使用。两种主要类型的长度单位是绝对的和相对的。绝对单位与长度的物理单位相关联。例如， <code>in</code>和<code>mm</code>表示英寸和毫米。绝对长度单位接近屏幕上的实际测量值，但根据屏幕的分辨率存在一些差异。相对单位，例如<code>em</code>或<code>rem</code> ，相对于另一个长度值。例如， <code>em</code>基于元素字体的大小。如果您使用它来设置<code>font-size</code>属性本身，则它相对于父级的<code>font-size</code> 。 <strong>注意</strong> <br>有几个相对单位选项与视口的大小相关联。它们包含在响应式Web设计原则部分中。 </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用类<code>red-box</code>向元素添加<code>padding</code>属性并将其设置为<code>1.5em</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
给<code>red-box</code> class 添加<code>padding</code>属性，并设置为<code>1.5em</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>red-box</code>类应该有一个<code>padding</code>属性。
|
||||
testString: 'assert($(".red-box").css("padding-top") != "0px" && $(".red-box").css("padding-right") != "0px" && $(".red-box").css("padding-bottom") != "0px" && $(".red-box").css("padding-left") != "0px", "Your <code>red-box</code> class should have a <code>padding</code> property.");'
|
||||
- text: 你的<code>red-box</code>类应该给出1.5em的<code>padding</code>元素。
|
||||
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.");'
|
||||
- text: '<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', '<code>red-box</code> class 应该含有<code>padding</code>属性。');
|
||||
- text: '<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'
|
||||
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), ''<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -58,7 +66,7 @@ tests:
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
margin: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
@ -67,7 +75,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -79,7 +86,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,49 @@
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: Use a CSS Class to Style an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS类来设置元素的样式
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
localTitle: 使用 class 选择器设置单个元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">类是可重用的样式，可以添加到HTML元素中。这是一个CSS类声明示例： <blockquote> <风格> <br> .blue-text { <br>颜色：蓝色; <br> } <br> </样式> </blockquote>您可以看到我们在<code><style></code>标记内创建了一个名为<code>blue-text</code>的CSS类。您可以将类应用于HTML元素，如下所示： <code><h2 class="blue-text">CatPhotoApp</h2></code>请注意，在CSS <code>style</code>元素中，类名以句点开头。在HTML元素的class属性中，类名不包含句点。 </section>
|
||||
<section id='description'>
|
||||
CSS 的<code>class</code>具有可重用性，可应用于各种 HTML 元素。
|
||||
一个 CSS<code>class</code>声明示例，如下所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>style</code>元素中，将<code>h2</code>选择器更改为<code>.red-text</code>并将颜色的值从<code>blue</code>更新为<code>red</code> 。为您的<code>h2</code>元素提供值为<code>'red-text'</code>的<code>class</code>属性。 </section>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h2</code>元素应该是红色的。
|
||||
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
|
||||
- text: 你的<code>h2</code>元素应该有<code>red-text</code>类。
|
||||
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
|
||||
- text: 样式表应声明一个<code>red-text</code>类，并将其颜色设置为红色。
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.");'
|
||||
- text: '不要在<code>h2</code>元素中使用<code>style="color: red"</code>内联样式声明。'
|
||||
testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like <code>style="color: red"</code> in your <code>h2</code> element.");'
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)", '<code>h2</code>元素应该为红色。');
|
||||
- text: '<code>h2</code>元素应含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"), '<code>h2</code>元素应含有<code>red-text</code> class 选择器。');
|
||||
- text: '<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), ''<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'');'
|
||||
- text: '不要在<code>h2</code>元素里使用行内样式：<code>style="color: red"</code>。'
|
||||
testString: assert($("h2").attr("style") === undefined, '不要在<code>h2</code>元素里使用行内样式：<code>style="color: red"</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -44,36 +64,35 @@ tests:
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -85,7 +104,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,41 @@
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: Use a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用自定义CSS变量
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
localTitle: 使用一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">创建变量后，可以通过引用您提供的名称将其值分配给其他CSS属性。 <blockquote>背景：var（ - penguin-skin）; </blockquote>这会将您要定位的任何元素的背景更改为灰色，因为这是<code>--penguin-skin</code>变量的值。请注意，除非变量名称完全匹配，否则不会应用样式。 </section>
|
||||
<section id='description'>
|
||||
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
因为引用了<code>--penguin-skin</code>变量的值，使用了这个样式的元素背景颜色会是灰色。
|
||||
注意：如果变量名不匹配，样式不会生效。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>--penguin-skin</code>变量应用于<code>penguin-top</code> ， <code>penguin-bottom</code> ， <code>right-hand</code>和<code>left-hand</code>类的<code>background</code>属性。 </section>
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 将<code>--penguin-skin</code>变量应用于<code>penguin-top</code>类的<code>background</code>属性。
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.");'
|
||||
- text: 将<code>--penguin-skin</code>变量应用于<code>penguin-bottom</code>类的<code>background</code>属性。
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
|
||||
- text: 将<code>--penguin-skin</code>变量应用于<code>right-hand</code>类的<code>background</code>属性。
|
||||
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.");'
|
||||
- text: 将<code>--penguin-skin</code>变量应用于<code>left-hand</code>类的<code>background</code>属性。
|
||||
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.");'
|
||||
- text: '<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), ''<code>penguin-top</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
- 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), ''<code>penguin-bottom</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
- 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), ''<code>right-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
- 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), ''<code>left-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -246,19 +258,18 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,31 @@
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: Use a media query to change a variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用媒体查询更改变量
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
localTitle: 使用媒体查询更改变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS变量可以简化您使用媒体查询的方式。例如，当您的屏幕小于或大于媒体查询断点时，您可以更改变量的值，并且无论在何处使用它都将应用其样式。 </section>
|
||||
<section id='description'>
|
||||
CSS 变量可以简化媒体查询的方式。
|
||||
例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>media query</code>的<code>:root</code>选择器中，对其进行更改，以便重新定义<code>--penguin-size</code>并赋值为<code>200px</code> 。此外，重新定义<code>--penguin-skin</code>并赋予其<code>black</code>值。然后调整预览大小以查看此更改的操作。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>media query（媒体查询）</code>声明的<code>:root</code>选择器里，重定义<code>--penguin-size</code>的值为 200px，且重定义<code>--penguin-skin</code>的值为<code>black</code>，然后通过缩放页面来查看是否生效。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>:root</code>应该将<code>--penguin-size</code>变量重新分配给<code>200px</code> 。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.");'
|
||||
- text: '<code>:root</code>应该将<code>--penguin-skin</code>变量重新分配给<code>black</code> 。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.");'
|
||||
- text: '<code>:root</code>中的<code>--penguin-size</code>值应为<code>200px</code>。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ''<code>:root</code>中的<code>--penguin-size</code>值应为<code>200px</code>。'');'
|
||||
- text: '<code>:root</code>中的<code>--penguin-skin</code>值应为<code>black</code>。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ''<code>:root</code>中的<code>--penguin-skin</code>值应为<code>black</code>。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -262,7 +268,6 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -274,7 +279,10 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,37 +2,45 @@
|
||||
id: bad87fee1348bd9aedf08719
|
||||
title: Use Abbreviated Hex Code
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用缩写的十六进制代码
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
localTitle: 使用缩写的十六进制编码
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">许多人对超过1600万种颜色的可能性感到不知所措。并且很难记住十六进制代码。幸运的是，你可以缩短它。例如，红色的十六进制代码<code>#FF0000</code>可以缩短为<code>#F00</code> 。这个缩短的形式给出一个红色数字，一个数字表示绿色，一个数字表示蓝色。这将可能的颜色总数减少到大约4,000。但浏览器会将<code>#FF0000</code>和<code>#F00</code>解释为完全相同的颜色。 </section>
|
||||
<section id='description'>
|
||||
许多人对超过 1600 万种颜色的可能性感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。
|
||||
例如，红色的<code>#FF0000</code>十六进制编码可以缩写成<code>#F00</code>。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
|
||||
这样，颜色的可能性减少到了大约 4000 种。且在浏览器里<code>#FF0000</code>和<code>#F00</code>完全是同一种颜色。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">继续，尝试使用缩写的十六进制代码为正确的元素着色。 <table class="table table-striped"><tbody><tr><th>颜色</th><th>短十六进制代码</th></tr><tr><td>青色</td><td> <code>#0FF</code> </td> </tr><tr><td>绿色</td><td> <code>#0F0</code> </td> </tr><tr><td>红</td><td> <code>#F00</code> </td> </tr><tr><td>紫红色</td><td> <code>#F0F</code> </td> </tr></tbody></table></section>
|
||||
<section id='instructions'>
|
||||
接下来，使用缩写的十六进制编码给元素设置正确的颜色。
|
||||
<table class='table table-striped'><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'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am red!</code>的文本<code>I am red!</code> <code>color</code>红色。
|
||||
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
|
||||
- text: '使用缩写<code>hex code</code>表示红色而不是十六进制代码<code>#FF0000</code> 。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.");'
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am green!</code>的文本<code>I am green!</code> <code>color</code>绿色。
|
||||
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
|
||||
- text: '使用缩写的<code>hex code</code>表示绿色而不是十六进制代码<code>#00FF00</code> 。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.");'
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am cyan!</code>文字<code>I am cyan!</code>在<code>color</code>青色。
|
||||
testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.");'
|
||||
- text: '使用缩写的<code>hex code</code>代替十六进制代码<code>#00FFFF</code> 。'
|
||||
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.");'
|
||||
- text: 给你的<code>h1</code>元素文字<code>I am fuchsia!</code> <code>color</code>紫红色。
|
||||
testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.");'
|
||||
- text: '使用缩写的<code>hex code</code>作为颜色的紫红色而不是十六进制代码<code>#FF00FF</code> 。'
|
||||
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.");'
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。');
|
||||
- text: '要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), ''要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'');'
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)', '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。');
|
||||
- text: '要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), ''要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>。'');'
|
||||
- text: '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。'
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。');
|
||||
- text: '要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), ''要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>。'');'
|
||||
- text: '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。'
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。');
|
||||
- text: '要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), ''要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -66,7 +74,6 @@ tests:
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -78,7 +85,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,44 @@
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: Use an id Attribute to Style an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用id属性为元素设置样式
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
localTitle: 使用 id 属性来设定元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">关于<code>id</code>属性的一个很酷的事情是，像类一样，你可以使用CSS来设置它们的样式。但是， <code>id</code>不可重用，只应应用于一个元素。 <code>id</code>也具有比类更高的特异性（重要性），因此如果两者都应用于同一元素并且具有冲突的样式，则将应用<code>id</code>的样式。下面是一个示例，说明如何使用<code>cat-photo-element</code>的<code>id</code>属性获取<code>cat-photo-element</code>并为其指定绿色的背景颜色。在你的<code>style</code>元素中： <blockquote> #cat-photo-element { <br>背景颜色：绿色; <br> } </blockquote>请注意，在<code>style</code>元素中，您始终通过放置a来引用类<code>.</code>在他们的名字前面。你总是通过在他们的名字前放一个<code>#</code>来引用id。 </section>
|
||||
<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>标签里这样写：
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
注意在<code>style</code>标签里，声明 class 的时候必须在名字前插入<code>.</code>符号。同样，在声明 id 的时候，也必须在名字前插入<code>#</code>符号。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">尝试提供您的表单，该表单现在具有<code>cat-photo-form</code>的<code>id</code>属性，绿色背景。 </section>
|
||||
<section id='instructions'>
|
||||
尝试给含有<code>cat-photo-form</code>id属性的<code>form</code>表单的背景颜色设置为<code>green</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 为<code>form</code>元素添加<code>cat-photo-form</code>的id。
|
||||
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
|
||||
- text: 您的<code>form</code>元素应具有绿色的<code>background-color</code> 。
|
||||
testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", "Your <code>form</code> element should have the <code>background-color</code> of green.");'
|
||||
- text: 确保您的<code>form</code>元素具有<code>id</code>属性。
|
||||
testString: 'assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, "Make sure your <code>form</code> element has an <code>id</code> attribute.");'
|
||||
- text: 不要为<code>form</code>任何<code>class</code>或<code>style</code>属性。
|
||||
testString: 'assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.");'
|
||||
- text: '设置<code>form</code>元素的 id 为<code>cat-photo-form</code>。'
|
||||
testString: assert($("form").attr("id") === "cat-photo-form", '设置<code>form</code>元素的 id 为<code>cat-photo-form</code>。');
|
||||
- text: '你的<code>form</code>元素应该含有<code>background-color</code>css 属性并且值为 <code>green</code>。'
|
||||
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", '你的<code>form</code>元素应该含有<code>background-color</code>css 属性并且值为 <code>green</code>。');
|
||||
- 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, '确保你的<code>form</code>元素含有<code>id</code>属性。');
|
||||
- text: '不要在<code>form</code>元素上添加其他<code>class</code>属性或者<code>style</code>行内样式。'
|
||||
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), '不要在<code>form</code>元素上添加其他<code>class</code>属性或者<code>style</code>行内样式。');
|
||||
|
||||
```
|
||||
|
||||
@ -69,36 +84,34 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -110,7 +123,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,41 @@
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: Use Attribute Selectors to Style Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用属性选择器来设置样式元素
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
localTitle: 使用属性选择器来设置元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您已经为要特定样式的元素提供了<code>id</code>或<code>class</code>属性。这些被称为ID和类选择器。您可以使用其他CSS选择器来选择要设置样式的自定义元素组。让我们再次带出CatPhotoApp来练习使用CSS选择器。对于此挑战，您将使用<code>[attr=value]</code>属性选择器设置CatPhotoApp中复选框的样式。此选择器使用特定属性值匹配和设置元素样式。例如，下面的代码使用属性<code>type</code>和相应的<code>radio</code>值更改所有元素的边距： <blockquote> [type ='radio'] { <br>保证金：20px 0px 20px 0px; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
你已经通过设置元素的<code>id</code>和<code>class</code>，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
|
||||
让我们再次通过猫咪图片项目来练习 CSS 选择器。
|
||||
在这个挑战里，你会使用<code>[attr=value]</code>属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有<code>type</code>为<code>radio</code>的元素的外边距。
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
margin: 20px 0px 20px 0px;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>type</code>属性选择器，尝试在CatPhotoApp中为复选框提供10px的上边距和15px的下边距。 </section>
|
||||
<section id='instructions'>
|
||||
使用<code>type</code>属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 应使用<code>type</code>属性选择器来选中复选框。
|
||||
testString: 'assert(code.match(/<style>[\s\S]*?\[type=("|")checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),"The <code>type</code> attribute selector should be used to select the checkboxes.");'
|
||||
- text: 复选框的顶部边距应为10px。
|
||||
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginTop") === "10px") {count++;}});return (count===3)}()),"The top margins of the checkboxes should be 10px.");'
|
||||
- text: 复选框的下边距应为15px。
|
||||
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginBottom") === "15px") {count++;}});return (count===3)}()),"The bottom margins of the checkboxes should be 15px.");'
|
||||
- text: '使用<code>type</code>属性选择器来匹配复选框。'
|
||||
testString: assert(code.match(/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),'使用<code>type</code>属性选择器来匹配复选框。');
|
||||
- text: '复选框的上外边距应为 10px。'
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'复选框的上外边距应为 10px。');
|
||||
- text: '复选框的下外边距应为 15px。'
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'复选框的下外边距应为 15px。');
|
||||
|
||||
```
|
||||
|
||||
@ -67,36 +81,35 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -108,7 +121,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,29 +2,37 @@
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: Use Clockwise Notation to Specify the Margin of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用顺时针符号指定元素的边距
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
localTitle: 使用顺时针方向指定元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">让我们再试一次，但这次有<code>margin</code> 。不是单独指定元素的<code>margin-top</code> ， <code>margin-right</code> ， <code>margin-bottom</code>和<code>margin-left</code>属性，而是可以在一行中指定它们，如下所示： <code>margin: 10px 20px 10px 20px;</code>这四个值的工作方式类似于时钟：top，right，bottom，left，并且将产生与使用边特定边距指令完全相同的结果。 </section>
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>Clockwise Notation</code>为<code>blue-box</code>的元素在其顶部和左侧提供<code>40px</code>的边距，但在其底部和右侧仅为<code>20px</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为<code>40px</code>，右外边距和下外边距则设置为<code>20px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给元素顶部<code>40px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: 您的<code>blue-box</code>类应该赋予元素<code>20px</code> <code>margin</code>的权利。
|
||||
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素的底部提供<code>20px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素左边<code>40px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: '<code>blue-box</code> class 的上外边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px", '<code>blue-box</code> class 的上外边距应为<code>40px</code>。');
|
||||
- text: '<code>blue-box</code> class 的右外边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px", '<code>blue-box</code> class 的右外边距应为<code>20px</code>。');
|
||||
- text: '<code>blue-box</code> class 的下外边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px", '<code>blue-box</code> class 的下外边距应为<code>20px</code>。');
|
||||
- text: '<code>blue-box</code> class 的左外边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px", '<code>blue-box</code> class 的左外边距应为<code>40px</code>。');
|
||||
|
||||
```
|
||||
|
||||
@ -71,19 +79,17 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,38 @@
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: Use Clockwise Notation to Specify the Padding of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用顺时针符号指定元素的填充
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
localTitle: 使用顺时针方向指定元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">不是单独指定元素的<code>padding-top</code> ， <code>padding-right</code> ， <code>padding-bottom</code>和<code>padding-left</code>属性，而是可以在一行中指定它们，如下所示： <code>padding: 10px 20px 10px 20px;</code>这四个值的工作方式类似于时钟：顶部，右侧，底部，左侧，并且将产生与使用侧面特定填充指令完全相同的结果。 </section>
|
||||
<section id='description'>
|
||||
如果不想每次都要分别声明<code>padding-top</code>，<code>padding-right</code>，<code>padding-bottom</code>和<code>padding-left</code>属性，可以把它们汇总在<code>padding</code>属性里面声明，如下：
|
||||
<code>padding: 10px 20px 10px 20px;</code>
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的<code>padding</code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用顺时针符号为“.blue-box”类在其顶部和左侧提供<code>40px</code>的<code>padding</code> ，但在其底部和右侧仅为<code>20px</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为<code>40px</code>，右内边距和下内边距则设置为<code>20px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>40px</code> <code>padding</code>元素的顶部。
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code> <code>padding</code>元素的权利。
|
||||
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素的底部提供<code>20px</code>的<code>padding</code> 。
|
||||
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素左边<code>padding</code> <code>40px</code> 。
|
||||
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: 您应该使用顺时针符号来设置<code>blue-box</code>类的填充。
|
||||
testString: 'assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), "You should use the clockwise notation to set the padding of <code>blue-box</code> class.");'
|
||||
- text: '<code>blue-box</code> class 的上内边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px", '<code>blue-box</code> class 的上内边距应为<code>40px</code>。');
|
||||
- text: '<code>blue-box</code> class 的右内边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px", '<code>blue-box</code> class 的右内边距应为<code>40px</code>。');
|
||||
- text: '<code>blue-box</code> class 的下内边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px", '<code>blue-box</code> class 的下内边距应为<code>20px</code>。');
|
||||
- text: '<code>blue-box</code> class 的左内边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px", '<code>blue-box</code> class 的左内边距应为<code>40px</code>。');
|
||||
- text: '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。'
|
||||
testString: assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。');
|
||||
|
||||
```
|
||||
|
||||
@ -73,7 +80,6 @@ tests:
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -85,7 +91,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,31 +2,54 @@
|
||||
id: bad87fee1348bd9aedf08805
|
||||
title: Use CSS Selectors to Style Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS选择器设置样式元素
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
localTitle: 使用元素选择器来设置元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用CSS，您可以使用数百种CSS <code>properties</code>来更改元素在页面上的显示方式。当您输入<code><h2 style="color: red;">CatPhotoApp</h2></code> ，您使用<code>inline CSS</code> （代表<code>Cascading Style Sheets</code>对单个<code>h2</code>元素进行<code>Cascading Style Sheets</code> 。这是指定元素样式的一种方法，但有一种更好的方法来应用<code>CSS</code> 。在代码的顶部，创建一个<code>style</code>块，如下所示： <blockquote> <风格> <br> </样式> </blockquote>在该样式块中，您可以为所有<code>h2</code>元素创建<code>CSS selector</code> 。例如，如果您希望所有<code>h2</code>元素都是红色，则可以添加如下所示的样式规则： <blockquote> <风格> <br> h2 {color：red;} <br> </样式> </blockquote>请注意，在每个元素的样式规则周围同时打开和关闭花括号（ <code>{</code>和<code>}</code> ）非常重要。您还需要确保元素的样式定义位于开始和结束样式标记之间。最后，请务必在每个元素的样式规则的末尾添加分号。 </section>
|
||||
<section id='description'>
|
||||
在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。
|
||||
通过行内样式<code><h2 style="color: red;">CatPhotoApp</h2></code>，就可以修改<code>h2</code>元素的颜色为红色。
|
||||
当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，<code>层叠样式表</code>往往是一个更好的选择。
|
||||
在代码的顶部，创建一个<code>style</code>声明区域，如下方所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
在<code>style</code>样式声明区域内，可以创建一个<code>元素选择器</code>，应用于所有的<code>h2</code>元素。例如，如果你想所有<code>h2</code>元素变成红色，可以添加下方的样式规则：
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
注意，在每个元素的样式声明区域里，左右花括号（<code>{</code> 和 <code>}</code>）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">删除<code>h2</code>元素的样式属性，而不是创建CSS <code>style</code>块。添加必要的CSS以将所有<code>h2</code>元素变为蓝色。 </section>
|
||||
<section id='instructions'>
|
||||
删除<code>h2</code>元素的行内样式，然后创建<code>style</code>样式声明区域，最后添加 CSS 样式规则使<code>h2</code>元素变为蓝色。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 从<code>h2</code>元素中删除style属性。
|
||||
testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your <code>h2</code> element.");'
|
||||
- text: 创建<code>style</code>元素。
|
||||
testString: 'assert($("style") && $("style").length > 1, "Create a <code>style</code> element.");'
|
||||
- text: 你的<code>h2</code>元素应该是蓝色的。
|
||||
testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your <code>h2</code> element should be blue.");'
|
||||
- text: 确保样式表<code>h2</code>声明对分号和右括号有效。
|
||||
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.");'
|
||||
- text: 确保所有<code>style</code>元素都有效并具有结束标记。
|
||||
testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length, "Make sure all your <code>style</code> elements are valid and have a closing tag.");'
|
||||
- text: '删除<code>h2</code>元素的行内样式。'
|
||||
testString: assert(!$("h2").attr("style"), '删除<code>h2</code>元素的行内样式。');
|
||||
- text: '创建一个<code>style</code>样式声明区域。'
|
||||
testString: assert($("style") && $("style").length >= 1, '创建一个<code>style</code>样式声明区域。');
|
||||
- text: '<code>h2</code>元素颜色应为蓝色。'
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)", '<code>h2</code>元素颜色应为蓝色。');
|
||||
- text: '确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。'
|
||||
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), ''确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -40,36 +63,35 @@ tests:
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
<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>
|
||||
@ -81,7 +103,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,27 +2,33 @@
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: Use CSS Variables to change several elements at once
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS变量一次更改多个元素
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
localTitle: 使用 CSS 变量一次更改多个元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <dfn>CSS变量</dfn>是一种通过仅更改一个值来一次更改许多CSS样式属性的强大方法。按照以下说明查看如何仅更改三个值可以更改许多元素的样式。 </section>
|
||||
<section id='description'>
|
||||
<dfn>CSS 变量</dfn>是一种仅更改一个值，来一次性更改多个 CSS 样式属性的强大方法。
|
||||
按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>penguin</code>类中，将<code>black</code>值更改为<code>gray</code> ，将<code>gray</code>值更改为<code>white</code> ，将<code>yellow</code>值更改为<code>orange</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里，将<code>black</code>改为<code>gray</code>，<code>gray</code>改为<code>white</code>，<code>yellow</code>改为<code>orange</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>penguin</code>类应声明<code>--penguin-skin</code>变量并将其指定为<code>gray</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
|
||||
- text: <code>penguin</code>类应声明<code>--penguin-belly</code>变量并将其指定为<code>white</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.");'
|
||||
- text: <code>penguin</code>类应声明<code>--penguin-beak</code>变量并将其指定为<code>orange</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.");'
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<code>gray</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<code>gray</code>。'');'
|
||||
- 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), ''<code>penguin</code> class 声明的<code>--penguin-belly</code>变量的值应为<code>white</code>。'');'
|
||||
- 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), ''<code>penguin</code> class 声明的<code>--penguin-beak</code>变量的值应为<code>orange</code>。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -234,7 +240,6 @@ tests:
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -246,7 +251,10 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,39 @@
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: Use Hex Code for Specific Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Hex代码表示特定颜色
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
localTitle: 使用十六进制编码获得指定颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您知道还有其他方法可以在CSS中表示颜色吗？其中一种方法称为十六进制代码，或简称为<code>hex code</code> 。我们通常使用<code>decimals</code>或基数为10的数字，每个数字使用符号0到9。 <code>Hexadecimals</code> （或<code>hex</code> ）是16位数字。这意味着它使用十六个不同的符号。与小数一样，符号0-9表示0到9的值。然后A，B，C，D，E，F代表十到十五的值。总而言之，0到F可以用<code>hexadecimal</code>表示一个数字，总共给出16个可能值。您可以<a target="_blank" href="https://en.wikipedia.org/wiki/Hexadecimal">在此处</a>找到有关<a target="_blank" href="https://en.wikipedia.org/wiki/Hexadecimal">十六进制数的</a>更多信息。在CSS中，我们可以使用6个十六进制数字来表示颜色，红色（R），绿色（G）和蓝色（B）组件各有两个。例如， <code>#000000</code>是黑色，也是可能的最低值。您可以<a target="_blank" href="https://en.wikipedia.org/wiki/RGB_color_model">在此处</a>找到有关<a target="_blank" href="https://en.wikipedia.org/wiki/RGB_color_model">RGB颜色系统的</a>更多信息。 <blockquote>身体 { <br>颜色：＃000000; <br> } </blockquote></section>
|
||||
<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>找到更多的相关信息。
|
||||
|
||||
```css
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更换字<code>black</code>在我们的<code>body</code>元素的背景色与它的<code>hex code</code>表示， <code>#000000</code> 。 </section>
|
||||
<section id='instructions'>
|
||||
使用<code>#000000</code>的十六进制编码来替换<code>body</code>元素的黑色背景。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>body</code>元素黑色的背景颜色。
|
||||
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your <code>body</code> element the background-color of black.");'
|
||||
- text: 使用<code>hex code</code>替换黑色而不是<code>black</code> 。
|
||||
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi), "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.");'
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)", '<code>body</code>元素的背景颜色应该是黑色。');
|
||||
- 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), ''使用<code>十六进制编码</code>来替换<code>black</code>的写法。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -37,7 +51,6 @@ tests:
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -49,7 +62,8 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -2,37 +2,47 @@
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: Use Hex Code to Mix Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用十六进制代码混合颜色
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
localTitle: 使用十六进制编码混合颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要查看，十六进制代码使用6个十六进制数字来表示颜色，红色（R），绿色（G）和蓝色（B）组件各有两个。从这三种纯色（红色，绿色和蓝色），我们可以改变每种颜色的数量，创造超过1600万种其他颜色！例如，橙色是纯红色，混合了一些绿色，没有蓝色。在十六进制代码中，这转换为<code>#FFA500</code> 。数字<code>0</code>是十六进制代码中的最小数字，表示完全没有颜色。数字<code>F</code>是十六进制代码中的最大数字，表示最大可能的亮度。 </section>
|
||||
<section id='description'>
|
||||
回顾一下，<code>hex</code>使用 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"><tbody><tr><th>颜色</th><th> Hex代码</th></tr><tr><td>道奇蓝</td><td> <code>#1E90FF</code> </td> </tr><tr><td>绿色</td><td> <code>#00FF00</code> </td> </tr><tr><td>橙子</td><td> <code>#FFA500</code> </td> </tr><tr><td>红</td><td> <code>#FF0000</code> </td> </tr></tbody></table></section>
|
||||
<section id='instructions'>
|
||||
把<code>style</code>标签里面的颜色值用正确的十六进制编码替换。
|
||||
<table class='table table-striped'><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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am red!</code>的文本<code>I am red!</code> <code>color</code>红色。
|
||||
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
|
||||
- text: 使用<code>hex code</code>为红色而不是<code>red</code> 。
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.");'
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am green!</code>的文本<code>I am green!</code> <code>color</code>绿色。
|
||||
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
|
||||
- text: 使用<code>hex code</code>表示绿色而不是<code>green</code> 。
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.");'
|
||||
- text: 给你的<code>h1</code>元素提供<code>I am dodger blue!</code>的文字<code>I am dodger blue!</code> <code>color</code>道奇蓝色。
|
||||
testString: 'assert($(".dodger-blue-text").css("color") === "rgb(30, 144, 255)", "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.");'
|
||||
- text: 使用颜色<code>dodgerblue</code>蓝色的<code>hex code</code>而不是单词<code>dodgerblue</code> 。
|
||||
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.");'
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am orange!</code>的文本<code>I am orange!</code>在<code>color</code>为橙色。
|
||||
testString: 'assert($(".orange-text").css("color") === "rgb(255, 165, 0)", "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.");'
|
||||
- text: 使用<code>hex code</code>表示橙色而不是<code>orange</code> 。
|
||||
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.");'
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>red</code>关键词。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>red</code>关键词。'');'
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)', '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>green</code>关键词。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>green</code>关键词。'');'
|
||||
- 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)', '文本内容为<code>I am dodger blue!</code>的<code>h1</code>元素的字体颜色应该为<code>dodger blue</code>。');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'
|
||||
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'');'
|
||||
- text: '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。'
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>orange</code>关键词。'
|
||||
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>orange</code>关键词。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -66,7 +76,6 @@ tests:
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -78,7 +87,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,37 +2,43 @@
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: Use RGB to Mix Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用RGB混合颜色
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
localTitle: 使用 RGB 混合颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">就像使用十六进制代码一样，您可以使用不同值的组合来混合RGB中的颜色。 </section>
|
||||
<section id='description'>
|
||||
就像使用十六进制编码一样，你可以通过不同值的组合，来混合得到不同的 RGB 颜色。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>style</code>元素中的十六进制代码替换为正确的RGB值。 <table class="table table-striped"><tbody><tr><th>颜色</th><th> RGB </th></tr><tr><td>蓝色</td><td> <code>rgb(0, 0, 255)</code> </td> </tr><tr><td>红</td><td> <code>rgb(255, 0, 0)</code> </td> </tr><tr><td>兰花</td><td> <code>rgb(218, 112, 214)</code> </td> </tr><tr><td>赭色</td><td> <code>rgb(160, 82, 45)</code> </td> </tr></tbody></table></section>
|
||||
<section id='instructions'>
|
||||
将<code>style</code>标签里面中的十六进制编码替换为正确的 RGB 值。
|
||||
<table class='table table-striped'><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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am red!</code>的文本<code>I am red!</code> <code>color</code>红色。
|
||||
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
|
||||
- text: 使用<code>rgb</code>表示红色。
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color red.");'
|
||||
- text: 给你的<code>h1</code>元素文字<code>I am orchid!</code>兰花的<code>color</code> 。
|
||||
testString: 'assert($(".orchid-text").css("color") === "rgb(218, 112, 214)", "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.");'
|
||||
- text: 使用<code>rgb</code>作为颜色兰花。
|
||||
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color orchid.");'
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am blue!</code>的文本<code>I am blue!</code> <code>color</code>蓝色。
|
||||
testString: 'assert($(".blue-text").css("color") === "rgb(0, 0, 255)", "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.");'
|
||||
- text: 使用<code>rgb</code>作为蓝色。
|
||||
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color blue.");'
|
||||
- text: 给你的<code>h1</code>元素添加<code>I am sienna!</code>的文本<code>I am sienna!</code> <code>color</code> sienna。
|
||||
testString: 'assert($(".sienna-text").css("color") === "rgb(160, 82, 45)", "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.");'
|
||||
- text: 使用<code>rgb</code>作为颜色sienna。
|
||||
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color sienna.");'
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。');
|
||||
- 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), ''<code>red</code>颜色应使用<code>RGB</code>值。'');'
|
||||
- text: '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。'
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。');
|
||||
- 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), ''<code>red</code>颜色应使用<code>RGB</code>值。'');'
|
||||
- text: '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。'
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。');
|
||||
- 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), ''<code>blue</code>颜色应使用<code>RGB</code>值。'');'
|
||||
- text: '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。'
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。');
|
||||
- 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), ''<code>sienna</code>颜色应使用<code>RGB</code>值。'');'
|
||||
|
||||
```
|
||||
|
||||
@ -66,7 +72,6 @@ tests:
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -81,4 +86,6 @@ tests:
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -2,25 +2,44 @@
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: Use RGB values to Color Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将RGB值用于颜色元素
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
localTitle: 使用 RGB 值为元素上色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">另一种可以在CSS中表示颜色的方法是使用<code>RGB</code>值。黑色的RGB值如下所示： <code>rgb(0, 0, 0)</code>白色的RGB值如下所示： <code>rgb(255, 255, 255)</code>而不是像使用十六进制代码那样使用六个十六进制数字，使用<code>RGB</code>使用0到255之间的数字指定每种颜色的亮度。如果进行数学计算，一种颜色的两位数等于16乘以16，这总共得到256个值。因此，从零开始计数的<code>RGB</code>具有与十六进制代码完全相同的可能值。以下是使用RGB代码将身体背景更改为橙色的示例。 <blockquote>身体 { <br> background-color：rgb（255,165,0）; <br> } </blockquote></section>
|
||||
<section id='description'>
|
||||
另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。
|
||||
黑色的 RGB 值声明如下：
|
||||
<code>rgb(0, 0, 0)</code>
|
||||
白色的 RGB 值声明如下：
|
||||
<code>rgb(255, 255, 255)</code>
|
||||
RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。
|
||||
在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。
|
||||
下面是通过使用 RGB 值设置背景颜色为橘色的例子：
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(255, 165, 0);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">让我们用黑色的RGB值替换<code>body</code>元素背景颜色中的十六进制代码： <code>rgb(0, 0, 0)</code> </section>
|
||||
<section id='instructions'>
|
||||
让我们用<code>rgb(0, 0, 0)</code>的 RGB 值替换<code>body</code>元素背景颜色的十六进制编码。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>body</code>元素应该有黑色背景。
|
||||
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Your <code>body</code> element should have a black background.");'
|
||||
- text: 使用<code>rgb</code>为您的<code>body</code>元素提供黑色。
|
||||
testString: 'assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), "Use <code>rgb</code> to give your <code>body</code> element a color of black.");'
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)", '<code>body</code>元素的背景颜色应该是黑色的。');
|
||||
- text: '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。'
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。');
|
||||
|
||||
```
|
||||
|
||||
@ -37,7 +56,6 @@ tests:
|
||||
background-color: #F00;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -49,7 +67,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user