diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index e949b39..96895c8 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -23,9 +23,9 @@ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该为红色。');" }, { - "text": "h2元素的style 属性的值应该以;结束。", - "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'h2 元素 style 属性的值应该以 ; 结束。');" - + "text": "h2元素的style属性的值应该以;结束。", + "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'h2元素style属性的值应该以;结束。');" + } ], "challengeType": 0, "files": { @@ -76,9 +76,9 @@ "title": "Use CSS Selectors to Style Elements", "description": [ "在CSS中，有上百种属性可以让你改变页面样式。", - "通过输入 <h2 style=\"color: red\">CatPhotoApp</h2> 的行内样式，修改单一的h2元素的颜色的方式，配置 层叠样式表（CSS） 的方式之一。", + "通过输入<h2 style=\"color: red\">CatPhotoApp</h2>的行内样式，修改单一的h2元素的颜色的方式，配置层叠样式表（CSS）的方式之一。", "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置层叠样式表（CSS。", - "在代码的顶部，创建一个 style 声明区域，如下方所示：", + "在代码的顶部，创建一个style声明区域，如下方所示：", "
<style>
</style>
", "在style样式声明区域内，可以创建一个CSS 选择器的规则来应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：", "
<style>
  h2 {color: red;}
</style>
", @@ -158,7 +158,7 @@ "可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。", "你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "注意你的style样式区域声明里，class需以句号开头。而在你的HTML元素里的class属性的类名，不需要包含句号", + "注意你的style样式区域声明里，class需以句号开头。而在你的HTML元素里的class属性的类名，不需要包含句号。", "
", "在style样式声明里，h2元素选择器改为.red-text的 CSS class 择器，同时将颜色blue变为red。", "在你的h2元素里，添加一个class属性，且值为'red-text'。" @@ -177,8 +177,8 @@ "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。');" }, { - "text": "不要在h2元素里使用style=\"color: red\"的行内样式 。", - "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在h2元素里使用style=\"color: red\"的行内样式 。');" + "text": "不要在h2元素里使用style=\"color: red\"的行内样式。", + "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在h2元素里使用style=\"color: red\"的行内样式。');" } ], "challengeType": 0, @@ -448,33 +448,33 @@ "id": "bad87fee1348bd9aedf08807", "title": "Import a Google Font", "description": [ - "In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are various sources for web fonts on the internet but, for this example we will focus on the Google Fonts library.", - "Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL.", - "So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", - "To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the Lobster font. To do this, copy the following code snippet and paste it into the top of your code editor(before the opening style element):", + "除了大多数系统提供的默认字体以外，我们也可以在我们的网站上使用自定义的字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。", + "Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。", + "因此，下一步，我们将引入和使用Google字体（注意：如果你所在国家禁止使用Google，则可以跳过这个挑战）。", + "引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到你的代码编辑器顶部，即放到style标签之前。", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME;.", - "The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.", - "Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the \"Open Sans\" font, but not to use the Lobster font.", + "现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;.", + "GENERIC_NAME是可选的，其他字体不可用时便作为后备字体。在下一个挑战中可以得到体现。", + "字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用\"Open Sans\"字体需要添加引号，而Lobster字体则不需要", "
", - "Create a font-family CSS rule that uses the Lobster font, and ensure that it will be applied to your h2 element." + "创建一个 CSS 规则，font-family属性里设置为Lobster字体，并把这个字体应用到所有的h2元素。" ], "tests": [ { - "text": "Import the Lobster font.", - "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the Lobster font.');" + "text": "引入Lobster字体。", + "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), '引入Lobster字体。');" }, { - "text": "Your h2 element should use the font Lobster.", - "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2 element should use the font Lobster.');" + "text": "你的h2元素必须适用Lobster字体。", + "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), '你的h2元素必须适用Lobster字体。');" }, { - "text": "Use an h2 CSS selector to change the font.", - "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an h2 CSS selector to change the font.');" + "text": "使用h2选择器去改变字体样式。", + "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), '使用h2选择器去改变字体样式。');" }, { - "text": "Your p element should still use the font monospace.", - "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p element should still use the font monospace.');" + "text": "你的p元素应该保持使用monospace字体。", + "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), '你的p元素应该保持使用monospace字体。');" } ], "challengeType": 0, @@ -536,32 +536,32 @@ "id": "bad87fee1348bd9aedf08808", "title": "Specify How Fonts Should Degrade", "description": [ - "There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif", - "When one font isn't available, you can tell the browser to \"degrade\" to another font.", - "For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica wasn't available, you will specify it as follows:", + "所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。", + "当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。", + "例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：", "
p {
  font-family: Helvetica, sans-serif;
}
", - "Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.", + "通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。", "
", - "To begin with, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace.", - "In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font.", - "Note
If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font." + "首先，添加monospace字体到h2元素里，它现在拥有着Lobster和 monospace两种字体。", + "在上一个挑战里，你通过link标签引入Lobster字体。现在让我们注释掉Lobster谷歌字体的引入（使用我们之前学过的HTML注释），使字体失效。你会发现你的h2元素降级到了monospace字体。", + "注意：
如果你的电脑已经安装了Lobster字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。" ], "tests": [ { - "text": "Your h2 element should use the font Lobster.", - "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font Lobster.');" + "text": "你的h2元素应该含有Lobster字体。", + "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), '你的h2元素应该含有Lobster字体。');" }, { - "text": "Your h2 element should degrade to the font monospace when Lobster is not available.", - "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font monospace when Lobster is not available.');" + "text": "Lobster字体失效时，你的h2元素应该降级为monospace字体。", + "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Lobster字体失效时，你的h2元素应该降级为monospace字体。');" }, { - "text": "Comment out your call to Google for the Lobster font by putting <!-- in front of it.", - "testString": "assert(new RegExp(\"\", \"gi\").test(code), 'Be sure to close your comment by adding -->.');" + "text": "确保注释要以-->结束。", + "testString": "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), '确保注释要以-->结束。');" } ], "challengeType": 0, @@ -628,21 +628,21 @@ "id": "bad87fee1348bd9acdf08812", "title": "Size Your Images", "description": [ - "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", - "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:", + "CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。", + "假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样：", "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", "
", - "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.", - "Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge." + "创建一个smaller-image的 CSS class，设置图片的宽度为 100px。", + "注意：
由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。" ], "tests": [ { - "text": "Your img element should have the class smaller-image.", - "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your img element should have the class smaller-image.');" + "text": "你的img元素应该含有smaller-imageclass。", + "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", '你的img元素应该含有smaller-imageclass。');" }, { - "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.", - "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');" + "text": "你的图片应为 100px（像素），且浏览器缩放应为 100%。", + "testString": "assert($(\"img\").width() === 100, '你的图片应为 100px（像素），且浏览器缩放应为 100%。');" } ], "challengeType": 0, @@ -709,34 +709,34 @@ "id": "bad87fee1348bd9bedf08813", "title": "Add Borders Around Your Elements", "description": [ - "CSS borders have properties like style, color and width", - "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:", + "CSS 边框具有style，color和width属性。", + "假如，我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", "
", - "Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.", - "Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:", + "创建一个thick-green-border CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框。将它应用在你的猫咪照片上。", + "记得，在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：", "<img class=\"class1 class2\">" ], "tests": [ { - "text": "Your img element should have the class smaller-image.", - "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class smaller-image.');" + "text": "你的img元素应该含有smaller-imageclass。", + "testString": "assert($(\"img\").hasClass(\"smaller-image\"), '你的img元素应该含有smaller-imageclass。');" }, { - "text": "Your img element should have the class thick-green-border.", - "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img element should have the class thick-green-border.');" + "text": "同时，你的img元素应该含有thick-green-borderclass。", + "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), '同时，你的img元素应该含有thick-green-borderclass。');" }, { - "text": "Give your image a border width of 10px.", - "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of 10px.');" + "text": "设置你的图片边框为10px。", + "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, '设置你的图片边框为10px。');" }, { - "text": "Give your image a border style of solid.", - "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of solid.');" + "text": "设置你的图片边框为solid实线。", + "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", '设置你的图片边框为solid实线。');" }, { - "text": "The border around your img element should be green.", - "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your img element should be green.');" + "text": "img元素的边框颜色应该为绿色。", + "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'img元素的边框颜色应该为绿色。');" } ], "challengeType": 0, @@ -808,19 +808,19 @@ "id": "bad87fee1348bd9aedf08814", "title": "Add Rounded Corners with border-radius", "description": [ - "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", + "你的猫咪图片边角很尖锐，我们可以使用border-radius属性来让它变得圆润。", "
", - "You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.", - "Note: this challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class." + "border-radius可以用px像素单位来赋值。给你的猫咪图片设置 10px 的border-radius。", + "注意：这个挑战有多个解决方法。例如，添加border-radius属性到.thick-green-borderclass 或.smaller-imageclass 里都是可行的。" ], "tests": [ { - "text": "Your image element should have the class \"thick-green-border\".", - "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');" + "text": "你的图片元素应具有 \"thick-green-border\" class 属性。", + "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), '你的图片元素应具有 \"thick-green-border\" class 属性。');" }, { - "text": "Your image should have a border radius of 10px", - "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10px');" + "text": "你的图片应含有10px的边框圆角。", + "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, '你的图片应含有10px的边框圆角。');" } ], "challengeType": 0, @@ -898,18 +898,18 @@ "id": "bad87fee1348bd9aedf08815", "title": "Make Circular Images with a border-radius", "description": [ - "In addition to pixels, you can also specify the border-radius using a percentage.", + "除像素外，你也可以使用百分比来指定border-radius的值。", "
", - "Give your cat photo a border-radius of 50%." + "将border-radius的值设置为50%。" ], "tests": [ { - "text": "Your image should have a border radius of 50%, making it perfectly circular.", - "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%, making it perfectly circular.');" + "text": "你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。", + "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, '你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。');" }, { - "text": "Be sure to use a percentage value of 50%.", - "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of 50%.');" + "text": "请确保百分值为50%。", + "testString": "assert(code.match(/50%/g), '请确保百分值为50%。');" } ], "challengeType": 0, @@ -987,20 +987,20 @@ "id": "bad87fed1348bd9aede07836", "title": "Give a Background Color to a div Element", "description": [ - "You can set an element's background color with the background-color property.", - "For example, if you wanted an element's background color to be green, you'd put this within your style element:", + "background-color属性可以设置元素的背景颜色。", + "例如，你想将一个元素的背景颜色改为green，可以在你的style里面这样写：", "
.green-background {
  background-color: green;
}
", "
", - "Create a class called silver-background with the background-color of silver. Assign this class to your div element." + "创建一个silver-backgroundclass 并设置background-color为silver。 并用在div元素上。" ], "tests": [ { - "text": "Give your div element the class silver-background.", - "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your div element the class silver-background.');" + "text": "div元素应有silver-backgroundclass。", + "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'div元素应有silver-backgroundclass。');" }, { - "text": "Your div element should have a silver background.", - "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your div element should have a silver background.');" + "text": "div元素背景颜色应设置为silver。", + "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'div元素背景颜色应设置为silver。');" } ], "challengeType": 0, @@ -1078,18 +1078,18 @@ "id": "bad87eee1348bd9aede07836", "title": "Set the id of an Element", "description": [ - "In addition to classes, each HTML element can also have an id attribute.", - "There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.", - "id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.", - "Here's an example of how you give your h2 element the id of cat-photo-app:", + "除了class属性，每一个 HTML 元素也都有id属性。", + "使用id有几个好处：你可以通过id选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过id来选择元素和操作元素。", + "id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性。", + "设置h2元素的 id 为cat-photo-app的方法如下：", "<h2 id=\"cat-photo-app\">", "
", - "Give your form element the id cat-photo-form." + "设置form元素的 id 为cat-photo-form。" ], "tests": [ { - "text": "Give your form element the id of cat-photo-form.", - "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.');" + "text": "你的form元素的 id 应为cat-photo-form。", + "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", '你的form元素的 id 应为cat-photo-form。');" } ], "challengeType": 0, @@ -1171,30 +1171,30 @@ "id": "bad87dee1348bd9aede07836", "title": "Use an id Attribute to Style an Element", "description": [ - "One cool thing about id attributes is that, like classes, you can style them using CSS.", - "However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.", - "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:", + "通过id属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式", + "可是，id不可以重用，只应用于一个元素上。同时，在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。", + "选择id为cat-photo-element的元素，并设置它的背景样式为green，可以在你的style标签里这样写：", "
#cat-photo-element {
  background-color: green;
}
", - "Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.", + "注意在style标签里，声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。", "
", - "Try giving your form, which now has the id attribute of cat-photo-form, a green background." + "尝试给含有cat-photo-formid属性的form表单的背景颜色设置为green。" ], "tests": [ { - "text": "Give your form element the id of cat-photo-form.", - "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.');" + "text": "设置form元素的 id 为cat-photo-form。", + "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", '设置form元素的 id 为cat-photo-form。');" }, { - "text": "Your form element should have the background-color of green.", - "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your form element should have the background-color of green.');" + "text": "你的form元素应该含有background-colorcss 属性并且值为 green。", + "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", '你的form元素应该含有background-colorcss 属性并且值为 green。');" }, { - "text": "Make sure your form element has an id attribute.", - "testString": "assert(code.match(//gi) && code.match(//gi).length > 0, 'Make sure your form element has an id attribute.');" + "text": "确保你的form元素含有id属性。", + "testString": "assert(code.match(//gi) && code.match(//gi).length > 0, '确保你的form元素含有id属性。');" }, { - "text": "Do not give your form any class or style attributes.", - "testString": "assert(!code.match(//gi) && !code.match(//gi), 'Do not give your form any class or style attributes.');" + "text": "不要在form元素上添加其他class属性或者style行内样式。", + "testString": "assert(!code.match(//gi) && !code.match(//gi), '不要在form元素上添加其他class属性或者style行内样式。');" } ], "challengeType": 0, @@ -1276,19 +1276,19 @@ "id": "bad88fee1348bd9aedf08825", "title": "Adjust the Padding of an Element", "description": [ - "Now let's put our Cat Photo App away for a little while and learn more about styling HTML.", - "You may have already noticed this, but all HTML elements are essentially little rectangles.", - "Three important properties control the space that surrounds each HTML element: padding, margin, and border.", - "An element's padding controls the amount of space between the element's content and its border.", - "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more padding than the blue box.", - "When you increase the blue box's padding, it will increase the distance(padding) between the text and the border around it.", + "我们先暂时把猫咪图片放在一边，让我们去学习更多 HTML 相关样式。", + "你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。", + "每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。", + "padding控制着元素内容与border之间的空隙大小。", + "在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。可以发现，红色盒子比蓝色盒子有着更多的padding填充空间。", + "当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。", "
", - "Change the padding of your blue box to match that of your red box." + "蓝色的盒子padding的值要跟红色盒子的一样大小。" ], "tests": [ { - "text": "Your blue-box class should give elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your blue-box class should give elements 20px of padding.');" + "text": "你的blue-boxclass 的padding值应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", '你的blue-boxclass 的padding值应为20px。');" } ], "challengeType": 0, @@ -1345,16 +1345,16 @@ "id": "bad87fee1348bd9aedf08822", "title": "Adjust the Margin of an Element", "description": [ - "An element's margin controls the amount of space between an element's border and surrounding elements.", - "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller.", - "When you increase the blue box's margin, it will increase the distance between its border and surrounding elements.", + "margin（外边距）控制元素边框与其他元素之间的距离大小。", + "在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。", + "当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。", "
", - "Change the margin of the blue box to match that of the red box." + "蓝色的盒子margin的值要跟红色盒子的一样大小。" ], "tests": [ { - "text": "Your blue-box class should give elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your blue-box class should give elements 20px of margin.');" + "text": "你的blue-boxclass 的margin值应为20px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", '你的blue-boxclass 的margin值应为20px。');" } ], "challengeType": 0, @@ -1413,16 +1413,16 @@ "id": "bad87fee1348bd9aedf08823", "title": "Add a Negative Margin to an Element", "description": [ - "An element's margin controls the amount of space between an element's border and surrounding elements.", - "If you set an element's margin to a negative value, the element will grow larger.", + "元素的margin（外边距）控制元素边框与其他周围元素之间的距离大小。", + "如果你设置元素margin为负值，元素会变得更大。", "
", - "Try to set the margin to a negative value like the one for the red box.", - "Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it." + "尝试设置蓝色盒子的margin为负值，跟红色盒子一样大小。", + "蓝色盒子的margin设置为-15px，它会填满与黄色盒子之间的距离。" ], "tests": [ { - "text": "Your blue-box class should give elements -15px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your blue-box class should give elements -15px of margin.');" + "text": "你的blue-box class的margin应该设置为-15px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", '你的blue-box class的margin应该设置为-15px。');" } ], "challengeType": 0, @@ -1480,27 +1480,27 @@ "id": "bad87fee1348bd9aedf08824", "title": "Add Different Padding to Each Side of an Element", "description": [ - "Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides.", - "CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-left properties.", + "有时候，你会想给一个元素每个方向的padding都设置成一个特定的值", + "CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。", "
", - "Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side." + "蓝色盒子的顶部和左侧的padding值设置为40px，底部和右侧设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of the elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of the elements 40px of padding.');" + "text": "你的blue-boxclass 的顶部padding（上内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", '你的blue-boxclass 的顶部padding（上内边距）值应为40px。');" }, { - "text": "Your blue-box class should give the right of the elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of the elements 20px of padding.');" + "text": "你的blue-boxclass 的右侧padding（右内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", '你的blue-boxclass 的右侧padding（右内边距）值应为40px。');" }, { - "text": "Your blue-box class should give the bottom of the elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of the elements 20px of padding.');" + "text": "你的blue-boxclass 的底部padding（下内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", '你的blue-boxclass 的底部padding（下内边距）值应为40px。');" }, { - "text": "Your blue-box class should give the left of the elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of the elements 40px of padding.');" + "text": "你的blue-boxclass 的左侧padding（左内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", '你的blue-boxclass 的左侧padding（左内边距）值应为40px。');" } ], "challengeType": 0, @@ -1559,27 +1559,27 @@ "id": "bad87fee1248bd9aedf08824", "title": "Add Different Margins to Each Side of an Element", "description": [ - "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", - "CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, and margin-left properties.", + "有时候，你会想给一个元素每个方向的margin都设置成一个特定的值。", + "CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。", "
", - "Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side." + "蓝色盒子的顶部和左侧的margin值设置为40px，底部和右侧设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.');" + "text": "你的blue-boxclass 的右侧margin（右外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", '你的blue-boxclass 的右侧margin（右外边距）值应为40px。');" }, { - "text": "Your blue-box class should give the right of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.');" + "text": "你的blue-boxclass 的右侧margin（右外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", '你的blue-boxclass 的右侧margin（右外边距）值应为40px。');" }, { - "text": "Your blue-box class should give the bottom of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.');" + "text": "你的blue-boxclass 的底部margin（下外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", '你的blue-boxclass 的底部margin（下外边距）值应为40px。');" }, { - "text": "Your blue-box class should give the left of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.');" + "text": "你的blue-boxclass 的左侧margin（左外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", '你的blue-boxclass 的左侧margin（左外边距）值应为40px。');" } ], "challengeType": 0, @@ -1637,32 +1637,32 @@ "id": "bad87fee1348bd9aedf08826", "title": "Use Clockwise Notation to Specify the Padding of an Element", "description": [ - "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties individually, you can specify them all in one line, like this:", + "如果不想每次都要分别声明padding-top，padding-right，padding-bottom和padding-left属性，可以把它们汇总在padding属性里面声明，如下：", "padding: 10px 20px 10px 20px;", - "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", + "这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。", "
", - "Use Clockwise Notation to give the \".blue-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side." + "按照顺时针顺序，给\".blue-box\" class的上内边距以及左内边距设置为40px，右内边距和下内边距则设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of padding.');" + "text": "blue-boxclass 的上内边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'blue-boxclass 的上内边距应为40px。');" }, { - "text": "Your blue-box class should give the right of elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of padding.');" + "text": "blue-boxclass 的右内边距应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'blue-boxclass 的右内边距应为40px。');" }, { - "text": "Your blue-box class should give the bottom of elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of padding.');" + "text": "blue-boxclass 的下内边距应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'blue-boxclass 的下内边距应为20px。);" }, { - "text": "Your blue-box class should give the left of elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of padding.');" + "text": "blue-boxclass 的左内边距应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'blue-boxclass 的左内边距应为20px。');" }, { - "text": "You should use the clockwise notation to set the padding of blue-box class.", - "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of blue-box class.');" + "text": "你应该按照顺时针排序，汇总声明的方式来设置blue-box的padding值。", + "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), '你应该按照顺时针排序，汇总声明的方式来设置blue-box的padding值。');" } ], "challengeType": 0, @@ -1717,29 +1717,29 @@ "id": "bad87fee1348bd9afdf08726", "title": "Use Clockwise Notation to Specify the Margin of an Element", "description": [ - "Let's try this again, but with margin this time.", - "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties individually, you can specify them all in one line, like this:", + "让我们再试一次，不过这一次轮到margin了。", + "同样，每个方向的外边距值可以在margin属性里面汇总声明，来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式，代码如下：", "margin: 10px 20px 10px 20px;", - "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.", + "这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的margin。", "
", - "Use Clockwise Notation to give the element with the blue-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side." + "按照顺时针顺序，给\".blue-box\" class的上外边距以及左外边距设置为40px，右外边距和下外边距则设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.');" + "text": "blue-boxclass 的上外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'blue-boxclass 的上外边距应为40px。');" }, { - "text": "Your blue-box class should give the right of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.');" + "text": "blue-boxclass 的右外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Yblue-boxclass 的右外边距应为40px。');" }, { - "text": "Your blue-box class should give the bottom of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.');" + "text": "blue-boxclass 的下外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'blue-boxclass 的下外边距应为40px。');" }, { - "text": "Your blue-box class should give the left of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.');" + "text": "blue-boxclass 的左外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'blue-boxclass 的左外边距应为40px。');" } ], "challengeType": 0,