text-align property.",
- "text-align: justify; causes all lines of text except the last line to meet the left and right edges of the line box.",
- "text-align: center; centers the text",
- "text-align: right; right-aligns the text",
- "And text-align: left; (the default) left-aligns the text.",
+ "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。",
+ "web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。",
+ "text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。",
+ "text-align: center;可以让文本居中对齐。",
+ "text-align: right;可以让文本右对齐。",
+ "text-align: left;是text-align的默认值，它可以让文本左对齐。",
"h4 tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded."
+ "居中对齐h4标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。"
],
"tests": [
{
- "text": "Your code should use the text-align property on the h4 tag to set it to center.",
- "testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the h4 tag to set it to center.');"
+ "text": "你的代码应该在h4标签上使用 text-align 属性设置文本居中对齐。",
+ "testString": "assert($('h4').css('text-align') == 'center', '你的代码应该在h4标签上使用 text-align 属性设置文本居中对齐。');"
},
{
- "text": "Your code should use the text-align property on the p tag to set it to justify.",
- "testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the p tag to set it to justify.');"
+ "text": "你的代码应该在p标签上使用 text-align 属性设置文本两端对齐。",
+ "testString": "assert($('p').css('text-align') == 'justify', '你的代码应该在p标签上使用 text-align 属性设置文本两端对齐。');"
}
],
"solutions": [],
@@ -62,11 +62,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
+ "你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：",
"img {", "
width: 220px;
}
width property to the entire card and set it to an absolute value of 245px. Use the fullCard class to select the element."
+ "给卡片添加width属性，设置它的宽度为 245px。使用fullCark class 来选择元素。"
],
"tests": [
{
- "text": "Your code should change the width property of the card to 245 pixels by using the fullCard class selector.",
- "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the width property of the card to 245 pixels by using the fullCard class selector.');"
+ "text": "你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为245px。",
+ "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), '你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为245px。');"
}
],
"solutions": [],
@@ -127,11 +127,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:",
+ "和width属性类似，你可以使用 CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：",
"img {", "
height: 20px;
}
height property to the h4 tag and set it to 25px."
+ "给h4标签添加height属性并设置值为 25px。"
],
"tests": [
{
- "text": "Your code should change the h4 height property to a value of 25 pixels.",
- "testString": "assert($('h4').css('height') == '25px', 'Your code should change the h4 height property to a value of 25 pixels.');"
+ "text": "你的代码应该设置h4的height属性，使其值为25px。",
+ "testString": "assert($('h4').css('height') == '25px', '你的代码应该设置h4的height属性，使其值为25px。');"
}
],
"solutions": [],
@@ -193,11 +193,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "strong tag. This is often used to draw attention to text and symbolize that it is important. With the strong tag, the browser applies the CSS of font-weight: bold; to the element.",
+ "你可以使用strong标签来加粗文字。这通常用来强调文字，表示它很重要。添加了strong标签后，浏览器会给元素应用font-weight:bold;的 CSS 属性。",
"strong tag around \"Stanford University\" inside the p tag."
+ "在p标签里的 “斯坦福大学” 外面添加strong标签。"
],
"tests": [
{
- "text": "Your code should add one strong tag to the markup.",
- "testString": "assert($('strong').length == 1, 'Your code should add one strong tag to the markup.');"
+ "text": "你的代码里应该有一个strong标签。",
+ "testString": "assert($('strong').length == 1, '你的代码里应该有一个strong标签。');"
},
{
- "text": "The strong tag should be inside the p tag.",
- "testString": "assert($('p').children('strong').length == 1, 'The strong tag should be inside the p tag.');"
+ "text": "strong标签应该在p标签里。",
+ "testString": "assert($('p').children('strong').length == 1, 'strong标签应该在p标签里。');"
},
{
- "text": "The strong tag should wrap around the words \"Stanford University\".",
- "testString": "assert($('strong').text().match(/^Stanford University$/gi), 'The strong tag should wrap around the words \"Stanford University\".');"
+ "text": "strong标签应该包围 “斯坦福大学”。",
+ "testString": "assert($('strong').text().match(/^斯坦福大学$/gi), 'strong标签应该包围 “斯坦福大学”。');"
}
],
"solutions": [],
@@ -269,11 +269,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "u tag. This is often used to signify that a section of text is important, or something to remember. With the u tag, the browser applies the CSS of text-decoration: underline; to the element.",
+ "你可以使用u标签来给文字添加下划线。这通常用来表示这部分文字很重要，或者是一些值得注意的内容。添加了u标签后，浏览器会给元素应用text-decoration: underline;的 CSS 属性。",
"u tag around the text \"Ph.D. students\". It should not include the parent div that has the class of cardText.",
- "Noteu tag when it could be confused for a link. Anchor tags also have a default underlined formatting."
+ "在 “理工博士” 外面添加u标签。不要给整个 class 为cardText的父div添加。",
+ "注意超链接标签默认给文本添加下划线，如果u标签的下滑线和页面的链接混淆，请避免使用它。"
],
"tests": [
{
- "text": "Your code should add a u tag to the markup.",
- "testString": "assert($('u').length === 1, 'Your code should add a u tag to the markup.');"
+ "text": "你的代码里应该有一个u标签。",
+ "testString": "assert($('u').length === 1, '你的代码里应该有一个u标签。');"
},
{
- "text": "The u tag should wrap around the text \"Ph.D. students\".",
- "testString": "assert($('u').text() === 'Ph.D. students', 'The u tag should wrap around the text \"Ph.D. students\".');"
+ "text": "u标签应该包围 “理工博士”。",
+ "testString": "assert($('u').text() === '理工博士', 'u标签应该包围 “理工博士”。');"
},
{
- "text": "The u tag should not wrap around the parent div tag.",
- "testString": "assert($('u').children('div').length === 0, 'The u tag should not wrap around the parent div tag.');"
+ "text": "u标签内不应包含额外的div标签。",
+ "testString": "assert($('u').children('div').length === 0, 'u标签内不应包含额外的div标签。');"
}
],
"solutions": [],
@@ -346,11 +346,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.",
+ "你可以使用 em 标签来强调文字。由于浏览器会给元素应用font-style: italic;CSS，这时文字会显示为斜体。",
"em tag around the contents of the paragraph tag to give it emphasis."
+ "在段落标签里的文字外面添加em标签来强调段落。"
],
"tests": [
{
- "text": "Your code should add an em tag to the markup.",
- "testString": "assert($('em').length == 1, 'Your code should add an em tag to the markup.');"
+ "text": "你的代码应该添加一个em标签。",
+ "testString": "assert($('em').length == 1, '你的代码应该添加一个em标签。');"
},
{
- "text": "The em tag should wrap around the contents of the p tag but not the p tag itself.",
- "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'The em tag should wrap around the contents of the p tag but not the p tag itself.');"
+ "text": "em标签应该包围p标签里的文本，而不是包围整个p标签。",
+ "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'em标签应该包围p标签里的文本，而不是包围整个p标签。');"
}
],
"solutions": [],
@@ -418,11 +418,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "s tag. It shows that a section of text is no longer valid. With the s tag, the browser applies the CSS of text-decoration: line-through; to the element.",
+ "你可以用s标签来给文字添加删除线，s标签后，浏览器会给元素应用text-decoration: line-through;CSS 属性。",
"s tag around \"Google\" inside the h4 tag and then add the word Alphabet beside it, which should not have the strikethrough formatting."
+ "在h4标签里的 “Google” 外添加s标签，然后在s标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。"
],
"tests": [
{
- "text": "Your code should add one s tag to the markup.",
- "testString": "assert($('s').length == 1, 'Your code should add one s tag to the markup.');"
+ "text": "你的代码应该添加一个s标签。",
+ "testString": "assert($('s').length == 1, '你的代码应该添加一个s标签。');"
},
{
- "text": "A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.",
- "testString": "assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 'A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.');"
+ "text": "s标签应该在h4标签内的 Google 文字外面，它不应该包含单词 Alphabet。",
+ "testString": "assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 's标签应该在h4标签内的 Google 文字外面，它不应该包含单词 Alphabet。');"
},
{
- "text": "Include the word Alphabet in the h4 tag, without strikethrough formatting.",
- "testString": "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the h4 tag, without strikethrough formatting.');"
+ "text": "h4标签内应该有单词 Alphabet，Alphabet 应该没有删除线格式。",
+ "testString": "assert($('h4').html().match(/Alphabet/gi), 'h4标签内应该有单词 Alphabet，Alphabet 应该没有删除线格式。');"
}
],
"solutions": [],
@@ -494,11 +494,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.",
+ "你可以用hr标签来添加一条宽度撑满父元素的横线。它可以用来表示文档主题的改变，或者用来在视觉上将文档分隔成几个部分。",
"hr tag underneath the h4 which contains the card title.",
- "Notehr is a self-closing tag, and therefore doesn't need a separate closing tag."
+ "在包含卡片标题的h4下面添加一个hr标签。",
+ "注意hr是自关闭标签，所以不需要一个单独的关闭标签。"
],
"tests": [
{
- "text": "Your code should add an hr tag to the markup.",
- "testString": "assert($('hr').length == 1, 'Your code should add an hr tag to the markup.');"
+ "text": "你的代码里应该添加一个hr标签。",
+ "testString": "assert($('hr').length == 1, '你的代码里应该添加一个hr标签。');"
},
{
- "text": "The hr tag should come between the title and the paragraph.",
- "testString": "assert(code.match(/<\\/h4>\\s*?hr tag should come between the title and the paragraph.');"
+ "text": "hr标签应该在标题和段落之间。",
+ "testString": "assert(code.match(/<\\/h4>\\s*?/gi), 'hr标签应该在标题和段落之间。');"
}
],
"solutions": [],
@@ -567,12 +567,11 @@
"
Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().",
- "rgba stands for:", - "The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear.
r = red
g = green
b = blue
a = alpha/level of opacity
rgba() is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
- "You'll use background-color: rgba(45, 45, 45, 0.1) for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
+ "为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加background-color属性。在本挑战里我们将使用rgba()颜色，而不是之前学到的hex编码或者rgb()颜色。",
+ "rgba 代表：", + "RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度
rgba()非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。",
+ "在本挑战里你将会用到这个代码background-color: rgba(45, 45, 45, 0.1)。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。",
"background-color of the h4 element to the given rgba() value.",
- "Also for the h4, remove the height property and add padding of 10px."
+ "为了让文字更醒目，设置h4元素的background-color属性值为上面指定的rgba()。",
+ "同时移除h4的height属性，并添加padding属性，值为 10px。"
],
"tests": [
{
- "text": "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).",
- "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), 'Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).');"
+ "text": "你的代码应该给h4元素添加一个background-color属性并且赋值rgba(45, 45, 45, 0.1)。",
+ "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), '你的代码应该给h4元素添加一个background-color属性并且赋值rgba(45, 45, 45, 0.1)。');"
},
{
- "text": "Your code should add a padding property to the h4 element and set it to 10 pixels.",
- "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'Your code should add a padding property to the h4 element and set it to 10 pixels.');"
+ "text": "你的代码应该给h4元素添加一个padding属性并且赋值10px。",
+ "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你的代码应该给h4元素添加一个padding属性并且赋值10px。');"
},
{
- "text": "The height property on the h4 element should be removed.",
- "testString": "assert(!($('h4').css('height') == '25px'), 'The height property on the h4 element should be removed.');"
+ "text": "h4元素的height属性应该被移除。",
+ "testString": "assert(!($('h4').css('height') == '25px'), 'h4元素的height属性应该被移除。');"
}
],
"solutions": [],
@@ -651,11 +650,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "h1 through h6) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size property to adjust the size of the text in an element.",
+ "标题（h1到h6）的文字应该比的段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用font-size属性来设置元素内文字的大小。",
"font-size of the h4 tag to 27 pixels."
+ "把h4标签的font-size改成 27 像素，让标题更醒目。"
],
"tests": [
{
- "text": "Your code should add a font-size property to the h4 element set to 27 pixels.",
- "testString": "assert($('h4').css('font-size') == '27px', 'Your code should add a font-size property to the h4 element set to 27 pixels.');"
+ "text": "你的代码应该给h4元素添加一个font-size属性并且赋值27px。",
+ "testString": "assert($('h4').css('font-size') == '27px', '你的代码应该给h4元素添加一个font-size属性并且赋值27px。');"
}
],
"solutions": [],
@@ -722,11 +721,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "box-shadow property applies one or more shadows to an element.",
- "The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.",
- "Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:",
+ "box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。",
+ "box-shadow属性的每个阴影依次由下面这些值描述：offset-x阴影的水平偏移量；offset-y阴影的垂直偏移量;blur-radius模糊距离；spread-radius阴影尺寸；blur-raduis和spread-raduis是可选的。",
+ "下面是创建了多个阴影的 CSS 例子，阴影加了模糊效果，颜色是透明度很高的黑色:",
"box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);", "
thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card."
+ "现在卡片已经添加了 idthumbnail。把上面的box-shadow值赋给卡片。"
],
"tests": [
{
- "text": "Your code should add a box-shadow property for the thumbnail id.",
- "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a box-shadow property for the thumbnail id.');"
+ "text": "你的代码应该给 id 为thumbnail的元素添加box-shadow属性。",
+ "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), '你的代码应该给 id 为thumbnail的元素添加box-shadow属性。');"
},
{
- "text": "You should use the given CSS for the box-shadow value.",
- "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the box-shadow value.');"
+ "text": "box-shadow值应该是指定的 CSS 值。",
+ "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'box-shadow值应该是指定的 CSS 值。');"
}
],
"solutions": [],
@@ -803,11 +802,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.",
- "A value of 1 is opaque, which isn't transparent at all.", - "The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.", + "CSS 里的
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
opacity属性用来设置元素的透明度。",
+ "值 1 代表完全不透明。", + "透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。", "
值 0.5 代表半透明。
值 0 代表完全透明。
opacity of the anchor tags to 0.7 using links class to select them."
+ "使用linksclass 选择所有的超链接并设置其opacity值为 0.7。"
],
"tests": [
{
- "text": "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.",
- "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.');"
+ "text": "你的代码应该使用linksclass 选择所有的超链接并设置其opacity值为 0.7。",
+ "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你的代码应该使用linksclass 选择所有的超链接并设置其opacity值为 0.7。');"
}
],
"solutions": [],
@@ -880,11 +879,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "text-transform property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.",
- "The following table shows how the different text-transformvalues change the example text \"Transform me\".",
- "| Value | Result |
|---|---|
lowercase | \"transform me\" |
uppercase | \"TRANSFORM ME\" |
capitalize | \"Transform Me\" |
initial | Use the default value |
inherit | Use the text-transform value from the parent element |
none | Default: Use the original text |
text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。",
+ "下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。",
+ "| Value | Result |
|---|---|
lowercase | \"transform me\" |
uppercase | \"TRANSFORM ME\" |
capitalize | \"Transform Me\" |
initial | 使用默认值 |
inherit | 使用父元素的text-transform值。 |
none | Default:不改变文字。 |
h4 to be uppercase using the text-transform property."
+ "使用text-transform属性把h4内的英文的所有字母变成大写。"
],
"tests": [
{
- "text": "The h4 text should be uppercase.",
- "testString": "assert($('h4').css('text-transform') === 'uppercase', 'The h4 text should be uppercase.');"
+ "text": "h4内的英文的所有字母应该为大写。",
+ "testString": "assert($('h4').css('text-transform') === 'uppercase', 'h4内的英文的所有字母应该为大写。');"
},
{
- "text": "The original text of the h4 should not be changed.",
- "testString": "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'The original text of the h4 should not be changed.');"
+ "text": "h4内的原文不能被改变。",
+ "testString": "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'h4内的原文不能被改变。');"
}
],
"solutions": [],
@@ -962,11 +961,11 @@
" Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", + "Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。
", "font-size property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1 through h6 tags to balance the heading sizes.",
+ "font-size属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置h1到h6的每个标题文字的大小。",
"font-size of the h1 tag to 68px.font-size of the h2 tag to 52px.font-size of the h3 tag to 40px.font-size of the h4 tag to 32px.font-size of the h5 tag to 21px.font-size of the h6 tag to 14px.h1标签的font-size为 68px。h2标签的font-size为 52px。h3标签的font-size为 40px。h4标签的font-size为 32px。h5标签的font-size为 21px。h6标签的font-size为 14px。font-size property for the h1 tag to 68 pixels.",
- "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the font-size property for the h1 tag to 68 pixels.');"
+ "text": "你的代码应该设置h1标签的font-size为68px。",
+ "testString": "assert($('h1').css('font-size') == '68px', '你的代码应该设置h1标签的font-size为68px。');"
},
{
- "text": "Your code should set the font-size property for the h2 tag to 52 pixels.",
- "testString": "assert($('h2').css('font-size') == '52px', 'Your code should set the font-size property for the h2 tag to 52 pixels.');"
+ "text": "你的代码应该设置h2标签的font-size为52px。",
+ "testString": "assert($('h2').css('font-size') == '52px', '你的代码应该设置h2标签的font-size为52px。');"
},
{
- "text": "Your code should set the font-size property for the h3 tag to 40 pixels.",
- "testString": "assert($('h3').css('font-size') == '40px', 'Your code should set the font-size property for the h3 tag to 40 pixels.');"
+ "text": "你的代码应该设置h3标签的font-size为40px。",
+ "testString": "assert($('h3').css('font-size') == '40px', '你的代码应该设置h3标签的font-size为40px。');"
},
{
- "text": "Your code should set the font-size property for the h4 tag to 32 pixels.",
- "testString": "assert($('h4').css('font-size') == '32px', 'Your code should set the font-size property for the h4 tag to 32 pixels.');"
+ "text": "你的代码应该设置h4标签的font-size为32px。",
+ "testString": "assert($('h4').css('font-size') == '32px', '你的代码应该设置h4标签的font-size为32px。');"
},
{
- "text": "Your code should set the font-size property for the h5 tag to 21 pixels.",
- "testString": "assert($('h5').css('font-size') == '21px', 'Your code should set the font-size property for the h5 tag to 21 pixels.');"
+ "text": "你的代码应该设置h5标签的font-size为21px。",
+ "testString": "assert($('h5').css('font-size') == '21px', '你的代码应该设置h6标签的font-size为21px。');"
},
{
- "text": "Your code should set the font-size property for the h6 tag to 14 pixels.",
- "testString": "assert($('h6').css('font-size') == '14px', 'Your code should set the font-size property for the h6 tag to 14 pixels.');"
+ "text": "你的代码应该设置h6标签的font-size为14px。",
+ "testString": "assert($('h6').css('font-size') == '14px', '你的代码应该设置h6标签的font-size为14px。');"
}
],
"solutions": [],
@@ -1028,12 +1027,12 @@
" ",
" ",
"",
- "font-size of each heading tag in the last challenge, here you'll adjust the font-weight.",
- "The font-weight property sets how thick or thin characters are in a section of text.",
+ "在上一个挑战里你已经设置了每个标题的font-size，接下来你将设置font-weight。",
+ "font-weight属性用于设置文本中所用的字体的粗细。",
"font-weight of the h1 tag to 800.font-weight of the h2 tag to 600.font-weight of the h3 tag to 500.font-weight of the h4 tag to 400.font-weight of the h5 tag to 300.font-weight of the h6 tag to 200.h1标签的font-weight为 800。h2标签的font-weight为 600。h3标签的font-weight为 500。h4标签的font-weight为 400。h5标签的font-weight为 300。h6标签的font-weight为 200。font-weight property for the h1 tag to 800.",
- "testString": "assert($('h1').css('font-weight') == '800', 'Your code should set the font-weight property for the h1 tag to 800.');"
+ "text": "你的代码应该设置h1标签的font-weight为 800。",
+ "testString": "assert($('h1').css('font-weight') == '800', '你的代码应该设置h1标签的font-weight为 800。');"
},
{
- "text": "Your code should set the font-weight property for the h2 tag to 600.",
- "testString": "assert($('h2').css('font-weight') == '600', 'Your code should set the font-weight property for the h2 tag to 600.');"
+ "text": "你的代码应该设置h2标签的font-weight为 600。",
+ "testString": "assert($('h2').css('font-weight') == '600', '你的代码应该设置h2标签的font-weight为 600。');"
},
{
- "text": "Your code should set the font-weight property for the h3 tag to 500.",
- "testString": "assert($('h3').css('font-weight') == '500', 'Your code should set the font-weight property for the h3 tag to 500.');"
+ "text": "你的代码应该设置h3标签的font-weight为 500。",
+ "testString": "assert($('h3').css('font-weight') == '500', '你的代码应该设置h3标签的font-weight为 500。');"
},
{
- "text": "Your code should set the font-weight property for the h4 tag to 400.",
- "testString": "assert($('h4').css('font-weight') == '400', 'Your code should set the font-weight property for the h4 tag to 400.');"
+ "text": "你的代码应该设置h4标签的font-weight为 400。",
+ "testString": "assert($('h4').css('font-weight') == '400', '你的代码应该设置h4标签的font-weight为 400。');"
},
{
- "text": "Your code should set the font-weight property for the h5 tag to 300.",
- "testString": "assert($('h5').css('font-weight') == '300', 'Your code should set the font-weight property for the h5 tag to 300.');"
+ "text": "你的代码应该设置h5标签的font-weight为 300。",
+ "testString": "assert($('h5').css('font-weight') == '300', '你的代码应该设置h5标签的font-weight为 300。');"
},
{
- "text": "Your code should set the font-weight property for the h6 tag to 200.",
- "testString": "assert($('h6').css('font-weight') == '200', 'Your code should set the font-weight property for the h6 tag to 200.');"
+ "text": "你的代码应该设置h6标签的font-weight为 200。",
+ "testString": "assert($('h6').css('font-weight') == '200', '你的代码应该设置h6标签的font-weight为 200。');"
}
],
"solutions": [],
@@ -1111,12 +1110,12 @@
" ",
" }",
"",
- "font-size property in CSS is not limited to headings, it can be applied to any element containing text.",
+ "CSS 里面的font-size属性不只限于标题，它可以应用于任何包含文字的元素内。",
"font-size property for the paragraph to 16px to make it more visible."
+ "把段落的font-size设置为 16px 让它看起来更清晰。"
],
"tests": [
{
- "text": "Your p tag should have a font-size of 16 pixels.",
- "testString": "assert($('p').css('font-size') == '16px', 'Your p tag should have a font-size of 16 pixels.');"
+ "text": "你的p标签应该包含一个font-size属性并且值为16px。",
+ "testString": "assert($('p').css('font-size') == '16px', '你的p标签应该包含一个font-size属性并且值为16px。');"
}
],
"solutions": [],
@@ -1153,7 +1152,7 @@
" }",
"",
"", - " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + " 天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊", "
" ], "head": [], @@ -1165,14 +1164,14 @@ "id": "587d781d367417b2b2512ac5", "title": "Set the line-height of Paragraphs", "description": [ - "CSS offers theline-height property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.",
+ "CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。",
"line-height property to the p tag and set it to 25px."
+ "给p标签添加line-height属性并赋值 25px。"
],
"tests": [
{
- "text": "Your code should set the line-height of the p tag to 25 pixels.",
- "testString": "assert($('p').css('line-height') == '25px', 'Your code should set the line-height of the p tag to 25 pixels.');"
+ "text": "你的代码应该给p标签添加line-height属性并赋值25px。",
+ "testString": "assert($('p').css('line-height') == '25px', '你的代码应该给p标签添加line-height属性并赋值25px。');"
}
],
"solutions": [],
@@ -1192,7 +1191,7 @@
" }",
"",
"", - " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + " 天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊", "
" ], "head": [], @@ -1204,20 +1203,20 @@ "id": "587d781d367417b2b2512ac8", "title": "Adjust the Hover State of an Anchor Tag", "description": [ - "This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.", - "For example, the styling of an anchor tag can be changed for its hover state using the:hover pseudo-class selector. Here's the CSS to change the color of the anchor tag to red during its hover state:",
+ "本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。",
+ "比如，超链接可以使用:hover伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：",
"a:hover {", "
color: red;
}
a tags black. Add a rule so that when the user hovers over the a tag, the color is blue."
+ "代码编辑器里面已经有了一个 CSS 规则把所有的a标签定义成了黑色。添加一个规则，满足如下，当用户悬停a标签时，把color变成蓝色。"
],
"tests": [
{
- "text": "The anchor tag color should remain black, only add CSS rules for the :hover state.",
- "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag color should remain black, only add CSS rules for the :hover state.');"
+ "text": "超链接的color应该保持黑色，只添加:hover CSS 规则。",
+ "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', '超链接的color应该保持黑色，只添加:hover CSS 规则。');"
},
{
- "text": "The anchor tag should have a color of blue on hover.",
- "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a color of blue on hover.');"
+ "text": "悬停超链接时超链接color应该变成蓝色。",
+ "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), '悬停超链接时超链接color应该变成蓝色。');"
}
],
"solutions": [],
@@ -1238,7 +1237,7 @@
" ",
" ",
"",
- "CatPhotoApp"
+ "猫咪相册 App"
],
"head": [],
"tail": []
@@ -1249,22 +1248,22 @@
"id": "587d781e367417b2b2512ac9",
"title": "Change an Element's Relative Position",
"description": [
- "CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it.",
- "When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:",
+ "在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。",
+ "当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：",
"p {", - "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.", - "Note
position: relative;
bottom: 10px;
}
position of the h2 to relative, and use a CSS offset to move it 15 pixels away from the top of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements."
+ "把h2的position设置成relative，使用相应的 CSS 属性调整h2的位置，使其向上偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。"
],
"tests": [
{
- "text": "The h2 element should have a position property set to relative.",
- "testString": "assert($('h2').css('position') == 'relative', 'The h2 element should have a position property set to relative.');"
+ "text": "h2元素应该添加position属性并赋值relative。",
+ "testString": "assert($('h2').css('position') == 'relative', 'h2元素应该添加position属性并赋值relative。');"
},
{
- "text": "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.",
- "testString": "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.');"
+ "text": "你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移15px。",
+ "testString": "assert($('h2').css('top') == '15px', '你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移15px。');"
}
],
"solutions": [],
@@ -1284,9 +1283,9 @@
" }",
"",
"",
- " I still think the h2 is where it normally sits.
", + "我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。
", "" ], "head": [],