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
Open

Translate basic-css #49

Changes from 1 commit
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
120 changes: 60 additions & 60 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 @@ -9,23 +9,23 @@
"title": "Change the Color of Text",
"description": [
"现在来让我们修改一下文本的颜色。",
"我们通过修改<code>h2</code>标签里面的<code>样式</code>。",
"负责标签文本的颜色属性是<code>color</code>。",
"这是改变<code>h2</code>标签为蓝色的方法:",
"我们通过修改 <code>h2</code> 元素里面的 <code>style</code>。",
"<code>color</code> 属性可以控制文本元素颜色。",
"以下是改变 <code>h2</code> 元素为蓝色的方法：",
"<code>&#60;h2 style=\"color: blue;\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
"请注意行内<code>样式</code>最好以<code>;</code>来结束。",
"请注意行内 <code>style</code> 最好以 <code>;</code> 来结束。",
"<hr>",
"尝试改变<code>h2</code>文本标签的颜色为红色。"
"请把 <code>h2</code> 元素的文本颜色设置为红色。"
],
"tests": [
{
"text": "你的<code>h2</code>标签应该为红色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的<code>h2</code>标签应该为红色。');"
"text": "你的 <code>h2</code>　元素应该为红色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　<code>h2</code>　元素应该为红色。');"
},
{
"text": "你的行内<code>样式</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>样式</code>应该以<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
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,33 +75,33 @@
"id": "bad87fee1348bd9aedf08805",
"title": "Use CSS Selectors to Style Elements",
"description": [
"在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>声明区域，如下方所示：",
"在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>",
"在style样式声明区域内, 可以创建一个<code>CSS选择器</code>的规则来应用于所有的<code>h2</code>标签。例如，如果你想所有<code>h2</code>标签变成红色, 可以添加下方的样式规则:",
"在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>",
"注意，在每个元素的样式声明区域里，打开和关闭花括号（<code>{</code>和<code>}</code>）非常重要。你需要确定你定义的样式规则位于花括号之间。最后，请确定每个已定义的元素样式规则的末尾添加'分号'。",
"注意，在每个元素的样式声明区域里，左右花括号（<code>{</code> 和 <code>}</code>）一定要写全。你需要确定你定义的样式规则位于花括号之间。以及，记得在每个元素样式规则的末尾添加分号。",
"<hr>",
"删除<code>h2</code>标签的行内样式，通过创建<code>style</code>样式声明区域. 添加CSS样式规则使<code>h2</code>标签变为蓝色。"
"删除　<code>h2</code>　元素的行内样式，创建　<code>style</code>　样式声明区域。添加CSS样式规则使　<code>h2</code>　元素变为蓝色。"
],
"tests": [
{
"text": "移除<code>h2</code>标签的style行内样式。",
"testString": "assert(!$(\"h2\").attr(\"style\"), '移除<code>h2</code>标签的style行内样式。');"
"text": "移除　<code>h2</code>　元素的行内样式。",
"testString": "assert(!$(\"h2\").attr(\"style\"), '移除　<code>h2</code>　元素的行内样式。');"
},
{
"text": "创建一个<code>style</code>样式声明区域。",
"testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个<code>style</code>样式声明区域。');"
"text": "创建一个　<code>style</code>　样式声明区域。",
"testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个　<code>style</code>　样式声明区域。');"
},
{
"text": "<code>h2</code>标签颜色应为蓝色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", '<code>h2</code>标签颜色应为蓝色。');"
"text": "<code>h2</code>　元素颜色应为蓝色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", '<code>h2</code>　元素颜色应为蓝色。');"
},
{
"text": "确保你的样式声明里的<code>h2</code>规则需以花括号所包括，和分号结束。",
"testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的<code>h2</code>规则需以花括号所包括，和分号结束。');"
"text": "确保你的样式声明里的　<code>h2</code>　规则需以花括号所包括，和分号结束。",
"testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的　<code>h2</code>　规则需以花括号所包括，和分号结束。');"
}
],
"challengeType": 0,
Expand Down Expand Up @@ -152,33 +152,33 @@
"id": "bad87fee1348bd9aecf08806",
"title": "Use a CSS Class to Style an Element",
"description": [
"CSS的类具有可重用性，可应用于各种HTML标签。",
"一个CSS类声明示例，如下所示：",
"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>",
"可以看到，我们在<code>&#60;style&#62;</code>样式声明区域里，创建了一个名为<code>blue-text</code>的CSS类。",
"你可以将CSS类应用到一个HTML元素里，如下所示:",
"可以看到，我们在　<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>",
"注意你的<code>style</code>样式声明，CSS类名需以句号开头。而在你的HTML标签里的Class属性, CSS类则不需要包含句号",
"注意你的　<code>style</code>　样式区域声明里，CSS 类（class）需以句号开头。而在你的HTML元素里的 <code>class</code> 属性，类名不需要包含句号",
"<hr>",
"在<code>style</code>样式声明里，改变<code>h2</code>标签选择器名为<code>.red-text</code>的一个CSS类，同时将颜色<code>blue</code>变为<code>red</code>。",
"在你的<code>h2</code>html标签里，添加一个<code>class</code>属性<code>，且值为<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": "你的<code>h2</code>标签应该为红色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的<code>h2</code>标签应该为红色。');"
"text": "你的　<code>h2</code>　元素应该为红色。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　<code>h2</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": "你的　<code>h2</code>　元素应含有 <code>red-text</code> 类名。",
"testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的　<code>h2</code>　元素应含有 <code>red-text</code> 类名。');"
},
{
"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类规则，并且它的样式应为红色。');"
"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": "不要使用<code>style=\"color&#58; red\"</code>的行内样式，在你的<code>h2</code>标签里。",
"testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要使用<code>style=\"color&#58; red\"</code>的行内样式，在你的<code>h2</code>标签里。');"
"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 @@ -235,28 +235,28 @@
"id": "bad87fee1348bd9aefe08806",
"title": "Style Multiple Elements with a CSS Class",
"description": [
"通过CSS类,多个HTML标签上可以使用相同的cSS样式规则。你可以将<code>red-text</code>CSS类应用在第一个<code>p</code>标签上。"
"通过 CSS 类（class），多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 <code>red-text</code> CSS 类（class）添加在第一个 <code>p</code> 元素上。"
],
"tests": [
{
"text": "你的<code>h2</code>标签应该是红色的。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的<code>h2</code>标签应该是红色的。');"
"text": "你的 <code>h2</code> 元素应该是红色的。",
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 <code>h2</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": "你的 <code>h2</code> 元素应该含有名为 <code>red-text</code> 的 CSS 类选择器。",
"testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 <code>h2</code> 元素应该含有名为 <code>red-text</code> 的 CSS 类选择器。');"
},
{
"text": "你的第一个<code>p</code>标签应该为红色。",
"testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个<code>p</code>标签应该为红色。');"
"text": "你的第一个 <code>p</code> 元素应该为红色。",
"testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个 <code>p</code> 元素应该为红色。');"
},
{
"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": "你的第二和第三个 <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": "你的第一个<code>p</code>标签应该包含名为<code>red-text</code>的CSS类。",
"testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个<code>p</code>标签应该包含名为<code>red-text</code>的CSS类。');"
"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 @@ -313,15 +313,15 @@
"id": "bad87fee1348bd9aedf08806",
"title": "Change the Font Size of an Element",
"description": [
"字体大小由<code>font-size</code>CSS属性控制，如下所示：",
"字体大小由 <code>font-size</code> 的 CSS 属性控制，如下所示：",
"<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>",
"<hr>",
"在包含<code>red-text</code>CSS类的<code>&#60;style&#62;</code>声明区域的里，创建一个<code>p</code>标签样式规则，并设置<code>font-size</code>为16像素(<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": "在<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％。');"
"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 @@ -378,16 +378,16 @@
"id": "bad87fee1348bd9aede08807",
"title": "Set the Font Family of an Element",
"description": [
"你可以设置标签里面的字体，通过<code>font-family</code>属性。",
"例如，如果你想设置<code>h2</code>标签的字体为<code>sans-serif</code>，你可以用以下的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>",
"确保你所有的<code>p</code>标签使用<code>monospace</code>字体。"
"确保你所有的 <code>p</code> 元素使用 <code>monospace</code> 字体。"
],
"tests": [
{
"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>字体。');"
"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