Chinese translation of responsive-web-design (#40607)
This commit is contained in:
Xing Liu
GitHub
@ -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));
|
||||
|
||||
@ -8,29 +8,29 @@ forumTopicId: 18311
|
||||
|
||||
# --description--
|
||||
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将`red-text`class 选择器应用在第一个`p`元素上。
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 `red-text` class 添加到第一个 `p` 元素上。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2`元素应该是红色的。
|
||||
`h2` 元素应该是红色的。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`h2`元素应该含有`red-text` class 选择器。
|
||||
`h2` 元素应含有 `red-text` class。
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
第一个`p`元素应该为红色。
|
||||
第一个 `p` 元素应为红色。
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
第二和第三个`p`元素不应该为红色。
|
||||
第二和第三个 `p` 元素不应为红色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
第一个`p`元素应该包含`red-text` class 选择器。
|
||||
第一个 `p` 元素应该包含 `red-text` class。
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: 给 HTML 的 Body 元素添加样式
|
||||
title: 给 HTML 的 body 元素添加样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
@ -8,15 +8,15 @@ forumTopicId: 18313
|
||||
|
||||
# --description--
|
||||
|
||||
现在让我们来讨论一下 CSS 继承。
|
||||
现在让我们来讨论一下 CSS 中的继承。
|
||||
|
||||
每一个 HTML 页面都含有一个`body`元素。
|
||||
每一个 HTML 页面都有一个 `body` 元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们可以通过设置`background-color`为`black`，来证明`body`元素的存在。
|
||||
我们可以通过设置 `background-color` 的属性值为 `black`，来证明 `body` 元素的存在。
|
||||
|
||||
添加以下的代码到`style`标签里面：
|
||||
请将以下代码添加到 `style` 标签里面：
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -26,13 +26,13 @@ body {
|
||||
|
||||
# --hints--
|
||||
|
||||
`body`元素的`background-color`应该是黑色的。
|
||||
`body` 元素的 `background-color` 应为黑色。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
确保 CSS 规则格式书写正确，需要开关大括号。
|
||||
确保 CSS 规则格式书写正确，左右大括号也应匹配。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
确保 CSS 规则要以分号结尾。
|
||||
确保 CSS 规则以分号结尾。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,22 +8,21 @@ forumTopicId: 301089
|
||||
|
||||
# --description--
|
||||
|
||||
最近的几个挑战都是设置元素的内边距和外边距的`px`值。像素`px`是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。
|
||||
最近的几个挑战都是设置元素的内边距和外边距的 `px` 值。`px` 的意思是像素，它是一个长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他单位供我们使用。
|
||||
|
||||
单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，`in`和`mm`分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
|
||||
单位长度的类型可以分成 2 种：相对和绝对。例如，`in` 和 `mm` 分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。
|
||||
|
||||
相对单位长度，就像`em`和`rem`，它们会依赖其他长度的值。就好像`em`的大小基于元素的字体的`font-size`值，如果你使用`em`单位来设置`font-size`值，它的值会跟随父元素的`font-size`值来改变。
|
||||
相对单位长度，比如 `em` 和 `rem`，它们的实际值会依赖其他长度的值而决定。比如 `em` 的大小基于元素字体的 `font-size` 值。如果使用 `em` 单位来设置 `font-size` 值，它的值会跟随父元素的 `font-size` 值来改变。
|
||||
|
||||
**注意：**
|
||||
有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。
|
||||
**注意：**有些单位长度选项是相对视窗大小来改变值的，这种设定符合响应式 web 的设计原则。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`red-box` class 添加`padding`属性，并设置为`1.5em`。
|
||||
给 `red-box` class 添加 `padding` 属性，并设置其属性值为 `1.5em`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`red-box` class 应该含有`padding`属性。
|
||||
class 为 `red-box` 的元素应含有 `padding` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`red-box` class 的`padding`值应为 1.5em。
|
||||
class 为 `red-box` 的元素的 `padding` 属性值应为 `1.5em`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18337
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 的`class`具有可重用性，可应用于各种 HTML 元素。
|
||||
CSS 的 `class` 具有可重用性，可应用于各种 HTML 元素。
|
||||
|
||||
一个 CSS`class`声明示例，如下所示：
|
||||
一个 CSS `class` 声明示例如下所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -20,35 +20,37 @@ CSS 的`class`具有可重用性，可应用于各种 HTML 元素。
|
||||
</style>
|
||||
```
|
||||
|
||||
可以看到，我们在`<style>`样式声明区域里，创建了一个名为`blue-text`的`class`选择器。 你可以将 CSS`class`选择器应用到一个HTML元素里，如下所示： `<h2 class="blue-text">CatPhotoApp</h2>` 注意：在`style`样式区域声明里，`class`需以`.`开头。而在 HTML 元素里，`class`属性的前面不能添加`.`。
|
||||
可以看到，我们在 `<style>` 样式声明区域里，创建了一个名为 `blue-text` 的 `class` 选择器。你可以将 CSS `class` 添加到一个 HTML 元素里，如下所示：`<h2 class="blue-text">CatPhotoApp</h2>`
|
||||
|
||||
**注意：**在 `style` 样式区域声明里，`class` 需以 `.` 开头。而在 HTML 元素里，`class` 属性的前面不能添加 `.`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`style`样式声明里，把`h2`元素选择器改为`.red-text`class 选择器，同时将颜色`blue`变为`red`。
|
||||
在 `style` 样式声明里，把 `h2` 元素选择器改为 `.red-text` class 选择器，同时将颜色 `blue` 改为 `red`。
|
||||
|
||||
在`h2`元素里，添加一个`class`属性，且值为`'red-text'`。
|
||||
在 `h2` 元素里，添加一个 `class`，值为 `'red-text'`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2`元素应该为红色。
|
||||
`h2` 元素应为红色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`h2`元素应含有`red-text` class 选择器。
|
||||
`h2` 元素应含有 `red-text` class。
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
`style`样式声明区域里应该包含一个`red-text` class 选择器，并且它的颜色应为红色。
|
||||
`style` 样式声明区域里应该包含一个 `red-text` class 选择器，且它的颜色应为红色。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
```
|
||||
|
||||
不要在`h2`元素里使用行内样式：`style="color: red"`。
|
||||
不应在 `h2` 元素里使用行内样式 `style="color: red"`。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
|
||||
@ -8,21 +8,23 @@ forumTopicId: 301090
|
||||
|
||||
# --description--
|
||||
|
||||
创建变量后，CSS 属性可以通过引用变量名来使用它的值。
|
||||
创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
因为引用了`--penguin-skin`变量的值，使用了这个样式的元素背景颜色会是灰色。 注意：如果变量名不匹配，样式不会生效。
|
||||
因为引用了 `--penguin-skin` 变量的值，使用了这个样式的元素背景颜色会是灰色。
|
||||
|
||||
**注意：**如果变量名不匹配，则样式不会生效。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`penguin-top`，`penguin-bottom`，`right-hand`和`left-hand`class 的`background`属性均使用`--penguin-skin`变量值。
|
||||
将 `--penguin-skin` 的值应用到 class 为 `penguin-top`、`penguin-bottom`、`right-hand`、`left-hand` 的 `background` 的属性值。
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin-top` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
class 为 `penguin-top` 的 `background` 属性值应使用变量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin-bottom` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
class 为 `penguin-bottom` 的 `background` 属性值应使用变量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`right-hand` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
class 为 `right-hand` 的 `background` 属性值应使用变量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`left-hand` class 的`background`属性应使用`--penguin-skin`变量值。
|
||||
class 为 `left-hand` 的 `background` 属性值应使用变量 `--penguin-skin` 的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301091
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 变量可以简化媒体查询的方式。
|
||||
CSS 变量可以简化媒体查询的定义方式。
|
||||
|
||||
例如，当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
|
||||
例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`media query（媒体查询）`声明的`:root`选择器里，重定义`--penguin-size`的值为 200px，且重定义`--penguin-skin`的值为`black`，然后通过缩放页面来查看是否生效。
|
||||
在 `media query`（媒体查询）声明的 `:root` 选择器里，重定义 `--penguin-size` 的值为 200px，且重定义 `--penguin-skin` 的值为 `black`，然后通过缩放页面来查看它们是否生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root`中的`--penguin-size`值应为`200px`。
|
||||
`:root` 中的 `--penguin-size` 值应为 `200px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,7 +28,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`:root`中的`--penguin-skin`值应为`black`。
|
||||
`:root` 中的 `--penguin-skin` 值应为 `black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 18338
|
||||
|
||||
# --description--
|
||||
|
||||
许多人对超过 1600 万种颜色的可能性感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。
|
||||
许多人对超过 1600 万种颜色感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。
|
||||
|
||||
例如，红色的`#FF0000`十六进制编码可以缩写成`#F00`。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
|
||||
例如，红色的 `#FF0000` 十六进制编码可以缩写成 `#F00`。在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
|
||||
|
||||
这样，颜色的可能性减少到了大约 4000 种。且在浏览器里`#FF0000`和`#F00`完全是同一种颜色。
|
||||
这样，颜色的数量减少到了大约 4000 种。且在浏览器里 `#FF0000` 和 `#F00` 是完全相同的颜色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -22,49 +22,49 @@ forumTopicId: 18338
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色应该为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
要使用缩写的`red`的`十六进制编码`，而不是`#FF0000`。
|
||||
应使用红色的十六进制编码的缩写形式，不应使用 `#FF0000`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am green!`的`h1`元素的字体颜色应该为`green`。
|
||||
文本内容为 `I am green!` 的 `h1` 元素的字体颜色应该为绿色。
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
要使用缩写的`green`的`十六进制编码`，而不是`#00FF00`的十六进制编码。
|
||||
应使用绿色的十六进制编码的缩写形式，不应使用 `#00FF00`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am cyan!`的`h1`元素的字体颜色应该为`cyan`。
|
||||
文本内容为 `I am cyan!` 的 `h1` 元素的字体颜色应该为蓝绿色。
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
要使用缩写的`cyan`的`十六进制编码`，而不是`#00FFFF`的十六进制编码。
|
||||
应使用蓝绿色的十六进制编码的缩写形式，不应使用 `#00FFFF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am fuchsia!`的`h1`元素的字体颜色应该为`fuchsia`。
|
||||
文本内容为 `I am fuchsia!` 的 `h1` 元素的字体颜色应该为紫红色。
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
要使用缩写的`fuchsia`的`十六进制编码`，而不是`#FF00FF`的十六进制编码。
|
||||
应使用紫红色的十六进制编码的缩写形式，不应使用 `#FF00FF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 18339
|
||||
|
||||
# --description--
|
||||
|
||||
通过`id`属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
|
||||
通过 `id` 属性，你可以做一些很酷的事情。比如像 class 一样，你可以使用 CSS 来设置他们的样式。
|
||||
|
||||
可是，`id`不可以重用，只应用于一个元素上。同时，在 CSS 里，`id`的优先级要高于`class`，如果一个元素同时应用了`class`和`id`，并设置样式有冲突，会优先应用`id`的样式。
|
||||
不过，`id` 不可以重复，它只能作用于一个元素上。同时，在 CSS 里，`id` 的优先级高于 `class`。如果一个元素同时应用了 `class` 和 `id`，且两者设置的样式有冲突，会优先应用 `id` 中所设置的样式。
|
||||
|
||||
选择`id`为`cat-photo-element`的元素，并设置它的背景样式为`green`，可以在`style`标签里这样写：
|
||||
选择 `id` 为 `cat-photo-element` 的元素，并设置它的背景样式为 `green`，可以在 `style` 标签里这样写：
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
@ -20,27 +20,27 @@ forumTopicId: 18339
|
||||
}
|
||||
```
|
||||
|
||||
注意在`style`标签里，声明 class 的时候必须在名字前插入`.`符号。同样，在声明 id 的时候，也必须在名字前插入`#`符号。
|
||||
注意在 `style` 标签里，声明 class 的时候必须在名字前插入 `.` 符号。同样，在声明 id 的时候，也必须在名字前插入 `#` 符号。
|
||||
|
||||
# --instructions--
|
||||
|
||||
尝试给含有`cat-photo-form`id属性的`form`表单的背景颜色设置为`green`。
|
||||
请将 id 为 `cat-photo-form` 的 `form` 表单的背景颜色设置为 `green`。
|
||||
|
||||
# --hints--
|
||||
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
`form` 元素的 id 应为 `cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
`form`元素应该含有`background-color`css 属性并且值为 `green`。
|
||||
`form` 元素应含有 `background-color` CSS 属性且其属性值应为 `green`。
|
||||
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
确保`form`元素含有`id`属性。
|
||||
确保 `form` 元素的 `id` 设置正确。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
不要在`form`元素上添加其他`class`属性或者`style`行内样式。
|
||||
不要在 `form` 元素上添加其他 `class` 属性或者 `style` 行内样式。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 301092
|
||||
|
||||
# --description--
|
||||
|
||||
你已经通过设置元素的`id`和`class`，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
|
||||
我们已经通过设置元素的 `id` 和 `class` 来显示想要的样式。这就是 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
|
||||
|
||||
让我们再次通过猫咪图片项目来练习 CSS 选择器。
|
||||
|
||||
在这个挑战里，你会使用`[attr=value]`属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有`type`为`radio`的元素的外边距。
|
||||
在这个挑战里，我们需要使用 `[attr=value]` 属性选择器来修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有 `type` 为 `radio` 的元素的外边距。
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
@ -22,11 +22,11 @@ forumTopicId: 301092
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`type`属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
|
||||
请使用 `type` 属性选择器，设置复选框的上外边距为 10px，下外边距为 15px。
|
||||
|
||||
# --hints--
|
||||
|
||||
使用`type`属性选择器来匹配复选框。
|
||||
应使用 `type` 属性选择器来匹配复选框。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,45 +8,45 @@ forumTopicId: 18345
|
||||
|
||||
# --description--
|
||||
|
||||
让我们再试一次，不过这一次轮到`margin`了。
|
||||
让我们再试一次，不过这一次轮到 `margin` 了。
|
||||
|
||||
同样，每个方向的外边距值可以在`margin`属性里面汇总声明，来代替分别声明`margin-top`，`margin-right`，`margin-bottom`和`margin-left`属性的方式，代码如下：
|
||||
同样，每个方向的外边距值可以在 `margin` 属性里面汇总声明，而无需分别通过 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 分别声明，代码如下：
|
||||
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的`margin`。
|
||||
这四个值按顺时针排序：上、右、下、左。汇总声明的效果与为每一个方向单独声明 `margin` 的效果是一致的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照顺时针顺序，给".blue-box" class的上外边距以及左外边距设置为`40px`，右外边距和下外边距则设置为`20px`。
|
||||
按照顺时针顺序，将 class 为 "blue-box" 元素的上外边距以及左外边距设置为 `40px`，右外边距和下外边距设置为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的上外边距应为`40px`。
|
||||
class 为 `blue-box` 的元素的上外边距应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
`blue-box` class 的右外边距应为`20px`。
|
||||
class 为 `blue-box` 的元素的右外边距应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的下外边距应为`20px`。
|
||||
class 为 `blue-box` 的元素的下外边距应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的左外边距应为`40px`。
|
||||
class 为 `blue-box` 的元素的左外边距应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
你应该沿顺时针方向设置`blue-box`的外边距。
|
||||
应沿顺时针方向设置 `blue-box` 的外边距。
|
||||
|
||||
```js
|
||||
const removeCssComments = (str) => str.replace(/\/\*[\s\S]+?\*\//g, '');
|
||||
|
||||
@ -8,43 +8,43 @@ forumTopicId: 18346
|
||||
|
||||
# --description--
|
||||
|
||||
如果不想每次都要分别声明`padding-top`，`padding-right`，`padding-bottom`和`padding-left`属性，可以把它们汇总在`padding`属性里面声明，如下：
|
||||
如果不想每次都要分别声明 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 属性，可以把它们汇总在 `padding` 属性里面一并声明，像是这样：
|
||||
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
|
||||
这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的`padding`。
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的 `padding`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照顺时针顺序，给".blue-box" class的上内边距以及左内边距设置为`40px`，右内边距和下内边距则设置为`20px`。
|
||||
按照顺时针顺序，将 class 为 "blue-box" 的元素的上内边距以及左内边距设置为 `40px`，右内边距和下内边距设置为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的上内边距应为`40px`。
|
||||
class 为 `blue-box` 的元素的上内边距应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
`blue-box` class 的右内边距应为`20px`。
|
||||
class 为 `blue-box` 的元素的右内边距应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的下内边距应为`20px`。
|
||||
class 为 `blue-box` 的元素的下内边距应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的左内边距应为`40px`。
|
||||
class 为 `blue-box` 的元素的左内边距应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
你应该按照顺时针排序，汇总声明的方式来设置`blue-box`的`padding`值。
|
||||
你应该按照顺时针排序，汇总声明的方式来设置 `blue-box` 的 `padding` 值。
|
||||
|
||||
```js
|
||||
const removeCssComments = (str) => str.replace(/\/\*[\s\S]+?\*\//g, '');
|
||||
|
||||
@ -10,18 +10,18 @@ forumTopicId: 18349
|
||||
|
||||
在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。
|
||||
|
||||
通过行内样式`<h2 style="color: red;">CatPhotoApp</h2>`，就可以修改`h2`元素的颜色为红色。
|
||||
通过行内样式 `<h2 style="color: red;">CatPhotoApp</h2>`，就可以将 `h2` 元素的颜色设置为红色。
|
||||
|
||||
当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，`层叠样式表`往往是一个更好的选择。
|
||||
当我们只需要改变一个元素的某个样式时，行内样式最简单直观。但当我们需要同时改变元素的很多样式时，使用样式表往往是一个更好的选择。
|
||||
|
||||
在代码的顶部，创建一个`style`声明区域，如下方所示：
|
||||
在代码的顶部，创建一个 `style` 声明区域，如下方所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
在`style`样式声明区域内，可以创建一个`元素选择器`，应用于所有的`h2`元素。例如，如果你想所有`h2`元素变成红色，可以添加下方的样式规则：
|
||||
在 `style` 样式声明区域内，可以创建一个`元素选择器`，这里的规则将会应用到所有 `h2` 元素。如果想让所有 `h2` 元素在变成红色，可以添加下方的样式规则：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -31,39 +31,39 @@ forumTopicId: 18349
|
||||
</style>
|
||||
```
|
||||
|
||||
注意，在每个元素的样式声明区域里，左右花括号（`{` 和 `}`）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
**注意：**在每个元素的样式声明区域里，左右花括号 `{` 和 `}` 一定要匹配。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
删除`h2`元素的行内样式，然后创建`style`样式声明区域，最后添加 CSS 样式规则使`h2`元素变为蓝色。
|
||||
请删除 `h2` 元素的行内样式，然后创建 `style` 样式声明区域，最后添加 CSS 样式规则使 `h2` 元素变为蓝色。
|
||||
|
||||
# --hints--
|
||||
|
||||
删除`h2`元素的行内样式。
|
||||
应删除 `h2` 元素的行内样式。
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
```
|
||||
|
||||
创建一个`style`样式声明区域。
|
||||
应创建一个 `style` 样式声明区域。
|
||||
|
||||
```js
|
||||
assert($('style') && $('style').length >= 1);
|
||||
```
|
||||
|
||||
`h2`元素颜色应为蓝色。
|
||||
`h2` 元素颜色应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
确保`h2`选择器的内容被花括号所围绕，并且样式规则以分号结束。
|
||||
确保 `h2` 选择器的内容被花括号所包围，样式规则应以分号结束。
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
```
|
||||
|
||||
所有`style`应该是有效的且有一个结束标签。
|
||||
`style` 标签应符合语法，且应有一个结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,17 +8,17 @@ forumTopicId: 301093
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>CSS 变量</dfn>是一种仅更改一个值，来一次性更改多个 CSS 样式属性的强大方法。
|
||||
<dfn>CSS 变量</dfn>可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性的强大方法。
|
||||
|
||||
按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在`penguin`class 里，将`black`改为`gray`，`gray`改为`white`，`yellow`改为`orange`。
|
||||
在 `penguin` class 里，将 `black` 改为 `gray`；`gray` 改为 `white`；`yellow` 改为 `orange`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin` class 声明的`--penguin-skin`变量的值应为`gray`。
|
||||
`penguin` class 声明中的 `--penguin-skin` 变量值应为 `gray`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -26,7 +26,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class 声明的`--penguin-belly`变量的值应为`white`。
|
||||
`penguin` class 声明中的 `--penguin-belly` 变量值应为 `white`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class 声明的`--penguin-beak`变量的值应为`orange`。
|
||||
`penguin` class 声明中的 `--penguin-beak` 变量值应为 `orange`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,11 +8,11 @@ forumTopicId: 18350
|
||||
|
||||
# --description--
|
||||
|
||||
你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫做十六进制编码，简称`hex`。
|
||||
你知道在 CSS 里面还有其他方式来代表颜色吗？其中一个方法叫十六进制编码，简称 `hex`。
|
||||
|
||||
我们日常使用最多的计数方法，基于十进制，使用 0 到 9 数字来表示。而`十六进制编码`（`hex`）基于 16 位数字，它含有 16 种不同字符。十六进制与十进制一样，0-9 表示着 0 到 9 的值，不同的是，A，B，C，D，E，F 表示着十六进制 10 到 15 的值。总的来说，0 到 F 在`十六进制`里代表着数字，提供了 16 种可能性。你可以在[这里](https://zh.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6)找到更多的相关信息。
|
||||
日常生活中，我们使用的计数方法一般基于十进制，即使用数字 0 到 9 来表示。而`十六进制编码`（`hex`）基于 16 位数字，它包括 16 种不同字符。十六进制与十进制一样，0-9 表示 0 到 9，不同的是，十六进制使用 A、B、C、D、E、F 分别表示 10 到 15。总的来说，0 到 F 在`十六进制`里代表数字，总共有 16 种可能性。你可以在[这里](https://zh.wikipedia.org/wiki/%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6)找到更多的相关信息。
|
||||
|
||||
在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。例如，`#000000`代表着黑色，同时也是最小的值。你可以在[这里](https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F)找到更多的相关信息。
|
||||
在 CSS 里面，我们可以使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。例如，`#000000` 代表黑色，同时也是最小的值。你可以在[这里](https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F)找到更多的相关信息。
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -22,17 +22,17 @@ body {
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`#000000`的十六进制编码来替换`body`元素的黑色背景。
|
||||
请使用 `#000000` 十六进制编码来设置 `body` 元素的背景颜色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body`元素的背景颜色应该是黑色。
|
||||
`body` 元素的背景颜色应为黑色。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`来替换`black`的写法。
|
||||
应使用 十六进制编码`来替换 `black` 的写法。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,67 +8,67 @@ forumTopicId: 18359
|
||||
|
||||
# --description--
|
||||
|
||||
回顾一下，`hex`使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
|
||||
回顾一下，`hex` 使用 6 个十六进制编码来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
|
||||
|
||||
通过三原色，我们可以创建 1600 万种不同颜色！
|
||||
通过三原色，我们可以创建 1600 万种不同颜色。
|
||||
|
||||
例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为`#FFA500`。
|
||||
例如，橘色是纯红色混合一些绿色而成，其中没有蓝色的参与。在十六进制编码里面，它可以写成 `#FFA500`。
|
||||
|
||||
`0`是十六进制里面最小的数字，表示着没有颜色。
|
||||
`0` 是十六进制里面最小的数字，表示没有颜色。
|
||||
|
||||
`F`是十六进制里面最大的数字，表示着最高的亮度。
|
||||
`F` 是十六进制里面最大的数字，表示着最高的亮度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把`style`标签里面的颜色值用正确的十六进制编码替换。
|
||||
把 `style` 标签里面的颜色值用正确的十六进制编码替换。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色应该为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`替换`red`关键词。
|
||||
应使用`十六进制编码`替换 `red` 关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am green!`的`h1`元素的字体颜色应该为`green`。
|
||||
文本内容为 `I am green!` 的 `h1` 元素的字体颜色应该为绿色。
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`替换`green`关键词。
|
||||
应使用`十六进制编码`替换 `green` 关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am dodger blue!`的`h1`元素的字体颜色应该为`dodger blue`。
|
||||
文本内容为 `I am dodger blue!` 的 `h1` 元素的字体颜色应该为道奇蓝色。
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`替换`dodgerblue`关键词。
|
||||
应使用`十六进制编码`替换 `dodgerblue` 关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为`I am orange!`的`h1`元素的字体颜色应该为`orange`。
|
||||
文本内容为 `I am orange!` 的 `h1` 元素的字体颜色应该为橘色。
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
使用`十六进制编码`替换`orange`关键词。
|
||||
应使用`十六进制编码`替换 `orange` 关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
|
||||
@ -12,19 +12,19 @@ forumTopicId: 18368
|
||||
|
||||
# --instructions--
|
||||
|
||||
将`style`标签里面中的十六进制编码替换为正确的 RGB 值。
|
||||
将 `style` 标签里面中的十六进制编码替换为正确的 RGB 值。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为`I am red!`的`h1`元素的字体颜色应该为`red`。
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色应为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`red`颜色应使用`RGB`值。
|
||||
红色应使用 `RGB` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,13 +34,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为`I am orchid!`的`h1`元素的字体颜色应该为`orchid`。
|
||||
文本内容为 `I am orchid!` 的 `h1` 元素的字体颜色应为兰紫色。
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
`orchid`颜色应使用`RGB`值。
|
||||
兰紫色应使用 `RGB` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,13 +50,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为`I am blue!`的`h1`元素的字体颜色应该为`blue`。
|
||||
文本内容为 `I am blue!` 的 `h1` 元素的字体颜色应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
`blue`颜色应使用`RGB`值。
|
||||
蓝色应使用 `RGB` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,13 +66,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为`I am sienna!`的`h1`元素的字体颜色应该为`sienna`。
|
||||
文本内容为 `I am sienna!` 的 `h1` 元素的字体颜色应为黄土赭色。
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
`sienna`颜色应使用`RGB`值。
|
||||
黄土赭色应使用 `RGB` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 18369
|
||||
|
||||
# --description--
|
||||
|
||||
另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。
|
||||
`RGB` 值是在 CSS 中表示颜色的另一种方法。
|
||||
|
||||
黑色的 RGB 值声明如下：
|
||||
|
||||
@ -18,9 +18,9 @@ forumTopicId: 18369
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
|
||||
RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。
|
||||
RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
|
||||
|
||||
在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。
|
||||
如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。而在 RGB 表示方式中，每个颜色的数值范围是 0 到 255，因此也有 256 种可能。
|
||||
|
||||
下面是通过使用 RGB 值设置背景颜色为橘色的例子：
|
||||
|
||||
@ -32,17 +32,17 @@ body {
|
||||
|
||||
# --instructions--
|
||||
|
||||
让我们用`rgb(0, 0, 0)`的 RGB 值替换`body`元素背景颜色的十六进制编码。
|
||||
请用 RGB 值 `rgb(0, 0, 0)` 替换 `body` 元素背景颜色的十六进制编码。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body`元素的背景颜色应该是黑色的。
|
||||
`body` 元素的背景颜色应该是黑色的。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`body`元素的背景颜色的黑色值应该为`RGB`值。
|
||||
`body` 元素的背景颜色的属性值应使用 `RGB` 值。
|
||||
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
|
||||
Reference in New Issue
Block a user