Files
freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.chinese.md
2020-02-11 15:42:42 +09:00

74 lines
2.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
id: bad87fee1348bd9aedf08746
title: Inherit Styles from the Body Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/c9bmdtR'
forumTopicId: 18204
localeTitle: 从 Body 元素继承样式
---
## Description
<section id='description'>
我们已经证明每一个 HTML 页面都含有<code>body</code>元素,<code>body</code>元素也可以使用 CSS 样式。
设置<code>body</code>元素的样式的方式跟设置其他 HTML 元素的样式一样,并且其他元素也会继承到<code>body</code>设置的样式。
</section>
## Instructions
<section id='instructions'>
首先,创建一个文本内容为<code>Hello World</code><code>h1</code>标签元素。
接着,在<code>body</code>CSS 规则里面添加一句<code>color: green;</code>,改变页面其他元素的字体颜色为<code>green绿色</code>
最后,同样在<code>body</code>CSS 规则里面添加<code>font-family: monospace;</code>,设置其他元素字体为<code>font-family: monospace;</code>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: '创建一个<code>h1</code>元素。'
testString: assert(($("h1").length > 0));
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
- text: '确保<code>h1</code>元素具有结束标记。'
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, '确保<code>h1</code>元素具有结束标记。');
- text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
testString: assert(($("body").css("font-family").match(/monospace/i)));
- text: '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。'
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
- text: '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。'
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
body {
background-color: black;
}
</style>
```
</div>
</section>
## Solution
<section id='solution'>
```html
// solution required
```
</section>