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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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-traditional/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(