fix(i18n): update review suggestion
This commit is contained in:
Zhicheng Chen
committed by
Kristofer Koishigawa
Kristofer Koishigawa
parent
8c1834badb
commit
4f32fedb8e
@@ -4,19 +4,19 @@ title: Add a Negative Margin to an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
localTitle: 给元素添加负外边距
|
||||
localeTitle: 给元素添加负外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
元素的<code>margin（外边距）</code>控制元素边框与其他周围元素之间的距离大小。
|
||||
如果你设置元素<code>margin</code>为负值，元素会变得更大。
|
||||
元素的<code>margin（外边距）</code>控制元素<code>border（边框）</code>与其他周围元素之间的距离大小。
|
||||
如果你把元素的<code>margin</code>设置为负值，元素会变得更大。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
尝试设置蓝色盒子的<code>margin</code>为负值，跟红色盒子一样大小。
|
||||
蓝色盒子的<code>margin</code>设置为<code>-15px</code>，它会填满与黄色盒子之间的距离。
|
||||
尝试将蓝色框的<code>margin</code>设为负值，跟红色框一样大小。
|
||||
蓝色框的<code>margin</code>设置为<code>-15px</code>，它会填满与黄色框之间的距离。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -24,8 +24,8 @@ localTitle: 给元素添加负外边距
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
- text: '<code>blue-box</code> class的<code>margin</code>应该设置为<code>-15px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "-15px");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,13 +4,13 @@ title: Add Borders Around Your Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
localTitle: 在元素周围添加边框
|
||||
localeTitle: 在元素周围添加边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属性。
|
||||
假如，我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
|
||||
假如我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@@ -26,8 +26,8 @@ CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>thick-green-border</code> CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在你的猫咪照片上。
|
||||
记得，在一个元素上可以同时应用多个<code>class</code>，通过使用空格来分隔。例子如下：
|
||||
创建一个<code>thick-green-border</code> CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在猫咪照片上。
|
||||
记得在一个元素上可以同时应用多个<code>class</code>，通过使用空格来分隔。例子如下：
|
||||
<code><img class="class1 class2"></code>
|
||||
</section>
|
||||
|
||||
@@ -36,16 +36,16 @@ CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: assert($("img").hasClass("smaller-image"));
|
||||
- text: '<code>img</code>元素应该含有<code>thick-green-border</code> class。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: '设置图片边框为<code>10px</code>。'
|
||||
testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
|
||||
- text: '设置图片边框为<code>solid</code>实线。'
|
||||
testString: assert($("img").css("border-right-style") === "solid");
|
||||
- text: '<code>img</code>元素的边框颜色应该为绿色。'
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)", '<code>img</code>元素的边框颜色应该为绿色。');
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
|
||||
|
||||
```
|
||||
|
||||
@@ -79,7 +79,7 @@ tests:
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image"></a>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Add Different Margins to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
localTitle: 给元素的每一侧添加不同的外边距
|
||||
localeTitle: 给元素的每一侧添加不同的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -15,7 +15,7 @@ CSS 允许你使用<code>margin-top</code>，<code>margin-right</code>，<code>m
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色盒子的顶部和左侧的<code>margin</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
蓝色框的顶部和左侧的<code>margin</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -23,14 +23,14 @@ CSS 允许你使用<code>margin-top</code>，<code>margin-right</code>，<code>m
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
- text: '<code>blue-box</code> class 的右侧<code>margin</code>（上外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右侧<code>margin</code>（右外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的底部<code>margin</code>（下外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左侧<code>margin</code>（左外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Add Different Padding to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
localTitle: 给元素的每一侧添加不同的内边距
|
||||
localeTitle: 给元素的每一侧添加不同的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -15,7 +15,7 @@ CSS 允许你使用<code>padding-top</code>，<code>padding-right</code>， <cod
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色盒子的顶部和左侧的<code>padding</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
蓝色框的顶部和左侧的<code>padding</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -23,14 +23,14 @@ CSS 允许你使用<code>padding-top</code>，<code>padding-right</code>， <cod
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
- text: '<code>blue-box</code> class 的顶部<code>padding</code>（上内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右侧<code>padding</code>（右内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的底部<code>padding</code>（下内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左侧<code>padding</code>（左内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,17 +4,17 @@ title: Add Rounded Corners with border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
localTitle: 用 border-radius 添加圆角边框
|
||||
localeTitle: 用 border-radius 添加圆角边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你的猫咪图片边角很尖锐，我们可以使用<code>border-radius</code>属性来让它变得圆润。
|
||||
猫咪图片边角很尖锐，我们可以使用<code>border-radius</code>属性来让它变得圆润。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<code>border-radius</code>可以用<code>px</code>像素单位来赋值。给你的猫咪图片设置 10px 的<code>border-radius</code>。
|
||||
<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>
|
||||
|
||||
@@ -23,10 +23,10 @@ localTitle: 用 border-radius 添加圆角边框
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>的边框圆角。');
|
||||
- text: '图片元素应具有 "thick-green-border" class 属性。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: '图片应含有<code>10px</code>的边框圆角。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 8);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,19 +4,19 @@ title: Adjust the Margin of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
localTitle: 调整元素的外边距
|
||||
localeTitle: 调整元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>margin（外边距）</code>控制元素的边框与其他元素之间的距离。
|
||||
在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的<code>margin</code>值要比蓝色盒子的大，让它看起来比蓝色盒子要小。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的<code>margin</code>值要比蓝色框的大，让它看起来比蓝色框要小。
|
||||
当你增加蓝色的<code>margin</code>值，它会增加元素边框到其他周围元素的距离。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色的盒子<code>margin</code>的值要跟红色盒子的一样大小。
|
||||
蓝色的框<code>margin</code>的值要跟红色框的一样大小。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -24,8 +24,8 @@ localTitle: 调整元素的外边距
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
- text: '<code>blue-box</code> class 的<code>margin</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "20px");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Adjust the Padding of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
localTitle: 调整元素的内边距
|
||||
localeTitle: 调整元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -13,13 +13,13 @@ localTitle: 调整元素的内边距
|
||||
你可能已经注意到了，所有的 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>填充空间。
|
||||
当你增加蓝色框的<code>padding</code>值，文本内容与边框的距离会逐渐拉大。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色的盒子<code>padding</code>的值要跟红色盒子的一样大小。
|
||||
蓝色的框<code>padding</code>的值要跟红色框的一样大小。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -27,8 +27,8 @@ localTitle: 调整元素的内边距
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
- text: '<code>blue-box</code> class 的<code>padding</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "20px");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Attach a Fallback value to a CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
localTitle: 给 CSS 变量附加回退值
|
||||
localeTitle: 给 CSS 变量附加回退值
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -16,7 +16,7 @@ localTitle: 给 CSS 变量附加回退值
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
这样，当你的变量有问题的时候，它会设置你的背景颜色为黑色。
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。
|
||||
提示：这对调试会很有帮助。
|
||||
</section>
|
||||
|
||||
@@ -32,9 +32,9 @@ background: var(--penguin-skin, black);
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'');'
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));'
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), ''<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Change a variable for a specific area
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
localTitle: 更改特定区域的变量
|
||||
localeTitle: 更改特定区域的变量
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -25,7 +25,7 @@ localTitle: 更改特定区域的变量
|
||||
```yml
|
||||
tests:
|
||||
- text: '应该在<code>penguin</code>clas 里重定义<code>--penguin-belly</code>的变量值，且它的值为<code>white</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''应该在<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Change the Color of Text
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
localTitle: 更改文本的颜色
|
||||
localeTitle: 更改文本的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -27,9 +27,9 @@ localTitle: 更改文本的颜色
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)", '<code>h2</code>元素应该为红色。');
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- 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>结束。'');'
|
||||
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>/));'
|
||||
- text: '<code>style</code> 声明应该以 <code>;</code> 结尾'
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Change the Font Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
localTitle: 更改元素的字体大小
|
||||
localeTitle: 更改元素的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -30,7 +30,7 @@ h1 {
|
||||
```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), ''在<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Create a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
localTitle: 创建一个自定义的 CSS 变量
|
||||
localeTitle: 创建一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -30,7 +30,7 @@ localTitle: 创建一个自定义的 CSS 变量
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,13 +4,13 @@ title: Give a Background Color to a div Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
localTitle: 给 div 元素添加背景色
|
||||
localeTitle: 给 div 元素添加背景色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>background-color</code>属性可以设置元素的背景颜色。
|
||||
例如，你想将一个元素的背景颜色改为<code>green</code>，可以在你的<code>style</code>里面这样写：
|
||||
例如，你想将一个元素的背景颜色改为<code>green</code>，可以在<code>style</code>里面这样写：
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
@@ -31,9 +31,9 @@ localTitle: 给 div 元素添加背景色
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code>元素应有<code>silver-background</code> class。'
|
||||
testString: assert($("div").hasClass("silver-background"), '<code>div</code>元素应有<code>silver-background</code> class。');
|
||||
testString: assert($("div").hasClass("silver-background"));
|
||||
- text: '<code>div</code>元素背景颜色应设置为<code>silver</code>。'
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)", '<code>div</code>元素背景颜色应设置为<code>silver</code>。');
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
|
||||
- text: 'class 名 <code>silver-background</code> 应该定义在 <code>style</code> 元素内，<code>silver</code> 的值应该指定 <code>background-color</code> 属性'
|
||||
testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Import a Google Font
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
localTitle: 引入谷歌字体
|
||||
localeTitle: 引入谷歌字体
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -12,7 +12,7 @@ localTitle: 引入谷歌字体
|
||||
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用<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>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>是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
|
||||
@@ -30,13 +30,13 @@ localTitle: 引入谷歌字体
|
||||
```yml
|
||||
tests:
|
||||
- text: '引入<code>Lobster</code>字体。'
|
||||
testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code), '引入<code>Lobster</code>字体。');
|
||||
testString: assert(new RegExp("gdgdocs|googleapis", "gi").test(code));
|
||||
- text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i), '<code>h2</code>元素必须使用<code>Lobster</code>字体。');
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i));
|
||||
- text: '使用<code>h2</code>选择器去改变字体样式。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code), ''使用<code>h2</code>选择器去改变字体样式。'');'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code));'
|
||||
- text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").css("font-family").match(/monospace/i), '<code>p</code>元素应该保持使用<code>monospace</code>字体。');
|
||||
testString: assert($("p").css("font-family").match(/monospace/i));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Improve Compatibility with Browser Fallbacks
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
localTitle: 通过浏览器降级提高兼容性
|
||||
localeTitle: 通过浏览器降级提高兼容性
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Inherit CSS Variables
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
localTitle: 继承 CSS 变量
|
||||
localeTitle: 继承 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Inherit Styles from the Body Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
localTitle: 从 Body 元素继承样式
|
||||
localeTitle: 从 Body 元素继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -26,19 +26,19 @@ localTitle: 从 Body 元素继承样式
|
||||
```yml
|
||||
tests:
|
||||
- text: '创建一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length > 0), '创建一个<code>h1</code>元素。');
|
||||
testString: assert(($("h1").length > 0));
|
||||
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), '<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>元素具有结束标记。');
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
|
||||
- text: '确保<code>h1</code>元素具有结束标记。'
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, '确保<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>。');
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
|
||||
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)), '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。');
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)));
|
||||
- text: '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。');
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
|
||||
- text: '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。');
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Make Circular Images with a border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
localTitle: 用 border-radius 制作圆形图片
|
||||
localeTitle: 用 border-radius 制作圆形图片
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -23,7 +23,7 @@ localTitle: 用 border-radius 制作圆形图片
|
||||
```yml
|
||||
tests:
|
||||
- text: '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48, '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。');
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
|
||||
- text: '请确保百分值为<code>50%</code>。'
|
||||
testString: assert(code.match(/50%/g), '请确保百分值为<code>50%</code>。');
|
||||
|
||||
|
||||
@@ -4,14 +4,14 @@ title: Override All Other Styles by using Important
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
localTitle: Important 的优先级最高
|
||||
localeTitle: Important 的优先级最高
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
耶！我们刚刚又证明了行内样式会覆盖<code>style</code>标签里面所有的 CSS 声明。
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖你的 CSS 样式。当你需要保证你的 CSS 样式不受影响，你可以使用<code>!important</code>。
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖 CSS 样式。当你需要保证 CSS 样式不受影响，你可以使用<code>!important</code>。
|
||||
让我们回到<code>pink-text</code>class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
</section>
|
||||
|
||||
@@ -29,17 +29,17 @@ localTitle: Important 的优先级最高
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text", '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。');
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), ''<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'');'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));'
|
||||
- text: '<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'');'
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));'
|
||||
- text: '<code>h1</code>元素的字体颜色应该为粉色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", '<code>h1</code>元素的字体颜色应该为粉色。');
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Override Class Declarations by Styling ID Attributes
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
localTitle: ID 选择器优先级高于 Class 选择器
|
||||
localeTitle: ID 选择器优先级高于 Class 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -36,19 +36,19 @@ localTitle: ID 选择器优先级高于 Class 选择器
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>的 id 属性值为<code>orange-text</code>。'
|
||||
testString: assert($("h1").attr("id") === "orange-text", '<code>h1</code>的 id 属性值为<code>orange-text</code>。');
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '应该只有一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length === 1), '应该只有一个<code>h1</code>元素。');
|
||||
testString: assert(($("h1").length === 1));
|
||||
- text: '创建名为<code>orange-text</code>的 id 选择器。'
|
||||
testString: assert(code.match(/#orange-text\s*{/gi), '创建名为<code>orange-text</code>的 id 选择器。');
|
||||
testString: assert(code.match(/#orange-text\s*{/gi));
|
||||
- text: '不要在<code>h1</code>元素里面使用<code>style（行内样式）</code>。'
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi), '不要在<code>h1</code>元素里面使用<code>style（行内样式）</code>。');
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi));
|
||||
- text: '<code>h1</code>元素的字体颜色应为橘色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)", '<code>h1</code>元素的字体颜色应为橘色。');
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Override Class Declarations with Inline Styles
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
localTitle: 内联样式的优先级高于 ID 选择器
|
||||
localeTitle: 内联样式的优先级高于 ID 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -17,7 +17,7 @@ localTitle: 内联样式的优先级高于 ID 选择器
|
||||
<section id='instructions'>
|
||||
使用行内样式尝试让<code>h1</code>的字体颜色变白。像下面这样使用：
|
||||
<code><h1 style="color: green"></code>
|
||||
你的<code>h1</code>元素需继续保留<code>blue-text</code>和<code>pink-text</code>class。
|
||||
<code>h1</code>元素需继续保留<code>blue-text</code>和<code>pink-text</code>class。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -26,15 +26,15 @@ localTitle: 内联样式的优先级高于 ID 选择器
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text", '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。');
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该含有行内样式。'
|
||||
testString: assert(document.querySelector('h1[style]'), '<code>h1</code>元素应该含有行内样式。');
|
||||
testString: assert(document.querySelector('h1[style]'));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为白色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)", '<code>h1</code>元素的字体颜色应该为白色。');
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Override Styles in Subsequent CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
localTitle: Class 选择器的优先级高于继承样式
|
||||
localeTitle: Class 选择器的优先级高于继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -29,13 +29,13 @@ HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该包含<code>pink-text</code> class。');
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"), '<code>h1</code>元素应该包含<code>blue-text</code> class。');
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。'
|
||||
testString: assert($(".pink-text").hasClass("blue-text"), '<code>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。');
|
||||
testString: assert($(".pink-text").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素的颜色应为蓝色。'
|
||||
testString: assert($("h1").css("color") === "rgb(0, 0, 255)", '<code>h1</code>元素的颜色应为蓝色。');
|
||||
testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,20 +4,20 @@ title: Prioritize One Style Over Another
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
localTitle: 样式中的优先级
|
||||
localeTitle: 样式中的优先级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时候，你的 HTML 元素的样式会跟其他样式发生冲突。
|
||||
就像，你的<code>h1</code>元素也不能同时设置<code>green</code>和<code>pink</code>两种样式。
|
||||
有时候， HTML 元素的样式会跟其他样式发生冲突。
|
||||
就像，<code>h1</code>元素也不能同时设置<code>green</code>和<code>pink</code>两种样式。
|
||||
让我们尝试创建一个字体颜色为<code>pink</code>的 class，并应于用其中一个元素中。猜一猜，它会覆盖<code>body</code>元素设置的<code>color: green;</code>CSS 属性吗？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个能将元素的字体颜色改为<code>pink</code>的CSS class，并起名为<code>pink-text</code>。
|
||||
给你的<code>h1</code>元素添加<code>pink-text</code>class。
|
||||
给<code>h1</code>元素添加<code>pink-text</code>class。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -26,11 +26,11 @@ localTitle: 样式中的优先级
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该含有<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"), '<code>h1</code>元素应该含有<code>pink-text</code> class。');
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), ''<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'');'
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));'
|
||||
- text: '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)", '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。');
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Set the Font Family of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
localTitle: 设置元素的字体家族
|
||||
localeTitle: 设置元素的字体家族
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -31,7 +31,7 @@ h2 {
|
||||
```yml
|
||||
tests:
|
||||
- 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>字体。');
|
||||
testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Set the id of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
localTitle: 设置元素的 id
|
||||
localeTitle: 设置元素的 id
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -26,8 +26,8 @@ localTitle: 设置元素的 id
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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>元素的 id 应为<code>cat-photo-form</code>。'
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Size Your Images
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
localTitle: 调整图片的大小
|
||||
localeTitle: 调整图片的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -34,9 +34,9 @@ CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>widt
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image", ''<code>img</code>元素应该含有<code>smaller-image</code> class。'');'
|
||||
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image");'
|
||||
- text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
|
||||
testString: assert($("img").width() === 100, '你的图片应为 100px（像素），且浏览器缩放应为默认 100%。');
|
||||
testString: assert($("img").width() === 100);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Specify How Fonts Should Degrade
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
localTitle: 字体如何优雅降级
|
||||
localeTitle: 字体如何优雅降级
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -25,8 +25,8 @@ p {
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
首先，添加<code>monospace</code>字体到<code>h2</code>元素里，它现在拥有着<code>Lobster</code>和<code>monospace</code>两种字体。
|
||||
在上一个挑战里，你已经通过<code>link</code>标签引入谷歌<code>Lobster</code>字体。现在让我们注释掉谷歌<code>Lobster</code>字体的引入（使用我们之前学过的<code>HTML</code>注释），使字体失效。你会发现你的<code>h2</code>元素降级到了<code>monospace</code>字体。
|
||||
<strong>注意：</strong><br>如果你的电脑已经安装了<code>Lobster</code>字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。
|
||||
在上一个挑战里，你已经通过<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
|
||||
@@ -35,13 +35,13 @@ p {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该含有<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i), '<code>h2</code>元素应该含有<code>Lobster</code>字体。');
|
||||
testString: assert($("h2").css("font-family").match(/^"?lobster/i));
|
||||
- text: '当<code>Lobster</code>字体失效时，<code>h2</code>元素应该降级使用<code>monospace</code>字体。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?,\s*monospace\s*;\s*\}/gi.test(code), ''当<code>Lobster</code>字体失效时，<code>h2</code>元素应该降级使用<code>monospace</code>字体。'');'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?,\s*monospace\s*;\s*\}/gi.test(code));'
|
||||
- text: '通过添加<code><!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。'
|
||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code), '通过添加<code><!--</code>，注释掉谷歌<code>Lobster</code>字体的引入。');
|
||||
testString: assert(new RegExp("<!--[^fc]", "gi").test(code));
|
||||
- text: '确保注释要以<code>--></code>结束。'
|
||||
testString: assert(new RegExp("[^fc]-->", "gi").test(code), '确保注释要以<code>--></code>结束。');
|
||||
testString: assert(new RegExp("[^fc]-->", "gi").test(code));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Style Multiple Elements with a CSS Class
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
localTitle: 使用 class 选择器设置多个元素的样式
|
||||
localeTitle: 使用 class 选择器设置多个元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -23,15 +23,15 @@ localTitle: 使用 class 选择器设置多个元素的样式
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该是红色的。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)", '<code>h2</code>元素应该是红色的。');
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"), '<code>h2</code>元素应该含有<code>red-text</code> class 选择器。');
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: '第一个<code>p</code>元素应该为红色。'
|
||||
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", ''第一个<code>p</code>元素应该为红色。'');'
|
||||
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)");'
|
||||
- text: '第二和第三个<code>p</code>元素不应该为红色。'
|
||||
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), ''第二和第三个<code>p</code>元素不应该为红色。'');'
|
||||
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"));'
|
||||
- text: '第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'
|
||||
testString: 'assert($("p:eq(0)").hasClass("red-text"), ''第一个<code>p</code>元素应该包含<code>red-text</code> class 选择器。'');'
|
||||
testString: 'assert($("p:eq(0)").hasClass("red-text"));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Style the HTML Body Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
localTitle: 给 HTML 的 Body 元素添加样式
|
||||
localeTitle: 给 HTML 的 Body 元素添加样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -32,11 +32,11 @@ body {
|
||||
```yml
|
||||
tests:
|
||||
- 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 规则要以分号结尾。'');'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '确保 CSS 规则格式书写正确，需要开关大括号。'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));'
|
||||
- text: '确保 CSS 规则要以分号结尾。'
|
||||
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Understand Absolute versus Relative Units
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
localTitle: 理解绝对单位与相对单位
|
||||
localeTitle: 理解绝对单位与相对单位
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -26,9 +26,9 @@ localTitle: 理解绝对单位与相对单位
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>red-box</code> class 应该含有<code>padding</code>属性。'
|
||||
testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', '<code>red-box</code> class 应该含有<code>padding</code>属性。');
|
||||
testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px');
|
||||
- text: '<code>red-box</code> class 的<code>padding</code>值应为 1.5em。'
|
||||
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), ''<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use a CSS Class to Style an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
localTitle: 使用 class 选择器设置单个元素的样式
|
||||
localeTitle: 使用 class 选择器设置单个元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -38,13 +38,13 @@ CSS 的<code>class</code>具有可重用性，可应用于各种 HTML 元素。
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)", '<code>h2</code>元素应该为红色。');
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '<code>h2</code>元素应含有<code>red-text</code> class 选择器。'
|
||||
testString: assert($("h2").hasClass("red-text"), '<code>h2</code>元素应含有<code>red-text</code> class 选择器。');
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: '<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), ''<code>style</code>样式声明区域里应该包含一个<code>red-text</code> class 选择器，并且它的颜色应为红色。'');'
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));'
|
||||
- text: '不要在<code>h2</code>元素里使用行内样式：<code>style="color: red"</code>。'
|
||||
testString: assert($("h2").attr("style") === undefined, '不要在<code>h2</code>元素里使用行内样式：<code>style="color: red"</code>。');
|
||||
testString: assert($("h2").attr("style") === undefined);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
localTitle: 使用一个自定义的 CSS 变量
|
||||
localeTitle: 使用一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -30,13 +30,13 @@ background: var(--penguin-skin);
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''<code>penguin-top</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));'
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), ''<code>penguin-bottom</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));'
|
||||
- text: '<code>right-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), ''<code>right-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'');'
|
||||
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));'
|
||||
- text: '<code>left-hand</code> class 的<code>background</code>属性应使用<code>--penguin-skin</code>变量值。'
|
||||
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), ''<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use a media query to change a variable
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
localTitle: 使用媒体查询更改变量
|
||||
localeTitle: 使用媒体查询更改变量
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -24,9 +24,9 @@ CSS 变量可以简化媒体查询的方式。
|
||||
```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>中的<code>--penguin-size</code>值应为<code>200px</code>。'');'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi));'
|
||||
- text: '<code>:root</code>中的<code>--penguin-skin</code>值应为<code>black</code>。'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ''<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use Abbreviated Hex Code
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
localTitle: 使用缩写的十六进制编码
|
||||
localeTitle: 使用缩写的十六进制编码
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -26,21 +26,21 @@ localTitle: 使用缩写的十六进制编码
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), ''要使用缩写的<code>red</code>的<code>十六进制编码</code>，而不是<code>#FF0000</code>。'');'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)', '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。');
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: '要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), ''要使用缩写的<code>green</code>的<code>十六进制编码</code>，而不是<code>#00FF00</code>。'');'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。'
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', '文本内容为<code>I am cyan!</code>的<code>h1</code>元素的字体颜色应该为<code>cyan</code>。');
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
- text: '要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), ''要使用缩写的<code>cyan</code>的<code>十六进制编码</code>，而不是<code>#00FFFF</code>。'');'
|
||||
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。'
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', '文本内容为<code>I am fuchsia!</code>的<code>h1</code>元素的字体颜色应该为<code>fuchsia</code>。');
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
- text: '要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>的十六进制编码。'
|
||||
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), ''要使用缩写的<code>fuchsia</code>的<code>十六进制编码</code>，而不是<code>#FF00FF</code>。'');'
|
||||
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,14 +4,14 @@ title: Use an id Attribute to Style an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
localTitle: 使用 id 属性来设定元素的样式
|
||||
localeTitle: 使用 id 属性来设定元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
通过<code>id</code>属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
|
||||
可是，<code>id</code>不可以重用，只应用于一个元素上。同时，在 CSS 里，<code>id</code>的优先级要高于<code>class</code>，如果一个元素同时应用了<code>class</code>和<code>id</code>，并设置样式有冲突，会优先应用<code>id</code>的样式。
|
||||
选择<code>id</code>为<code>cat-photo-element</code>的元素，并设置它的背景样式为<code>green</code>，可以在你的<code>style</code>标签里这样写：
|
||||
选择<code>id</code>为<code>cat-photo-element</code>的元素，并设置它的背景样式为<code>green</code>，可以在<code>style</code>标签里这样写：
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
@@ -33,13 +33,13 @@ localTitle: 使用 id 属性来设定元素的样式
|
||||
```yml
|
||||
tests:
|
||||
- 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>属性。');
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
- text: '<code>form</code>元素应该含有<code>background-color</code>css 属性并且值为 <code>green</code>。'
|
||||
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
|
||||
- text: '确保<code>form</code>元素含有<code>id</code>属性。'
|
||||
testString: assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0);
|
||||
- text: '不要在<code>form</code>元素上添加其他<code>class</code>属性或者<code>style</code>行内样式。'
|
||||
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), '不要在<code>form</code>元素上添加其他<code>class</code>属性或者<code>style</code>行内样式。');
|
||||
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use Attribute Selectors to Style Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
localTitle: 使用属性选择器来设置元素的样式
|
||||
localeTitle: 使用属性选择器来设置元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -32,11 +32,11 @@ localTitle: 使用属性选择器来设置元素的样式
|
||||
```yml
|
||||
tests:
|
||||
- text: '使用<code>type</code>属性选择器来匹配复选框。'
|
||||
testString: assert(code.match(/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),'使用<code>type</code>属性选择器来匹配复选框。');
|
||||
testString: assert(code.match(/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi));
|
||||
- text: '复选框的上外边距应为 10px。'
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'复选框的上外边距应为 10px。');
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()));
|
||||
- text: '复选框的下外边距应为 15px。'
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'复选框的下外边距应为 15px。');
|
||||
testString: assert((function() {var count=0; $("[type='checkbox']").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use Clockwise Notation to Specify the Margin of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
localTitle: 使用顺时针方向指定元素的外边距
|
||||
localeTitle: 使用顺时针方向指定元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -26,13 +26,13 @@ localTitle: 使用顺时针方向指定元素的外边距
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右外边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px", '<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>。');
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use Clockwise Notation to Specify the Padding of an Element
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
localTitle: 使用顺时针方向指定元素的内边距
|
||||
localeTitle: 使用顺时针方向指定元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -25,15 +25,15 @@ localTitle: 使用顺时针方向指定元素的内边距
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右内边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px", '<code>blue-box</code> class 的右内边距应为<code>40px</code>。');
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的下内边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px", '<code>blue-box</code> class 的下内边距应为<code>20px</code>。');
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左内边距应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px", '<code>blue-box</code> class 的左内边距应为<code>40px</code>。');
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
- text: '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。'
|
||||
testString: assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), '你应该按照顺时针排序，汇总声明的方式来设置<code>blue-box</code>的<code>padding</code>值。');
|
||||
testString: assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use CSS Selectors to Style Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
localTitle: 使用元素选择器来设置元素的样式
|
||||
localeTitle: 使用元素选择器来设置元素的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -43,13 +43,13 @@ localTitle: 使用元素选择器来设置元素的样式
|
||||
```yml
|
||||
tests:
|
||||
- text: '删除<code>h2</code>元素的行内样式。'
|
||||
testString: assert(!$("h2").attr("style"), '删除<code>h2</code>元素的行内样式。');
|
||||
testString: assert(!$("h2").attr("style"));
|
||||
- text: '创建一个<code>style</code>样式声明区域。'
|
||||
testString: assert($("style") && $("style").length >= 1, '创建一个<code>style</code>样式声明区域。');
|
||||
testString: assert($("style") && $("style").length >= 1);
|
||||
- text: '<code>h2</code>元素颜色应为蓝色。'
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)", '<code>h2</code>元素颜色应为蓝色。');
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
|
||||
- text: '确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。'
|
||||
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), ''确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。'');'
|
||||
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use CSS Variables to change several elements at once
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
localTitle: 使用 CSS 变量一次更改多个元素
|
||||
localeTitle: 使用 CSS 变量一次更改多个元素
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -24,11 +24,11 @@ localTitle: 使用 CSS 变量一次更改多个元素
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<code>gray</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class 声明的<code>--penguin-skin</code>变量的值应为<code>gray</code>。'');'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));'
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-belly</code>变量的值应为<code>white</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''<code>penguin</code> class 声明的<code>--penguin-belly</code>变量的值应为<code>white</code>。'');'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));'
|
||||
- text: '<code>penguin</code> class 声明的<code>--penguin-beak</code>变量的值应为<code>orange</code>。'
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), ''<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));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use Hex Code for Specific Colors
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
localTitle: 使用十六进制编码获得指定颜色
|
||||
localeTitle: 使用十六进制编码获得指定颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -32,9 +32,9 @@ body {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)", '<code>body</code>元素的背景颜色应该是黑色。');
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)";
|
||||
- text: '使用<code>十六进制编码</code>来替换<code>black</code>的写法。'
|
||||
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi), ''使用<code>十六进制编码</code>来替换<code>black</code>的写法。'');'
|
||||
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use Hex Code to Mix Colors
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
localTitle: 使用十六进制编码混合颜色
|
||||
localeTitle: 使用十六进制编码混合颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -28,21 +28,21 @@ localTitle: 使用十六进制编码混合颜色
|
||||
```yml
|
||||
tests:
|
||||
- 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>。');
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>red</code>关键词。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>red</code>关键词。'');'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。'
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)', '文本内容为<code>I am green!</code>的<code>h1</code>元素的字体颜色应该为<code>green</code>。');
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>green</code>关键词。'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>green</code>关键词。'');'
|
||||
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am dodger blue!</code>的<code>h1</code>元素的字体颜色应该为<code>dodger blue</code>。'
|
||||
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', '文本内容为<code>I am dodger blue!</code>的<code>h1</code>元素的字体颜色应该为<code>dodger blue</code>。');
|
||||
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'
|
||||
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>dodgerblue</code>关键词。'');'
|
||||
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。'
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', '文本内容为<code>I am orange!</code>的<code>h1</code>元素的字体颜色应该为<code>orange</code>。');
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
- text: '使用<code>十六进制编码</code>替换<code>orange</code>关键词。'
|
||||
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), ''使用<code>十六进制编码</code>替换<code>orange</code>关键词。'');'
|
||||
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use RGB to Mix Colors
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
localTitle: 使用 RGB 混合颜色
|
||||
localeTitle: 使用 RGB 混合颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -24,21 +24,21 @@ localTitle: 使用 RGB 混合颜色
|
||||
```yml
|
||||
tests:
|
||||
- text: '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。'
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为<code>I am red!</code>的<code>h1</code>元素的字体颜色应该为<code>red</code>。');
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: '<code>red</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), ''<code>red</code>颜色应使用<code>RGB</code>值。'');'
|
||||
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。'
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', '文本内容为<code>I am orchid!</code>的<code>h1</code>元素的字体颜色应该为<code>orchid</code>。');
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
- text: '<code>orchid</code>颜色应使用<code>RGB</code>值。'
|
||||
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), ''<code>red</code>颜色应使用<code>RGB</code>值。'');'
|
||||
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am blue!</code>的<code>h1</code>元素的字体颜色应该为<code>blue</code>。'
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', '文本内容为<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>值。'');'
|
||||
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));'
|
||||
- text: '文本内容为<code>I am sienna!</code>的<code>h1</code>元素的字体颜色应该为<code>sienna</code>。'
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', '文本内容为<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>值。'');'
|
||||
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));'
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Use RGB values to Color Elements
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
localTitle: 使用 RGB 值为元素上色
|
||||
localeTitle: 使用 RGB 值为元素上色
|
||||
---
|
||||
|
||||
## Description
|
||||
@@ -37,9 +37,9 @@ body {
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code>元素的背景颜色应该是黑色的。'
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)", '<code>body</code>元素的背景颜色应该是黑色的。');
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。'
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), '<code>body</code>元素的背景颜色的黑色值应该为<code>RGB</code>值。');
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig)
|
||||
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user