freeCodeCamp

2.4 KiB

Raw Blame History

id	challengeType	videoUrl	forumTopicId	localeTitle
bad87fee1348bd9aedf08746	0	https://scrimba.com/c/c9bmdtR	18204	从 Body 元素继承样式

Description

我们已经证明每一个 HTML 页面都含有body元素，body元素也可以使用 CSS 样式。设置body元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到body设置的样式。

Instructions

首先，创建一个文本内容为Hello World的h1标签元素。接着，在bodyCSS 规则里面添加一句color: green;，改变页面其他元素的字体颜色为green（绿色）。最后，同样在bodyCSS 规则里面添加font-family: monospace;，设置其他元素字体为font-family: monospace;。

Tests

tests:
  - text: '创建一个<code>h1</code>元素。'
    testString: assert(($("h1").length > 0));
  - text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
    testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
  - text: '确保<code>h1</code>元素具有结束标记。'
    testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
  - text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
    testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
  - text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
    testString: assert(($("body").css("font-family").match(/monospace/i)));
  - text: '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。'
    testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
  - text: '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。'
    testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));

Challenge Seed

<style>
  body {
    background-color: black;
  }

</style>

Solution

// solution required

2.4 KiB Raw Blame History Unescape Escape