Chinese translation of responsive-web-design (#40607)
This commit is contained in:
Xing Liu
GitHub
@ -8,21 +8,21 @@ forumTopicId: 16628
|
||||
|
||||
# --description--
|
||||
|
||||
在其他挑战里你应该已经见到过`img`标签的`alt`属性了。`alt`属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。`alt` 属性中的文本作为备用文字来描述图片的内容，这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别`alt`属性，朗读其中的内容，来告知用户图片包含的关键信息。
|
||||
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。
|
||||
|
||||
良好的`alt`文本可以简明扼要地描述图片信息，所以你应该为图片添加`alt`属性。另外，HTML5 标准也在考虑强制要求对图片添加`alt`属性。
|
||||
`alt` 文本可以为屏幕阅读器提供图片的描述信息，所以你应始终为图片添加 `alt` 属性。另外，根据最新的 HTML5 标准，为图片添加 `alt` 属性是必需的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他使用一张简介图片来展示技能。给`img`标签添加一个`alt`属性，说明 Camper Cat 在学习空手道（图片的`src`属性没有指向任何链接，因此你可以看到`alt`属性中的文本）。
|
||||
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他添加了一张展示技能的资料图片，并希望这张图片可以让访问网站的所有用户看到。请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道（图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的`img`标签应该包含一个非空的`alt`属性。
|
||||
`img` 标签应该包含一个非空的 `alt` 属性。
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt'));
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 301008
|
||||
|
||||
# --description--
|
||||
|
||||
表单中经常出现`input`标签，它可以用来创建多种表单控件。它的`type`属性指定了所要创建的`input`标签类型。
|
||||
表单中经常出现 `input` 标签，它可以用来创建多种表单控件。它的 `type` 属性指定了所要创建的 `input` 标签类型。
|
||||
|
||||
在以前的挑战中，你可能已经见过`text`与`submit`类型的`input`标签，HTML5 引入了`date`类型来创建时间选择器。依赖于浏览器的支持，当点击`input`标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。
|
||||
在以前的挑战中，我们已经见过 `text` 与 `submit` 类型的 `input` 标签。HTML5 规范添加了 `date` 类型来创建日期选择器。如果浏览器支持，在点击 `input` 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。
|
||||
|
||||
对于旧版本的浏览器，`type`属性的默认值是`text`。这种情况下，可以利用`label`标签或者占位文本来提示用户`input`标签的输入类型为日期。
|
||||
对于旧版本的浏览器，由于不支持 `date`，此时 `type` 属性会被浏览器设置为 `text`。这种情况下，我们可以利用 `label` 标签或者占位符文本来提示用户需要输入的日期格式。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -23,29 +23,29 @@ forumTopicId: 301008
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个`input`标签，其`type`属性值为 date，`id`属性为 pickdate，`name`属性为 date。
|
||||
Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个 `input` 标签，其 `type` 属性值为 "date"，`id` 为 "pickdate"，`name` 属性值为 "date"。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码中应该有 1 个`input`标签。
|
||||
应有 1 个 `input` 标签。
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
你的`input`标签的`type`属性值应该为 date。
|
||||
`input` 标签的 `type` 属性值应该为 date。
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
你的`input`标签的`id`属性值应该为 pickdate。
|
||||
`input` 标签的 `id` 应为 pickdate。
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
你的`input`标签的`name`属性值应该为 date。
|
||||
`input` 标签的 `name` 属性值应该为 date。
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
|
||||
@ -8,20 +8,19 @@ forumTopicId: 301011
|
||||
|
||||
# --description--
|
||||
|
||||
色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到几乎无法看到颜色。最常见的形式是对绿色的低感知度。
|
||||
色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。最常见的形式是对绿色的低感知度。
|
||||
|
||||
例如：如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法识别它们。可以认为色轮上相邻的颜色是相近的，在表示重要信息的时候应避免使用这些颜色的组合。
|
||||
例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。在表示重要信息的时候应避免使用这类相近颜色的组合。
|
||||
|
||||
**注意：**
|
||||
一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。
|
||||
**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。它们和在线对比度检查器一样，都是很好的工具。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，黄色（`#FFFF33`）的`background-color`和绿色（`#33FF33`）的文本`color`是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的`color`修改为深蓝色（`#003366`）。
|
||||
Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，用于背景色的黄色（`#FFFF33`）和文字颜色绿色（`#33FF33`）是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的 `color` 修改为深蓝色（`#003366`）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button`的文本`color`应该是深蓝色。
|
||||
`button` 内容文本的 `color` 属性值应为深蓝色。
|
||||
|
||||
```js
|
||||
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
|
||||
@ -8,27 +8,27 @@ forumTopicId: 301012
|
||||
|
||||
# --description--
|
||||
|
||||
颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以识别它们。
|
||||
颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。
|
||||
|
||||
在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。
|
||||
在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二个问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。
|
||||
|
||||
色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度。你可能想起对比度是用前景色与背景色的相对亮度计算的。
|
||||
色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。你可能还记得，对比度是用前景色与背景色的相对亮度计算的。
|
||||
|
||||
实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5 : 1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目前使用的组合是绿色的`background-color`与栗色的`color`，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的`hsl()`（hsl 为 hue, saturation, lightness 的缩写）属性来设置颜色，所以通过修改`hsl()`属性的第三个参数，可以很容易地调整颜色的亮度。请将`background-color`的亮度从 35% 增加到 55%，`color`的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。
|
||||
Camper Cat 正在尝试为他的博客文本与背景配置颜色。他目前使用的组合是绿色的 `background-color` 与栗色的 `color`，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的 `hsl()`（hsl 为 hue、saturation、lightness 的缩写）属性来设置颜色。这样，通过修改 `hsl()` 属性的第三个参数，我们可以很轻松地调整颜色的亮度。请将 `background-color` 的亮度从 35% 增加到 55%，将 `color` 的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该将`color`属性的亮度值设置为 15%。
|
||||
应将 `color` 属性的亮度值设置为 15%。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
```
|
||||
|
||||
你应该将`background-color`属性的亮度值设置为 55%。
|
||||
应将 `background-color` 属性的亮度值设置为 55%。
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: 使用描述性链接文本赋予链接含义
|
||||
title: 为链接添加描述性的文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
forumTopicId: 301013
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301013
|
||||
|
||||
# --description--
|
||||
|
||||
屏幕阅读器用户可以选择其设备读取的内容的类型，这包括跳转到（或跳过）标志标签，跳转到主要内容，或者从标题中获取页面摘要，还可以选择只听取页面中的有效链接。
|
||||
屏幕阅读器用户可以选择其设备读取的内容的类型，包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。用户还可以选择只听取页面中的超链接内容。
|
||||
|
||||
屏幕阅读器通过阅读链接文本或者锚点标签（`a`）之间的内容来完成这个操作。使用 "click here" 或者 "read more" 作为链接文本并没有多少帮助。相反地，应该在`a`标签中使用简洁的描述性语言来为用户提供更多的信息。
|
||||
屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。相反地，我们应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多信息。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改锚点标签（`a`），将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改 `a` 标签，将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
|
||||
# --hints--
|
||||
|
||||
请修改`a`标签，将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
你应修改 `a` 标签，将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,13 +28,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a`元素应该有一个`href`属性，且值为空字符串
|
||||
`a` 元素应该有一个 `href` 属性，且其属性值为空字符串 `""`。
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '');
|
||||
```
|
||||
|
||||
`a` 元素应该有一个结束标记
|
||||
`a` 元素应该有一个结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301014
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 的`audio`标签用于呈现音频内容，它也具有语义化特性。可以在`audio`上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
|
||||
HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。可以在 `audio` 上下文中为音频内容添加描述文字或字幕链接，使听觉障碍用户也能获取音频中的信息。
|
||||
|
||||
`audio`支持`controls`属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。`controls`属性是一个布尔属性，只要这个属性出现在`audio`标签中，浏览器就会开启播放控件。
|
||||
`audio` 支持 `controls` 属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件，而且还支持键盘操作。`controls` 属性是一个布尔属性，即不需要提供属性值。只要这个属性出现在 `audio` 标签中，浏览器就会开启播放控件。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -21,25 +21,23 @@ HTML5 的`audio`标签用于呈现音频内容，它也具有语义化特性。
|
||||
</audio>
|
||||
```
|
||||
|
||||
**注意：**
|
||||
多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。
|
||||
**注意：**多媒体内容通常同时包含音频与视频部分，它需要同步的字幕与逐字稿，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
是时候让 Camper Cat 休息一下，并与朋友 camper Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验 Zersiax 的屏幕阅读器的朗读效果，请在`p`标签之后添加一个具有`controls`属性的`audio`标签。然后在`audio`标签内添加一个`source`标签，并且设置`src`属性为"`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"，并且设置`type`属性为"audio/mpeg".
|
||||
是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个具有 `controls` 属性的 `audio` 标签。然后在 `audio` 标签内添加一个 `source` 标签并设置 `src` 属性值为 "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"。同时，请将 `source` 的 `type` 属性值设置为 "audio/mpeg"。
|
||||
|
||||
**注意：**
|
||||
音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
**注意：**音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含一个`audio`标签。
|
||||
应该包含一个 `audio` 标签。
|
||||
|
||||
```js
|
||||
assert($('audio').length === 1);
|
||||
```
|
||||
|
||||
确保你的`audio`标签是闭合的。
|
||||
确保 `audio` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -48,25 +46,25 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`audio`标签应具有`controls`属性。
|
||||
`audio` 标签应存在 `controls` 属性。
|
||||
|
||||
```js
|
||||
assert($('audio').attr('controls'));
|
||||
```
|
||||
|
||||
你的代码应具有`source`标签。
|
||||
代码中应存在 `source` 标签。
|
||||
|
||||
```js
|
||||
assert($('source').length === 1);
|
||||
```
|
||||
|
||||
`source`标签应该在`audio`标签中。
|
||||
`source` 标签应位于 `audio` 标签中。
|
||||
|
||||
```js
|
||||
assert($('audio').children('source').length === 1);
|
||||
```
|
||||
|
||||
`source`标签中`src`属性的值应该与教程中的链接一致。
|
||||
`source` 标签中 `src` 的属性值应该与教程中的链接一致。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -75,7 +73,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`source`标签中应具有`type`属性，其值为 audio/mpeg。
|
||||
`source` 标签中应具有 `type` 属性，其属性值应为 audio/mpeg。
|
||||
|
||||
```js
|
||||
assert($('source').attr('type') === 'audio/mpeg');
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 301015
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了`figure`标签以及与之相关的`figcaption`标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释`figure`的文字，可以极大地提升内容的可访问性。
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何处理那些超出屏幕可视范围（使用 CSS）的表格版本的图表数据，以使屏幕阅读器用户也可以获取信息。
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
|
||||
|
||||
举个例子——注意`figcaption`包含在`figure`标签中，并且可以与其他标签组合使用：
|
||||
举个例子，注意 `figcaption` 包含在 `figure` 标签中，并且可以与其他标签组合使用：
|
||||
|
||||
```html
|
||||
<figure>
|
||||
@ -26,41 +26,41 @@ HTML5 引入了`figure`标签以及与之相关的`figcaption`标签。它们一
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他的用于呈现图表的`div`标签修改为`figure`标签，用于呈现图表标题的`p`标签改为`figcaption`标签。
|
||||
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他用于呈现图表的 `div` 标签修改为 `figure` 标签；将用于呈现图表标题的 `p` 标签改为 `figcaption` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该有 1 个`figure`标签。
|
||||
应存在 1 个 `figure` 标签。
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
你的代码应该有 1 个`figcaption`标签。
|
||||
应存在 1 个 `figcaption` 标签。
|
||||
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
```
|
||||
|
||||
你的代码不应有`div`标签。
|
||||
不应存在 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
你的代码不应有`p`标签。
|
||||
不应存在 `p` 标签。
|
||||
|
||||
```js
|
||||
assert($('p').length == 0);
|
||||
```
|
||||
|
||||
`figcaption`应该为`figure`的子标签。
|
||||
`figcaption` 应为 `figure` 的子标签。
|
||||
|
||||
```js
|
||||
assert($('figure').children('figcaption').length == 1);
|
||||
```
|
||||
|
||||
请确保你的`figure`标签是闭合的。
|
||||
确保 `figure` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,13 +8,13 @@ forumTopicId: 301016
|
||||
|
||||
# --description--
|
||||
|
||||
合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到使用表单属性的重要场景。
|
||||
合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
|
||||
`label`标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。`label`标签的`for`属性指定了与`label`绑定的表单控件，并且屏幕阅读器也会读取`for`属性。
|
||||
`label` 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。`label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。
|
||||
|
||||
在 HTML 基础章节的课程中，我们已经了解了单选按钮标签。在那节课程中，我们为了可以点击单选按钮的名称，将`input`标签放在`label`标签中。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用`for`属性。
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。在那次挑战中，为了让标签可以在点击的时候也选中输入框，我们将 `input` 标签嵌套在了 `label` 标签里面。在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
|
||||
`for`属性的值必须与表单控件的`id`属性的值相同。举个例子：
|
||||
`for` 的属性值必须与表单组件的 `id` 属性值相同。举个例子：
|
||||
|
||||
```html
|
||||
<form>
|
||||
@ -25,17 +25,17 @@ forumTopicId: 301016
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 希望他的博客文章能有很多订阅，他想添加一个电子邮件注册表单。请为表示电子邮件的`label`标签添加`for`属性，并设置属性值与`input`标签的`id`属性值相同。
|
||||
Camper Cat 觉得他的博客文章会有很多人订阅，因此他想添加一个电子邮件注册表单。请为表示电子邮件的 `label` 标签添加 `for` 属性，并将其属性值设置为与 `input` 标签的 `id` 属性值相同。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的`label`标签应该有 1 个非空的`for`属性。
|
||||
`label `标签应该有一个非空的 `for` 属性。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
`for`属性的值应该与`input`标签的 id 值 email 相同。
|
||||
`for` 的属性值应与用于输入邮箱的 `input` 标签 id 属性值相同。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 301017
|
||||
|
||||
# --description--
|
||||
|
||||
低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是 “足够” 的？
|
||||
低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？
|
||||
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1。网上有很多可以帮助你计算对比度的工具。
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的。对于相同颜色来说，对比度是 1 : 1，即无对比度；白色与黑色拥有最高对比度 21 : 1。其他颜色间的对比度都在这个范围之内。网上有很多可以帮助你计算对比度的工具。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 为他的博客选择了白色背景，浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的`color`从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6 : 1。
|
||||
Camper Cat 为他的博客选择了白色背景和浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的 `color` 从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6 : 1。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该将`body`的`color`修改为深灰色。
|
||||
应该将 `body` 的 `color` 修改为深灰色。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
```
|
||||
|
||||
你不应该修改`body`的`background-color`。
|
||||
不应修改 `body` 的 `background-color`。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
|
||||
@ -8,27 +8,27 @@ forumTopicId: 301018
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 添加了诸如`main`、`header`、`footer`、`nav`、`article`、`section`等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。
|
||||
HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。这不仅为开发人员提供了更多的选择，同时也提升了网页的可访问性。
|
||||
|
||||
默认情况下，浏览器呈现这些新标签的方式与`div`相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。
|
||||
默认情况下，浏览器呈现这些新标签的方式与 `div` 相似。但如果我们能合理地使用这些标签，就可以让我们的代码更加语义化且易懂。由于这些标签可以表明其内容的含义，因此辅助工具（如：屏幕阅读器）可以通过这些标签为用户提供更加准确且易于理解的页面信息和导航信息。
|
||||
|
||||
`main`标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
|
||||
`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
||||
|
||||
`main`标签的语义化特性可以使辅助技术快速定位到页面的主体。 如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别`main`标签，实现这个功能。
|
||||
`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。辅助设备会识别 `main` 标签，就好像页面顶部出现一个“跳转到主要内容”的按钮那样。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在`header`标签和`footer`标签（在接下来的挑战中会详细介绍）之间添加完整`main`标签来使页面语义化。在这个挑战中，你可以先让`main`为空。
|
||||
Camper Cat 对他的忍者武器页面有一些新的想法，请帮他在 `header` 标签和 `footer` 标签（在接下来的挑战中会详细介绍）之间添加一个 `main` 标签。在这个挑战中，你可以先让 `main` 标签里的内容文本为空。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该有一个`main`标签。
|
||||
应存在一个 `main` 标签。
|
||||
|
||||
```js
|
||||
assert($('main').length == 1);
|
||||
```
|
||||
|
||||
`main`标签应该在`header`标签与`footer`标签之间。
|
||||
`main` 标签应位于 `header` 标签与 `footer` 标签之间。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: 知道 Alt 文本何时应该留空
|
||||
title: 了解 Alt 文本留空的情景
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
forumTopicId: 301019
|
||||
@ -8,30 +8,29 @@ forumTopicId: 301019
|
||||
|
||||
# --description--
|
||||
|
||||
在上一个挑战中，我们了解到`img`标签必须有一个`alt`属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，`alt`属性似乎有些多余。
|
||||
在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。不过在图片已经有标题作为文字说明，或者图片仅用作装饰的情况下，`alt` 属性似乎有些多余。
|
||||
|
||||
即便如此，我们仍然需要为`img`标签添加`alt`属性，这时可以把它设为空，例如：
|
||||
即便如此，我们仍然需要为 `img` 标签添加 `alt` 属性，但这时我们应把它的属性值设为空，例如：
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。
|
||||
比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。
|
||||
|
||||
**注意：**
|
||||
对于有标题的图片，我们依然需要添加`alt`属性，因为这样有助于搜索引擎记录图片内容。
|
||||
**注意：**对于有标题的图片，我们依然需要添加 `alt` 属性，因为这样有助于搜索引擎记录图片内容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的`alt`属性（注意：这里`img`标签的`src`属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。
|
||||
Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的 `alt` 属性（注意：这里 `img` 标签的 `src` 属性提供的链接是无效的，因此页面上不会显示任何忍者刀的图片，不用担心）。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的`img`标签应该包含`alt`属性。
|
||||
`img` 标签应具有 `alt` 属性。
|
||||
|
||||
```js
|
||||
assert(!($('img').attr('alt') == undefined));
|
||||
```
|
||||
|
||||
`alt`属性对应的值应该为空。
|
||||
`alt` 的属性值应为空。
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt') == '');
|
||||
|
||||
@ -10,7 +10,7 @@ forumTopicId: 301020
|
||||
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
|
||||
|
||||
然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。
|
||||
但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，此时我们可以用 CSS 来实现。当信息以可视化形式（比如图表）展示，而屏幕阅读器用户需要另一种方式（比如表格）来获取信息时，我们就可以用 CSS 来解决这个问题：只需要把仅供屏幕阅读器使用的信息通过 CSS 定位到浏览器可见区域之外即可。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -25,39 +25,38 @@ forumTopicId: 301020
|
||||
}
|
||||
```
|
||||
|
||||
**注意：**
|
||||
下面的 CSS 代码与上面的结果不同：
|
||||
**注意：**以下的 CSS 解决方案与上面的结果不同：
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code>或<code>visibility: hidden;</code>会把内容彻底隐藏起来，对于屏幕阅读器也不例外。</li>
|
||||
<li>如果把值设置为 0px，如<code>width: 0px; height: 0px;</code>，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。</li>
|
||||
<li><code>display: none;</code> 或 <code>visibility: hidden;</code> 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。</li>
|
||||
<li>如果把值设置为 0px，如 <code>width: 0px; height: 0px;</code>，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。</li>
|
||||
</ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个`sr-only`类，但是还没有添加 CSS 规则。请设置`position`的值为 absolute，`left` 的值为 -10000px，`width`与`height`的值为 1px。
|
||||
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图。考虑到可访问性，他还将数据放入到了一个表格中，供屏幕阅读器用户使用。表格的 `class` 为 `sr-only`，但是还没有添加 CSS 规则。请将 `position` 的值设置为 absolute、`left` 的值设置为 -10000px、`width` 与 `height` 的值均设置为 1px。
|
||||
|
||||
# --hints--
|
||||
|
||||
`sr-only`类中的`position`属性的值应为 absolute。
|
||||
`class` 为 `sr-only` 的元素的 `position` 属性值应为 absolute。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
`sr-only`类中的`left`属性的值应为 -10000px。
|
||||
`class` 为 `sr-only` 的元素的 `left` 属性值应为 -10000px。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
`sr-only`类中的`width`属性的值应为 1px。
|
||||
`class` 为 `sr-only` 的元素的 `width` 属性值应为 1px。
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
`sr-only`类中的`height`属性的值应为 1px。
|
||||
`class` 为 `sr-only` 的元素的 `height` 属性值应为 1px。
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 1
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 提供`accesskey`属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加便捷。
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。这可以让键盘用户的导航更加便捷。
|
||||
|
||||
HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按钮、表单控件等）十分有用。
|
||||
HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -18,29 +18,29 @@ HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 希望为他的两篇博客的标题的链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加`accesskey`属性，并将第一个设置为 "g"（表示 Garfield），第二个设置为 "c"（表示 Chuck Norris）。
|
||||
Camper Cat 希望为他两篇博客的标题链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加 `accesskey` 属性，并将第一个的属性值设置为 "g"（表示 Garfield），将第二个的属性值设置为 "c"（表示 Chuck Norris）。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该为`id`是 "first" 的`a`标签添加`accesskey`属性。
|
||||
`id` 为 "first" 的 `a` 标签应具有 `accesskey` 属性。
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
你应该为`id`是 "second" 的`a`标签添加`accesskey`属性。
|
||||
`id` 为 "second" 的 `a` 标签应具有 `accesskey` 属性。
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
你应该将`id`是 "first" 的`a`标签的`accesskey`属性值设置为小写 "g"。
|
||||
`id` 为 "first" 的 `a` 标签的 `accesskey` 属性值应为小写的 "g"。
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
你应该将`id`是 "second" 的`a`标签的`accesskey`属性值设置为小写 "c"。
|
||||
`id` 为 "second" 的 `a` 标签的 `accesskey` 属性值应为小写的 "c"。
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: 使用 footer 元素使屏幕阅读器更容易导航
|
||||
title: 使用 footer 元素来让屏幕阅读器更容易进行导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
forumTopicId: 301022
|
||||
@ -8,27 +8,27 @@ forumTopicId: 301022
|
||||
|
||||
# --description--
|
||||
|
||||
与`header`和`nav`类似，`footer`也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
|
||||
与 `header` 和 `nav` 类似，`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的`div`标签更改为`footer`标签。
|
||||
Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的 `div` 元素更改为 `footer` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码中应该包含 1 个`footer`标签。
|
||||
应存在一个 `footer` 标签。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
你的代码中不应包含`div`标签。
|
||||
不应存在 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
你代码中的`footer`应该是闭合的。
|
||||
确保 `footer` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: 使用 header 元素使屏幕阅读器更容易导航
|
||||
title: 使用 header 元素来让屏幕阅读器更容易进行导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
forumTopicId: 301023
|
||||
@ -8,38 +8,37 @@ forumTopicId: 301023
|
||||
|
||||
# --description--
|
||||
|
||||
`header`也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
|
||||
`header` 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
|
||||
|
||||
与`main`类似，`header`的语义化特性也可以使辅助技术快速定位到它的内容。
|
||||
与 `main` 类似，`header` 的语义化特性也可以让辅助工具快速定位到它的内容。
|
||||
|
||||
**注意：**
|
||||
`header`用在 HTML 文档的`body`标签中。这点与包含页面标题、元信息的`head`标签不同。
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。请注意，`header` 标签与包含页面标题、元信息的 `head` 标签本不相同。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在写一些训练忍者的精彩文章，并为它们建立一个新的页面。请使用`header`替换页面顶端包含`h1`的`div`标签。
|
||||
Camper Cat 正在创作一些训练忍者的精彩文章，并打算为这些文章创建一个新的页面。请把包含 `h1` 的 `div` 标签替换为 `header` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含 1 个`header`标签。
|
||||
应该存在一个 `header` 标签。
|
||||
|
||||
```js
|
||||
assert($('header').length == 1);
|
||||
```
|
||||
|
||||
你的`header`标签应该包含`h1`。
|
||||
`header` 标签中应包含 `h1`。
|
||||
|
||||
```js
|
||||
assert($('header').children('h1').length == 1);
|
||||
```
|
||||
|
||||
你的代码不应有任何`div`标签。
|
||||
不应存在 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
确保你的`header`标签是闭合的。
|
||||
确保 `header` 标签是闭合的。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,35 +8,35 @@ forumTopicId: 301024
|
||||
|
||||
# --description--
|
||||
|
||||
`nav`也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
|
||||
`nav` 也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别出页面中的导航信息。
|
||||
|
||||
对于在多个页面底部出现的站点链接，不需要使用`nav`，用`footer`（在下个挑战中介绍）会更好。
|
||||
对于在多个页面底部出现的站点链接，我们不需要使用 `nav` 标签。此时，使用 `footer` 标签会更好。我们将会在下个挑战中学习 `footer` 标签的使用。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在他的忍者训练页面顶端使用了很多导航链接，但把它们写在了`div`中。请将`div`更改为`nav`标签，以提升页面的可访问性。
|
||||
Camper Cat 在他的忍者训练页面顶端放置了多个导航链接，但这些链接都写在了 `div` 中。请将 `div` 标签更改为 `nav` 标签，以提升页面的可访问性。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该有 1 个`nav`标签。
|
||||
应存在一个 `nav` 标签。
|
||||
|
||||
```js
|
||||
assert($('nav').length == 1);
|
||||
```
|
||||
|
||||
你的`nav`标签应该包含`ul`标签及其列表项。
|
||||
`nav` 标签应包含 `ul` 标签及其列表项。
|
||||
|
||||
```js
|
||||
assert($('nav').children('ul').length == 1);
|
||||
```
|
||||
|
||||
你的代码不应包含`div`标签。
|
||||
不应存在 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
确保你的`nav`标签是闭合的。
|
||||
确保 `nav` 标签是闭合的。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301025
|
||||
|
||||
# --description--
|
||||
|
||||
继续日期主题。HTML5 还引入了`time`标签与`datetime`属性来标准化时间。`time`是一个行内标签，用于在页面中呈现日期或时间，而`datetime`属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。
|
||||
继续日期主题。HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。`time` 是一个行内标签，用于在页面中呈现日期或时间，而 `datetime` 属性用户设置日期的格式，辅助设备会获取这个值。通过标准化时间格式，即使时间在文本中是以非正式或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -16,17 +16,17 @@ forumTopicId: 301025
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 的比武大会的时间确定了！请使用`time`标签包含文本 "Thursday, September 15<sup>th</sup>"，并将`datetime`属性设置为 "2016-09-15"。
|
||||
Camper Cat 的比武大会的时间确定了！请使用 `time` 标签包裹文本 "Thursday, September 15<sup>th</sup>"，并将 `datetime` 的属性值设置为 "2016-09-15"。
|
||||
|
||||
# --hints--
|
||||
|
||||
`time`标签应该包含文本"Thursday, September 15<sup>th</sup>"。
|
||||
应存在一个内容文本为 `Thank you to everyone for responding to Master Camper Cat's survey.` 的 `p` 元素和一个 `time` 元素。
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
```
|
||||
|
||||
`time`标签应该有 1 个非空的`datetime`属性。
|
||||
`time` 元素的内容文本应为 `Thursday, September 15<sup>th</sup>`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`datetime`属性的值应该为 2016-09-15。
|
||||
`time` 元素应包含非空的 `datetime` 属性。
|
||||
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr.length);
|
||||
```
|
||||
|
||||
确保`time`标签是闭合的。
|
||||
`datetime` 的属性值应为 `2016-09-15`。
|
||||
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
|
||||
@ -8,43 +8,43 @@ forumTopicId: 301026
|
||||
|
||||
# --description--
|
||||
|
||||
标题标签（包括`h1`到`h6`）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。
|
||||
标题标签（包括 `h1` 到 `h6`）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。
|
||||
|
||||
*语义化*：标签名能准确地表达它所含内容的信息类型。
|
||||
*语义化*的意思是，标签名能准确地表达它所含内容的信息类型。
|
||||
|
||||
对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。
|
||||
假如你在写一篇含有引言、正文、结论的论文。此时，如果把结论作为正文的一部分显然没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。
|
||||
|
||||
在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。
|
||||
|
||||
举个例子：一个`h2`标签后紧跟若干`h4`标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6 个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。
|
||||
比如说，如果我们在一个 `h2` 标签后加上若干由 `h4` 标签引导的页面。此时发生了层级的错位，这会让使用屏幕阅读器的用户感到困惑。尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。
|
||||
|
||||
最后一点，每个页面应该只有一个`h1`标签，用来说明页面主要内容。`h1`标签和其他的标题标签可以让搜索引擎获取页面的大纲。
|
||||
最后一点，每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。另外，这六个标题标签可以让搜索引擎获取页面的大纲。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的`h5`标题标签调整为恰当的级别（即`h3`标题标签），使它们是`h2`标题标签的子级。
|
||||
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的 `h5` 标题标签调整为恰当的级别（即 `h3` 标题标签），因为它们是 `h2` 标题标签的子级。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含 6 个`h3`标签。
|
||||
应存在 6 个 `h3` 标签。
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
你的代码不应包含 `h5` 标签。
|
||||
确保 `h3` 有结束标签
|
||||
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
代码不应该包含 `h5` 标记.
|
||||
不应该存在 `h5` 标签.
|
||||
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
代码不应该包含 `h5` 结束标记。
|
||||
不应该存在 `h5` 的结束标签。
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
|
||||
@ -8,28 +8,28 @@ forumTopicId: 301027
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 的`tabindex`属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。
|
||||
HTML 的 `tabindex` 属性是与标签焦点相关的属性，给标签加上 tabindex 表示该标签可以获得焦点。`tabindex` 的值可以是零、负整数或正整数，这些数值分别定义了三种行为。
|
||||
|
||||
当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将`tabindex`属性值设为 0，来给其他标签赋予相同的功能，如：`div`、`span`、`p`等。举个例子：
|
||||
当用户在页面中使用 tab 键时，有些标签（如：链接、表单控件）可以自动获得焦点，它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。比如：
|
||||
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
|
||||
**注意：**
|
||||
`tabindex`属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的`div`标签），但是它超出了当前挑战的范围。
|
||||
`tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 `div` 实现的弹出框上）的场景。只是这部分内容已经超出了当前挑战的范围。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 新建了一个调查，用来收集他的用户的信息。他知道输入框可以自动获得键盘焦点，但他希望确保当键盘用户切换标签时，焦点可以停留在指示文字上。请给`p`标签添加`tabindex`属性，并将它的值设置为 0。注意：使用`tabindex`属性可以使 CSS 伪类`:focus`在`p`标签上生效。
|
||||
Camper Cat 新建了一个用来收集他的用户信息的调查。他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。请给 `p` 标签添加 `tabindex` 属性，并将它的属性值设为 0。注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该为表单中的`p`标签添加`tabindex`属性。
|
||||
表单中，作为指示文字（Instructions）的 `p` 标签应具有 `tabindex` 属性。
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
你应该将`p`标签的`tabindex`属性值设置为 0。
|
||||
`p` 标签的 `tabindex` 属性值应设置为 0。
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 301028
|
||||
|
||||
# --description--
|
||||
|
||||
`tabindex`属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。
|
||||
`tabindex` 属性还可以指定元素的 tab 键焦点顺序，将它的值设置为大于等于 1 的整数就可以实现这个功能。
|
||||
|
||||
`tabindex`属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的`tabindex`的值（如：2，3 等）的顺序进行移动，直到回到默认的或`tabindex`值为 0 的标签上，如此循环。
|
||||
在使用键盘导航时，`tabindex` 属性值为 1 的元素会最先聚焦（选中）；之后，焦点将按照 `tabindex` 值（如：2、3 等）的顺序进行移动，最后回到默认（即 `tabindex` 值为 0）的元素上，如此循环。
|
||||
|
||||
需要注意的是，当按照这种方式设置 tab 键顺序时，将会覆盖默认的顺序（标签在文档流中出现的顺序）。这可能会令那些希望从页面顶部开始导航的用户感到困惑。这个技术在某些情况下可能是必要的，但是对可访问性而言，在应用时要十分小心。
|
||||
需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。这可能会让那些希望从页面顶部开始导航的用户感到困惑。使用 `tabindex` 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -22,29 +22,29 @@ forumTopicId: 301028
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 将这个区域定位在页面的右上角。Camper Cat 希望他的搜索`input`与提交`input`表单控件是 tab 键顺序的前两项。请为搜索`input`添加`tabindex`属性，其值为 1。为提交`input`添加`tabindex`属性，其值为 2。
|
||||
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。请为搜索（search）`input` 添加 `tabindex` 属性，其属性值为 1；为提交（submit）`input` 添加 `tabindex` 属性，其属性值为 2。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该为搜索`input`标签添加`tabindex`属性。
|
||||
搜索 `input` 标签应包含 `tabindex` 属性。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
你应该为提交`input`标签添加`tabindex`属性。
|
||||
提交 `input` 标签应包含 `tabindex` 属性。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
搜索`input`标签的`tabindex`属性值应该为 1。
|
||||
搜索 `input` 标签的 `tabindex` 属性值应为 1。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
提交`input`标签的`tabindex`属性值应该为 2。
|
||||
提交 `input` 标签的 `tabindex` 属性值应为 2。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
|
||||
@ -8,14 +8,14 @@ forumTopicId: 301029
|
||||
|
||||
# --description--
|
||||
|
||||
`article`是另一个具有语义化特性的 HTML5 新标签。`article`是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。`article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。这个标签适用于播客文章、论坛帖子或者新闻文章。
|
||||
|
||||
有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，是否仍然有意义？类似地，对于 RSS 提要中的文本，它是否有意义？
|
||||
有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，这些内容是否仍然有意义？类似地，对于文本内容，可否把这些内容放到 RSS 推送里？如果回答是肯定的，那我们就可以认为这些内容是独立的。
|
||||
|
||||
请牢记，使用辅助设备的用户依赖组织良好的、语义化的标签来获取页面中的信息。
|
||||
请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。
|
||||
|
||||
**请注意`section`和`div`的区别：**
|
||||
`section`也是一个 HTML5 新标签，与`article`标签的语义含义略有不同。`article`用于独立的、完整的内容，而`section`用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个`article`的话，那么每个章节就是`section`。当内容组之间没有联系时，可以使用`div`。
|
||||
**请注意 `section` 和 `div` 的区别：**
|
||||
`section` 也是一个 HTML5 新标签，它与 `article` 标签的语义含义略有不同。`article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。它们可以根据需要来嵌套使用。举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。当内容组之间没有联系时，我们可以使用 `div`。
|
||||
|
||||
```html
|
||||
<div> - groups content
|
||||
@ -25,17 +25,17 @@ forumTopicId: 301029
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 打算使用`article`标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用它。请使用`article`标签来代替`div`标签。
|
||||
Camper Cat 打算使用 `article` 标签来呈现他的博客页面里的帖子，但是他还没有加到最上面的帖子上。请使用 `article` 标签来代替 `div` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码中应该有 3 个`article`标签。
|
||||
应存在 3 个 `article` 标签。
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
你的代码不应包含`div`标签。
|
||||
不应存在 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 301030
|
||||
|
||||
# --description--
|
||||
|
||||
下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，单选按钮含有一个拥有`for`属性的`label`标签，`for`属性指向相关选项的`id`。然而单选按钮通常成组出现，用户必须其中选择一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。
|
||||
下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，`for` 的属性值指向相关选项的 `id`。然而单选按钮通常成组出现，而且用户必须选择其中一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。
|
||||
|
||||
使用`fieldset`标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用`legend`标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。
|
||||
我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。
|
||||
|
||||
当选项的含义很明确时，如：性别选择，`fieldset`标签与`legend`标签就可以省略。这时，使用含有`for`属性的`label`标签就足够了。
|
||||
当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。这时，使用包含 `for` 属性的 `label` 标签就足够了。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -32,17 +32,17 @@ forumTopicId: 301030
|
||||
|
||||
# --instructions--
|
||||
|
||||
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的`label`标签添加了`for`属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的`div`标签替换为`fieldset`标签；将`p`标签替换为`legend`标签。
|
||||
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的 `label` 标签添加了 `for` 属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该使用 1 个`fieldset`标签包含单选按钮组。
|
||||
应存在 1 个 `fieldset` 标签包含单选按钮组。
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
确保`fieldset`标签是闭合的。
|
||||
确保 `fieldset` 标签是闭合的。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,19 +51,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你的代码应该有 1 个包含询问用户忍者等级文字的`legend`标签。
|
||||
应存在 1 个包含询问用户忍者等级内容文字的 `legend` 标签。
|
||||
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
你的代码不应该含有`div`标签。
|
||||
不应存在 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
你的代码不应该有包含询问用户忍者等级文字的`p`标签。
|
||||
不应存在包含询问用户忍者等级内容文字的 `p` 标签。
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
|
||||
@ -32,17 +32,17 @@ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
|
||||
# --instructions--
|
||||
|
||||
现在该卡片添加了值为 `thumbnail` 的 id 属性。把上面的 `box-shadow` 值赋给卡片。
|
||||
我们把卡片的 `id` 设置成了 `thumbnail`，请把上面的 `box-shadow` 值赋给这个卡片。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该给 id 为 `thumbnail` 的元素添加 `box-shadow` 属性。
|
||||
应该给 id 为 `thumbnail` 的元素添加 `box-shadow` 属性。
|
||||
|
||||
```js
|
||||
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
```
|
||||
|
||||
`box-shadow` 值应该是指定的 CSS 值。
|
||||
`box-shadow` 属性值应该是题目说明中指定的 CSS 值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -12,7 +12,7 @@ forumTopicId: 301032
|
||||
|
||||
<blockquote>rgba 代表：<br> r = red 红色<br> g = green 绿色<br> b = blue 蓝色<br> a = alpha 透明度</blockquote>
|
||||
|
||||
RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。`rgba()` 非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。
|
||||
RGB 值可以取在 0 到 255 之间。alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。`rgba()` 在需要设置颜色透明度时十分有用，这意味着你可以做出一些很漂亮的半透明效果。
|
||||
|
||||
在本挑战里你将会用到这个代码 `background-color: rgba(45, 45, 45, 0.1)`。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
|
||||
|
||||
@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
你应该给 `h4` 元素添加一个 `padding` 属性并且赋值 `10px`。
|
||||
`h4` 元素的 `padding` 属性值应为 `10px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 元素的 `height` 属性应该被移除。
|
||||
`h4` 元素不应有 `height` 属性。
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301033
|
||||
|
||||
# --description--
|
||||
|
||||
通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反，比如如果文字背景色和文字颜色互为补色，文字会很难看清。通常的做法是，一种颜色做为主要颜色，其补色用来装点页面。
|
||||
通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -16,25 +16,25 @@ forumTopicId: 301033
|
||||
|
||||
# --hints--
|
||||
|
||||
`header` 元素应该有一个值为 `#09A7A1` 的 `background-color` CSS 属性。
|
||||
`header` 元素的 `background-color` 属性值应为 `#09A7A1`。
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`footer` 元素应该有一个值为 `#09A7A1` 的 `background-color`CSS 属性。
|
||||
`footer` 元素的 `background-color` 属性值应为 `#09A7A1`。
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`h2` 元素应该有一个值为 `#09A7A1` 的 `color` CSS 属性。
|
||||
`h2` 元素的 `color` 属性值应为 `#09A7A1`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`button` 元素应该有一个值为 `#FF790E` 的 `background-color` CSS 属性。
|
||||
`button` 元素的 `background-color` 属性值应为 `#FF790E`。
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301034
|
||||
|
||||
# --description--
|
||||
|
||||
和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：
|
||||
和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。下面这段代码可以把图片的高度设置为 20px：
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -18,13 +18,13 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `h4` 标签添加 `height` 属性并设置值为 25px。
|
||||
给 `h4` 标签添加 `height` 属性并将属性值设置为 25px。
|
||||
|
||||
**注意：** 可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
|
||||
**注意：**可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该设置 `h4` 的 `height` 属性，使其值为 `25px`。
|
||||
`h4` 的 `height` 属性值应为 `25px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301035
|
||||
|
||||
# --description--
|
||||
|
||||
本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。
|
||||
本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
|
||||
|
||||
比如，超链接可以使用 `:hover` 伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：
|
||||
比如，可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。下面的代码可以改变超链接悬停时的颜色：
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
@ -20,17 +20,17 @@ a:hover {
|
||||
|
||||
# --instructions--
|
||||
|
||||
代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。添加一个规则，满足如下，当用户悬停 `a` 标签时，把 `color` 变成蓝色。
|
||||
代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。请添加一个规则，使得用户悬停在 `a` 标签时，`a` 标签的 `color` 会变成蓝色。
|
||||
|
||||
# --hints--
|
||||
|
||||
超链接的 `color` 应该保持黑色，只添加 `:hover` CSS 规则。
|
||||
超链接的 `color` 应该保持黑色，应只添加 `:hover` CSS 规则。
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
悬停超链接时超链接 `color` 应该变成蓝色。
|
||||
悬停超链接时超链接的 `color` 应该变成蓝色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,13 +8,13 @@ forumTopicId: 301036
|
||||
|
||||
# --description--
|
||||
|
||||
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的 `hsl()` 属性做为对应的颜色描述方式。
|
||||
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了 `hsl()` 做为颜色的描述方式。
|
||||
|
||||
**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
|
||||
**饱和度**是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
|
||||
**饱和度**是指色彩的纯度，也就是颜色里灰色的占比。饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。饱和度的取值范围是表示灰色所占百分比的 0 至 100。
|
||||
|
||||
**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。
|
||||
**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。
|
||||
|
||||
下面是一些使用 `hsl()` 描述颜色的例子，颜色都为满饱和度，中等亮度:
|
||||
|
||||
@ -22,41 +22,41 @@ HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 为 `green`、`cyan` 和`blue` `div` 的 `background-color` 使用 `hsl()` 表示法描述相应的颜色。颜色都为满饱和度，亮度中等。
|
||||
将 class 为 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 属性值设置为使用 `hsl()` 表示的颜色。颜色都为满饱和度，亮度中等。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 `hsl()` 属性来表示绿色。
|
||||
应该使用 `hsl()` 属性来表示绿色。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
你应该使用 `hsl()` 属性来表示蓝绿色。
|
||||
应该使用 `hsl()` 属性来表示蓝绿色。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
你应该使用 `hsl()` 属性来表示蓝色。
|
||||
应该使用 `hsl()` 属性来表示蓝色。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
class 为 `green` 的 `div` 应该有绿色的 `background-color` CSS 属性。
|
||||
class 为 `green` 的 `div` 的 `background-color` 属性值应为绿色。
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
class 为 `cyan` 的 `div` 应该有蓝绿色的 `background-color` CSS 属性。
|
||||
class 为 `cyan` 的 `div` 的 `background-color` 属性值应为蓝绿色。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
class 为 `blue` 的 `div` 应该有蓝色的 `background-color` CSS 属性。
|
||||
class 为 `blue` 的 `div` 的 `background-color` 属性值应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301037
|
||||
|
||||
# --description--
|
||||
|
||||
标题（`h1` 到 `h6`）的文字应该比段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用 `font-size` 属性来设置元素内文字的大小。
|
||||
标题（`h1` 到 `h6`）的文字应该比段落的文字大，这样可以让用户更直观的看到页面布局，同时能根据不同元素的层级梳理出页面的结构，更方便用户获取关键的信息。你可以使用 `font-size` 属性来设置元素内文字的大小。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `h4` 标签的 `font-size`改成 27 像素，让标题更醒目。
|
||||
把 `h4` 标签的 `font-size` 的属性值改成 27 像素，让标题更醒目。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该给 `h4` 元素添加一个 `font-size` 属性并且赋值 `27px`。
|
||||
应给 `h4` 元素添加一个 `font-size` 属性并将属性值设置为 `27px`。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301038
|
||||
|
||||
# --description--
|
||||
|
||||
`hsl()` 使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。
|
||||
`hsl()` 使 CSS 更改颜色色调更加方便。比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。`hsl()` 在你想获取一个基准色的变种的情景下会十分有用。
|
||||
|
||||
# --instructions--
|
||||
|
||||
页面的导航栏目前继承了 `header` 的 `background-color`。改变 `nav` 元素的 `background-color`，保留基色蓝绿色，调整它的色调和明暗使它具有 80% 的饱和度以及 25% 的亮度。
|
||||
所有元素的默认 `background-color` 都是透明色。当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。请将 `nav` 的 `background-color` 也设置为 `cyan`，但把它的饱和度调整为 80%，亮度调整为 25%。
|
||||
|
||||
# --hints--
|
||||
|
||||
`nav` 元素应该有一个使用 `hsl()` 属性调节蓝绿色调的 `background-color` CSS 属性。
|
||||
`nav` 元素应该有一个使用 `hsl()` 属性调节蓝绿色调的 `background-color` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301039
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 CSS 里面的 `width` 属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：
|
||||
你可以使用 CSS 里的 `width` 属性来指定元素的宽度。属性值可以是相对单位（比如 em）、绝对单位（比如 px）、或者其父元素宽度的百分比。下面这段代码可以把图片的宽度设置为 220px：
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -18,11 +18,11 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
给卡片添加 `width` 属性，设置它的宽度为 245px。使用 `fullCard` class 来选择元素。
|
||||
请使用 `fullCard` class 来选择卡片元素，为它添加 `width` 属性，并将它的宽度设置为 245px。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 `fullCard` class 选择器将卡片的 `width` 宽度属性更改为 `245px`。
|
||||
应使用 `fullCard` class 选择器将卡片的 `width` 属性值设置为 `245px`。
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301040
|
||||
|
||||
# --description--
|
||||
|
||||
改变相似元素的动画频率的方法有很多。目前接触到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||
改变相似元素的动画频率的方法有很多。目前我们接触到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||
|
||||
举例说明，右边的动画包含了两个小星星，每个小星星都在 20% `@keyframes` 处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 `@keyframes` 规则以使两个小星星以不同的频率闪烁。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过改变 class 为 `star-1` 的元素的 `@keyframes` 为 50% 以改变其动画频率。
|
||||
请将 class 为 `star-1` 的元素的 `@keyframes` 为设置为 50%，以此改变其动画频率。
|
||||
|
||||
# --hints--
|
||||
|
||||
`star-1` class 的 `@keyframes` 规则应该为50%。
|
||||
class 为 `star-1` 的元素的 `@keyframes` 规则应为 50%。
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
|
||||
@ -16,7 +16,7 @@ forumTopicId: 301041
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `animation-iteration-count` 属性改成 infinite，以使右边的球持续跳跃。
|
||||
把 `animation-iteration-count` 属性值改成 infinite，以使右边的球持续跳跃。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ forumTopicId: 301042
|
||||
|
||||
# --description--
|
||||
|
||||
在前面的关卡里，你通过改变 `@keyframes` 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。
|
||||
在前面的关卡里，我们通过修改 `@keyframes` 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。
|
||||
|
||||
在编辑器代码运行的动画里，天空中有三个以同样频率不停的闪烁的星星。你可以设置每一个星星的 `animation-duration` 属性为不同的值来使其具有不同的闪烁频率。
|
||||
在编辑器代码运行的动画里，天空中有三个以同样频率不停闪烁的星星。你可以设置每一个星星的 `animation-duration` 属性为不同的值来使其具有不同的闪烁频率。
|
||||
|
||||
# --instructions--
|
||||
|
||||
依次设置 class 为 `star-1`、`star-2`、`star-3` 的 `animation-duration` 为 1s、0.9s、1.1s。
|
||||
依次设置 class 为 `star-1`、`star-2`、`star-3` 的元素的 `animation-duration` 为 1s、0.9s、1.1s。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -10,15 +10,15 @@ forumTopicId: 301043
|
||||
|
||||
在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 `margin` 值设置为 `auto`。
|
||||
|
||||
同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block`来把它变成块级元素。
|
||||
同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block` 来把它变成块级元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过给页面中的 `div` 添加值为 `auto` 的 `margin` 属性将其居中显示。
|
||||
通过将页面中 `div` 的 `margin` 属性值设置为 `auto` 来让它居中显示。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 的 `margin` 应该为 `auto`。
|
||||
`div` 的 `margin` 属性值应为 `auto`。
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301044
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的 `盒模型`。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的 `普通流`，同时 CSS 提供了 position 属性来覆盖它。
|
||||
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的<dfn>盒模型</dfn>。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的<dfn>普通流</dfn>，同时 CSS 提供了 position 属性来覆盖它。
|
||||
|
||||
当元素的 position 设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是 `left`、`right`、`top` 和 `bottom`。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：
|
||||
当元素的 position 设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。CSS 里控制各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`。它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。下面的例子展示了段落向上偏移 10 像素：
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -19,16 +19,15 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 **注意**
|
||||
定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）能够浏览你的网页。
|
||||
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 **注意：**定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）也能够无障碍地浏览你的网页。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `h2` 的 `position` 设置成 `relative`，使用相应的 CSS 属性调整 `h2` 的位置，使其向下偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。
|
||||
把 `h2` 的 `position` 属性值设置成 `relative`，使用相应的 CSS 属性调整 `h2` 的位置，使其相对原本的位置向下偏移 15 像素。注意不要对 h1 和 p 元素的位置产生影响。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素应该添加 `position` 属性并赋值 `relative`。
|
||||
`h2` 元素应该添加 `position` 属性，其属性值应为 `relative`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301045
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 动画里，`animation-timing-function` 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。
|
||||
在 CSS 动画里，`animation-timing-function` 用来定义动画的速度曲线。速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。
|
||||
|
||||
已经有了很多预定义的值可以直接使用于大部分场景。比如，默认的值是 `ease`，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 `ease-out`，动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`，动画从头到尾的速度是相同的。
|
||||
对于常用的选项，CSS 提供了内置的关键字方便我们调用。比如，默认的值是 `ease`：动画以低速开始，然后加快，在结束前变慢；其它常用的值包括 `ease-out`：动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`：动画从头到尾的速度是相同的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 赋值为 `linear`，`ball2` 赋值为 `ease-out`。它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。
|
||||
给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的属性值为 `linear`，`ball2` 的属性值为 `ease-out`。它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为 linear。
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应为 linear。
|
||||
|
||||
```js
|
||||
const ball1Animation = $('#ball1')
|
||||
@ -27,7 +27,7 @@ const ball1Animation = $('#ball1')
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该为 ease-out。
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应为 ease-out。
|
||||
|
||||
```js
|
||||
const ball2Animation = $('#ball2')
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301046
|
||||
|
||||
# --description--
|
||||
|
||||
当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 `z-index` 属性指定元素的堆叠次序。`z-index` 的取值是整数，数值大的元素优先于数值小的元素显示。
|
||||
当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 `z-index` 属性指定元素的堆叠次序。`z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 class 为 `first` 的元素（红色的方块）添加 `z-index` 属性并赋值为 2，使它显示在蓝色方块的上方。
|
||||
给 class 为 `first` 的元素（红色的方块）添加 `z-index` 属性并将属性值设置为 2，使它显示在蓝色方块的上方。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `first` 的元素的 `z-index` 值应该为 2。
|
||||
class 为 `first` 的元素的 `z-index` 属性值应为 2。
|
||||
|
||||
```js
|
||||
assert($('.first').css('z-index') == '2');
|
||||
|
||||
@ -8,26 +8,23 @@ forumTopicId: 301047
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，也就是渐变。可以通过 `background` 里面的 `linear-gradient()` 来实现线性渐变，下面是它的语法：
|
||||
HTML 元素的背景色并不局限于单色。CSS 还为我们提供了颜色渐变。可以通过 `background` 里的 `linear-gradient()` 来实现线性渐变，以下是它的语法：
|
||||
|
||||
`background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);`
|
||||
|
||||
第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：
|
||||
第一个参数用来表明颜色渐变的初始方向。它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。后续的参数指定了渐变颜色的顺序。
|
||||
|
||||
例子：
|
||||
例如：
|
||||
|
||||
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `linear-gradient()` 给 `div` 添加 `background` 渐变色，渐变角度 35deg，从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
|
||||
**注意**
|
||||
有很多种方式指定颜色值，如 `rgb()` 或者 `hsl()`。在本关里请使用 hex 颜色码。
|
||||
使用 `linear-gradient()` 将 `div` 的 `background` 设置为渐变色，渐变的起始角度为 35 度，颜色从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素应该有一个指定方向和颜色的 `linear-gradient` `background`渐变色。
|
||||
`div` 元素应有一个指定方向和颜色的 `linear-gradient` 来设置 `background`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,33 +10,33 @@ forumTopicId: 301048
|
||||
|
||||
术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。
|
||||
|
||||
通过使用选择器选择不同的元素并改变其属性，你可以创造一些有趣的形状。比如新月。你可以使用 `box-shadow` 属性来设置元素的阴影，`border-radius` 属性控制元素的圆角边框。
|
||||
通过使用不同的选择器和属性，你可以做出有趣的形状，比如新月形状。在这个挑战中，我们会学习如何使用 `box-shadow` 属性来设置元素的阴影，以及使用 `border-radius` 属性控制元素的圆角边框。
|
||||
|
||||
首先你将会创建一个圆的、透明的对象，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。
|
||||
首先我们来创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。
|
||||
|
||||
为了创建一个圆形的对象，`border-radius` 应该被设置成 50%。
|
||||
|
||||
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。其中`blur-radius` 和 `spread-radius` 是可选的。
|
||||
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。其中 `blur-radius` 和 `spread-radius` 是可选的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把编辑器里的正方形元素变成新月形状。首先，把 `background-color` 改为 transparent，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，`color` 为 blue。
|
||||
把编辑器里的正方形元素变成新月形状。首先，把 `background-color` 改为 transparent，接着把 `border-radius` 属性值设置成 50%，以创建一个圆形。最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px、`offset-y` 为 10px、`blur-radius` 为 0、`spread-radius` 为 0、`color` 为 blue。
|
||||
|
||||
# --hints--
|
||||
|
||||
`background-color` 属性应该取值 `transparent`。
|
||||
`background-color` 属性值应为 `transparent`。
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
`border-radius` 属性应该取值 `50%`。
|
||||
`border-radius` 属性值应为 `50%`。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
`box-shadow` 属性的 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和 `color` 应该依次取值`25px`、`10px`、`0`、`0` 和 `blue`。
|
||||
`box-shadow` 的 `offset-x`、`offset-y`、`blur-radius`、`spread-radius`、`color` 属性值应依次为 `25px`、`10px`、`0`、`0`、`blue`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,18 +10,17 @@ forumTopicId: 301049
|
||||
|
||||
术语：Horizontal Rule => hr => 水平线。
|
||||
|
||||
你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。
|
||||
你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在包含卡片标题的 `h4` 下面添加一个 `hr` 标签。
|
||||
在卡片标题元素 `h4` 下方添加一个 `hr` 标签。
|
||||
|
||||
**注意**
|
||||
在 HTML 里，`hr` 是自关闭标签，所以不需要一个单独的关闭标签。
|
||||
**注意：**HTML 中的 `hr` 是自闭合标签，所以我们不需要为它添加结束标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该添加一个 `hr` 标签。
|
||||
应存在一个 `hr` 标签。
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301050
|
||||
|
||||
# --description--
|
||||
|
||||
世界上最流行的形状非心形莫属了，在本关里你将用纯 CSS 创建一个心形。但是首先你需要了解 `::before` 和 `::after` 伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里，`::before` 伪类元素用来给 class 为 `heart` 的元素添加一个正方形。
|
||||
世界上最流行的形状非心形莫属了，在本挑战中我们将用纯 CSS 创建一个心形。但是首先你需要了解伪元素 `::before` 和 `::after`。伪元素可以在所选元素之前或之后添加一些内容。在下面的代码中，`::before` 伪元素用来给 class 为 `heart` 的元素添加一个正方形：
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
@ -23,19 +23,19 @@ forumTopicId: 301050
|
||||
}
|
||||
```
|
||||
|
||||
`::before` 和 `::after` 必须配合 `content` 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当 `::before` 和 `::after`伪类用来添加某些形状而不是图片或文字时，`content` 属性仍然是必需的，但是它的值可以是空字符串。 在上面的例子里，class 为 `heart` 元素的 `::before` 伪类添加了一个黄色的长方形，长方形的 `height` 和 `width` 分别为 50px 和 70px。由于设置了其边框半径为 25%，所以长方形为圆角长方形，同时其相对位置为距离 `left` 5px，以及向 `top` 偏移 50px。
|
||||
`::before` 和 `::after` 必须配合 `content` 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。尽管有时 `::before` 和 `::after` 是用来实现形状而非文字，但 `content` 属性仍然是必需的，此时它的值可以是空字符串。在上面的例子里，我们用 `::before` 为 class 是 `heart` 的元素添加了一个黄色的矩形，矩形的 `height` 和 `width` 分别为 50px 和 70px。由于设置了其边框半径为 25%，所以它会呈现出圆角矩形的样子。同时其相对位置为向右偏移 5px、向上偏移 50px。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把屏幕里的元素变成心形。在 `heart::after` 选择器里面，把 `background-color` 改成粉色（pink），把 `border-radius` 改成 50%。
|
||||
把屏幕里的元素变成心形。在 `heart::after` 选择器里面，把 `background-color` 改成粉色（pink），把 `border-radius` 的属性值改成 50%。
|
||||
|
||||
接下来，在 `heart` class 选择器（单纯的 `heart` 元素）里面，完善 `transform` 属性。使用 `rotate()` 函数并赋参 -45 度。（`rotate()`用法和 `skewX` 以及 `skewY` 类似）。
|
||||
接下来，用类选择器选取 class 为 `heart` 的元素，为它添加 `transform` 属性。使用 `rotate()` 函数并设置角度为 -45 度。
|
||||
|
||||
最后，在 `heart::before` 选择器里面，设置 `content` 属性为空字符串。
|
||||
最后，在 `heart::before` 选择器里面，设置 `content` 属性值为空字符串。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart::after` 选择器的 `background-color` 属性值应该为粉色。
|
||||
`heart::after` 伪元素的 `background-color` 属性值应为粉色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,19 +43,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`heart::after` 选择器的 `border-radius` 属性值应该为 50%。
|
||||
`heart::after` 伪元素的 `border-radius` 属性值应为 50%。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
`heart` class 的 `transform` 属性应该使用 `rotate()` 函数并赋参为 `-45deg`。
|
||||
class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并传入参数 `-45deg`。
|
||||
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
`heart::before`选择器的`content`应该为空字符串。
|
||||
`heart::before` 伪元素的 `content` 应为空字符串。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: 使用 CSS 动画创建运动
|
||||
title: 使用 CSS 动画创建动画
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
forumTopicId: 301051
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301051
|
||||
|
||||
# --description--
|
||||
|
||||
当元素的 `position` 被指定，如 `fixed` 或者 `relative` 时，CSS 偏移属性 `right`、`left`、`top` 和 `bottom`可以用在动画规则里创建动作。
|
||||
在元素的 `position` 已有指定值（如 `fixed` 或者 `relative`）时，CSS 偏移属性 `right`、`left`、`top`、`bottom` 可以用在动画规则里创建动作。
|
||||
|
||||
就像下面的例子展示的那样，你可以在 `50%`keyframe 处设置 `top` 属性为 50px， 在开始（0%）和最后（100%）keframe 处设置为 0px，以产生项目向下运动，然后返回的动作效果。
|
||||
就像下面的例子展示的那样，你可以在 `50%` keyframe 处设置 `top` 属性为 50px，在开始（0%）和最后（100%）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
@ -31,11 +31,11 @@ forumTopicId: 301051
|
||||
|
||||
# --instructions--
|
||||
|
||||
让 `div` 水平运动。使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 的 0 像素开始，在 `50%` 时移动到 25 像素，在 `100%` 时时移动到 -25 像素。不要替换编辑器里的 `top` 属性，动画应该同时向水平和竖直方向运动。
|
||||
请实现让 `div` 水平运动的效果。使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 的 `keyframe` 下从偏移 0 像素开始；在 `50%` 时偏移 25 像素；在 `100%` 时偏移 -25 像素。不要修改编辑器里的 `top` 属性，元素应该同时在水平和竖直方向运动。
|
||||
|
||||
# --hints--
|
||||
|
||||
`0%` 的 `@keyframes` 规则应该为向 `left` 偏移 `0px`。
|
||||
`0%` 的 `@keyframes` 规则应为向 `left` 偏移 `0px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`50%` 的 `@keyframes` 规则应该为向 `left` 偏移`25px`。
|
||||
`50%` 的 `@keyframes` 规则应为向 `left` 偏移 `25px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`100%` 的 `@keyframes` 规则应该为向 `left` 偏移`-25px`。
|
||||
`100%` 的 `@keyframes` 规则应为向 `left` 偏移 `-25px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301052
|
||||
|
||||
# --description--
|
||||
|
||||
添加一个精致的背景图，可以增加页面的质感，让页面更美观。关键是要找到一个平衡点，抢了内容的风头，喧宾夺主可就不妙了。`background` 属性支持使用 `url()` 函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。
|
||||
为了增加背景图的质感，我们可以为它添加一个不那么明显的纹理图案，这样可以让页面更讨喜。但关键在于，我们需要找到一个平衡点，因为我们不希望背景图抢占了内容的风头，造成喧宾夺主的结果。`background` 属性支持使用 `url()` 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。图片链接的地址应写在括号内，一般会用引号包起来。
|
||||
|
||||
# --instructions--
|
||||
|
||||
用 `body` 选择器设置整个页面的 `background` 为 url `https://i.imgur.com/MJAkxbh.png` 指定的图片。
|
||||
选取 `body` 元素，并设置整个页面的 `background` 为 url `https://i.imgur.com/MJAkxbh.png` 的图片。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 元素选择器应包含 `background` 属性，且值为给定的 `url`。
|
||||
`body` 元素选择器应包含 `background` 属性，且属性值应为给定的 `url`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301053
|
||||
|
||||
# --description--
|
||||
|
||||
这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。
|
||||
这部分课程的主题是应用视觉设计。开始的挑战基于美化一个卡片组件的外观，借此展示了若干核心原则。
|
||||
|
||||
web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制文本的对齐方式。
|
||||
|
||||
@ -22,17 +22,17 @@ web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制
|
||||
|
||||
# --instructions--
|
||||
|
||||
居中对齐 `h4` 标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。
|
||||
请让内容文本为 `"Google"` 的 `h4` 标签居中对齐；让介绍了 Google 创立历程的段落文本两端对齐。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该在 `h4` 标签上使用 text-align 属性设置文本居中对齐。
|
||||
应在 `h4` 标签上使用 text-align 属性设置文本居中对齐。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
你应该在 `p` 标签上使用 text-align 属性设置文本两端对齐。
|
||||
应在 `p` 标签上使用 text-align 属性设置文本两端对齐。
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301054
|
||||
|
||||
# --description--
|
||||
|
||||
在本关里，你将要改变动画元素的 `opacity`，使其在到达屏幕右侧时渐隐。
|
||||
在本挑战中，我们需要改变动画元素的 `opacity` 属性值，使其在到达屏幕右侧时渐隐。
|
||||
|
||||
在展示的动画里，具有渐变背景的圆形元素在 50% 标记的 `@keyframes` 规则处向右移动。
|
||||
在示例动画中，具有渐变背景的圆形元素在 `@keyframes` 为 50% 的节点向右移动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 id 选择器选择 id 为 `ball` 的元素，在 `50%` 里添加 `opacity` 属性并赋值 0.1，使其在向右移动时渐隐。
|
||||
使用 id 选择器选择 id 为 `ball` 的元素，在 `@keyframes` 为 `50%` 的节点里添加 `opacity` 属性并设置属性值为 0.1，使其在向右移动时渐隐。
|
||||
|
||||
# --hints--
|
||||
|
||||
50% 处 `keyframes` 规则应该设置 `opacity` 属性值为 0.1 以使其渐隐。
|
||||
`keyframes` 为 50% 的节点处应设置 `opacity` 属性值为 0.1，以使其渐隐。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,17 +10,17 @@ forumTopicId: 301055
|
||||
|
||||
CSS 里的 `opacity` 属性用来设置元素的透明度。
|
||||
|
||||
<blockquote>值 1 代表完全不透明。<br>值 0.5 代表半透明。<br>值 0 代表完全透明。</blockquote>
|
||||
<blockquote>属性值为 1 代表完全不透明。<br>属性值为 0.5 代表半透明。<br>属性值为 0 代表完全透明。</blockquote>
|
||||
|
||||
透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `links` class 选择所有的超链接并设置其 `opacity` 值为 0.7。
|
||||
将 class 为 `links` 的所有超链接的 `opacity` 属性值设置 0.7。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 `links` class 选择所有的超链接并设置其 `opacity` 值为 0.7。
|
||||
应使用 `links` class 选择所有的超链接，并设置其 `opacity` 属性值为 0.7。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,32 +8,31 @@ forumTopicId: 301056
|
||||
|
||||
# --description--
|
||||
|
||||
色彩理论以及设计色彩学很复杂，这里将只涉及很基础的部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。
|
||||
色彩理论以及设计色彩学很复杂，这里将只涉及基础部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。
|
||||
|
||||
一半是科学，一半是艺术，色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果，传达出活力、能量、兴奋等意义。
|
||||
一半是科学，一半是艺术，色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色就互为补色。在绘画中，两个互为补色的颜色会在混合后变成灰色。补色搭配能形成强烈的对比效果，传达出活力、能量、兴奋等意义。
|
||||
|
||||
下面是一些十六进制码（hex code）补色的例子：
|
||||
下面是一些以 hex 形式表示的补色例子：
|
||||
|
||||
<blockquote>红色（#FF0000）和蓝绿色 (#00FFFF)<br>绿色（#00FF00）和品红色（#FF00FF）<br>蓝色（#0000FF）和黄色（#FFFF00）</blockquote>
|
||||
|
||||
现在很多的在线选色工具都有寻找补色的功能。
|
||||
现在，很多在线选色工具也为我们提供了寻找补色的功能。
|
||||
|
||||
**注意**
|
||||
对于所有的颜色关卡： 颜色能吸引用户的注意，但不是唯一的方式，切勿喧宾夺主，过度使用会适得其反。详细会在应用无障碍章节介绍。
|
||||
**注意：**对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。我们将会在应用无障碍章节进行详细介绍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `blue` 和 `yellow` class 的 `background-color` 属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。
|
||||
把 class 为 `blue` 和 `yellow` 的元素的 `background-color` 属性改成相应的颜色。注意观察这两个颜色的搭配效果，以及对比白色背景的视觉效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue` 的 `div` 元素应该有值为蓝色的 `background-color` CSS 属性。
|
||||
class 为 `blue` 的 `div` 元素的 `background-color` 属性值应为 `blue`。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
class 为 `yellow` 的 `div` 元素应该有值为黄色的 `background-color` CSS 属性。
|
||||
class 为 `yellow` 的 `div` 元素的 `background-color` 属性值应为 `yellow`。
|
||||
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301057
|
||||
|
||||
# --description--
|
||||
|
||||
电脑显示器和手机屏幕是一种加色模型，将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，以产生多种多样的色光。两种原色相加产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。你在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。
|
||||
电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光，这种模式叫做三原色光模式（RGB Color Model）。如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G），我们在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。
|
||||
|
||||
三次色是由原色和二次色相加产生的颜色，例如红色（原色）和黄色（二次色）相加产生橙色。将这六种颜色中相邻的颜色相加，便产生了十二色色环。
|
||||
|
||||
@ -20,29 +20,29 @@ forumTopicId: 301057
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 为 `orange`、`cyan` 和 `rasberry` 的 `background-color` 改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内，不能直接用作颜色名，所以要使用 HEX 颜色码。
|
||||
把 class 为 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其对应的颜色。在这个挑战中，请使用颜色的十六进制符号（即 hex code）来表示。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `orange` 的 `div` 应该有值为橙色的 `background-color` CSS 属性。
|
||||
class 为 `orange` 的 `div` 的 `background-color` 属性值应为橙色。
|
||||
|
||||
```js
|
||||
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
class 为 `cyan` 的 `div` 应该有值为蓝绿色的 `background-color` CSS 属性。
|
||||
class 为 `cyan` 的 `div` 的 `background-color` 属性值应为蓝绿色。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
class 为 `raspberry` 的 `div` 应该有值为树莓红色的 `background-color` CSS 属性。
|
||||
class 为 `raspberry` 的 `div` 的 `background-color` 属性值应为树莓红色。
|
||||
|
||||
```js
|
||||
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
corlor classes 里的所有的 `background-color` 应该是 HEX 颜色码而不是颜色名称。
|
||||
所有的 `background-color` 应使用十六进制颜色码，而不应使用颜色名称。
|
||||
|
||||
```js
|
||||
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
|
||||
@ -8,19 +8,19 @@ forumTopicId: 301058
|
||||
|
||||
# --description--
|
||||
|
||||
上一关卡介绍了 `animation-timing-function` 以及它的一些预定义的值。这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更出色的控制动画的速度曲线。
|
||||
上一个挑战中，我们介绍了 `animation-timing-function` 以及它的一些预设值，这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。
|
||||
|
||||
在 CSS 动画里，用 `cubic-bezier` 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1\*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
|
||||
在 CSS 动画里，我们可以用 `cubic-bezier` 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 `1 * 1` 的坐标系统内，其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
|
||||
|
||||
`cubic-bezier` 函数包含了 1 \* 1 网格里的4个点：`p0`、`p1`、`p2` 和 `p3`。其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过`(x1, y1, x2, y2)`来确定 `p1` 和 `p2`。综上，下面就是 CSS 贝塞尔曲线的例子：
|
||||
`cubic-bezier` 函数包含了 `1 * 1` 网格里的4个点：`p0`、`p1`、`p2`、`p3`。其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。以下就是 CSS 贝塞尔曲线的例子：
|
||||
|
||||
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
|
||||
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和 `linear` 一致。换言之，元素匀速运动。
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和 `linear` 一致。换言之，元素会匀速运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
对于 id 为 `ball1` 的元素，把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。也就是说使用上面例子给的值。
|
||||
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `ball2` 元素的 `animation-timing-function` 属性值应该保持不变。
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该保持不变。
|
||||
|
||||
```js
|
||||
const ball2Animation = $('#ball2')
|
||||
|
||||
@ -8,13 +8,13 @@ forumTopicId: 301059
|
||||
|
||||
# --description--
|
||||
|
||||
如果要给元素添加动画，你需要了解 `animation` 属性以及 `@keyframes` 规则。 `animation` 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。总共有 8 个 `animation` 属性。为了便于理解，本关暂时只涉及到两个最常用的属性。
|
||||
如果要给元素添加动画，你需要了解 `animation` 属性以及 `@keyframes` 规则。`animation` 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。总共有 8 个 `animation` 属性。为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。
|
||||
|
||||
`animation-name` 设置动画的名称， 也就是要绑定的选择器的 `@keyframes` 的名称。
|
||||
`animation-name` 用来设置动画的名称，也就是我们稍后要在 `@keyframes` 里用到的名称。
|
||||
|
||||
`animation-duration` 设置动画所花费的时间。
|
||||
|
||||
`@keyframes` 能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明 `@keyframes` 和动画属性的用法：
|
||||
`@keyframes` 可以通过设置特定时间点的行为来创建动画。为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。下面举例说明 `@keyframes` 和动画属性的用法：
|
||||
|
||||
```css
|
||||
#anim {
|
||||
@ -32,11 +32,11 @@ forumTopicId: 301059
|
||||
}
|
||||
```
|
||||
|
||||
id 为 `anim` 的元素，代码设置 `animation-name` 为 `colorful`，设置 `animation-duration` 为 3 秒。然后把 `@keyframes` 引用到名为 `colorful` 的动画属性上。`colorful` 在动画开始时（0%）设置颜色为蓝色，在动画结束时（100%）设置颜色为黄色。注意不是只有开始和结束的过渡可以设置，0% 到 100% 间的任意百分比你都可以设置。
|
||||
id 为 `anim` 的元素，我们在代码中将它的 `animation-name` 设置为 `colorful`，同时设置 `animation-duration` 为 3 秒。然后我们把 `@keyframes` 规则添加到名为 `colorful` 的动画属性上。`colorful` 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 rainbow，设置其 `animation-duration` 为 4 秒。然后声明 `@keyframes` 规则，设置动画开始时（0%）的 `background-color` 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。
|
||||
给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 rainbow，`animation-duration` 为 4 秒。然后声明 `@keyframes` 规则，设置动画开始时（0%）的 `background-color` 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,29 +8,29 @@ forumTopicId: 301060
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍 CSS `position` 属性的取值选项 `absolute`，`absolute` 相对于其包含块定位。和 `relative` 定位不一样，`absolute` 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
|
||||
接下来要介绍 CSS `position` 属性的取值选项 `absolute`：`absolute` 的含义是相对于其包含块定位。和 `relative` 定位不一样，`absolute` 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。
|
||||
|
||||
`absolute` 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 `position:relative;`）,浏览器会继续寻找直到默认的 body 标签。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过声明 `position` 为 `absolute`，固定 `#searchbar` 元素到它父元素 `section` 的右上角。即设定其 `top` 和 `right` 为 50 像素。
|
||||
通过设置 `position` 属性值为 `absolute`，将 `#searchbar` 元素固定到它的父元素 `section` 的右上角。即设定其 `top` 和 `right` 为 50 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#searchbar` 元素应当有一个值为 `absolute` 的 `position` CSS 属性。
|
||||
`#searchbar` 元素的 `position` 属性值应为 `absolute`。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
你的 `#searchbar` 元素应当有值为 `50px` 的 `top` CSS 属性。
|
||||
`#searchbar` 元素的 `top` 属性值应为 `50px`。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
你的 `#searchbar` 元素应当有值为 `50px` 的 `right` CSS 属性。
|
||||
`#searchbar` 元素的 `right` 属性值应为 `50px`。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
|
||||
@ -8,29 +8,29 @@ forumTopicId: 301061
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，`fixed` 定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
|
||||
接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，在 `fixed` 定位的元素中，我们也可以使用 top、bottom、left、right 属性来调整元素的位置，并且也会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
|
||||
|
||||
`fixed` 定位和 `absolute` 定位的最明显的区别是 `fixed` 定位元素不会随着屏幕滚动而移动。
|
||||
但 `fixed` 和 `absolute` 的最明显的区别在于，`fixed` 定位元素不会随着屏幕滚动而移动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
代码里的导航栏已经添加了值为 `navbar` 的 id。把它的 `position` 设置成`fixed`，设定其 `top`和 `left` 为 0 像素。添加代码之后，滑动预览窗口，观察导航栏的位置。
|
||||
我们已经将代码里导航栏的 id 设置为了 `navbar`。请把它的 `position` 设置成 `fixed`，同时分别设定其 `top` 和 `left` 属性值为 0 像素。修改后，你可以滑动预览窗口，观察导航栏的位置。
|
||||
|
||||
# --hints--
|
||||
|
||||
`>#navbar` 元素应当有一个值为 `fixed` 的 `position` CSS 属性
|
||||
`#navbar` 元素的 `position` 属性值应为 `fixed`。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
你的 `#navbar` 元素应当有值为 `0px` 的 `top` CSS 属性。
|
||||
`#navbar` 元素的 `top` 属性值应为 `0px`。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
你的 `#navbar` 元素应当有值为 `0px` 的 `left` CSS 属性。
|
||||
`#navbar` 元素的 `left` 属性值应为 `0px`。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 301062
|
||||
|
||||
# --description--
|
||||
|
||||
这也是一个用 `animation-iteration-count` 属性创造持续动画的例子，它基于前面关卡创建的心形。
|
||||
这也是一个用 `animation-iteration-count` 属性创造持续动画的例子，它基于我们在前面挑战中创建的心形。
|
||||
|
||||
心跳动画的每一秒包含两个部分。`heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 属性改变其大小，背景 `div` 使用 `background` 属性改变其颜色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `back` class和 `heart` class添加值为 infinite 的 `animation-iteration-count` 属性，使心脏持续跳动。`heart:before` 和 `heart:after` 选择器不需要添加动画属性。
|
||||
请将 class 为 `back` 和 `heart` 的元素的 `animation-iteration-count` 属性值设置为 infinite，使心形可以持续跳动。`heart:before` 和 `heart:after` 所选择的元素则不需要添加动画属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart` class 的 `animation-iteration-count` 属性应该赋值 infinte。
|
||||
class 为 `heart` 的元素的 `animation-iteration-count` 属性值应为 infinite。
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
`back` class 的 `animation-iteration-count` 属性应该赋值 infinite。
|
||||
class 为 `back` 的元素的 `animation-iteration-count` 属性值应为 infinite。
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 301063
|
||||
|
||||
# --description--
|
||||
|
||||
本关的元素模拟的是杂技抛接球。之前的关卡涉及了 `linear` 和 `ease-out` 的贝塞尔曲线描述，如你所见，这两个都无法完美的描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。
|
||||
在这个挑战中，我们需要给元素添加动画来模拟杂耍中被抛接的球。之前的挑战中，我们学习了 `linear` 和 `ease-out` 的贝塞尔曲线描述，但这两个都无法完美地描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。
|
||||
|
||||
当 `animation-iteration-count` 值为 infinite 时 `animation-timing-function` 会自动循环 keyframe。由于是在动画周期中间（50%处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。
|
||||
当 `animation-iteration-count` 值为 infinite 时，`animation-timing-function` 会自动循环 keyframe。由于我们是在动画周期的中间点（50% 处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。
|
||||
|
||||
下面的例子模拟了杂耍球运动：
|
||||
|
||||
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
|
||||
|
||||
注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1\*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。
|
||||
注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 `1 * 1` 的坐标系统内 x 值只能取 0 到 1，但是 y 值是可以大于 1 的。这样我们才能模拟杂耍球运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为`green`的元素的`animation-timing-function`值应该为`cubic-bezier`函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
id 为 `green` 的元素的 `animation-timing-function` 属性值应为 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 的值依次为 0.311、0.441、0.444、1.649。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,13 +10,13 @@ forumTopicId: 301064
|
||||
|
||||
太棒了，但是现在还不完美。注意动画在 `500ms` 之后重置了，所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。
|
||||
|
||||
这可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。`animation-fill-mode` 指定了在动画结束时元素的样式。你可以向这样设置它：
|
||||
为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。`animation-fill-mode` 指定了在动画结束时元素的样式：
|
||||
|
||||
`animation-fill-mode: forwards;`
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置 `button:hover` 的 `animation-fill-mode`，使按钮悬停时保持高亮。
|
||||
修改 `button:hover` 的 `animation-fill-mode`，使按钮悬停时保持高亮。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 301065
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。元素将从当前位置，向属性相反的方向偏移。就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。`left` 属性使元素向右移动。
|
||||
CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。元素将从当前位置向属性相反的方向偏移。就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。`left` 属性使元素向右移动。
|
||||
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt=''>
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过 CSS 属性把 `h2` 向上移动 10 像素，向右移动 15 像素。
|
||||
请通过 CSS 属性把 `h2` 向上移动 10 像素，向右移动 15 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 CSS 属性使 `h2` 相对当前位置向上移动 `10px`。也就是说，从 `h2` 当前位置远离 `bottom` `10px`。
|
||||
应使用 CSS 属性使 `h2` 相对当前位置向上移动 `10px`。也就是说，从 `h2` 当前位置远离 `bottom` `10px`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
你应该使用 CSS 属性使 `h2` 相对当前位置向右移动 `15px`。也就是说，从 `h2` 当前位置远离 `left` `15px`。
|
||||
应使用 CSS 属性使 `h2` 相对当前位置向右移动 `15px`。也就是说，从 `h2` 当前位置远离 `left` `15px`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301066
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍的定位机制并不是 `position` 属性的选项，它通过元素的 `float` 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 `width` 属性来指定浮动元素占据的水平空间。
|
||||
接下来要介绍的定位机制并不是 `position` 属性的选项，而是通过元素的 `float` 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 `width` 属性来指定浮动元素占据的水平空间。
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置 `#left` 元素的 `float` 为 `left`，设置 `#right` 元素的 `float` 为 `right`。使这两个元素按两列布局，`section` 和 `aside` 左右排列。
|
||||
设置 `#left` 元素的 `float` 属性值为 `left`，设置 `#right` 元素的 `float` 属性值为 `right`。使这两个元素按两列布局，`section` 和 `aside` 左右排列。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `left` 的元素应该有一个值为 `left` 的 `float` CSS 属性。
|
||||
id 为 `left` 的元素的 `float` 属性值应为 `left`。
|
||||
|
||||
```js
|
||||
assert($('#left').css('float') == 'left');
|
||||
```
|
||||
|
||||
id 为 `right` 的元素应该有一个值为 `right` 的 `float` CSS 属性。
|
||||
id 为 `right` 的元素的 `float` 属性值应为 `right`。
|
||||
|
||||
```js
|
||||
assert($('#right').css('float') == 'right');
|
||||
|
||||
@ -8,48 +8,58 @@ forumTopicId: 301067
|
||||
|
||||
# --description--
|
||||
|
||||
`font-size` 属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置 `h1` 到 `h6` 的每个标题文字的大小。
|
||||
`font-size` 属性用来指定元素内文字的大小。我们可以为多个元素添加 `font-size` 规则，这样做可以让页面内不同元素的文字大小得以统一。在本挑战里，你需要设置从 `h1` 到 `h6` 的文字大小。
|
||||
|
||||
# --instructions--
|
||||
|
||||
<ul><li>设置 <code>h1</code> 标签的 <code>font-size</code> 为 68px。</li><li>设置 <code>h2</code> 标签的 <code>font-size</code> 为 52px。</li><li>设置 <code>h3</code> 标签的 <code>font-size</code> 为 40px。</li><li>设置 <code>h4</code> 标签的 <code>font-size</code> 为 32px。</li><li>设置 <code>h5</code> 标签的 <code>font-size</code> 为 21px。</li><li>设置 <code>h6</code> 标签的 <code>font-size</code> 为 14px。</li></ul>
|
||||
<p>在 <code>style</code> 标签中, 对各元素的 <code>font-size</code> 进行如下设置：</p>
|
||||
|
||||
<ul>
|
||||
<li>将 <code>h1</code> 标签的文字大小设为 68px。</li>
|
||||
<li>将 <code>h2</code> 标签的文字大小设为 52px。</li>
|
||||
<li>将 <code>h3</code> 标签的文字大小设为 40px</li>
|
||||
<li>将 <code>h4</code> 标签的文字大小设为 32px</li>
|
||||
<li>将 <code>h5</code> 标签的文字大小设为 21px</li>
|
||||
<li>将 <code>h6</code> 标签的文字大小设为 14px</li>
|
||||
</ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该设置 `h1` 标签的 `font-size` 为 `68px`。
|
||||
`h1` 标签的 `font-size` 属性值应为 `68px`。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-size') == '68px');
|
||||
```
|
||||
|
||||
你应该设置 `h2` 标签的 `font-size` 为 `52px`。
|
||||
`h2` 标签的 `font-size` 属性值应为 `52px`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-size') == '52px');
|
||||
```
|
||||
|
||||
你应该设置 `h3` 标签的 `font-size` 为 `40px`。
|
||||
`h3` 标签的 `font-size` 属性值应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-size') == '40px');
|
||||
```
|
||||
|
||||
你应该设置 `h4` 标签的 `font-size` 为 `32px`。
|
||||
`h4` 标签的 `font-size` 属性值应为 `32px`。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '32px');
|
||||
```
|
||||
|
||||
你应该设置 `h5` 标签的 `font-size` 为 `21px`。
|
||||
`h5` 标签的 `font-size` 属性值应为 `21px`。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-size') == '21px');
|
||||
```
|
||||
|
||||
你应该设置 `h6` 标签的 `font-size` 为 `14px`。
|
||||
`h6` 标签的 `font-size` 属性值应为 `14px`。
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-size') == '14px');
|
||||
const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;
|
||||
assert.strictEqual(true, regex.test(code));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
@ -8,15 +8,15 @@ forumTopicId: 301068
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 里面的 `font-size` 属性不只限于标题，它可以应用于任何包含文字的元素内。
|
||||
CSS 里面的 `font-size` 属性不只限于标题，还可以应用于任何包含文字的元素内。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把段落的 `font-size` 设置为 16px 让它看起来更清晰。
|
||||
把段落的 `font-size` 属性值设置为 16px，让它看起来更清晰。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `p` 标签应该包含一个 `font-size` 属性并且值为 `16px`。
|
||||
`p` 标签的 `font-size` 属性值应为 `16px`。
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301069
|
||||
|
||||
# --description--
|
||||
|
||||
在上一个挑战里你已经设置了每个标题的 `font-size`，接下来你将设置 `font-weight`。
|
||||
在上一个挑战里我们已经为每个标题设置了 `font-size`，接下来我们将要设置 `font-weight`。
|
||||
|
||||
`font-weight` 属性用于设置文本中所用的字体的粗细。
|
||||
`font-weight` 属性用于设置文本中字体的粗细。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -18,37 +18,37 @@ forumTopicId: 301069
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该设置 `h1` 标签的 `font-weight` 为 800。
|
||||
`h1` 标签的 `font-weight` 属性值应为 800。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-weight') == '800');
|
||||
```
|
||||
|
||||
你应该设置 `h2` 标签的 `font-weight` 为 600。
|
||||
`h2` 标签的 `font-weight` 属性值应为 600。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-weight') == '600');
|
||||
```
|
||||
|
||||
你应该设置 `h3` 标签的 `font-weight` 为 500。
|
||||
`h3` 标签的 `font-weight` 属性值应为 500。
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-weight') == '500');
|
||||
```
|
||||
|
||||
你应该设置 `h4` 标签的 `font-weight` 为 400。
|
||||
`h4` 标签的 `font-weight` 属性值应为 400。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-weight') == '400');
|
||||
```
|
||||
|
||||
你应该设置 `h5` 标签的 `font-weight` 为 300。
|
||||
`h5` 标签的 `font-weight` 属性值应为 300。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-weight') == '300');
|
||||
```
|
||||
|
||||
你应该设置 `h6` 标签的 `font-weight` 为 200。
|
||||
`h6` 标签的 `font-weight` 属性值应为 200。
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-weight') == '200');
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301070
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 提供 `line-height` 属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。
|
||||
CSS 提供 `line-height` 属性来设置行间的距离。行高，顾名思义，可以用来设置每行文字所占据的垂直空间。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -16,7 +16,7 @@ CSS 提供 `line-height` 属性来设置行间的距离。行高，顾名思义
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该给 `p` 标签添加 `line-height` 属性并赋值 `25px`。
|
||||
`p` 标签的 `line-height` 属性值应为 `25px`。
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301071
|
||||
|
||||
# --description--
|
||||
|
||||
前面的关卡涉及的 `ease-out` 预定义值描述了动画以高速开始低速结束。右边的动画展示了 `ease-out` 预定义值（蓝色的元素）和 `linear` 预定义值（红色的元素）的区别。同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
|
||||
前面的关卡涉及了使用 `ease-out` 预定义值描述了动画以高速开始低速结束。右边的动画展示了 `ease-out` 效果（蓝色的元素）和 `linear` 效果（红色的元素）的区别。同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
|
||||
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
|
||||
@ -18,11 +18,11 @@ forumTopicId: 301071
|
||||
|
||||
# --instructions--
|
||||
|
||||
为了看贝塞尔曲线的运动效果，把 id 为 `red` 的元素的 `animation-timing-function` 属性赋为 `cubic-bezier` 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。这会使两个元素运动过程类似。
|
||||
为了能直观地感受贝塞尔曲线所设置的运动效果，请把 id 为 `red` 的元素的 `animation-timing-function` 属性值改为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。这会使两个元素运动过程类似。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性应当赋为 `cubic-bezier` 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性值应使用 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,13 +30,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性不应该取值 linear。
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性值不应为 linear。
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性不应该被改变。
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性不应改变。
|
||||
|
||||
```js
|
||||
const blueBallAnimation = $('#blue')
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301072
|
||||
|
||||
# --description--
|
||||
|
||||
`repeating-linear-gradient()` 函数和 `linear-gradient()` 很像，主要区别是 `repeating-linear-gradient()` 重复指定的渐变。 `repeating-linear-gradient()` 有很多参数，为了便于理解，本关只用到角度值和起止渐变颜色值。
|
||||
`repeating-linear-gradient()` 函数和 `linear-gradient()` 很像，主要区别是 `repeating-linear-gradient()` 会重复指定的渐变。`repeating-linear-gradient()` 有很多参数，为了便于理解，本关只用到角度值和色标。
|
||||
|
||||
角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。
|
||||
角度就是渐变的方向。色标代表渐变颜色及发生渐变的位置，由颜色值和起始位置组成。起始位置用百分比或者像素值表示。
|
||||
|
||||
在代码编辑器的例子里，渐变开始于 0 像素位置的 `yellow`，然后过渡到距离开始位置 40 像素的 `blue`。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值 `green`，然后过渡到距离开始位置 80 像素的 `red`。
|
||||
在代码编辑器的例子里，渐变开始于 0 像素位置的 `yellow`，然后过渡到距离开始位置 40 像素的 `blue`。由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 `green`，然后过渡到距离开始位置 80 像素的 `red`。
|
||||
|
||||
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
|
||||
|
||||
`0px [黄色 -- 过渡 -- 蓝色] 40px [绿色 -- 过渡 -- 红色] 80px`
|
||||
|
||||
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。
|
||||
如果有两个相邻色标的颜色值相同，那么过渡看起来就不会很明显。由于是在两个相同的颜色间过渡，那么中间的过渡色也会是相同颜色，接着就是这个颜色直接过渡到下一个颜色，最终产生的效果就是条纹。
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `repeating-linear-gradient()` 函数使其为渐变角度为 `45deg` 的条纹，第一对渐变颜色为 `yellow`, 第二对渐变颜色为 `black`。
|
||||
修改 `repeating-linear-gradient()` 函数使其为渐变角度为 `45deg` 的条纹，第一个渐变颜色为 `yellow`, 第二个渐变颜色为 `black`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -32,7 +32,7 @@ forumTopicId: 301072
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
`repeating-linear-gradient()` 的渐变角度应该不在是 `90deg`。
|
||||
`repeating-linear-gradient()` 的渐变角度不应为 `90deg`。
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
|
||||
@ -33,7 +33,7 @@ forumTopicId: 301073
|
||||
|
||||
注意 `ms` 代表毫秒，1000ms 等于 1s。
|
||||
|
||||
使用 `@keyframes` 来改变 `button` 元素的 `background-color`，使其当悬停时变成 `#4791d0`。`@keyframes` 规则应该只有一个 `100%` 条目。
|
||||
使用 `@keyframes` 来改变 `button` 元素的 `background-color`，使其在悬停时变成 `#4791d0`。`@keyframes` 规则应该只有一个 `100%` 条目。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -43,7 +43,7 @@ forumTopicId: 301073
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
在 `@keyframes` 的 `100%` 条目里应该把 `background-color` 改成 `#4791d0`。
|
||||
在 `@keyframes` 为 `100%` 的位置，应将 `background-color` 改成 `#4791d0`。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301074
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍的 `transform` 属性是 `skewX`，`skewX` 使选择的元素沿着 X 轴（横向）翻转指定的角度。
|
||||
接下来要介绍的 `transform` 属性是 `skewX`：`skewX` 使选择的元素沿着 X 轴（横向）翻转指定的角度。
|
||||
|
||||
下面的代码沿着 X 轴翻转段落元素 -32 度。
|
||||
下面的代码沿着 X 轴翻转 `p` 元素 -32 度。
|
||||
|
||||
```css
|
||||
p {
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301076
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 属性 `transform` 里面的 `scale()` 函数，可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍：
|
||||
CSS 属性 `transform` 里面的 `scale()` 函数可以用来改变元素的显示比例。下面的例子把页面的 `p` 元素放大到了原来的 2 倍：
|
||||
|
||||
```css
|
||||
p {
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 301077
|
||||
|
||||
# --description--
|
||||
|
||||
`transform` 属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如 `:hover` 时，`transform` 属性可以方便的给元素添加交互。
|
||||
`transform` 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类选取元素的指定状态（如 `:hover`）时，我们可以通过 `transform` 属性非常方便地给元素添加交互。
|
||||
|
||||
下面是当用户悬停段落元素时，段落大小缩放到原始大小 2.1 倍的例子：
|
||||
下面是当用户悬停在 `p` 元素时，段落大小缩放到原始大小 2.1 倍的例子：
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
@ -18,11 +18,11 @@ p:hover {
|
||||
}
|
||||
```
|
||||
|
||||
**注意：** 给 `div` 元素添加 transform 也会影响这个 div 包裹的子元素。
|
||||
**注意：**给 `div` 元素添加 transform 也会影响这个 div 包裹的子元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `div` 伪类 `hover` 添加 `transform` 属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。
|
||||
通过伪类，给 `div` 的 `hover` 状态添加 `transform` 属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -18,13 +18,13 @@ forumTopicId: 301078
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该添加一个 `em` 标签。
|
||||
应添加一个 `em` 标签。
|
||||
|
||||
```js
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
`em` 标签应该嵌套在 `p` 标签里面。
|
||||
`em` 标签应嵌套在 `p` 标签里面。
|
||||
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
|
||||
@ -8,23 +8,21 @@ forumTopicId: 301079
|
||||
|
||||
# --description--
|
||||
|
||||
术语：Strikethrough => s => 删除线。
|
||||
|
||||
你可以用 `s` 标签来给文字添加删除线，~~我是明晃晃的删除线~~，它代表着这段文字不再有效。添加了 `s` 标签后，浏览器会自动给元素应用 `text-decoration: line-through;`。
|
||||
你可以用 `s` 标签来给文字添加删除线。删除线是位于文字水平中央的一条线，它代表着一段文字不再有效。添加了 `s` 标签后，浏览器会自动给元素添加这段样式：`text-decoration: line-through;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `h4` 标签里的 “Google” 外添加 `s` 标签，然后在 `s` 标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。
|
||||
在 `h4` 标签里的 "Google" 文本外添加 `s` 标签，然后在 `s` 标签后面添加单词 "Alphabet"，Alphabet 不要有删除线格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该添加一个 `s` 标签。
|
||||
应添加一个 `s` 标签。
|
||||
|
||||
```js
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
`s` 标签应该在 `h4` 标签内的 Google 文字外面，它不应该包含单词 Alphabet。
|
||||
`s` 标签应该在 `h4` 标签内的 `Google` 文字外面，它不应包含单词 Alphabet。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。
|
||||
`h4` 标签内应有单词 "Alphabet"，Alphabet 不应有删除线样式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,29 +8,27 @@ forumTopicId: 1
|
||||
|
||||
# --description--
|
||||
|
||||
术语：Strong => s => 加粗。
|
||||
|
||||
你可以使用 `strong` 标签来加粗文字。添加了 `strong` 标签后，浏览器会自动给元素应用 `font-weight:bold;`。
|
||||
你可以使用 `strong` 标签来加粗文字。粗体文字一般用来吸引读者注意或用来表示强调。添加了 `strong` 标签后，浏览器会自动给元素添加这段样式：`font-weight:bold;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `p` 标签里的 “斯坦福大学” 外面添加 `strong` 标签。
|
||||
给 `p` 标签里的 "Stanford University" 内容文本添加 `strong` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有一个 `strong` 标签。
|
||||
应添加一个 `strong` 标签。
|
||||
|
||||
```js
|
||||
assert($('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` 标签应该在 `p` 标签里。
|
||||
`strong` 标签应在 `p` 标签里。
|
||||
|
||||
```js
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` 标签应该包围 “斯坦福大学”。
|
||||
`strong` 标签的内容文本应为 `Stanford University`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,25 +8,25 @@ forumTopicId: 301081
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 里面的 `text-transform` 属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。
|
||||
CSS 里的 `text-transform` 属性可以改变英文字母的大小写。使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。
|
||||
|
||||
下面的表格展示了`text-transform` 的不同值对文字 “Transform me” 的影响。
|
||||
下面的表格展示了 `text-transform` 的不同值对文字 “Transform me” 的影响：
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Value</th><th>Result</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>使用默认值</td></tr><tr><td><code>inherit</code></td><td>使用父元素的 <code>text-transform</code> 值。</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong>不改变文字。</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `text-transform` 属性把 `h4` 内的英文的所有字母变成大写。
|
||||
请使用 `text-transform` 属性把 `h4` 内容文本中的所有字母变成大写。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 内的英文的所有字母应该为大写。
|
||||
`h4` 内容文本中，所有字母均应为大写。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
```
|
||||
|
||||
`h4` 内的原文不能被改变。
|
||||
`h4` 内的原文不应改变。
|
||||
|
||||
```js
|
||||
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||
|
||||
@ -8,28 +8,26 @@ forumTopicId: 301082
|
||||
|
||||
# --description--
|
||||
|
||||
术语：Underline => u => 下划线。
|
||||
|
||||
你可以使用 `u` 标签来给文字添加下划线。添加了 `u` 标签后，浏览器会自动给元素应用 `text-decoration: underline;`。
|
||||
你可以使用 `u` 标签来给文字添加下划线。下划线通常用来表示重要内容或需要记忆的内容。添加了 `u` 标签后，浏览器会自动给元素添加这段样式：`text-decoration: underline;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 “理工博士” 添加 `u` 标签，不要给整个 class 为 `cardText` 的父 `div` 添加。
|
||||
给 "Ph.D. students" 添加 `u` 标签。
|
||||
|
||||
**注意：** 锚点默认给文本添加下划线，如果 `u` 标签的下划线和页面的锚点混淆，请避免使用它。
|
||||
**注意：**HTML 的 `<a>` 标签默认也会给文本添加下划线。如果使用 `u` 标签添加下划线会造成与 `<a>` 标签混淆，则应避免使用 `u` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有一个 `u` 标签。
|
||||
应添加一个 `u` 标签。
|
||||
|
||||
```js
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
`u` 标签应该包围 “理工博士”。
|
||||
`u` 标签的内容文本应为 `Ph.D. students`。
|
||||
|
||||
```js
|
||||
assert($('u').text() === '理工博士');
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
@ -8,19 +8,19 @@ forumTopicId: 16166
|
||||
|
||||
# --description--
|
||||
|
||||
元素的`margin（外边距）`控制元素`border（边框）`与其他周围元素之间的距离大小。
|
||||
元素的 `margin（外边距）` 用来控制元素 `border（边框）` 与其周围元素之间的距离大小。
|
||||
|
||||
如果你把元素的`margin`设置为负值，元素会变得更大。
|
||||
如果你把元素的 `margin` 设置为负值，元素会变得占用更多空间。
|
||||
|
||||
# --instructions--
|
||||
|
||||
尝试将蓝色框的`margin`设为负值，跟红色框一样大小。
|
||||
请将蓝色框的 `margin` 设为负值，跟红色框 `margin` 的属性值设置成一样的大小。
|
||||
|
||||
蓝色框的`margin`设置为`-15px`，它会填满与黄色框之间的距离。
|
||||
将蓝色框的 `margin` 设置为 `-15px`，它会让蓝色框填满整个黄色框。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class的`margin`应该设置为`-15px`。
|
||||
class 为 `blue-box` 的元素的 `margin` 应设置为 `-15px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 16630
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 边框具有`style`，`color`和`width`属性。
|
||||
CSS 边框具有 `style`、`color`、`width` 属性。
|
||||
|
||||
假如我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
|
||||
假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -24,27 +24,27 @@ CSS 边框具有`style`，`color`和`width`属性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个`thick-green-border` CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在猫咪照片上。
|
||||
创建一个 `thick-green-border` 的 class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，并将这个 class 应用在猫咪照片上。
|
||||
|
||||
记得在一个元素上可以同时应用多个`class`，通过使用空格来分隔。例子如下：
|
||||
记得在一个元素上可以同时应用多个 `class`，使用空格来分隔不同 class 即可，例如：
|
||||
|
||||
`<img class="class1 class2">`
|
||||
|
||||
# --hints--
|
||||
|
||||
`img`元素应该含有`smaller-image` class。
|
||||
`img` 元素应包含 `smaller-image` class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
`img`元素应该含有`thick-green-border` class。
|
||||
`img` 元素应包含 `thick-green-border` class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
设置图片边框为`10px`。
|
||||
图片边框宽度应设置为 `10px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,13 +54,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
设置图片边框为`solid`实线。
|
||||
图片边框样式应为 `solid` 实线。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
`img`元素的边框颜色应该为绿色。
|
||||
`img` 元素的边框颜色应为绿色。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@ -8,35 +8,35 @@ forumTopicId: 16633
|
||||
|
||||
# --description--
|
||||
|
||||
有时候，你会想给一个元素每个方向的`margin`都设置成一个特定的值。
|
||||
有时候，你会想给一个元素每个方向的 `margin` 都设置成一个特定的值。
|
||||
|
||||
CSS 允许你使用`margin-top`，`margin-right`，`margin-bottom`和`margin-left`属性来设置四个不同方向的`margin`值。
|
||||
CSS 允许你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 属性来设置四个不同方向的 `margin` 值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色框的顶部和左侧的`margin`值设置为`40px`，底部和右侧设置为`20px`。
|
||||
请将蓝色框的顶部和左侧 `margin` 属性值设置为 `40px`；将底部和右侧的属性值设置为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的右侧`margin`（上外边距）值应为`40px`。
|
||||
class 为 `blue-box` 的元素的上外边距属性值应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
`blue-box` class 的右侧`margin`（右外边距）值应为`20px`。
|
||||
class 为 `blue-box` 的元素的右外边距属性值应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的底部`margin`（下外边距）值应为`20px`。
|
||||
class 为 `blue-box` 的元素的下外边距属性值应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的左侧`margin`（左外边距）值应为`40px`。
|
||||
class 为 `blue-box` 的元素的左外边距属性值应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
|
||||
@ -8,35 +8,35 @@ forumTopicId: 16634
|
||||
|
||||
# --description--
|
||||
|
||||
有时候，你会想给一个元素每个方向的`padding`都设置成一个特定的值
|
||||
有时候，你会想给一个元素每个方向的 `padding` 都设置一个特定的值
|
||||
|
||||
CSS 允许你使用`padding-top`，`padding-right`， `padding-bottom`和`padding-left`属性来设置四个不同方向的`padding`值。
|
||||
CSS 允许你使用 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 属性来设置四个不同方向的 `padding` 值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色框的顶部和左侧的`padding`值设置为`40px`，底部和右侧设置为`20px`。
|
||||
请将蓝色框的顶部和左侧 `padding` 属性值设置为 `40px`；将底部和右侧的属性值设置为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的顶部`padding`（上内边距）值应为`40px`。
|
||||
class 为 `blue-box` 的元素的上内边距属性值应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
`blue-box` class 的右侧`padding`（右内边距）值应为`20px`。
|
||||
class 为 `blue-box` 的元素的右内边距属性值应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的底部`padding`（下内边距）值应为`20px`。
|
||||
class 为 `blue-box` 的元素的下内边距属性值应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的左侧`padding`（左内边距）值应为`40px`。
|
||||
class 为 `blue-box` 的元素的左内边距属性值应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 16649
|
||||
|
||||
# --description--
|
||||
|
||||
猫咪图片边角很尖锐，我们可以使用`border-radius`属性来让它变得圆润。
|
||||
猫咪图片的四个角看起来很尖锐，我们可以使用 `border-radius` 属性来让它变得圆润。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`border-radius`可以用`px`像素单位来赋值。给猫咪图片设置 10px 的`border-radius`。
|
||||
`border-radius` 的属性值单位可以是 `px`（像素）。请将猫咪图片 `border-radius` 的属性值设置为 10px。
|
||||
|
||||
注意：这个挑战有多个解决方法。例如，添加`border-radius`属性到`.thick-green-border`class 或`.smaller-image`class 里都是可行的。
|
||||
**注意：**这个挑战有多个解决方法。例如，添加 `border-radius` 属性到 `.thick-green-border` 或 `.smaller-image` 都是可行的。
|
||||
|
||||
# --hints--
|
||||
|
||||
图片元素应具有 "thick-green-border" class 属性。
|
||||
图片元素应具有 "thick-green-border" class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
图片应含有`10px`的边框圆角。
|
||||
图片应含有 `10px` 的边框圆角。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,19 +8,19 @@ forumTopicId: 16654
|
||||
|
||||
# --description--
|
||||
|
||||
`margin（外边距）`控制元素的边框与其他元素之间的距离。
|
||||
`margin（外边距）` 用来控制元素的边框与其他元素之间的距离。
|
||||
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的`margin`值要比蓝色框的大，让它看起来比蓝色框要小。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的 `margin` 值要比蓝色框的大，因此红色框看起来比蓝色框要小。
|
||||
|
||||
当你增加蓝色的`margin`值，它会增加元素边框到其他周围元素的距离。
|
||||
如果你增加蓝色的 `margin` 值，它也会增加元素边框到其他周围元素的距离。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色的框`margin`的值要跟红色框的一样大小。
|
||||
请将蓝色框的 `margin` 值设置成和红色框 `margin` 值一样的大小。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的`margin`值应为`20px`。
|
||||
class 为 `blue-box` 的元素的 `margin` 值应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
|
||||
@ -8,25 +8,25 @@ forumTopicId: 301083
|
||||
|
||||
# --description--
|
||||
|
||||
我们先暂时把猫咪图片放在一边，让我们去学习更多 HTML 相关样式。
|
||||
我们暂时把要做的猫咪图片 App 放在一边，先来多了解一下如何给 HTML 添加样式。
|
||||
|
||||
你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。
|
||||
你可能已经注意到了，所有的 HTML 元素都是以矩形为基础。
|
||||
|
||||
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：`padding（内边距）`，`margin（外边距）`和`border（边框）`。
|
||||
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 `padding`、外边距 `margin` 、边框 `border`。
|
||||
|
||||
`padding`控制着元素内容与`border`之间的空隙大小。
|
||||
`padding` 用来控制着元素内容与 `border` 之间的空隙大小。
|
||||
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里面。可以发现，红色框比蓝色框有着更多的`padding`填充空间。
|
||||
在这个挑战中，我们可以看到蓝色框和红色框都在黄色框里面，同时，红色框比蓝色框的 `padding` 大。
|
||||
|
||||
当你增加蓝色框的`padding`值，文本内容与边框的距离会逐渐拉大。
|
||||
如果你增加蓝色框的 `padding` 值，其中的文本内容与边框的距离就也会变大。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色的框`padding`的值要跟红色框的一样大小。
|
||||
将蓝色的框的 `padding` 值设置成与红色框 `padding` 值一样。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的`padding`值应为`20px`。
|
||||
`blue-box` 这一 class 应将元素的 `padding` 值设置为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
|
||||
@ -10,23 +10,23 @@ forumTopicId: 301084
|
||||
|
||||
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
|
||||
|
||||
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：
|
||||
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，你可以这样写：
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。 提示：这对调试会很有帮助。
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。 提示：这对调试代码也会很有帮助。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`penguin-top`和`penguin-bottom`class 里面，`background`属性设置一个`black`的备用色。
|
||||
请为 class 为 `penguin-top` 和 `penguin-bottom` 的元素的 `background` 属性设置一个 `black` 的备用色。
|
||||
|
||||
**注意：** 因为 CSS 变量名拼写错了，所以备用值会被使用。
|
||||
**注意：**因为 CSS 变量名拼写错了，所以备用值会被采用。
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin-top` class 的`background`属性应设置一个`black`备用颜色。
|
||||
class 为 `penguin-top` 的元素的 `background` 属性值应有 `black` 作为备用颜色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin-bottom` class 的`background`属性应设置一个`black`备用颜色。
|
||||
class 为 `penguin-bottom` 的元素的 `background` 属性值应有 `black` 作为备用颜色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301085
|
||||
|
||||
# --description--
|
||||
|
||||
当你在`:root`里创建变量时，这些变量的作用域是整个页面。
|
||||
当你在 `:root` 里创建变量时，这些变量的作用域是整个页面。
|
||||
|
||||
如果在元素里创建相同的变量，会重写`:root`变量设置的值。
|
||||
如果在元素里创建相同的变量，会重写 `:root` 变量设置的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`penguin`class 里，设置`--penguin-belly`的值为`white`。
|
||||
在 `penguin` class 里，请设置 `--penguin-belly` 的值为 `white`。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该在`penguin`clas 里重定义`--penguin-belly`的变量值，且它的值为`white`。
|
||||
应在 `penguin` class 里重定义 `--penguin-belly` 的变量值，新的值应为 `white`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,29 +8,29 @@ forumTopicId: 1
|
||||
|
||||
# --description--
|
||||
|
||||
现在让我们来修改一下文本的颜色。
|
||||
现在让我们来修改文本的颜色。
|
||||
|
||||
我们通过修改`h2`元素的`style`属性的`color`值来改变文本颜色。
|
||||
我们通过修改 `h2` 元素的 `style` 属性的 `color` 属性值来改变文本颜色。
|
||||
|
||||
以下是改变`h2`元素为蓝色的方法：
|
||||
以下是将 `h2` 元素设置为蓝色的方法：
|
||||
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
|
||||
请注意行内`style`最好以`;`来结束。
|
||||
请注意行内 `style` 最好以 `;` 来结束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把`h2`元素的文本颜色设置为红色。
|
||||
请把 `h2` 元素的文本颜色设置为红色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素应该有一个`style`声明。
|
||||
`h2` 元素应该有一个 `style` 声明。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
`h2`元素应该为`red`。
|
||||
`h2` 元素的颜色应为 `red`。
|
||||
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 1
|
||||
|
||||
# --description--
|
||||
|
||||
字体大小由`font-size`属性控制，如下所示：
|
||||
字体大小由 `font-size` 属性控制，如下所示：
|
||||
|
||||
```css
|
||||
h1 {
|
||||
@ -18,11 +18,11 @@ h1 {
|
||||
|
||||
# --instructions--
|
||||
|
||||
在包含`red-text`class 选择器的`<style>`声明区域的里，创建一个`p`元素样式规则，并设置`font-size`为`16px`。
|
||||
在包含 `red-text` 的类选择器的 `<style>` 声明区域的里，创建一个 `p` 元素样式规则，并设置其 `font-size` 为 `16px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
在`style`样式声明区域里，`p`元素的`font-size`的值应为`16px`，浏览器和文本缩放应设置为 100％。
|
||||
在 `style` 样式声明区域里，`p` 元素的 `font-size` 的值应为 `16px`。请注意，浏览器和文本缩放应设置为 100％。
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 301086
|
||||
|
||||
# --description--
|
||||
|
||||
创建一个 CSS 变量，你只需要在变量名前添加两个`破折号`，并为其赋值，例子如下：
|
||||
为创建一个 CSS 变量，你只需要在变量名前添加两个 `-`，并为其赋值即可，例子如下：
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
这样会创建一个`--penguin-skin`变量并赋值为`gray（灰色）`。 现在，其他元素可通过该变量来设置为`gray（灰色）`。
|
||||
这样就会创建一个 `--penguin-skin` 变量，它的值为 `gray`。 现在，其他元素可通过该变量来调用 `gray`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`penguin`class 里面，创建一个`--penguin-skin`变量，且赋值为`gray（灰色）`。
|
||||
在 `penguin` class 里面，创建一个 `--penguin-skin` 变量，并将其值设置为 `gray`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin` class 里应声明`--penguin-skin`变量，且赋值为`gray`。
|
||||
应在 `penguin` class 里声明 `--penguin-skin` 变量，且赋值为 `gray`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18190
|
||||
|
||||
# --description--
|
||||
|
||||
`background-color`属性可以设置元素的背景颜色。
|
||||
`background-color` 属性可以设置元素的背景颜色。
|
||||
|
||||
例如，你想将一个元素的背景颜色改为`green`，可以在`style`里面这样写：
|
||||
如果想将一个元素的背景颜色改为 `green`，可以在 `style` 里面这样写：
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
@ -20,23 +20,23 @@ forumTopicId: 18190
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个`silver-background`class 并设置`background-color`为`silver`。 并用在`div`元素上。
|
||||
创建一个 `silver-background` class 并设置其 `background-color` 为 `silver`。之后，将这个 class 添加到 `div` 元素上。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div`元素应有`silver-background` class。
|
||||
`div` 元素应有 `silver-background` class。
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
`div`元素背景颜色应设置为`silver`。
|
||||
`div` 元素背景颜色应设置为 `silver`。
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
class 名 `silver-background` 应该定义在 `style` 元素内，`silver` 的值应该指定 `background-color` 属性
|
||||
class 名 `silver-background` 应该定义在 `style` 元素内；`background-color` 的属性值应为 `silver`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
|
||||
@ -8,36 +8,36 @@ forumTopicId: 18200
|
||||
|
||||
# --description--
|
||||
|
||||
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用`Google`字体库。
|
||||
在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。网络上有很多字体库，不过在这个挑战中，我们将会使用 `Google Fonts` 字体库。
|
||||
|
||||
[Google 字体](https://fonts.google.com/)是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
|
||||
[Google 字体库](https://fonts.google.com/)是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。
|
||||
|
||||
因此，下一步，我们将引入和使用`Google`字体。
|
||||
接下来，我们就要引入和使用 Google Fonts（注意：如果 Google 在你的地区被限制访问，你可以选择跳过这个挑战）。
|
||||
|
||||
引入`Google`字体，你需要复制`Google`字体的 URL，并粘贴到 HTML 里面。在这个挑战中，我们需要引入`Lobster`字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到`style`标签之前。
|
||||
欲引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入 `Lobster` 字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到 `style` 标签之前。
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
|
||||
现在你可以设置`font-family`属性为`Lobster`，来使用`Lobster`字体。例子如下：
|
||||
现在你可以通过将 `font-family` 属性值中的 `FAMILY_NAME` 替换为 `Lobster` 来使用 `Lobster` 字体：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`.
|
||||
|
||||
`GENERIC_NAME`是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
|
||||
`GENERIC_NAME` 是可选的，它用来指明在其他字体不可用时的后备字体。我们会在下一个挑战中详细说明。
|
||||
|
||||
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用`"Open Sans"`字体需要添加引号，而`Lobster`字体则不需要。
|
||||
字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。例如，使用 `"Open Sans"` 字体需要添加引号，而 `Lobster` 则不需要。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 CSS 规则，`font-family`属性里设置为`Lobster`字体，并把这个字体应用到所有的`h2`元素。
|
||||
引入 Lobster 字体，然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
|
||||
# --hints--
|
||||
|
||||
引入`Lobster`字体。
|
||||
应引入 `Lobster` 字体。
|
||||
|
||||
```js
|
||||
assert(new RegExp('googleapis', 'gi').test(code));
|
||||
```
|
||||
|
||||
`h2`元素必须使用`Lobster`字体。
|
||||
`h2` 元素应使用 `Lobster` 字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
使用`h2`选择器去改变字体样式。
|
||||
应使用元素选择器（`h2`）来改变字体样式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`p`元素应该保持使用`monospace`字体。
|
||||
`p` 元素应保持使用 `monospace` 字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,19 +8,19 @@ forumTopicId: 301087
|
||||
|
||||
# --description--
|
||||
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题就显得很重要。
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题会显得很重要。
|
||||
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个栗子，如果使用 CSS 变量来指定站点的背景色， IE 浏览器由于不支持 CSS 变量会忽视背景色。因此，浏览器会使用其它值。如果没有找到其它值，会使用默认值，也就是没有背景色。
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。此时，浏览器会尝试使用其它值。但如果没有找到其它值，则会使用默认值，也就是没有背景色。
|
||||
|
||||
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
|
||||
|
||||
# --instructions--
|
||||
|
||||
看来已经使用了变量做为 `.red-box` class 的背景色。来通过在存在的声明前添加其它的值为 red 的 `background` 声明来提高浏览器的兼容性。
|
||||
我们使用了 CSS 变量来定义 `.red-box` 的背景色。现在，请在使用 CSS 变量前添加属性值为 red 的 `background` 声明来处理浏览器兼容性的问题。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red-box` 应该通过在存在的 `background` 声明前添加其它的值为 red 的`background` 来提供降级。
|
||||
`.red-box` 应存在属性值为 `red` 的 `background` 声明，作为使用 CSS 变量的降级解决方案。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,17 +8,19 @@ forumTopicId: 301088
|
||||
|
||||
# --description--
|
||||
|
||||
当创建一个变量时，变量会在创建的选择器里可用。同时，在这个选择器的后代里面也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。
|
||||
当创建一个变量时，变量会在创建变量的选择器里可用。同时，在这个选择器的后代选择器里也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。
|
||||
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。`:root` 是一个 <dfn>pseudo-class</dfn> 选择器匹配文档的根选择器，通常指 `html` 元素。通过在 `:root` 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。
|
||||
|
||||
`:root` 是一个<dfn>伪类</dfn>选择器，它是一个能够匹配文档根元素的选择器，通常指的是 `html` 元素。我们在 `:root` 里创建变量在全局都可用，即在任何选择器里都生效。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `:root` 选择器里定义变量 `--penguin-belly` 并赋值 `pink`。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
|
||||
在 `:root` 选择器里定义变量 `--penguin-belly` 并设置它的属性值为 `pink`。此时，你会发现变量被继承，所有使用该变量的子元素都会有粉色背景。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该在 `:root` 里声明 `--penguin-belly` 变量并赋值 `pink`。
|
||||
应在 `:root` 里声明 `--penguin-belly` 变量并赋值 `pink`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: 从 Body 元素继承样式
|
||||
title: 从 body 元素继承样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
@ -8,27 +8,27 @@ forumTopicId: 18204
|
||||
|
||||
# --description--
|
||||
|
||||
我们已经证明每一个 HTML 页面都含有`body`元素，`body`元素也可以使用 CSS 样式。
|
||||
我们已经证明每一个 HTML 页面都含有 `body` 元素，我们也可以在 `body` 元素上使用 CSS 样式。
|
||||
|
||||
设置`body`元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到`body`设置的样式。
|
||||
设置 `body` 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 `body` 中所设置的样式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先，创建一个文本内容为`Hello World`的`h1`标签元素。
|
||||
首先，创建一个内容文本为 `Hello World` 的 `h1` 元素。
|
||||
|
||||
接着，在`body`CSS 规则里面添加一句`color: green;`，改变页面其他元素的字体颜色为`green（绿色）`。
|
||||
接着，在 `body` 的 CSS 规则里面添加 `color: green;`，这会将页面内所有字体的颜色都设置为绿色。
|
||||
|
||||
最后，同样在`body`CSS 规则里面添加`font-family: monospace;`，设置其他元素字体为`font-family: monospace;`。
|
||||
最后，在 `body` 的 CSS 规则里面添加 `font-family: monospace;`，这会将页面内所有字体的 `font-family` 都设置为 `monospace`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`h1`元素。
|
||||
应创建一个 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
`h1`元素的文本内容应该为`Hello World`。
|
||||
`h1` 元素的内容文本应为 `Hello World`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保`h1`元素具有结束标记。
|
||||
确保 `h1` 元素具有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,13 +49,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`body`元素的`color`属性值应为`green`。
|
||||
`body` 元素的 `color` 属性值应为 `green`。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
`body`元素的`font-family`属性值应为`monospace`。
|
||||
`body` 元素的 `font-family` 属性值应为 `monospace`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -65,7 +65,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素应该继承`body`的`monospace`字体属性。
|
||||
`h1` 元素应该继承 `body` 的 `monospace` 字体属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -76,7 +76,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色也应该继承`body`元素的绿色。
|
||||
`h1` 元素的字体颜色应继承 `body` 元素所设置的绿色。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@ -8,21 +8,21 @@ forumTopicId: 18229
|
||||
|
||||
# --description--
|
||||
|
||||
除像素外，你也可以使用百分比来指定`border-radius`的值。
|
||||
除像素外，你也可以使用百分比来指定 `border-radius` 的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
将`border-radius`的值设置为`50%`。
|
||||
将 `border-radius` 的属性值设置为 `50%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你图片的边框圆角应设置为`50%`，让它看起来就像一个完整的圆。
|
||||
图片的边框圆角应设置为 `50%`，这样图片就会是圆形的。
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
请确保百分值为`50%`。
|
||||
值应为 `50%`。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
|
||||
@ -8,45 +8,45 @@ forumTopicId: 18249
|
||||
|
||||
# --description--
|
||||
|
||||
耶！我们刚刚又证明了行内样式会覆盖`style`标签里面所有的 CSS 声明。
|
||||
耶！我们刚刚又证明了行内样式会覆盖 `style` 标签里面所有的 CSS 声明。
|
||||
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们要覆盖 CSS 样式。
|
||||
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖 CSS 样式。当你需要保证 CSS 样式不受影响，你可以使用`!important`。
|
||||
很多时候，你使用的 CSS 库中的样式会意外覆盖你的 CSS 样式。如果想保证你的 CSS 样式不受影响，就可以使用 `!important`。
|
||||
|
||||
让我们回到`pink-text`class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
让我们回到 `pink-text` class 声明之中，它的颜色样式已被之后的 class 声明、id 声明以及行内样式所覆盖。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`pink-text`class 的`color`声明里面使用`!important`关键字，去确保`h1`元素的字体颜色一定为粉色。 操作的方法大概如下： `color: red !important;`
|
||||
在 `pink-text` class 的 `color` 声明里面使用 `!important` 关键字，以确保 `h1` 元素的字体颜色为粉色。类似这样：`color: red !important`
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
`h1` 元素应该包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
`h1` 元素应该包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1`元素应该包含一个名为`orange-text`的id。
|
||||
`h1` 元素的 `id` 应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
`h1`元素应该包含`color: white`的行内样式声明。
|
||||
`h1` 元素应该包含 `color: white` 的行内样式声明。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
`pink-text` class 声明应该含有`!important`关键字。
|
||||
`pink-text` class 声明中应含有 `!important` 关键字。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -54,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为粉色。
|
||||
`h1` 元素的字体颜色应为粉色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
|
||||
@ -12,17 +12,17 @@ forumTopicId: 18251
|
||||
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
|
||||
通过给`h1`元素添加 id 属性，来覆盖 class 属性定义的同名样式。
|
||||
通过给 `h1` 元素添加 id 属性，我们便可以此来覆盖 class 属性中定义的同名样式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`h1`元素添加 id 属性，属性值为`orange-text`。设置方式如下：
|
||||
给 `h1` 元素添加 id 属性，属性值为 `orange-text`。设置方式如下：
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
|
||||
`h1`元素继续保留`blue-text`和`pink-text`class。
|
||||
`h1` 元素应继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
在`style`元素中创建名为`orange-text`的 id 选择器。例子如下：
|
||||
在 `style` 元素中创建名为 `orange-text` 的 id 选择器。例子如下：
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
@ -30,47 +30,47 @@ forumTopicId: 18251
|
||||
}
|
||||
```
|
||||
|
||||
注意：无论在`pink-text`class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
|
||||
**注意：**无论在 `pink-text` class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
`h1` 元素应包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1`的 id 属性值为`orange-text`。
|
||||
`h1` 的 id 属性值应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
应该只有一个`h1`元素。
|
||||
应只有一个 `h1` 元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
创建名为`orange-text`的 id 选择器。
|
||||
应存在名为 `orange-text` 的 id 选择器。
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
不要在`h1`元素里面使用`style（行内样式）`。
|
||||
不要在 `h1` 元素里面使用行内样式。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应为橘色。
|
||||
`h1` 元素的字体颜色应为橘色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
|
||||
@ -8,45 +8,45 @@ forumTopicId: 18252
|
||||
|
||||
# --description--
|
||||
|
||||
我们刚刚证明了，id 选择器无论在`style`标签哪里声明，都会覆盖 class 声明的样式，
|
||||
我们刚刚证明了，id 选择器无论在 `style` 标签的任何位置声明，都会覆盖 class 声明的样式。
|
||||
|
||||
其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？
|
||||
其实还有其他方法可以覆盖 CSS 样式。你还记得行内样式吗？
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用行内样式尝试让`h1`的字体颜色变白。像下面这样使用：
|
||||
使用行内样式尝试让 `h1` 的字体颜色变白。像这样使用：
|
||||
|
||||
`<h1 style="color: green">`
|
||||
|
||||
`h1`元素需继续保留`blue-text`和`pink-text`class。
|
||||
`h1` 元素需继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
`h1` 元素应包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1`元素应该包含一个名为`orange-text`的id。
|
||||
`h1` 元素的 `id` 应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
`h1`元素应该含有行内样式。
|
||||
`h1` 元素应含有行内样式。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为白色。
|
||||
`h1` 元素的字体颜色应该为白色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
|
||||
@ -8,45 +8,45 @@ forumTopicId: 18253
|
||||
|
||||
# --description--
|
||||
|
||||
"pink-text" class 覆盖了`body`元素的 CSS 声明。
|
||||
"pink-text" class 覆盖了 `body` 元素的 CSS 声明。
|
||||
|
||||
我们刚刚证明了我们的 class 会覆盖`body`的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的`pink-text`class？
|
||||
我们刚刚证明了我们的 class 会覆盖 `body` 的 CSS 样式。那么下一个问题是，我们要怎么样才能覆盖我们的 `pink-text` class 中所定义的样式？
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个字体颜色为`blue`的`blue-text`CSS class，并确保它在`pink-text`下方声明。
|
||||
创建一个字体颜色为 `blue` 的 `blue-text` class，并确保它在 `pink-text` 下方声明。
|
||||
|
||||
在含有`pink-text`class 的`h1`元素里面，再添加一个`blue-text`class，这时候，我们将能看到到底是谁获胜。
|
||||
在含有 `pink-text` class 的 `h1` 元素里面，添加上 `blue-text` class。我们来看看到底是谁获胜。
|
||||
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
|
||||
`class="class1 class2"`
|
||||
|
||||
**注意：** HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
**注意：**HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
|
||||
但是，在`<style>`标签里面声明的`class`顺序十分重要。第二个声明始终优于第一个声明。因为`.blue-text`在`.pink-text`的后面声明，所以`.blue-text`会覆盖`.pink-text`的样式。
|
||||
但是，在 `<style>` 标签里面声明的 `class` 顺序十分重要，之后的声明会覆盖之前的声明。由于 `.blue-text` 在 `.pink-text` 的后面出现，所以 `.blue-text` 里的样式会覆盖 `.pink-text` 里的样式。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
`h1` 元素应包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`blue-text`和`pink-text`需同时应用于`h1`元素上。
|
||||
`blue-text` 和 `pink-text` 需同时应用于 `h1` 元素上。
|
||||
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1`元素的颜色应为蓝色。
|
||||
`h1` 元素的颜色应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
|
||||
@ -8,33 +8,33 @@ forumTopicId: 18258
|
||||
|
||||
# --description--
|
||||
|
||||
有时候， HTML 元素的样式会跟其他样式发生冲突。
|
||||
有时候，HTML 元素的样式会跟其他样式发生冲突。
|
||||
|
||||
就像，`h1`元素也不能同时设置`green`和`pink`两种样式。
|
||||
就像 `h1` 元素也不能同时设置 `green` 和 `pink` 两种颜色。
|
||||
|
||||
让我们尝试创建一个字体颜色为`pink`的 class，并应于用其中一个元素中。猜一猜，它会覆盖`body`元素设置的`color: green;`CSS 属性吗？
|
||||
让我们尝试创建一个字体颜色为 `pink` 的 class，并应于用其中一个元素中。猜一猜，它会覆盖 `body` 元素设置的 `color: green;` CSS 规则吗？
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个能将元素的字体颜色改为`pink`的CSS class，并起名为`pink-text`。
|
||||
创建一个能将元素的字体颜色改为 `pink` 的 class，并命名为 `pink-text`。
|
||||
|
||||
给`h1`元素添加`pink-text`class。
|
||||
给 `h1` 元素添加 `pink-text` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该含有`pink-text` class。
|
||||
`h1` 元素应含有 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`<style>`标签应该含有一个可以改变字体颜色的`pink-text` class。
|
||||
`<style>` 标签应含有一个可以改变字体颜色的 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为`pink（粉色）`。
|
||||
`h1` 元素的字体颜色应为粉色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: 设置元素的字体家族
|
||||
title: 设置元素的字体族名
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18278
|
||||
|
||||
# --description--
|
||||
|
||||
通过`font-family`属性，可以设置元素里面的字体样式。
|
||||
通过 `font-family` 属性，我们可以设置元素里的字体族名。
|
||||
|
||||
如果你想设置`h2`元素的字体为`sans-serif`，你可以用以下的 CSS 规则：
|
||||
如果你想将 `h2` 元素的字体设置为 `sans-serif`，可以这样写：
|
||||
|
||||
```css
|
||||
h2 {
|
||||
@ -20,11 +20,11 @@ h2 {
|
||||
|
||||
# --instructions--
|
||||
|
||||
确保`p`元素使用`monospace`字体。
|
||||
请将 `p` 元素的字体设置为 `monospace`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p`元素应该使用`monospace`字体。
|
||||
`p` 元素应使用 `monospace` 作为字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,23 +8,23 @@ forumTopicId: 18279
|
||||
|
||||
# --description--
|
||||
|
||||
除了class属性，每一个 HTML 元素也都有`id`属性。
|
||||
除了 class 属性，每一个 HTML 元素都有一个 `id` 属性。
|
||||
|
||||
使用`id`有几个好处：你可以通过`id`选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过`id`来选择元素和操作元素。
|
||||
使用 `id` 有几个好处：你可以通过 `id` 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面通过 `id` 来选择和操作元素。
|
||||
|
||||
`id`属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的`id`属性。
|
||||
根据规范，`id` 属性应是唯一的。尽管浏览器并非必须执行这条规范，但 `id` 唯一是广泛认可的最佳实践。因此，请不要给多个元素设置相同的 `id`。
|
||||
|
||||
设置`h2`元素的 id 为`cat-photo-app`的方法如下：
|
||||
设置 `h2` 元素的 id 为 `cat-photo-app` 的代码如下：
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
请将 `form` 元素的 id 设置为 `cat-photo-form`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`form`元素的 id 应为`cat-photo-form`。
|
||||
`form` 元素的 id 应为 `cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18282
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 的`width`属性可以控制元素的宽度。图片的`width`宽度类似于字体的`px`（像素)值。
|
||||
CSS 的 `width` 属性可以控制元素的宽度。和设置文本字号一样，我们会以 `px`（像素）为单位来设置图片的宽度。
|
||||
|
||||
假如，你想创建一个叫`larger-image`的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
|
||||
例如，如果你想创建一个叫 `larger-image` 的 CSS `class` 来控制 HTML 元素的宽度为 500px，就可以这样写：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -22,14 +22,11 @@ CSS 的`width`属性可以控制元素的宽度。图片的`width`宽度类似
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个`smaller-image`的 CSS class，设置图片的宽度为 100px。
|
||||
|
||||
**注意：**
|
||||
由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
|
||||
创建一个叫 `smaller-image` 的 CSS `class`，并用它来设置图片宽度为 100px。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img`元素应该含有`smaller-image` class。
|
||||
`img` 元素的 `class` 应包含 `smaller-image`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -38,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。
|
||||
图片宽度应为 100px。
|
||||
|
||||
```js
|
||||
assert($('img').width() === 100);
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 18304
|
||||
|
||||
# --description--
|
||||
|
||||
所有浏览器都有几种默认字体。这些通用字体包括`monospace`，`serif`和`sans-serif`。
|
||||
所有浏览器都有几种默认字体，包括`monospace`、`serif` 和 `sans-serif`。
|
||||
|
||||
当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
|
||||
在字体不可用的时候，你可以告诉浏览器通过“降级”去使用其他字体。
|
||||
|
||||
例如，如果你想将一个元素的字体设置成`Helvetica`，当`Helvetica`不可用时，降级使用`sans-serif`字体，那么可以这样写：
|
||||
如果你想将一个元素的字体设置成 `Helvetica`，但当 `Helvetica` 不可用时，降级使用 `sans-serif` 字体，那么可以这样写：
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -20,20 +20,19 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。
|
||||
通用字体名不区分大小写。同时，也不需要使用引号，因为它们是 CSS 中的关键字。
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先，添加`monospace`字体到`h2`元素里，它现在拥有着`Lobster`和`monospace`两种字体。
|
||||
首先，添加 `monospace` 字体到 `h2` 元素里，它现在拥有 `Lobster` 和 `monospace` 两种字体。
|
||||
|
||||
在上一个挑战里，你已经通过`link`标签引入谷歌`Lobster`字体。现在让我们注释掉谷歌`Lobster`字体的引入（使用我们之前学过的`HTML`注释），使字体失效。你会发现`h2`元素降级到了`monospace`字体。
|
||||
在上一个挑战里，你已经通过 `link` 标签从谷歌字体库引入了 `Lobster` 字体。现在让我们使用之前学习的 HTML 注释，将 `Lobster` 字体的引入注释掉，这样一来，引入的 `Lobster` 字体会失效。此时，你会发现 `h2` 元素降级到了 `monospace` 字体。
|
||||
|
||||
**注意：**
|
||||
如果电脑已经安装了`Lobster`字体，你将看不到这个降级过程，因为浏览器会找到该字体。
|
||||
**注意：**如果你的电脑里已经安装了 `Lobster` 字体，你就看不到这个降级过程，因为浏览器还是会在你的电脑中找到该字体。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2`元素应该含有`Lobster`字体。
|
||||
`h2` 元素的字体应设置为 `Lobster`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
当`Lobster`字体失效时，`h2`元素应该降级使用`monospace`字体。
|
||||
当 `Lobster` 字体失效时，`h2` 元素应该降级使用 `monospace` 字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,13 +52,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
通过添加`<!--`，注释掉谷歌`Lobster`字体的引入。
|
||||
通过添加`<!--`，注释掉 `Lobster` 字体的引入。
|
||||
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
确保注释要以`-->`结束。
|
||||
确保注释要以 `-->` 结束。
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user