gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,learn): processed translations (#45504)

Browse Source
This commit is contained in:
camperbot
2022-03-23 19:52:04 +05:30
committed by GitHub
parent dbb7f309a7
commit 3add6077ad
162 changed files with 2383 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
View File

@@ -11,13 +11,13 @@ dashedName: add-a-box-shadow-to-a-card-like-element
`box-shadow` 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
`box-shadow` 属性的阴影依次由下面这些值描述：
`box-shadow` 属性按顺序采用以下值：
<ul>
<li><code>offset-x</code> 阴影的水平偏移量；</li>
<li><code>offset-y</code> 阴影的垂直偏移量；</li>
<li><code>blur-radius</code> 模糊半径；</li>
<li><code>spread-radius</code> 阴影扩展半径；</li>
<li><code>offset-x</code> （阴影的水平偏移量），</li>
<li><code>offset-y</code> （阴影的垂直偏移量），</li>
<li><code>blur-radius</code></li>
<li><code>spread-radius</code></li>
<li><code>color</code></li>
</ul>

8
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
View File

@@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
# --description--
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 `hsl()` 做为颜色的描述方式。
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了`hsl()`函数，作为直接说明这些特征来挑选颜色的替代方法。
**色相** 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
@@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color
# --hints--
应使用 `hsl()` 属性来设置颜色为 `green`。
应使用 `hsl()` 函数来设置颜色为 `green`。
```js
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
应使用 `hsl()` 属性来设置颜色为 `cyan`。
应使用 `hsl()` 函数来设置颜色为 `cyan`。
```js
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
应使用 `hsl()` 属性来设置颜色为 `blue`。
应使用 `hsl()` 函数来设置颜色为 `blue`。
```js
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));

6
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
View File

@@ -15,11 +15,11 @@ dashedName: create-a-graphic-using-css
为了创建一个圆形的对象，`border-radius` 应该被设置成 50%。
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。 其中 `blur-radius` 和 `spread-radius` 是可选的。
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和 `color` 值。 其中 `blur-radius` 和 `spread-radius` 是可选的。
# --instructions--
把编辑器里的正方形元素变成新月形状。 首先，把 `background-color` 改为 `transparent`，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。 最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。
把编辑器里的正方形元素变成新月形状。 首先，把 `background-color` 改为 `transparent`，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。 最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，`color` 为 `blue`。
# --hints--
@@ -35,7 +35,7 @@ assert(code.match(/background-color:\s*?transparent;/gi));
assert(code.match(/border-radius:\s*?50%;/gi));
```
更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。
更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，`color` 为 `blue`。
```js
assert(

10
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
View File

@@ -28,15 +28,15 @@ dashedName: create-a-more-complex-shape-using-css-and-html
# --instructions--
把屏幕里的元素变成心形。 在 `heart::after` 选择器里，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
把屏幕里的元素变成心形。 在 `.heart::after` 选择器里，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
接下来，用类选择器选取 class 为 `heart`（只是 `heart`）的元素，为它添加 `transform` 属性。 使用 `rotate()` 函数并设置角度为 -45 度。
最后，在 `heart::before` 选择器里面，设置 `content` 属性值为空字符串。
最后，在 `,heart::before` 选择器里面，设置 `content` 属性值为空字符串。
# --hints--
`heart::after` 选择器的 `background-color` 属性值应为 `pink`。
`.heart::after` 选择器的 `background-color` 属性值应为 `pink`。
```js
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
@@ -45,7 +45,7 @@ assert(
);
```
`heart::after` 伪元素的 `border-radius` 属性值应为 50%。
`.heart::after` 伪元素的 `border-radius` 属性值应为 50%。
```js
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
@@ -57,7 +57,7 @@ class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
```
`heart::before` 伪元素的 `content` 应为空字符串。
`.heart::before` 伪元素的 `content` 应为空字符串。
```js
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
View File

@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
前面的关卡涉及了使用 `ease-out` 预定义值描述了动画以高速开始低速结束。 右边的动画展示了 `ease-out` 效果（蓝色的元素）和 `linear` 效果（红色的元素）的区别。 同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是一个使用值来模仿 `ease-out` 样式的 Bezier 曲线示例：
```css
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

2
curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
View File

@@ -47,7 +47,7 @@ assert(!code.match(/90deg/gi));
assert(code.match(/yellow\s+?0(px)?/gi));
```
40px 处的一个渐变颜色应该是 `yellow`。
40 像素处的第一个色标应该是 `yellow`。
```js
assert(code.match(/yellow\s+?40px/gi));

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
View File

@@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
当你在 `:root` 里创建变量时，这些变量的作用域是整个页面。
如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。
然后，你可以通过在一个特定的选择器中再次设置这些变量来重写这些变量。
# --instructions--
@@ -27,7 +27,7 @@ assert(
);
```
`penguin` class 不应该包含 `background-color` 属性。
`penguin` 类不应包含 `background-color` 属性。
```js
assert(

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
View File

@@ -15,7 +15,7 @@ dashedName: create-a-custom-css-variable
--penguin-skin: gray;
```
这样就会创建一个 `--penguin-skin` 变量，它的值为 `gray`。 现在，其他元素可通过该变量来使元素变成灰色。
这样就会创建一个 `--penguin-skin` 变量，它的值为 `gray`。 现在你可以在你的 CSS 中的其他地方使用这个变量来改变其他属性的值为灰色。
# --instructions--

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
View File

@@ -77,7 +77,7 @@ assert(
);
```
`h1` 元素的字体颜色应继承 `body` 元素所设置的绿色。
`h1` 元素应该继承 `body` 的 `green` 颜色属性。
```js
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
View File

@@ -15,7 +15,7 @@ CSS 变量可以简化媒体查询的定义方式。
# --instructions--
在 `media query`（媒体查询）声明的 `:root` 选择器里，重定义 `--penguin-size` 的值为 `200px`。 同时，重新定义 `--penguin-skin` 的值为 `black`， 然后通过缩放页面来查看它们是否生效。
在媒体查询声明的 `:root` 选择器里，重定义 `--penguin-size` 的值为 `200px`。 同时，重新定义 `--penguin-skin` 的值为 `black`， 然后通过缩放页面来查看它们是否生效。
# --hints--

8
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
View File

@@ -29,7 +29,7 @@ dashedName: use-abbreviated-hex-code
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
```
应使用红色的 `hex code` 缩写形式，不应使用 `#FF0000`。
应使用红色的缩写十六进制代码，而不是十六进制代码 `#FF0000`。
```js
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
@@ -41,7 +41,7 @@ assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
```
应使用绿色的 `hex code` 缩写形式，不应使用 `#00FF00`。
应使用绿色的缩写十六进制代码，而不是十六进制代码 `#00FF00`。
```js
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
@@ -53,7 +53,7 @@ assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
```
应使用蓝绿色的 `hex code` 缩写形式，不应使用 `#00FFFF`。
应使用青色的简写十六进制代码，而不是十六进制代码 `#00FFFF`。
```js
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
@@ -65,7 +65,7 @@ assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
```
应使用紫红色的 `hex code` 缩写形式，不应使用 `#FF00FF`。
应使用紫红色的简写十六进制代码，而不是十六进制代码 `#FF00FF`。
```js
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));

4
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
View File

@@ -27,13 +27,13 @@ body {
# --hints--
`body` 元素的背景颜色应为黑色。
`body` 元素的 `background-color` 应为黑色。
```js
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
```
应使用 `hex code` 来替换 `black`。
应该使用黑色的十六进制代码，而不是 `black` 这个词。
```js
assert(

2
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
View File

@@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
用 `checked` 属性把第一个复选框和单选按钮都设置为默认选中。
在一个 input 元素里面添加 `checked` 这个词，即可实现。 例如:
为此，只需将单词 `checked` 添加到 `input` 元素的内部。 例如:
```html
<input type="radio" name="test-name" checked>

2
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
View File

@@ -43,7 +43,7 @@ assert($('p').length === 0);
assert(code.match(/[^fc]-->/g).length > 1);
```
不要更改 `h1` 元素、`h2` 元素、`p` 元素的顺序。
不要更改 `h1`、`h2`、`p` 元素的顺序。
```js
assert(

2
curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
View File

@@ -9,7 +9,7 @@ dashedName: inform-with-the-paragraph-element
# --description--
`p` 元素是网站上段落文本使用的元素。 `p` 是“paragraph（段落）”的缩写。
`p` 元素是网站上段落文本的首选元素。 `p` 是“paragraph（段落）”的缩写。
你可以像这样创建一个段落：

2
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
View File

@@ -17,7 +17,7 @@ flex 子元素有时不能充满整个 flex 容器， 所以我们经常需要
对于如何沿主轴线排放 flex 项目，有几种选择。 很常用的一种是 `justify-content: center;`：即 flex 子元素在 flex 容器中居中排列。 其他选择包括：
<ul><li><code>flex-start</code>：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 <code>justify-content</code> 的值，那么这就是默认值。</li><li><code>flex-end</code>：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。</li><li><code>space-between</code>：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。</li><li><code>space-around</code>：与<code>space-between</code>相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。</li><li><code>space-evenly</code>：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。</li></ul>
<ul><li><code>flex-start</code>：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 <code>justify-content</code> 的值，那么这就是默认值。</li><li><code>flex-end</code>：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。</li><li><code>space-between</code>：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。</li><li><code>space-around</code>：与<code>space-between</code>相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。</li><li><code>space-evenly</code>：在 flex 项目之间均匀分配空间，在 flex 容器的任一端都有一个完整的空间。</li></ul>
# --instructions--

2
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
View File

@@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
# --description--
CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。
CSS flexbox 具有将 flex 容器拆分为多行（或列）的功能。 默认情况下，flex 容器会调整项目大小，把它们都塞到一起。 对于行来说，所有项目都会在一条直线上。
不过，使用 `flex-wrap` 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。

2
curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
View File

@@ -17,7 +17,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
}
```
这样，class 为 `item1` 的网格项就被放到了 `header` 区域里。 在这个示例中，网格项将占用第一行整行，因为这一整行都被命名为标题区域。
这样，class 为 `item1` 的网格项就被放到了 `header` 区域里。 在这种情况下，该项目将使用整个顶行，因为该整行被命名为 `header` 区域。
# --instructions--

2
curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
View File

@@ -31,7 +31,7 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
# --hints--
class 为 `container` 的元素应具有 `grid-template-columns` 属性且属性值应为 `1fr 100px 2fr`。
`container` 类应该有一个 `grid-template-columns` 属性，该属性具有以下宽度的三列：`1fr`、`100px` 和 `2fr`。
```js
assert(