Translate basic-css (#17)

* add: 完成BasicCSS的前4个教程。

* alter: 修改调整翻译中文。

* add: 继续翻译3小节。

* fixed: 修复语义，以及翻译格式。

* update: 替换空格&修改css class翻译。

* remove extra whitespace

Author: focus-kfc

01-responsive-web-design/basic-css.json

@@ -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> 结束。');"
+        
       ],
       "challengeType": 0,
       "files": {
@@ -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,
@@ -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 的<code>class</code>具有可重用性，可应用于各种 HTML 元素。",
+        "一个 CSS<code>class</code>声明示例，如下所示：",
         "<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>的<code>class</code>选择器。",
+        "你可以将 CSS<code>class</code>选择器应用到一个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>样式区域声明里，<code>class</code>需以句号开头。而在你的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 <code>class</code> 择器，同时将颜色<code>blue</code>变为<code>red</code>。",
+        "在你的<code>h2</code>元素里，添加一个<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> class 选择器。",
+          "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的<code>h2</code>元素应含有<code>red-text</code> class 选择器。');"
         },
         {
-          "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> class 选择器，并且它的颜色应为红色。",
+          "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的<code>style</code>样式声明区域里应该包含一个<code>red-text</code> 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,
@@ -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> 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> 的 class 选择器。",
+          "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的<code>h2</code>元素应该含有名为<code>red-text</code> 的 class 选择器。');"
         },
         {
-          "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>的 class 选择器。",
+          "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个<code>p</code> 元素应该包含名为<code>red-text</code>的 class 选择器。');"
         }
       ],
       "challengeType": 0,
@@ -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> 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,
@@ -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,
@@ -4399,4 +4395,4 @@
       }
     }
   ]
-}
+}