Translate basic-css #17

focus-kfc · 2018-07-23T16:25:08Z

翻译章节

《响应式网页设计——CSS 基础》

变更文件

basic-css.json
basic-css.md

翻译进度

6/43
0%

focus-kfc · 2018-07-24T05:33:32Z

remark: 继续翻译3小节，进度6/43。

S1ngS1ng

注意标点和空格！请仔细检查下
element 优先翻译成元素，tag 优先翻译成标签。区别很简单，页面上、DOM 树里叫“元素”，代码中叫“标签”
注意，class（类）是在 HTML 中定义的，而 CSS 只是起到选择作用，但并不定义 class。因此，CSS 中存在类选择器的说法，但不存在 CSS 类的说法。你可以 google 下 CSS class，看看结果
@huluoyang
这个 PR 的翻译内容可以截至这里，小问题比较多，请先把 comments 里提到的东西改了。后续的翻译可以开新的 PR 提交

S1ngS1ng · 2018-07-24T20:43:12Z

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

-        "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>样式</code>。",


我们通过修改<code>h2</code>标签里面的<code>样式</code>。 =>
可以通过修改 <code>h2</code> 标签的 <code>style</code> 来为 <code>h2</code> 添加样式。

https://learn.freecodecamp.org/responsive-web-design/basic-css/change-the-color-of-text/

翻译的时候，记得去看下题目实际的样子。看到之后，就不会把 style 给翻译出来了。
就好像这里，你也不会把 <code>h2</code> 翻译成 <code>二级标题</code>

参考微信群，昨天说了，行内元素（比如 <code></code>）是否加空格取决与内容，h2 是半角字符，外面是全角，所以需要加空格

S1ngS1ng · 2018-07-24T20:44:15Z

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

-        "Here's how you would set your <code>h2</code> element's text color to blue:",
+        "现在来让我们修改一下文本的颜色。",
+        "我们通过修改<code>h2</code>标签里面的<code>样式</code>。",
+        "负责标签文本的颜色属性是<code>color</code>。",


负责标签文本的颜色属性 建议 =>
负责控制元素文本颜色的属性

需要加空格。下同

S1ngS1ng · 2018-07-24T20:45:30Z

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

+        "现在来让我们修改一下文本的颜色。",
+        "我们通过修改<code>h2</code>标签里面的<code>样式</code>。",
+        "负责标签文本的颜色属性是<code>color</code>。",
+        "这是改变<code>h2</code>标签为蓝色的方法:",


结尾用全角冒号，下同

S1ngS1ng · 2018-07-24T20:47:36Z

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

+        "请注意行内<code>样式</code>最好以<code>;</code>来结束。",
        "<hr>",
-        "Change your <code>h2</code> element's style so that its text color is red."
+        "尝试改变<code>h2</code>文本标签的颜色为红色。"


之前都是介绍。
既然这里是描述题目的，建议：
请把 <code>h2</code> 的文本颜色设置为红色。

（因为本身 h2 没有设置颜色，所以不存在“改”的说法

下同

S1ngS1ng · 2018-07-24T20:51:58Z

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

        {
-          "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>样式</code>应该以<code>;</code>结束。",


你的行内<code>样式</code>应该以<code>;</code>结束。 =>
你的行内样式应该以 <code>;</code> 结束。

或

<code>h2</code> 元素 <code>style</code> 属性的值应该以 <code>;</code> 结束。

你来选吧

记得下一行同步更新

S1ngS1ng · 2018-07-24T22:06:31Z

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

        {
-          "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属性值。",


你的<code>h2</code>标签应该包含一个名为<code>red-text</code>的class属性值。 =>

你的 <code>h2</code> 元素的类应为 <code>red-text</code>。

下同

S1ngS1ng · 2018-07-24T22:07:16Z

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

-          "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": "你的style样式声明区域里应该包含一个<code>red-text</code>CSS类规则，并且它的样式应为红色。",
+          "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个<code>red-text</code>CSS类规则，并且它的样式应为红色。');"


它的样式应为红色 =>
它的颜色应为红色

S1ngS1ng · 2018-07-24T22:09:28Z

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

      "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类,多个HTML标签上可以使用相同的cSS样式规则。你可以将<code>red-text</code>CSS类应用在第一个<code>p</code>标签上。"


这个 class 显然是在 HTML 定义的。见 Review comment

全角逗号

cSS => CSS 🤦‍♂️

请把 <code>red-text</code> 类添加给第一个 p 标签。

S1ngS1ng · 2018-07-24T22:19:09Z

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

      "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>属性。",


注意语序

S1ngS1ng · 2018-07-24T22:19:56Z

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

        {
-          "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％。",


设置<code>p</code>元素的<code>font-size</code>为<code>16px</code>。 =>

<code>p</code> 元素的 <code>font-size</code> 值应为 <code>16px</code>。

下同

focus-kfc · 2018-07-27T05:07:40Z

已处理。

S1ngS1ng · 2018-07-27T06:02:03Z

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

-          "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> 的行内样式 。');"


这里多了个空格

S1ngS1ng · 2018-07-27T06:02:36Z

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

+        "你可以将 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> 属性的类名，不需要包含句号",


结尾句号

S1ngS1ng

两个小问题改下。其他都 OK 👍

huluoyang · 2018-07-28T09:14:34Z

🎉恭喜泽晴的第一个 PR 成功被 merge 进仓库， keep moving。

* add: 完成BasicCSS的前4个教程。 * alter: 修改调整翻译中文。 * add: 继续翻译3小节。 * fixed: 修复语义，以及翻译格式。 * update: 替换空格&修改css class翻译。 * remove extra whitespace

wu_ze_qing added 3 commits July 23, 2018 14:03

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

87f8b09

alter: 修改调整翻译中文。

6162385

add: 继续翻译3小节。

b2979fa

S1ngS1ng suggested changes Jul 24, 2018

View reviewed changes

S1ngS1ng added the need update Use when a translation (?) PR has been reviewed and needs to address comments label Jul 24, 2018

huluoyang changed the title ~~add: 翻译基础CSS样式-进度3/43。~~ Translate basic-css Jul 25, 2018

wu_ze_qing added 2 commits July 26, 2018 13:37

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

f62b7da

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

571575a

focus-kfc closed this Jul 27, 2018

focus-kfc reopened this Jul 27, 2018

S1ngS1ng reviewed Jul 27, 2018

View reviewed changes

S1ngS1ng approved these changes Jul 27, 2018

View reviewed changes

S1ngS1ng added ship it Use when a translation (?) PR is ready for shipping and removed need update Use when a translation (?) PR has been reviewed and needs to address comments labels Jul 27, 2018

remove extra whitespace

1ac9cbf

huluoyang merged commit 65cb6ea into FreeCodeCampChina:translate Jul 28, 2018

Translate basic-css #17

Translate basic-css #17

Uh oh!

Conversation

focus-kfc commented Jul 23, 2018 • edited by huluoyang Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

翻译章节

变更文件

翻译进度

Uh oh!

focus-kfc commented Jul 24, 2018

Uh oh!

S1ngS1ng left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

focus-kfc commented Jul 27, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

S1ngS1ng left a comment

Choose a reason for hiding this comment

Uh oh!

huluoyang commented Jul 28, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

focus-kfc commented Jul 23, 2018 •

edited by huluoyang

Loading

S1ngS1ng left a comment •

edited

Loading