Skip to content

Translate basic-css #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
focus-kfc wants to merge 13 commits into
base: translate
Choose a base branch
from
+169 −169
Open

Translate basic-css #49

Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
87f8b09
add: 完成BasicCSS的前4个教程。
Jul 23, 2018
6162385
alter: 修改调整翻译中文。
Jul 23, 2018
b2979fa
add: 继续翻译3小节。
Jul 24, 2018
f62b7da
fixed: 修复语义，以及翻译格式。
Jul 26, 2018
571575a
update: 替换空格&修改css class翻译。
Jul 27, 2018
1ac9cbf
remove extra whitespace
huluoyang Jul 28, 2018
4c6fc35
add: 翻译一部分字体教程。
Jul 31, 2018
dd439c2
add: 添加三个翻译区段。
Aug 1, 2018
f6f7155
add: 继续翻译10个小节。
Aug 6, 2018
2e77ff4
add: 继续翻译2小节，进度22/43。
Aug 7, 2018
4ffe17b
fixed: 修复误删除的“{”
Aug 7, 2018
ed795de
Merge branch 'translate' into translate
focus-kfc Aug 7, 2018
5c4d488
fixed: 修正。
Aug 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 61 additions & 65 deletions 01-responsive-web-design/basic-css.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,24 @@
"id": "bad87fee1348bd9aedf08803",
"title": "Change the Color of Text",
"description": [
"Now let's change the color of some of our text.",
"We can do this by changing the <code>style</code> of your <code>h2</code> element.",
"The property that is responsible for the color of an element's text is the <code>color</code> style property.",
"Here's how you would set your <code>h2</code> element's text color to blue:",
"现在来让我们修改一下文本的颜色。",
"我们通过修改 <code>h2</code> 元素里面的 <code>style</code>。",
"<code>color</code> 属性可以控制文本元素颜色。",
"以下是改变 <code>h2</code> 元素为蓝色的方法：",
"<code>&#60;h2 style=\"color: blue;\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
"Note that it is a good practice to end inline <code>style</code> declarations with a <code>;</code> .",
"请注意行内 <code>style</code> 最好以 <code>;</code> 来结束。",
"<hr>",
"Change your <code>h2</code> element's style so that its text color is red."
"请把 <code>h2</code> 元素的文本颜色设置为红色。"
],
"tests": [
{
"text": "Your <code>h2</code> element should be red.",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
"text": "你的 <code>h2</code>　元素应该为红色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　<code>h2</code>　元素应该为红色。');"
},
{
"text": "Your <code>style</code> declaration should end with a <code>;</code> .",
"testString": "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' Your <code>style</code> declaration should end with a <code>;</code> .');"
}
"text": "<code>h2</code> 元素 <code>style</code> 属性的值应该以 <code>;</code> 结束。",
"testString": "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),'<code>h2</code> 元素 <code>style</code> 属性的值应该以 <code>;</code> 结束。');"

Copy link
Copy Markdown
Contributor

@CatcherO CatcherO Aug 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个地方误删了 }

],
"challengeType": 0,
"files": {
Expand Down Expand Up @@ -75,37 +75,33 @@
"id": "bad87fee1348bd9aedf08805",
"title": "Use CSS Selectors to Style Elements",
"description": [
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
"When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
"That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.",
"At the top of your code, create a <code>style</code> block like this:",
"在CSS中，有上百种　<code>属性</code>　可以让你改变页面样式。",
"通过输入　<code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code> 的 <code>行内样式</code>，修改单一的　<code>h2</code>　元素的颜色的方式，配置　<code>层叠样式表（CSS）</code> 的方式之一。",
"这是改变元素样式的一个特别方法，不过存在着更好的方法来设置　<code>层叠样式表（CSS）</code>。",
"在代码的顶部，创建一个　<code>style</code>　声明区域，如下方所示：",
"<blockquote>&#60;style&#62;<br>&#60;/style&#62;</blockquote>",
"Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:",
"在style样式声明区域内，可以创建一个　<code>CSS 选择器</code>　的规则来应用于所有的　<code>h2</code>　元素。例如，如果你想所有　<code>h2</code>　元素变成红色，可以添加下方的样式规则：",
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;h2 {color: red;}<br>&#60;/style&#62;</blockquote>",
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.",
"注意，在每个元素的样式声明区域里，左右花括号（<code>{</code> 和 <code>}</code>）一定要写全。你需要确定你定义的样式规则位于花括号之间。以及，记得在每个元素样式规则的末尾添加分号。",
"<hr>",
"Delete your <code>h2</code> element's style attribute, and instead create a CSS <code>style</code> block. Add the necessary CSS to turn all <code>h2</code> elements blue."
"删除　<code>h2</code>　元素的行内样式，创建　<code>style</code>　样式声明区域。添加CSS样式规则使　<code>h2</code>　元素变为蓝色。"
],
"tests": [
{
"text": "Remove the style attribute from your <code>h2</code> element.",
"testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.');"
},
{
"text": "Create a <code>style</code> element.",
"testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.');"
"text": "移除　<code>h2</code>　元素的行内样式。",
"testString": "assert(!$(\"h2\").attr(\"style\"), '移除　<code>h2</code>　元素的行内样式。');"
},
{
"text": "Your <code>h2</code> element should be blue.",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.');"
"text": "创建一个　<code>style</code>　样式声明区域。",
"testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个　<code>style</code>　样式声明区域。');"
},
{
"text": "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.",
"testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');"
"text": "<code>h2</code>　元素颜色应为蓝色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", '<code>h2</code>　元素颜色应为蓝色。');"
},
{
"text": "Make sure all your <code>style</code> elements are valid and have a closing tag.",
"testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.');"
"text": "确保你的样式声明里的　<code>h2</code>　规则需以花括号所包括，和分号结束。",
"testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的　<code>h2</code>　规则需以花括号所包括，和分号结束。');"
}
],
"challengeType": 0,
Expand Down Expand Up @@ -156,33 +152,33 @@
"id": "bad87fee1348bd9aecf08806",
"title": "Use a CSS Class to Style an Element",
"description": [
"Classes are reusable styles that can be added to HTML elements.",
"Here's an example CSS class declaration:",
"CSS 的类（class）具有可重用性，可应用于各种 HTML 元素。",
"一个 CSS 类（class）声明示例，如下所示：",
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.blue-text {<br>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
"You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this:",
"可以看到，我们在　<code>&#60;style&#62;</code>　样式声明区域里，创建了一个名为　<code>blue-text</code>　的 CSS 类（class）。",
"你可以将 CSS 类（class）应用到一个HTML元素里，如下所示：",
"<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
"Note that in your CSS <code>style</code> element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.",
"注意你的　<code>style</code>　样式区域声明里，CSS 类（class）需以句号开头。而在你的HTML元素里的 <code>class</code> 属性，类名不需要包含句号",
"<hr>",
"Inside your <code>style</code> element, change the <code>h2</code> selector to <code>.red-text</code> and update the color's value from <code>blue</code> to <code>red</code>.",
"Give your <code>h2</code> element the <code>class</code> attribute with a value of <code>'red-text'</code>."
"在　<code>style</code>　样式声明里，<code>h2</code>　元素选择器改为　<code>.red-text</code>　的 CSS 类（class），同时将颜色　<code>blue</code>　变为　<code>red</code>。",
"在你的　<code>h2</code>　html　元素里，添加一个　<code>class</code>　属性，且值为　<code>'red-text'</code>。"
],
"tests": [
{
"text": "Your <code>h2</code> element should be red.",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
"text": "你的　<code>h2</code>　元素应该为红色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　<code>h2</code>　元素应该为红色。');"
},
{
"text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
"testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
"text": "你的　<code>h2</code>　元素应含有 <code>red-text</code> 类名。",
"testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的　<code>h2</code>　元素应含有 <code>red-text</code> 类名。');"
},
{
"text": "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.",
"testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');"
"text": "你的　<code>style</code>　样式声明区域里应该包含一个　<code>red-text</code>　CSS 类（class）规则，并且它的颜色应为红色。",
"testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的　<code>style</code>　样式声明区域里应该包含一个　<code>red-text</code> CSS 类（class）规则，并且它的颜色应为红色。');"
},
{
"text": "Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.",
"testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
"text": "不要在 <code>h2</code> 元素里使用 <code>style=\"color&#58; red\"</code> 的行内样式 。",
"testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在 <code>h2</code> 元素里使用 <code>style=\"color&#58; red\"</code> 的行内样式 。');"
}
],
"challengeType": 0,
Expand Down Expand Up @@ -239,28 +235,28 @@
"id": "bad87fee1348bd9aefe08806",
"title": "Style Multiple Elements with a CSS Class",
"description": [
"Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your <code>red-text</code> class to the first <code>p</code> element."
"通过 CSS 类（class），多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 <code>red-text</code> CSS 类（class）添加在第一个 <code>p</code> 元素上。"
],
"tests": [
{
"text": "Your <code>h2</code> element should be red.",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
"text": "你的 <code>h2</code> 元素应该是红色的。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 <code>h2</code> 元素应该是红色的。');"
},
{
"text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
"testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
"text": "你的 <code>h2</code> 元素应该含有名为 <code>red-text</code> 的 CSS 类选择器。",
"testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 <code>h2</code> 元素应该含有名为 <code>red-text</code> 的 CSS 类选择器。');"
},
{
"text": "Your first <code>p</code> element should be red.",
"testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first <code>p</code> element should be red.');"
"text": "你的第一个 <code>p</code> 元素应该为红色。",
"testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个 <code>p</code> 元素应该为红色。');"
},
{
"text": "Your second and third <code>p</code> elements should not be red.",
"testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third <code>p</code> elements should not be red.');"
"text": "你的第二和第三个 <code>p</code> 元素不应该为红色。",
"testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个 <code>p</code> 元素不应该为红色。');"
},
{
"text": "Your first <code>p</code> element should have the class <code>red-text</code>.",
"testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.');"
"text": "你的第一个 <code>p</code> 元素应该包含名为 <code>red-text</code> 的 CSS 类（class）。",
"testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个 <code>p</code> 元素应该包含名为 <code>red-text</code> 的 CSS 类（class）。');"
}
],
"challengeType": 0,
Expand Down Expand Up @@ -317,15 +313,15 @@
"id": "bad87fee1348bd9aedf08806",
"title": "Change the Font Size of an Element",
"description": [
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
"字体大小由 <code>font-size</code> 的 CSS 属性控制，如下所示：",
"<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>",
"<hr>",
"Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 pixels (<code>16px</code>)."
"在包含 <code>red-text</code> CSS 类（class）的 <code>&#60;style&#62;</code> 声明区域的里，创建一个 <code>p</code> 元素样式规则，并设置 <code>font-size</code> 为 16 像素(<code>16px</code>)。"
],
"tests": [
{
"text": "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.",
"testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
"text": "在 <code>style</code> 样式声明区域里，<code>p</code> 元素的 <code>font-size</code> 的值应为 <code>16px</code>。浏览器和文本缩放应设置为 100％。",
"testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在 <code>style</code> 样式声明区域里，<code>p</code> 元素的 <code>font-size</code> 的值应为 <code>16px</code>。浏览器和文本缩放应设置为 100％。');"
}
],
"challengeType": 0,
Expand Down Expand Up @@ -382,16 +378,16 @@
"id": "bad87fee1348bd9aede08807",
"title": "Set the Font Family of an Element",
"description": [
"You can set which font an element should use, by using the <code>font-family</code> property.",
"For example, if you wanted to set your <code>h2</code> element's font to <code>sans-serif</code>, you would use the following CSS:",
"通过 <code>font-family</code> 属性，可以设置元素里面的字体样式。",
"例如，如果你想设置 <code>h2</code> 元素的字体为 <code>sans-serif</code>，你可以用以下的CSS规则：",
"<blockquote>h2 {<br>&nbsp;&nbsp;font-family: sans-serif;<br>}</blockquote>",
"<hr>",
"Make all of your <code>p</code> elements use the <code>monospace</code> font."
"确保你所有的 <code>p</code> 元素使用 <code>monospace</code> 字体。"
],
"tests": [
{
"text": "Your <code>p</code> elements should use the font <code>monospace</code>.",
"testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.');"
"text": "你的 <code>p</code> 元素应该使用 <code>monospace</code> 字体。",
"testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的 <code>p</code> 元素应该使用 <code>monospace</code> 字体。');"
}
],
"challengeType": 0,
Expand Down