chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -15,7 +15,7 @@ dashedName: add-a-negative-margin-to-an-element
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将蓝色框的 `margin` 设为负值，跟红色框 `margin` 的属性值设置成一样的大小。
|
||||
请将蓝色框的 `margin` 设为负值，跟红色框的一样。
|
||||
|
||||
将蓝色框的 `margin` 设置为 `-15px`，它会让蓝色框填满整个黄色框。
|
||||
|
||||
|
||||
@ -25,9 +25,9 @@ CSS 边框具有 `style`、`color`、`width` 属性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 `thick-green-border` 的 class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，并将这个 class 应用在猫咪照片上。
|
||||
创建一个名为 `thick-green-border` 的 class， 该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框。 将这个 class 应用于你的猫图。
|
||||
|
||||
记得在一个元素上可以同时应用多个 `class`，使用空格来分隔不同 class 即可，例如：
|
||||
记得在一个元素上可以同时应用多个 `class`，使用空格来分隔不同 class 即可， 例如：
|
||||
|
||||
`<img class="class1 class2">`
|
||||
|
||||
|
||||
@ -15,29 +15,29 @@ CSS 允许你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-le
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将蓝色框的顶部和左侧 `margin` 属性值设置为 `40px`；将底部和右侧的属性值设置为 `20px`。
|
||||
请将蓝色框的顶部和左侧 `margin` 属性值设置为 `40px`，将底部和右侧的属性值设置为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue-box` 的元素的上外边距属性值应为 `40px`。
|
||||
class 为 `blue-box` 的元素的上外边距属性值 `margin` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的右外边距属性值应为 `20px`。
|
||||
class 为 `blue-box` 的元素的右外边距属性值 `margin` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的下外边距属性值应为 `20px`。
|
||||
class 为 `blue-box` 的元素的下外边距属性值 `margin` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的左外边距属性值应为 `40px`。
|
||||
class 为 `blue-box` 的元素的左外边距属性值 `margin` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
|
||||
@ -19,25 +19,25 @@ CSS 允许你使用 `padding-top`、`padding-right`、`padding-bottom`、`paddin
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue-box` 的元素的上内边距属性值应为 `40px`。
|
||||
class 为 `blue-box` 的元素的上内边距属性值 `padding` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的右内边距属性值应为 `20px`。
|
||||
class 为 `blue-box` 的元素的右内边距属性值 `padding` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的下内边距属性值应为 `20px`。
|
||||
class 为 `blue-box` 的元素的下内边距属性值 `padding` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的左内边距属性值应为 `40px`。
|
||||
class 为 `blue-box` 的元素的左内边距属性值 `padding` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
|
||||
@ -9,23 +9,23 @@ dashedName: add-rounded-corners-with-border-radius
|
||||
|
||||
# --description--
|
||||
|
||||
猫咪图片的四个角看起来很尖锐，我们可以使用 `border-radius` 属性来让它变得圆润。
|
||||
猫咪图片的四个角看起来很尖锐， 我们可以使用 `border-radius` 属性来让它变得圆润。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`border-radius` 的属性值单位可以是 `px`（像素）。请将猫咪图片 `border-radius` 的属性值设置为 10px。
|
||||
`border-radius` 的属性值单位可以是 px（像素）。 请将猫咪图片 `border-radius` 的属性值设置为 `10px`。
|
||||
|
||||
**注意：**这个挑战有多个解决方法。例如，添加 `border-radius` 属性到 `.thick-green-border` 或 `.smaller-image` 都是可行的。
|
||||
**注意：**这个挑战有多个解决方法。 例如，添加 `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(
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: adjust-the-margin-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
`margin（外边距）` 用来控制元素的边框与其他元素之间的距离。
|
||||
外边距 `margin` 用来控制元素的边框与其他元素之间的 `border` 距离。
|
||||
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的 `margin` 值要比蓝色框的大，因此红色框看起来比蓝色框要小。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。 请注意，红色框的 `margin` 值要比蓝色框的大，因此红色框看起来比蓝色框要小。
|
||||
|
||||
如果你增加蓝色的 `margin` 值，它也会增加元素边框到其他周围元素的距离。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将蓝色框的 `margin` 值设置成和红色框 `margin` 值一样的大小。
|
||||
请将蓝色框的 `margin` 值设置成和红色框的一样。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ dashedName: adjust-the-padding-of-an-element
|
||||
|
||||
`padding` 用来控制着元素内容与 `border` 之间的空隙大小。
|
||||
|
||||
在这个挑战中，我们可以看到蓝色框和红色框都在黄色框里面，同时，红色框比蓝色框的 `padding` 大。
|
||||
我们可以看到蓝色框和红色框是嵌套在黄色框里的。 注意红色框的 `padding` 比蓝色框的更多。
|
||||
|
||||
如果你增加蓝色框的 `padding` 值，其中的文本内容与边框的距离就也会变大。
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: 给 CSS 变量附加回退值
|
||||
title: 给 CSS 变量设置备用值
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
@ -11,19 +11,19 @@ dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
|
||||
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
|
||||
|
||||
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，你可以这样写：
|
||||
**注意：**备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
|
||||
|
||||
下面是操作方式：
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。 提示：这对调试代码也会很有帮助。
|
||||
如果你的变量没有设置，这将会把背景设置为 `black`。 提示：这对调试代码也会很有帮助。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请为 class 为 `penguin-top` 和 `penguin-bottom` 的元素的 `background` 属性设置一个 `black` 的备用色。
|
||||
|
||||
**注意：**因为 CSS 变量名拼写错了，所以备用值会被采用。
|
||||
`.penguin-top` 和 `.penguin-bottom` 类的变量看起来似乎有点问题。 请为 class 为 `penguin-top` 和 `penguin-bottom` 的元素的 `background` 属性设置一个 `black` 的备用色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
|
||||
|
||||
当你在 `:root` 里创建变量时，这些变量的作用域是整个页面。
|
||||
|
||||
如果在元素里创建相同的变量，会重写 `:root` 变量设置的值。
|
||||
如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: 更改文本的颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
forumTopicId: 16775
|
||||
dashedName: change-the-color-of-text
|
||||
---
|
||||
|
||||
@ -11,27 +11,29 @@ dashedName: change-the-color-of-text
|
||||
|
||||
现在让我们来修改文本的颜色。
|
||||
|
||||
我们通过修改 `h2` 元素的 `style` 属性的 `color` 属性值来改变文本颜色。
|
||||
我们通过修改 `h2` 元素的 `style` 属性来改变文本颜色。
|
||||
|
||||
我们需要修改 `color` 属性值。
|
||||
|
||||
以下是将 `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');
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: 更改元素的字体大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
forumTopicId: 16777
|
||||
dashedName: change-the-font-size-of-an-element
|
||||
---
|
||||
|
||||
@ -23,7 +23,7 @@ h1 {
|
||||
|
||||
# --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));
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: create-a-custom-css-variable
|
||||
|
||||
# --description--
|
||||
|
||||
为创建一个 CSS 变量，你只需要在变量名前添加两个 `-`，并为其赋值即可，例子如下：
|
||||
为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
这样就会创建一个 `--penguin-skin` 变量，它的值为 `gray`。 现在，其他元素可通过该变量来调用 `gray`。
|
||||
这样就会创建一个 `--penguin-skin` 变量，它的值为 `gray`。 现在，其他元素可通过该变量来使元素变成灰色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -27,7 +27,7 @@ dashedName: create-a-custom-css-variable
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ dashedName: give-a-background-color-to-a-div-element
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 `silver-background` class 并设置其 `background-color` 为 `silver`。之后，将这个 class 添加到 `div` 元素上。
|
||||
创建一个叫作 `silver-background` 的 class，并设置 `background-color` 为 `silver`。 之后，将这个 class 添加到 `div` 元素上。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -31,7 +31,7 @@ dashedName: give-a-background-color-to-a-div-element
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
`div` 元素背景颜色应设置为 `silver`。
|
||||
`div` 元素背景颜色应设置为银色。
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
|
||||
@ -9,26 +9,26 @@ dashedName: import-a-google-font
|
||||
|
||||
# --description--
|
||||
|
||||
在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。网络上有很多字体库，不过在这个挑战中，我们将会使用 `Google Fonts` 字体库。
|
||||
在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。 网络上有很多字体库。 在这个例子中，我们将使用 Google 字体库。
|
||||
|
||||
[Google 字体库](https://fonts.google.com/)是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。
|
||||
|
||||
接下来，我们就要引入和使用 Google Fonts（注意：如果 Google 在你的地区被限制访问，你可以选择跳过这个挑战）。
|
||||
|
||||
欲引入 Google Font，你需要从 Google Fonts 上复制字体的 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` 属性值中的 `FAMILY_NAME` 替换为 `Lobster` 来使用 `Lobster` 字体：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`.
|
||||
现在你可以通过将下面例子中的 FAMILY_NAMEFAMILY_NAME 替换为 `Lobster`，来使用 `Lobster` 字体：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`。
|
||||
|
||||
`GENERIC_NAME` 是可选的，它用来指明在其他字体不可用时的后备字体。我们会在下一个挑战中详细说明。
|
||||
GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。 我们会在下一个挑战中详细说明。
|
||||
|
||||
字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。例如，使用 `"Open Sans"` 字体需要添加引号，而 `Lobster` 则不需要。
|
||||
字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。 例如，使用 `"Open Sans"` 字体需要添加引号，而 `Lobster` 则不需要。
|
||||
|
||||
# --instructions--
|
||||
|
||||
引入 Lobster 字体，然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
给你的网页导入 `Lobster` 字体。 引入 Lobster 字体，然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -52,7 +52,7 @@ assert(
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(
|
||||
/\s*[^\.]h2\s*\{\s*font-family\:\s*(['"]?)Lobster\1\s*(;\s*\}|\})/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
|
||||
@ -9,19 +9,19 @@ dashedName: improve-compatibility-with-browser-fallbacks
|
||||
|
||||
# --description--
|
||||
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题会显得很重要。
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。 提供浏览器降级方案来避免潜在的问题会显得很重要。
|
||||
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。此时，浏览器会尝试使用其它值。但如果没有找到其它值，则会使用默认值，也就是没有背景色。
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。 举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。 此时，浏览器会尝试使用其它值。 但如果没有找到其它值，则会使用默认值，也就是没有背景色。
|
||||
|
||||
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
|
||||
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们使用了 CSS 变量来定义 `.red-box` 的背景色。现在，请在使用 CSS 变量前添加属性值为 red 的 `background` 声明来处理浏览器兼容性的问题。
|
||||
我们使用了 CSS 变量来定义 `.red-box` 的背景色。 现在，我们通过在现有的声明之前添加另一个 `background` 声明，并将它的值设置为 `red`，来提升浏览器的兼容性。
|
||||
|
||||
# --hints--
|
||||
|
||||
`.red-box` 应存在属性值为 `red` 的 `background` 声明，作为使用 CSS 变量的降级解决方案。
|
||||
`.red-box` 规则应在现有的 `background` 声明之前有一个 `background` 的备用属性，其值为 `red`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: inherit-css-variables
|
||||
|
||||
# --description--
|
||||
|
||||
当创建一个变量时，变量会在创建变量的选择器里可用。同时，在这个选择器的后代选择器里也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。
|
||||
当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。
|
||||
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。
|
||||
|
||||
`:root` 是一个<dfn>伪类</dfn>选择器，它是一个能够匹配文档根元素的选择器，通常指的是 `html` 元素。我们在 `:root` 里创建变量在全局都可用，即在任何选择器里都生效。
|
||||
`:root` 是一个<dfn>伪类</dfn>选择器，它是一个能够匹配文档根元素的选择器，通常指的是 `html` 元素。 我们在 `:root` 里创建变量在全局都可用，即在任何选择器里都生效。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `:root` 选择器里定义变量 `--penguin-belly` 并设置它的属性值为 `pink`。此时，你会发现变量被继承，所有使用该变量的子元素都会有粉色背景。
|
||||
在 `:root` 选择器里定义变量 `--penguin-belly` 并设置它的属性值为 `pink`。 此时，你会发现变量被继承，所有使用该变量的子元素都会有粉色背景。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -17,9 +17,9 @@ dashedName: inherit-styles-from-the-body-element
|
||||
|
||||
首先，创建一个内容文本为 `Hello World` 的 `h1` 元素。
|
||||
|
||||
接着，在 `body` 的 CSS 规则里面添加 `color: green;`，这会将页面内所有字体的颜色都设置为绿色。
|
||||
接着，在 `body` 的 CSS 规则里面添加 `color: green;`，这会将页面内所有字体的颜色都设置为 `green`。
|
||||
|
||||
最后，在 `body` 的 CSS 规则里面添加 `font-family: monospace;`，这会将页面内所有字体的 `font-family` 都设置为 `monospace`。
|
||||
最后，在 `body` 的 CSS 规则里面添加 `font-family: monospace;`，这会将 `body` 内所有元素的字体都设置为 `monospace`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ dashedName: make-circular-images-with-a-border-radius
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
值应为 `50%`。
|
||||
`border-radius` 的值应为 `50%`。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
|
||||
@ -9,45 +9,49 @@ dashedName: override-all-other-styles-by-using-important
|
||||
|
||||
# --description--
|
||||
|
||||
耶！我们刚刚又证明了行内样式会覆盖 `style` 标签里面所有的 CSS 声明。
|
||||
耶！ 我们刚刚又证明了行内样式会覆盖 `style` 标签里面所有的 CSS 声明。
|
||||
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们要覆盖 CSS 样式。
|
||||
不过， 还有一种方式可以覆盖重新 CSS 样式。 这是所有方法里面最强大的一个。 在此之前，我们要考虑清楚，为什么我们要覆盖 CSS 样式。
|
||||
|
||||
很多时候，你使用的 CSS 库中的样式会意外覆盖你的 CSS 样式。如果想保证你的 CSS 样式不受影响，就可以使用 `!important`。
|
||||
很多时候，你会使用 CSS 库， CSS 库中的样式会意外覆盖你的 CSS 样式。 如果想保证你的 CSS 样式不受影响，你可以使用 `!important`。
|
||||
|
||||
让我们回到 `pink-text` class 声明之中，它的颜色样式已被之后的 class 声明、id 声明以及行内样式所覆盖。
|
||||
让我们回到 `pink-text` 类声明。 `pink-text` 类的颜色样式已被之后的 class 声明、id 声明以及行内样式所覆盖。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `pink-text` class 的 `color` 声明里面使用 `!important` 关键字，以确保 `h1` 元素的字体颜色为粉色。类似这样：`color: red !important`
|
||||
给粉红文本元素的颜色声明添加关键词 `!important`，以确保 `h1` 元素为粉红色。
|
||||
|
||||
如下所示：
|
||||
|
||||
`color: red !important;`
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素应该包含 `pink-text` class。
|
||||
`h1` 元素的应有一个 class 为 `pink-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素应该包含 `blue-text` class。
|
||||
`h1` 元素应该包含 `color: white` 的行内样式声明。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素的 `id` 应为 `orange-text`。
|
||||
`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` 类应有 `!important` 关键词 ，以覆盖其他声明。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +59,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h1` 元素的字体颜色应为粉色。
|
||||
`h1` 元素应为粉红色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
|
||||
@ -9,21 +9,21 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
|
||||
# --description--
|
||||
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。 这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。 注意，如果我们在 `h1` 元素的类中，将 `blue-text` 放置在 `pink-text` 之前，它仍然会检查声明顺序，而不是使用顺序！
|
||||
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
但我们还没有完成。 其实还有其他方法可以覆盖 CSS 样式。 你还记得 id 属性吗？
|
||||
|
||||
通过给 `h1` 元素添加 id 属性，我们便可以此来覆盖 class 属性中定义的同名样式。
|
||||
我们来通过给 `h1` 元素添加 id 属性，覆盖 `pink-text` 和 `blue-text` 类，使 `h1` 元素变成橘色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `h1` 元素添加 id 属性，属性值为 `orange-text`。设置方式如下：
|
||||
给 `h1` 元素添加 `id` 属性，属性值为 `orange-text`。 设置方式如下：
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
|
||||
`h1` 元素应继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
在 `style` 元素中创建名为 `orange-text` 的 id 选择器。例子如下：
|
||||
在 `style` 元素中创建名为 `orange-text` 的 id 选择器。 例子如下：
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
@ -31,7 +31,7 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
}
|
||||
```
|
||||
|
||||
**注意：**无论在 `pink-text` class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器。
|
||||
**Note:** 无论在 pink-text class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -65,7 +65,7 @@ assert($('h1').length === 1);
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
不要在 `h1` 元素里面使用行内样式。
|
||||
不要在 `h1` 元素里面使用 `style` 属性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
|
||||
@ -11,13 +11,13 @@ dashedName: override-class-declarations-with-inline-styles
|
||||
|
||||
我们刚刚证明了，id 选择器无论在 `style` 标签的任何位置声明，都会覆盖 class 声明的样式。
|
||||
|
||||
其实还有其他方法可以覆盖 CSS 样式。你还记得行内样式吗？
|
||||
其实还有其他方法可以覆盖 CSS 样式。 你还记得行内样式吗？
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用行内样式尝试让 `h1` 的字体颜色变白。像这样使用：
|
||||
使用行内样式尝试让 `h1` 的字体颜色变白。 像这样使用：
|
||||
|
||||
`<h1 style="color: green">`
|
||||
`<h1 style="color: green;">`
|
||||
|
||||
`h1` 元素需继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
@ -35,7 +35,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素的 `id` 应为 `orange-text`。
|
||||
`h1` 元素的 id 应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: override-styles-in-subsequent-css
|
||||
|
||||
# --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` class，并确保它在 `pink-text` 下方声明。
|
||||
创建一个 `blue-text` class，将元素的颜色设置为蓝色。 将它放在 `pink-text` class 下面。
|
||||
|
||||
在含有 `pink-text` class 的 `h1` 元素里面，添加上 `blue-text` class。我们来看看到底是谁获胜。
|
||||
创建一个字体颜色为 `blue` 的 `blue-text` class，并确保它在 `pink-text` 下方声明。
|
||||
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
|
||||
@ -25,7 +25,7 @@ HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
|
||||
**注意：**HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
|
||||
但是，在 `<style>` 标签里面声明的 `class` 顺序十分重要，之后的声明会覆盖之前的声明。由于 `.blue-text` 在 `.pink-text` 的后面出现，所以 `.blue-text` 里的样式会覆盖 `.pink-text` 里的样式。
|
||||
但是，在 `<style>` 标签里面声明的 `class` 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。 由于 `.blue-text` 是在后面声明的，所以它的样式会覆盖 `.pink-text` 里的样式。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,13 +11,13 @@ dashedName: prioritize-one-style-over-another
|
||||
|
||||
有时候，HTML 元素的样式会跟其他样式发生冲突。
|
||||
|
||||
就像 `h1` 元素也不能同时设置 `green` 和 `pink` 两种颜色。
|
||||
就像 `h1` 元素不能同时设置绿色和粉色两种颜色。
|
||||
|
||||
让我们尝试创建一个字体颜色为 `pink` 的 class，并应于用其中一个元素中。猜一猜，它会覆盖 `body` 元素设置的 `color: green;` CSS 规则吗？
|
||||
让我们尝试创建一个字体颜色为粉色的 class，并应用于其中一个元素中。 猜一猜，它会 *覆盖* `body` 元素的 `color: green;` CSS 规则吗？
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个能将元素的字体颜色改为 `pink` 的 class，并命名为 `pink-text`。
|
||||
创建一个能将元素的字体颜色改为粉色的 class，并命名为 `pink-text`。
|
||||
|
||||
给 `h1` 元素添加 `pink-text` class。
|
||||
|
||||
@ -29,7 +29,7 @@ dashedName: prioritize-one-style-over-another
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`<style>` 标签应含有一个可以改变字体颜色的 `pink-text` class。
|
||||
`<style>` 标签应含有一个可以改变 `color` 的 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
|
||||
@ -101,9 +101,9 @@ assert(
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -11,9 +11,9 @@ dashedName: set-the-id-of-an-element
|
||||
|
||||
除了 class 属性，每一个 HTML 元素都有一个 `id` 属性。
|
||||
|
||||
使用 `id` 有几个好处：你可以通过 `id` 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面通过 `id` 来选择和操作元素。
|
||||
使用 `id` 有几个好处：你可以通过 `id` 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。
|
||||
|
||||
根据规范，`id` 属性应是唯一的。尽管浏览器并非必须执行这条规范，但 `id` 唯一是广泛认可的最佳实践。因此，请不要给多个元素设置相同的 `id`。
|
||||
根据规范，`id` 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 `id`。
|
||||
|
||||
设置 `h2` 元素的 id 为 `cat-photo-app` 的代码如下：
|
||||
|
||||
@ -137,9 +137,9 @@ assert($('form').attr('id') === 'cat-photo-form');
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -154,7 +154,7 @@ assert($('form').attr('id') === 'cat-photo-form');
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: size-your-images
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 的 `width` 属性可以控制元素的宽度。和设置文本字号一样，我们会以 `px`（像素）为单位来设置图片的宽度。
|
||||
CSS 的 `width` 属性可以控制元素的宽度。 和设置文本字号一样，我们会以 `px`（像素）为单位来设置图片的宽度。
|
||||
|
||||
例如，如果你想创建一个叫 `larger-image` 的 CSS `class` 来控制 HTML 元素的宽度为 500px，就可以这样写：
|
||||
例如，如果你想创建一个叫 `larger-image` 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -23,11 +23,11 @@ CSS 的 `width` 属性可以控制元素的宽度。和设置文本字号一样
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个叫 `smaller-image` 的 CSS `class`，并用它来设置图片宽度为 100px。
|
||||
创建一个叫 `smaller-image` 的 CSS class，并用它来设置图片宽度为 100px。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 元素的 `class` 应包含 `smaller-image`。
|
||||
`img` 元素应包含 `smaller-image` class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -39,7 +39,10 @@ assert(
|
||||
图片宽度应为 100px。
|
||||
|
||||
```js
|
||||
assert($('img').width() === 100);
|
||||
assert(
|
||||
$('img').width() < 200 &&
|
||||
code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -122,9 +125,9 @@ assert($('img').width() === 100);
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -139,7 +142,7 @@ assert($('img').width() === 100);
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: specify-how-fonts-should-degrade
|
||||
|
||||
# --description--
|
||||
|
||||
所有浏览器都有几种默认字体，包括`monospace`、`serif` 和 `sans-serif`。
|
||||
所有浏览器都有几种默认字体， 包括 `monospace`、`serif` 和 `sans-serif`。
|
||||
|
||||
在字体不可用的时候，你可以告诉浏览器通过“降级”去使用其他字体。
|
||||
|
||||
@ -21,19 +21,19 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
通用字体名不区分大小写。同时，也不需要使用引号，因为它们是 CSS 中的关键字。
|
||||
通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。
|
||||
|
||||
# --instructions--
|
||||
|
||||
首先，添加 `monospace` 字体到 `h2` 元素里，它现在拥有 `Lobster` 和 `monospace` 两种字体。
|
||||
|
||||
在上一个挑战里，你已经通过 `link` 标签从谷歌字体库引入了 `Lobster` 字体。现在让我们使用之前学习的 HTML 注释，将 `Lobster` 字体的引入注释掉，这样一来，引入的 `Lobster` 字体会失效。此时，你会发现 `h2` 元素降级到了 `monospace` 字体。
|
||||
在上一个挑战里，你已经通过 `link` 标签从谷歌字体库引入了 `Lobster` 字体。 现在让我们使用之前学习的 HTML 注释，将 `Lobster` 字体的引入注释掉，这样一来，这个引入的字体就会失效。 此时，你会发现 `h2` 元素降级到了 `monospace` 字体。
|
||||
|
||||
**注意：**如果你的电脑里已经安装了 `Lobster` 字体，你就看不到这个降级过程，因为浏览器还是会在你的电脑中找到该字体。
|
||||
**Note:** 如果你的电脑里已经安装了 `Lobster` 字体，你就看不到这个降级过程，因为浏览器会在你的电脑中找到该字体。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素的字体应设置为 `Lobster`。
|
||||
h2 元素的字体应设置为 `Lobster`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
当 `Lobster` 字体失效时，`h2` 元素应该降级使用 `monospace` 字体。
|
||||
当 `Lobster` 字体失效时，h2 元素应该降级使用 `monospace` 字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -141,9 +141,9 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -158,7 +158,7 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: style-multiple-elements-with-a-css-class
|
||||
|
||||
# --description--
|
||||
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 `red-text` class 添加到第一个 `p` 元素上。
|
||||
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。 你可以将 `red-text` class 添加到第一个 `p` 元素上。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -102,9 +102,9 @@ assert($('p:eq(0)').hasClass('red-text'));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -119,7 +119,7 @@ assert($('p:eq(0)').hasClass('red-text'));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -15,7 +15,7 @@ dashedName: style-the-html-body-element
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们可以通过设置 `background-color` 的属性值为 `black`，来证明 `body` 元素的存在。
|
||||
我们可以通过设置 `background-color` 的属性值为 黑色，来证明 `body` 元素的存在。
|
||||
|
||||
请将以下代码添加到 `style` 标签里面：
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: understand-absolute-versus-relative-units
|
||||
|
||||
# --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` 值，它的值会跟随父元素的 `font-size` 值来改变。
|
||||
|
||||
**注意：**有些单位长度选项是相对视窗大小来改变值的，这种设定符合响应式 web 的设计原则。
|
||||
**Note:** 有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
class 为 `red-box` 的元素的 `padding` 属性值应为 `1.5em`。
|
||||
class 为 `red-box` 的元素的 `padding` 属性值应为 1.5em。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: use-a-css-class-to-style-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 的 `class` 具有可重用性，可应用于各种 HTML 元素。
|
||||
CSS 的 class 具有可重用性，可应用于各种 HTML 元素。
|
||||
|
||||
一个 CSS `class` 声明示例如下所示：
|
||||
一个 CSS class 声明示例如下所示：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -21,15 +21,13 @@ 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` 选择器。 你可以将一个 class 添加到一个 HTML 元素里，如下所示：`<h2 class="blue-text">CatPhotoApp</h2>`。注意在 CSS `style` 里，class 名称以一个句点开始。 而在 HTML 元素的 class 属性中，名称前面没有句点。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `style` 样式声明里，把 `h2` 元素选择器改为 `.red-text` class 选择器，同时将颜色 `blue` 改为 `red`。
|
||||
|
||||
在 `h2` 元素里，添加一个 `class`，值为 `'red-text'`。
|
||||
把 `h2` 元素的 `class` 属性值设置为 `'red-text'`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -39,13 +37,13 @@ CSS 的 `class` 具有可重用性，可应用于各种 HTML 元素。
|
||||
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 选择器，且它的颜色应为红色。
|
||||
样式表应该声明一个 `red-text` class，颜色为 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
@ -113,9 +111,9 @@ assert($('h2').attr('style') === undefined);
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -130,7 +128,7 @@ assert($('h2').attr('style') === undefined);
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -15,9 +15,7 @@ dashedName: use-a-custom-css-variable
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
因为引用了 `--penguin-skin` 变量的值，使用了这个样式的元素背景颜色会是灰色。
|
||||
|
||||
**注意：**如果变量名不匹配，则样式不会生效。
|
||||
因为引用了 `--penguin-skin` 变量的值，使用了这个样式的元素背景颜色会是灰色。 请注意，除非变量名称完全匹配，否则将不会应用样式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -25,7 +23,7 @@ background: var(--penguin-skin);
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `penguin-top` 的 `background` 属性值应使用变量 `--penguin-skin` 的值。
|
||||
将 `--penguin-skin` 的值应用到 `penguin-top` class 的 `background` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -15,7 +15,7 @@ CSS 变量可以简化媒体查询的定义方式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `media query`（媒体查询）声明的 `:root` 选择器里，重定义 `--penguin-size` 的值为 200px，且重定义 `--penguin-skin` 的值为 `black`，然后通过缩放页面来查看它们是否生效。
|
||||
在 `media query`（媒体查询）声明的 `:root` 选择器里，重定义 `--penguin-size` 的值为 `200px`。 同时，重新定义 `--penguin-skin` 的值为 `black`， 然后通过缩放页面来查看它们是否生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,63 +9,63 @@ dashedName: use-abbreviated-hex-code
|
||||
|
||||
# --description--
|
||||
|
||||
许多人对超过 1600 万种颜色感到不知所措，并且很难记住十六进制编码。幸运的是，它也提供缩写的方法。
|
||||
许多人对超过 1600 万种颜色感到不知所措， 并且很难记住十六进制编码。 幸运的是，你可以使用缩写形式。
|
||||
|
||||
例如，红色的 `#FF0000` 十六进制编码可以缩写成 `#F00`。在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
|
||||
例如，红色的 `#FF0000` 十六进制编码可以缩写成 `#F00`。 在这种缩写形式里，三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
|
||||
|
||||
这样，颜色的数量减少到了大约 4000 种。且在浏览器里 `#FF0000` 和 `#F00` 是完全相同的颜色。
|
||||
这样，颜色的数量减少到了大约 4000 种。 且在浏览器里 `#FF0000` 和 `#F00` 是完全相同的颜色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
接下来，使用缩写的十六进制编码给元素设置正确的颜色。
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
<table class='table table-striped'><tbody><tr><th>颜色</th><th>十六进制编码缩写形式</th></tr><tr><td>蓝绿色</td><td><code>#0FF</code></td></tr><tr><td>绿色</td><td><code>#0F0</code></td></tr><tr><td>红色</td><td><code>#F00</code></td></tr><tr><td>紫红色</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色应该为红色。
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色 `color` 应该为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
应使用红色的十六进制编码的缩写形式，不应使用 `#FF0000`。
|
||||
应使用红色的 `hex code` 缩写形式，不应使用 `#FF0000`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am green!` 的 `h1` 元素的字体颜色应该为绿色。
|
||||
文本内容为 `I am green!` 的 `h1` 元素的字体颜色 `color` 应该为绿色。
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
应使用绿色的十六进制编码的缩写形式，不应使用 `#00FF00`。
|
||||
应使用绿色的 `hex code` 缩写形式，不应使用 `#00FF00`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am cyan!` 的 `h1` 元素的字体颜色应该为蓝绿色。
|
||||
文本内容为 `I am cyan!` 的 `h1` 元素的字体颜色 `color` 应该为蓝绿色。
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
应使用蓝绿色的十六进制编码的缩写形式，不应使用 `#00FFFF`。
|
||||
应使用蓝绿色的 `hex code` 缩写形式，不应使用 `#00FFFF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am fuchsia!` 的 `h1` 元素的字体颜色应该为紫红色。
|
||||
文本内容为 `I am fuchsia!` 的 `h1` 元素的字体颜色 `color` 应该为紫红色。
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
应使用紫红色的十六进制编码的缩写形式，不应使用 `#FF00FF`。
|
||||
应使用紫红色的 `hex code` 缩写形式，不应使用 `#FF00FF`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-an-id-attribute-to-style-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
通过 `id` 属性，你可以做一些很酷的事情。比如像 class 一样，你可以使用 CSS 来设置他们的样式。
|
||||
通过 `id` 属性，你可以做一些很酷的事情。就像 class 一样，你可以使用 CSS 来设置他们的样式。
|
||||
|
||||
不过，`id` 不可以重复，它只能作用于一个元素上。同时，在 CSS 里，`id` 的优先级高于 `class`。如果一个元素同时应用了 `class` 和 `id`，且两者设置的样式有冲突，会优先应用 `id` 中所设置的样式。
|
||||
不过，`id` 不可以重复，它只能作用于一个元素上。 如果一个元素同时应用了 class 和 `id`，且两者设置的样式有冲突，会优先应用 `id` 中所设置的样式。
|
||||
|
||||
选择 `id` 为 `cat-photo-element` 的元素，并设置它的背景样式为 `green`，可以在 `style` 标签里这样写：
|
||||
选择 `id` 为 `cat-photo-element` 的元素，并设置它的背景颜色为绿色。 可以在 `style` 标签里这样写：
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
@ -21,11 +21,11 @@ dashedName: use-an-id-attribute-to-style-an-element
|
||||
}
|
||||
```
|
||||
|
||||
注意在 `style` 标签里，声明 class 的时候必须在名字前插入 `.` 符号。同样，在声明 id 的时候，也必须在名字前插入 `#` 符号。
|
||||
注意在 `style` 标签里，声明 class 的时候必须在名字前插入 `.` 符号。 同样，在声明 id 的时候，也必须在名字前插入 `#` 符号。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 id 为 `cat-photo-form` 的 `form` 表单的背景颜色设置为 `green`。
|
||||
请将 `id` 为 `cat-photo-form` 的表单的背景颜色设置为绿色。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -35,7 +35,7 @@ dashedName: use-an-id-attribute-to-style-an-element
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
`form` 元素应含有 `background-color` CSS 属性且其属性值应为 `green`。
|
||||
`form` 元素应含有 `background-color` 属性，颜色为绿色。
|
||||
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
@ -166,9 +166,9 @@ assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -183,7 +183,7 @@ assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-attribute-selectors-to-style-elements
|
||||
|
||||
# --description--
|
||||
|
||||
我们已经通过设置元素的 `id` 和 `class` 来显示想要的样式。这就是 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
|
||||
我们已经通过设置元素的 `id` 和 `class` 来显示想要的样式。 这就是 ID 选择器和 Class 选择器。 另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
|
||||
|
||||
让我们再次通过猫咪图片项目来练习 CSS 选择器。
|
||||
|
||||
在这个挑战里，我们需要使用 `[attr=value]` 属性选择器来修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有 `type` 为 `radio` 的元素的外边距。
|
||||
在这个挑战里，我们需要使用 `[attr=value]` 属性选择器来修改 CatPhotoApp 中复选框的样式。 这个选择器使用特定的属性值来匹配和设置元素样式。 例如，下面的代码会改变所有 `type` 为 `radio` 的元素的外边距。
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
@ -32,7 +32,7 @@ dashedName: use-attribute-selectors-to-style-elements
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<style>[\s\S]*?\[type=("|')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
|
||||
/<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
@ -179,9 +179,9 @@ assert(
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -196,7 +196,7 @@ assert(
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: 使用顺时针方向指定元素的外边距
|
||||
title: 使用顺时针标记指定元素的外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
@ -11,37 +11,37 @@ dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
|
||||
让我们再试一次，不过这一次轮到 `margin` 了。
|
||||
|
||||
同样，每个方向的外边距值可以在 `margin` 属性里面汇总声明，而无需分别通过 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 分别声明，代码如下：
|
||||
同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 分别声明，比如：
|
||||
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
|
||||
这四个值按顺时针排序：上、右、下、左。汇总声明的效果与为每一个方向单独声明 `margin` 的效果是一致的。
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照顺时针顺序，将 class 为 "blue-box" 元素的上外边距以及左外边距设置为 `40px`，右外边距和下外边距设置为 `20px`。
|
||||
按照顺时针顺序，将 class 为 `blue-box` 的元素的上外边距以及左外边距设置为 `40px`，右外边距和下外边距设置为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue-box` 的元素的上外边距应为 `40px`。
|
||||
class 为 `blue-box` 的元素的上外边距 `margin` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的右外边距应为 `20px`。
|
||||
class 为 `blue-box` 的元素的右外边距 `margin` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的下外边距应为 `20px`。
|
||||
class 为 `blue-box` 的元素的下外边距 `margin` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的左外边距应为 `40px`。
|
||||
class 为 `blue-box` 的元素的左外边距 `margin` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
@ -50,10 +50,9 @@ assert($('.blue-box').css('margin-left') === '40px');
|
||||
应沿顺时针方向设置 `blue-box` 的外边距。
|
||||
|
||||
```js
|
||||
const removeCssComments = (str) => str.replace(/\/\*[\s\S]+?\*\//g, '');
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
removeCssComments($('style').text())
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: 使用顺时针方向指定元素的内边距
|
||||
title: 使用顺时针标记指定元素的内边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
@ -9,49 +9,48 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
如果不想每次都要分别声明 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 属性，可以把它们汇总在 `padding` 属性里面一并声明，像是这样：
|
||||
如果不想每次都要分别声明 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 属性，可以把它们汇总在一行里面一并声明，像是这样：
|
||||
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的 `padding`。
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。
|
||||
|
||||
# --instructions--
|
||||
|
||||
按照顺时针顺序，将 class 为 "blue-box" 的元素的上内边距以及左内边距设置为 `40px`，右内边距和下内边距设置为 `20px`。
|
||||
按照顺时针顺序，把 `.blue-box` class 的上内边距以及左内边距 `padding` 设置为 `40px`，右内边距和下内边距则设置为`20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue-box` 的元素的上内边距应为 `40px`。
|
||||
class 为 `blue-box` 的元素的上内边距 `padding` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的右内边距应为 `20px`。
|
||||
class 为 `blue-box` 的元素的右内边距 `padding` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的下内边距应为 `20px`。
|
||||
class 为 `blue-box` 的元素的下内边距 `padding` 应为 `20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
class 为 `blue-box` 的元素的左内边距应为 `20px`。
|
||||
class 为 `blue-box` 的元素的左内边距 `padding` 应为 `40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
你应该按照顺时针排序，汇总声明的方式来设置 `blue-box` 的 `padding` 值。
|
||||
应该按照顺时针排序，汇总声明的方式来设置 `blue-box` 的内边距。
|
||||
|
||||
```js
|
||||
const removeCssComments = (str) => str.replace(/\/\*[\s\S]+?\*\//g, '');
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
removeCssComments($('style').text())
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-css-selectors-to-style-elements
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 中，页面样式的属性有几百个，但常用的不过几十个。
|
||||
在 CSS 中，页面样式的属性有几百个，你可以用来改变元素在页面上的外观。
|
||||
|
||||
通过行内样式 `<h2 style="color: red;">CatPhotoApp</h2>`，就可以将 `h2` 元素的颜色设置为红色。
|
||||
当你输入 `<h2 style="color: red;">CatPhotoApp</h2>`，就可以用行内 CSS 设置 `h2` 元素的样式。
|
||||
|
||||
当我们只需要改变一个元素的某个样式时，行内样式最简单直观。但当我们需要同时改变元素的很多样式时，使用样式表往往是一个更好的选择。
|
||||
这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。
|
||||
|
||||
在代码的顶部，创建一个 `style` 声明区域，如下方所示：
|
||||
|
||||
@ -22,7 +22,7 @@ dashedName: use-css-selectors-to-style-elements
|
||||
</style>
|
||||
```
|
||||
|
||||
在 `style` 样式声明区域内，可以创建一个`元素选择器`，这里的规则将会应用到所有 `h2` 元素。如果想让所有 `h2` 元素在变成红色，可以添加下方的样式规则：
|
||||
在样式声明区域内，可以为所有 `h2` 元素创建一个 <dfn>CSS selector</dfn>。 如果想让所有 `h2` 元素在变成红色，可以添加下方的样式规则：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -32,15 +32,15 @@ dashedName: use-css-selectors-to-style-elements
|
||||
</style>
|
||||
```
|
||||
|
||||
**注意：**在每个元素的样式声明区域里，左右花括号 `{` 和 `}` 一定要匹配。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
请注意，每个元素的样式规则都应该有开始和结束大括号（`{` 和 `}`）。 还需要确保元素的样式定义在开始和结束样式标签之间。 你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请删除 `h2` 元素的行内样式，然后创建 `style` 样式声明区域，最后添加 CSS 样式规则使 `h2` 元素变为蓝色。
|
||||
请删除 `h2` 元素的行内样式，然后创建 `style` 样式声明区域， 最后添加 CSS 样式规则使所有 `h2` 元素变为蓝色。
|
||||
|
||||
# --hints--
|
||||
|
||||
应删除 `h2` 元素的行内样式。
|
||||
应删除 `h2` 元素的 `style` 样式。
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-hex-code-for-specific-colors
|
||||
|
||||
# --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)找到更多的相关信息。
|
||||
日常生活中，我们使用的计数方法一般是 <dfn>decimals</dfn>，或十进制，即使用数字 0 到 9 来表示。 而 <dfn>Hexadecimals</dfn>（或 <dfn>hex</dfn>）基于 16 位数字， 它包括 16 种不同字符。 像十进制一样，0-9 的符号代表 0 到 9 的值。 然后，A、B、C、D、E、F 代表 10 至 15 的值。 总的来说，0 到 F 在十六进制里代表数字，总共有 16 个值。 你可以在这里访问更多[关于十六进制的信息](https://en.wikipedia.org/wiki/Hexadecimal)。
|
||||
|
||||
在 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` 代表黑色，同时也是最小的值。 你可以在 [RGB color system here](https://en.wikipedia.org/wiki/RGB_color_model) 找到更多的相关信息。
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -23,7 +23,7 @@ body {
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用 `#000000` 十六进制编码来设置 `body` 元素的背景颜色。
|
||||
将 `body` 元素的背景颜色由 `black` 改为它对应的十六进制编码 `#000000`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -33,7 +33,7 @@ body {
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
应使用 十六进制编码`来替换 `black\` 的写法。
|
||||
应使用 `hex code` 来替换 `black`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,67 +9,67 @@ dashedName: use-hex-code-to-mix-colors
|
||||
|
||||
# --description--
|
||||
|
||||
回顾一下，`hex` 使用 6 个十六进制编码来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
|
||||
回顾一下，十六进制编码使用 6 个十六进制字符来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
|
||||
|
||||
通过三原色，我们可以创建 1600 万种不同颜色。
|
||||
通过三原色（红、绿、蓝），我们可以创建 1600 万种不同颜色。
|
||||
|
||||
例如，橘色是纯红色混合一些绿色而成，其中没有蓝色的参与。在十六进制编码里面，它可以写成 `#FFA500`。
|
||||
例如，橘色是纯红色混合一些绿色而成，其中没有蓝色。 在十六进制编码里面，它可以写成 `#FFA500`。
|
||||
|
||||
`0` 是十六进制里面最小的数字，表示没有颜色。
|
||||
|
||||
`F` 是十六进制里面最大的数字，表示着最高的亮度。
|
||||
`F` 是十六进制里面最大的数字，有最高的亮度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `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>
|
||||
<table class='table table-striped'><tbody><tr><th>颜色</th><th>十六进制编码</th></tr><tr><td>道奇蓝</td><td><code>#1E90FF</code></td></tr><tr><td>绿色</td><td><code>#00FF00</code></td></tr><tr><td>橙色</td><td><code>#FFA500</code></td></tr><tr><td>红色</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色应该为红色。
|
||||
文本内容为 `I am red!` 的 `h1` 元素的 `color` 值应该为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
应使用`十六进制编码`替换 `red` 关键词。
|
||||
应使用 `hex code` 替换 `red`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am green!` 的 `h1` 元素的字体颜色应该为绿色。
|
||||
文本内容为 `I am green!` 的 `h1` 元素的 `color` 值应该为绿色。
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
应使用`十六进制编码`替换 `green` 关键词。
|
||||
应使用 `hex code` 替换 `green` 关键词。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am dodger blue!` 的 `h1` 元素的字体颜色应该为道奇蓝色。
|
||||
文本内容为 `I am dodger blue!` 的 `h1` 元素的 `color` 值应该为道奇蓝色。
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
应使用`十六进制编码`替换 `dodgerblue` 关键词。
|
||||
应使用 `hex code` 替换 `dodgerblue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
文本内容为 `I am orange!` 的 `h1` 元素的字体颜色应该为橘色。
|
||||
文本内容为 `I am orange!` 的 `h1` 元素的 `color` 值应该为橘色。
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
应使用`十六进制编码`替换 `orange` 关键词。
|
||||
应使用 `hex code` 替换 `orange`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
|
||||
@ -15,17 +15,17 @@ dashedName: use-rgb-to-mix-colors
|
||||
|
||||
将 `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>
|
||||
<table class='table table-striped'><tbody><tr><th>颜色</th><th>RGB</th></tr><tr><td>蓝色</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>红色</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>淡紫色</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>赭黄色</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
文本内容为 `I am red!` 的 `h1` 元素的字体颜色应为红色。
|
||||
文本内容为 `I am red!` 的 `h1` 元素的 `color` 值应为红色。
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
红色应使用 `RGB` 值来表示。
|
||||
红色应使用 `rgb` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为 `I am orchid!` 的 `h1` 元素的字体颜色应为兰紫色。
|
||||
文本内容为 `I am orchid!` 的 `h1` 元素的 `color` 应为淡紫色。
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
兰紫色应使用 `RGB` 值来表示。
|
||||
淡紫色应使用 `rgb` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,13 +51,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为 `I am blue!` 的 `h1` 元素的字体颜色应为蓝色。
|
||||
文本内容为 `I am blue!` 的 `h1` 元素的 `color` 应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
蓝色应使用 `RGB` 值来表示。
|
||||
蓝色应使用 `rgb` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,13 +67,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
文本内容为 `I am sienna!` 的 `h1` 元素的字体颜色应为黄土赭色。
|
||||
文本内容为 `I am sienna!` 的 `h1` 元素的 `color` 应为赭黄色。
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
黄土赭色应使用 `RGB` 值来表示。
|
||||
赭黄色应使用 `rgb` 值来表示。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,17 +11,17 @@ dashedName: use-rgb-values-to-color-elements
|
||||
|
||||
`RGB` 值是在 CSS 中表示颜色的另一种方法。
|
||||
|
||||
黑色的 RGB 值声明如下：
|
||||
黑色的 `RGB` 值：
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
|
||||
白色的 RGB 值声明如下：
|
||||
白色的 `RGB` 值：
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
|
||||
RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
|
||||
RGB 值与我们之前学到的十六进制编码不同。`RGB` 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
|
||||
|
||||
如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 \* 16（即 256）种可能。而在 RGB 表示方式中，每个颜色的数值范围是 0 到 255，因此也有 256 种可能。
|
||||
如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 \* 16（即 256）种可能。 所以，`RGB` 从零开始计算，与十六进制代码的值的数量完全相同。
|
||||
|
||||
下面是通过使用 RGB 值设置背景颜色为橘色的例子：
|
||||
|
||||
@ -37,13 +37,13 @@ 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