margin控制元素border与周围元素之间的空间量。如果将元素的margin设置为负值，则元素将变大。 margin（外边距）控制元素边框与其他周围元素之间的距离大小。
+如果你设置元素margin为负值，元素会变得更大。
+margin设置为负值，如红色框的值。将蓝色框的margin更改为-15px ，因此它会填充其周围黄色框的整个水平宽度。 margin为负值，跟红色盒子一样大小。
+蓝色盒子的margin设置为-15px，它会填满与黄色盒子之间的距离。
+blue-box类应该给出-15px的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。');
```
@@ -47,7 +54,7 @@ tests:
background-color: yellow;
padding: 10px;
}
-
+
.red-box {
background-color: crimson;
color: #fff;
@@ -67,7 +74,6 @@ tests:
style ， color和width等属性。例如，如果我们想要在HTML元素周围创建一个红色的5像素边框，我们可以使用此类： <风格>
.thin-red-border {
边框颜色：红色;
border-width：5px;
边框式：坚固;
}
</样式>
style，color和width属性。
+假如，我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
+
+```html
+
+```
+
+thick-green-border 。这个类应该在HTML元素周围添加一个10px的实心绿色边框。将课程应用于您的猫照片。请记住，您可以使用其class属性将多个类应用于元素，方法是使用空格分隔每个类名。例如： <img class="class1 class2"> thick-green-border CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在你的猫咪照片上。
+记得，在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：
+<img class="class1 class2">
+img元素应该具有smaller-image类。
- testString: 'assert($("img").hasClass("smaller-image"), "Your img element should have the class smaller-image.");'
- - text: 你的img元素应该有类thick-green-border 。
- testString: 'assert($("img").hasClass("thick-green-border"), "Your img element should have the class thick-green-border.");'
- - 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, "Give your image a border width of 10px.");'
- - text: 为您的图像提供solid的边框样式。
- testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of solid.");'
- - text: img元素周围的边框应为绿色。
- testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your img element should be green.");'
+ - text: '你的img元素应该含有smaller-image class。'
+ testString: assert($("img").hasClass("smaller-image"), '你的img元素应该含有smaller-image class。');
+ - text: '同时，你的img元素应该含有thick-green-border class。'
+ testString: assert($("img").hasClass("thick-green-border"), '同时，你的img元素应该含有thick-green-border class。');
+ - 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: '设置你的图片边框为solid实线。'
+ testString: assert($("img").css("border-right-style") === "solid", '设置你的图片边框为solid实线。');
+ - text: 'img元素的边框颜色应该为绿色。'
+ testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)", 'img元素的边框颜色应该为绿色。');
```
@@ -60,48 +79,46 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
margin 。 CSS允许您控制的margin与元素的所有四个单项两侧margin-top ， margin-right ， margin-bottom ，和margin-left属性。 margin都设置成一个特定的值。
+CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。
+margin为40px ，底部和右侧仅为20px 。 margin值设置为40px，底部和右侧设置为20px。
+blue-box类应该给元素顶部40px的margin 。
- testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your blue-box class should give the top of elements 40px of margin.");'
- - text: 您的blue-box类应该赋予元素20px margin的权利。
- testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your blue-box class should give the right of elements 20px of margin.");'
- - text: 你的blue-box类应该给元素的底部提供20px的margin 。
- testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your blue-box class should give the bottom of elements 20px of margin.");'
- - text: 你的blue-box类应该给元素左边40px的margin 。
- testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your blue-box class should give the left of elements 40px of margin.");'
+ - text: '你的blue-box class 的右侧margin（上外边距）值应为40px。'
+ testString: assert($(".blue-box").css("margin-top") === "40px", '你的blue-box class 的顶部margin（上外边距）值应为40px。');
+ - text: '你的blue-box class 的右侧margin（右外边距）值应为20px。'
+ testString: assert($(".blue-box").css("margin-right") === "20px", '你的blue-box class 的右侧margin（右外边距）值应为20px。');
+ - text: '你的blue-box class 的底部margin（下外边距）值应为20px。'
+ testString: assert($(".blue-box").css("margin-bottom") === "20px", '你的blue-box class 的底部margin（下外边距）值应为20px。');
+ - text: '你的blue-box class 的左侧margin（左外边距）值应为40px。'
+ testString: assert($(".blue-box").css("margin-left") === "40px", '你的blue-box class 的左侧margin（左外边距）值应为40px。');
```
@@ -53,7 +59,7 @@ tests:
background-color: yellow;
padding: 10px;
}
-
+
.red-box {
background-color: crimson;
color: #fff;
@@ -74,7 +80,6 @@ tests:
padding 。 CSS允许您控制的padding与元素的所有四个单项两侧padding-top ， padding-right ， padding-bottom ，并padding-left属性。 padding都设置成一个特定的值
+CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。
+40px的padding ，但在其底部和右侧只有20px 。 padding值设置为40px，底部和右侧设置为20px。
+blue-box类应该给出40px 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-box类应该给出20px 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-box类应该给出20px 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-box类应该给元素左边padding 40px 。
- testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your blue-box class should give the left of the elements 40px of padding.");'
+ - text: '你的blue-box class 的顶部padding（上内边距）值应为40px。'
+ testString: assert($(".blue-box").css("padding-top") === "40px", '你的blue-box class 的顶部padding（上内边距）值应为40px。');
+ - text: '你的blue-box class 的右侧padding（右内边距）值应为20px。'
+ testString: assert($(".blue-box").css("padding-right") === "20px", '你的blue-box class 的右侧padding（右内边距）值应为20px。');
+ - text: '你的blue-box class 的底部padding（下内边距）值应为20px。'
+ testString: assert($(".blue-box").css("padding-bottom") === "20px", '你的blue-box class 的底部padding（下内边距）值应为20px。');
+ - text: '你的blue-box class 的左侧padding（左内边距）值应为40px。'
+ testString: assert($(".blue-box").css("padding-left") === "40px", '你的blue-box class 的左侧padding（左内边距）值应为40px。');
```
@@ -53,7 +59,7 @@ tests:
background-color: yellow;
padding: 10px;
}
-
+
.red-box {
background-color: crimson;
color: #fff;
@@ -74,7 +80,6 @@ tests:
border-radius的CSS属性来舍入这些角。 border-radius属性来让它变得圆润。
+border-radius 。给你的猫照片border-radius 10px 。注意：此挑战允许多种可能的解决方案。例如，您可以将border-radius添加到.thick-green-border类或.smaller-image类。 border-radius可以用px像素单位来赋值。给你的猫咪图片设置 10px 的border-radius。
+注意：这个挑战有多个解决方法。例如，添加border-radius属性到.thick-green-borderclass 或.smaller-imageclass 里都是可行的。
+10px
- testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of 10px");'
+ - text: '你的图片元素应具有 "thick-green-border" class 属性。'
+ testString: assert($("img").hasClass("thick-green-border"), '你的图片元素应具有 "thick-green-border" class 属性。');
+ - text: '你的图片应含有10px的边框圆角。'
+ testString: assert(parseInt($("img").css("border-top-left-radius")) > 8, '你的图片应含有10px的边框圆角。');
```
@@ -60,36 +66,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
margin控制元素border与周围元素之间的空间量。在这里，我们可以看到蓝色框和红色框嵌套在黄色框中。请注意，红色框的margin大于蓝色框，使其看起来更小。当您增加蓝框的margin ，它将增加其边框与周围元素之间的距离。 margin（外边距）控制元素的边框与其他元素之间的距离。
+在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。
+当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。
+margin以匹配红色框的margin 。 margin的值要跟红色盒子的一样大小。
+blue-box类应该给出20px的margin元素。
- testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your blue-box class should give elements 20px of margin.");'
+ - text: '你的blue-box class 的margin值应为20px。'
+ testString: assert($(".blue-box").css("margin-top") === "20px", '你的blue-box class 的margin值应为20px。');
```
@@ -47,7 +54,7 @@ tests:
background-color: yellow;
padding: 10px;
}
-
+
.red-box {
background-color: crimson;
color: #fff;
@@ -68,7 +75,6 @@ tests:
padding ， margin和border 。元素的padding控制元素内容与其border之间的空间量。在这里，我们可以看到蓝色框和红色框嵌套在黄色框中。请注意，红色框具有比蓝色框更多的padding 。当您增加蓝框的padding ，它将增加文本与其周围边框之间的距离（ padding ）。 padding（内边距），margin（外边距）和border（边框）。
+padding控制着元素内容与border之间的空隙大小。
+在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。可以发现，红色盒子比蓝色盒子有着更多的padding填充空间。
+当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。
+padding以匹配红色框的padding 。 padding的值要跟红色盒子的一样大小。
+blue-box类应该给出20px的padding元素。
- testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your blue-box class should give elements 20px of padding.");'
+ - text: '你的blue-box class 的padding值应为20px。'
+ testString: assert($(".blue-box").css("padding-top") === "20px", '你的blue-box class 的padding值应为20px。');
```
@@ -47,7 +57,7 @@ tests:
background-color: yellow;
padding: 10px;
}
-
+
.red-box {
background-color: crimson;
color: #fff;
@@ -66,7 +76,6 @@ tests:
背景：var（ - 企鹅皮，黑色）;如果未设置变量，则会将背景设置为黑色。请注意，这对于调试很有用。
.penguin-top和.penguin-bottom类的变量存在问题。而不是修复拼写错误，将.penguin-top值的black添加到.penguin-top和.penguin-bottom类的background属性中。 penguin-top和penguin-bottomclass 里面，background属性设置一个black的备用色。
+注意：因为 CSS 变量名拼写错了，所以备用值会被使用。
+black为background的财产penguin-top班。
- testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of black to the background property of the penguin-top class.");'
- - text: 将black的后备值应用于penguin-bottom类的background属性。
- testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of black to the background property of the penguin-bottom class.");'
+ - text: 'penguin-top class 的background属性应设置一个black备用颜色。'
+ testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''penguin-top class 的background属性应设置一个black备用颜色。'');'
+ - text: 'penguin-bottom class 的background属性应设置一个black备用颜色。'
+ testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), ''penguin-bottom class 的background属性应设置一个black备用颜色。'');'
```
@@ -44,33 +58,33 @@ tests:
width: 300px;
height: 300px;
}
-
+
.penguin-top {
top: 10%;
left: 25%;
-
+
/* change code below */
background: var(--pengiun-skin);
/* change code above */
-
+
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
-
+
.penguin-bottom {
top: 40%;
left: 23.5%;
-
+
/* change code below */
background: var(--pengiun-skin);
/* change code above */
-
+
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
-
+
.right-hand {
top: 0%;
left: -5%;
@@ -81,7 +95,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
-
+
.left-hand {
top: 0%;
left: 75%;
@@ -92,7 +106,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
-
+
.right-cheek {
top: 15%;
left: 35%;
@@ -101,7 +115,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.left-cheek {
top: 15%;
left: 5%;
@@ -110,7 +124,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.belly {
top: 60%;
left: 2.5%;
@@ -119,7 +133,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
-
+
.right-feet {
top: 85%;
left: 60%;
@@ -130,7 +144,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
-
+
.left-feet {
top: 85%;
left: 25%;
@@ -141,7 +155,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
-
+
.right-eye {
top: 45%;
left: 60%;
@@ -150,7 +164,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.left-eye {
top: 45%;
left: 25%;
@@ -159,7 +173,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.sparkle {
top: 25%;
left: 15%;
@@ -168,7 +182,7 @@ tests:
height: 35%;
border-radius: 50%;
}
-
+
.blush-right {
top: 65%;
left: 15%;
@@ -177,7 +191,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.blush-left {
top: 65%;
left: 70%;
@@ -186,7 +200,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-top {
top: 60%;
left: 40%;
@@ -195,7 +209,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-bottom {
top: 65%;
left: 42%;
@@ -204,11 +218,11 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
body {
background:#c6faf1;
}
-
+
.penguin * {
position: absolute;
}
@@ -236,7 +250,6 @@ tests:
-
```
@@ -248,7 +261,10 @@ tests:
## Solution
:root ，他们将设置可变整个页面的价值。然后，您可以通过在特定元素中再次设置它们来覆盖这些变量。 :root里创建变量时，这些变量的作用域是整个页面。
+如果在元素里创建相同的变量，会重写:root变量设置的值。
+
+penguin类--penguin-belly的值更改为white 。 penguinclass 里，设置--penguin-belly的值为white。
+penguin类应该将--penguin-belly变量重新分配为white 。
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The penguin class should reassign the --penguin-belly variable to white.");'
+ - text: '应该在penguinclas 里重定义--penguin-belly的变量值，且它的值为white。'
+ testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''应该在penguinclas 里重定义--penguin-belly的变量值，且它的值为white。'');'
```
@@ -36,17 +43,17 @@ tests:
--penguin-belly: pink;
--penguin-beak: orange;
}
-
+
body {
background: var(--penguin-belly, #c6faf1);
}
-
+
.penguin {
-
+
/* add code below */
-
+
/* add code above */
-
+
position: relative;
margin: auto;
display: block;
@@ -54,7 +61,7 @@ tests:
width: 300px;
height: 300px;
}
-
+
.right-cheek {
top: 15%;
left: 35%;
@@ -63,7 +70,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.left-cheek {
top: 15%;
left: 5%;
@@ -72,7 +79,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.belly {
top: 60%;
left: 2.5%;
@@ -81,7 +88,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
-
+
.penguin-top {
top: 10%;
left: 25%;
@@ -90,7 +97,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
-
+
.penguin-bottom {
top: 40%;
left: 23.5%;
@@ -99,7 +106,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
-
+
.right-hand {
top: 0%;
left: -5%;
@@ -110,7 +117,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
-
+
.left-hand {
top: 0%;
left: 75%;
@@ -121,7 +128,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
-
+
.right-feet {
top: 85%;
left: 60%;
@@ -132,7 +139,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
-
+
.left-feet {
top: 85%;
left: 25%;
@@ -143,7 +150,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
-
+
.right-eye {
top: 45%;
left: 60%;
@@ -152,7 +159,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.left-eye {
top: 45%;
left: 25%;
@@ -161,7 +168,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.sparkle {
top: 25%;
left: 15%;
@@ -170,7 +177,7 @@ tests:
height: 35%;
border-radius: 50%;
}
-
+
.blush-right {
top: 65%;
left: 15%;
@@ -179,7 +186,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.blush-left {
top: 65%;
left: 70%;
@@ -188,7 +195,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-top {
top: 60%;
left: 40%;
@@ -197,7 +204,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-bottom {
top: 65%;
left: 42%;
@@ -206,7 +213,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.penguin * {
position: absolute;
}
@@ -234,7 +241,6 @@ tests:
-
```
@@ -246,7 +252,10 @@ tests:
## Solution
h2元素的style来做到这一点。负责元素文本color属性是color样式属性。以下是将h2元素的文本颜色设置为蓝色的方法： <h2 style="color: blue;">CatPhotoApp</h2>请注意，最好使用;结束内联style声明; 。 h2元素的style属性的color值来改变文本颜色。
+以下是改变h2元素为蓝色的方法：
+<h2 style="color: blue;">CatPhotoApp</h2>
+请注意行内style最好以;来结束。
+h2元素的样式，使其文本颜色为红色。 h2元素的文本颜色设置为红色。
+h2元素应该是红色的。
- testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your h2 element should be red.");'
- - text: 你的style声明应以a结尾; 。
- testString: 'assert(code.match(/style declaration should end with a ; .");'
+ - text: 'h2元素应该为红色。'
+ testString: assert($("h2").css("color") === "rgb(255, 0, 0)", 'h2元素应该为红色。');
+ - text: 'h2元素的style属性值应该以;结束。'
+ testString: 'assert(code.match(/h2元素的style属性值应该以;结束。'');'
+ - text: 'style 声明应该以 ; 结尾'
+ testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
```
@@ -34,36 +45,35 @@ tests:
```html
Click here to view more cat photos.
+点击查看更多猫图.
-Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
font-size CSS属性控制，如下所示： h1 {
font-size：30px;
}
font-size属性控制，如下所示：
+
+```css
+h1 {
+ font-size: 30px;
+}
+```
+
+<style>包含您的标记red-text类，创建一个条目p元素和设置font-size为16个像素（ 16px ）。 red-textclass 选择器的<style>声明区域的里，创建一个p元素样式规则，并设置font-size为16px。
+style标记之间，给出p元素font-size为16px 。浏览器和文本缩放应为100％。
- testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.");'
+ - text: '在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 100％。'
+ testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), ''在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 100％。'');'
```
@@ -38,36 +50,35 @@ tests:
Click here to view more cat photos.
+点击查看更多猫图.
-Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
name有two dashes在它前面，并为其分配一个value是这样的： - penguin-skin：灰色;这将创建一个名为
--penguin-skin的变量，并为其赋值为gray 。现在，您可以在CSS中的其他位置使用该变量将其他元素的值更改为灰色。 破折号，并为其赋值，例子如下：
+
+```css
+--penguin-skin: gray;
+```
+
+这样会创建一个--penguin-skin变量并赋值为gray（灰色）。
+现在，其他元素可通过该变量来设置为gray（灰色）。
+penguin类中，创建一个变量名称--penguin-skin并赋予它一个gray值penguinclass 里面，创建一个--penguin-skin变量，且赋值为gray（灰色）。
+penguin类应声明--penguin-skin变量并将其指定为gray 。
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-skin variable and assign it to gray.");'
+ - text: 'penguin class 里应声明--penguin-skin变量，且赋值为gray。'
+ testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''penguin class 里应声明--penguin-skin变量，且赋值为gray。'');'
```
@@ -32,9 +44,9 @@ tests:
```html
-
```
@@ -54,7 +60,20 @@ tests:
## Solution
:root是一个伪类选择器，它匹配文档的根元素，通常是:root创建变量，它们将在全局可用，并且可以在样式表中的任何其他选择器中访问。 :root 是一个 pseudo-class 选择器匹配文档的根选择器，通常指 html 元素。通过在 :root 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。
+:root选择器中定义一个名为--penguin-belly的变量，并为其赋值pink 。然后，您可以在任何使用该变量的位置查看该值将如何级联以将值更改为粉红色。 :root 选择器里定义变量 --penguin-belly 并赋值 pink。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
+:root声明--penguin-belly变量并将其指定为pink 。'
- testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly variable in the :root and assign it to pink.");'
+ - text: '应该在 :root 里声明 --penguin-belly 变量并赋值 pink。'
+ testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi));
```
@@ -232,7 +238,6 @@ tests:
-
```
@@ -244,7 +249,9 @@ tests:
## Solution
body元素，并且它的body元素也可以用CSS设置样式。记住，你可以风格你body元素，就像任何其他HTML元素，和所有其他元素将继承你的body元素的样式。 body元素，body元素也可以使用 CSS 样式。
+设置body元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到body设置的样式。
+h1与文本元素Hello World然后，让我们给您的网页上的所有元素的颜色green中加入color: green;你的body元素的风格声明。最后，通过添加font-family: monospace; ，为你的body元素提供monospace的font-family: monospace;你的body元素的风格声明。 Hello World的h1标签元素。
+接着，在bodyCSS 规则里面添加一句color: green;，改变页面其他元素的字体颜色为green（绿色）。
+最后，同样在bodyCSS 规则里面添加font-family: monospace;，设置其他元素字体为font-family: monospace;。
+h1元素。
- testString: 'assert(($("h1").length > 0), "Create an h1 element.");'
- - text: 你的h1元素应该有文本Hello World 。
- testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your h1 element should have the text Hello World.");'
- - text: 确保您的h1元素具有结束标记。
- testString: 'assert(code.match(/<\/h1>/g) && code.match(/body元素赋予green的color属性。
- testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your body element the color property of green.");'
- - text: 为body元素提供monospace的font-family属性。
- testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your body element the font-family property of monospace.");'
- - text: 你的h1元素应该从你的body元素继承font monospace 。
- testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your h1 element should inherit the font monospace from your body element.");'
- - text: 您的h1元素应该从您的body元素继承绿色。
- testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your h1 element should inherit the color green from your body element.");'
+ - text: '创建一个h1元素。'
+ testString: assert(($("h1").length > 0), '创建一个h1元素。');
+ - text: 'h1元素的文本内容应该为Hello World。'
+ testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), 'h1元素的文本内容应该为Hello World。');
+ - text: '确保你的h1元素具有结束标记。'
+ testString: assert(code.match(/<\/h1>/g) && code.match(/body元素的color属性值应为green。'
+ testString: assert(($("body").css("color") === "rgb(0, 128, 0)"), 'body元素的color属性值应为green。');
+ - text: 'body元素的font-family属性值应为monospace。'
+ testString: assert(($("body").css("font-family").match(/monospace/i)), 'body元素的font-family属性值应为monospace。');
+ - text: 'h1元素应该继承body的monospace字体属性。'
+ testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), 'h1元素应该继承body的monospace字体属性。');
+ - text: 'h1元素的字体颜色也应该继承body元素的绿色。'
+ testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), 'h1元素的字体颜色也应该继承body元素的绿色。');
```
@@ -48,7 +56,6 @@ tests:
}
-
```
@@ -60,7 +67,8 @@ tests:
## Solution
border-radius 。 border-radius的值。
+border-radius为50% 。 border-radius的值设置为50%。
+50%的边框半径，使其完美呈圆形。
- 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(code.match(/50%/g), "Be sure to use a percentage value of 50%.");'
+ - text: '你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。'
+ testString: assert(parseInt($("img").css("border-top-left-radius")) > 48, '你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。');
+ - text: '请确保百分值为50%。'
+ testString: assert(code.match(/50%/g), '请确保百分值为50%。');
```
@@ -61,36 +66,35 @@ tests:
Click here to view more cat photos.
+点击查看更多猫图.
-Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
style元素中的所有CSS声明。可是等等。有一种覆盖CSS的最后一种方法。这是所有人中最强大的方法。但在我们这样做之前，让我们谈谈为什么你想要覆盖CSS。在许多情况下，您将使用CSS库。这些可能会意外地覆盖您自己的CSS。所以当你绝对需要确定一个元素有特定的CSS时，你可以使用!important让我们一直回到我们的pink-text类声明。请记住，我们的pink-text类被后续的类声明，id声明和内联样式覆盖。 style标签里面所有的 CSS 声明。
+不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。
+在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖你的 CSS 样式。当你需要保证你的 CSS 样式不受影响，你可以使用!important。
+让我们回到pink-textclass 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
+!important ，以100％确定你的h1元素是粉红色的。如何执行此操作的示例是： color: red !important; pink-textclass 的color声明里面使用!important关键字，去确保h1元素的字体颜色一定为粉色。
+操作的方法大概如下：
+color: red !important;
+h1元素应该具有pink-text类。
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: 你的h1元素应该有blue-text 。
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: 您的h1元素应具有orange-text的ID。
- testString: 'assert($("h1").attr("id") === "orange-text", "Your h1 element should have the id of orange-text.");'
- - text: '您的h1元素应具有内联样式的color: white 。'
- testString: 'assert(code.match(/color: white.");'
- - text: 你的pink-text类声明应该有!important关键字来覆盖所有其他声明。
- testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your pink-text class declaration should have the !important keyword to override all other declarations.");'
- - text: 你的h1元素应该是粉红色的。
- testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1 element should be pink.");'
+ - text: 'h1元素应该包含pink-text class。'
+ testString: assert($("h1").hasClass("pink-text"), 'h1元素应该包含pink-text class。');
+ - text: 'h1元素应该包含blue-text class。'
+ testString: assert($("h1").hasClass("blue-text"), 'h1元素应该包含blue-text class。');
+ - text: 'h1元素应该包含一个名为orange-text的id。'
+ testString: assert($("h1").attr("id") === "orange-text", 'h1元素应该包含一个名为orange-text的id。');
+ - text: 'h1元素应该包含color: white的行内样式声明。'
+ testString: 'assert(code.match(/color: white的行内样式声明。'');'
+ - text: 'pink-text class 声明应该含有!important关键字。'
+ testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''pink-text class 声明应该含有!important关键字。'');'
+ - text: 'h1元素的字体颜色应该为粉色。'
+ testString: assert($("h1").css("color") === "rgb(255, 192, 203)", 'h1元素的字体颜色应该为粉色。');
```
@@ -57,7 +68,6 @@ tests:
}
pink-text和blue-text类，并通过给h1元素一个id然后设置那个id样式，使你的h1元素变成橙色。 h1元素添加 id 属性，来覆盖 class 属性定义的同名样式。
+h1元素提供orange-text的id属性。请记住，id样式如下所示： <h1 id="orange-text">在h1元素上保留blue-text和pink-text类。在style元素中为您的orange-text id创建一个CSS声明。这是一个示例： ＃brown-text {注意：无论您是在粉红色文本类之上还是之下声明此CSS都无关紧要，因为id属性始终优先。
颜色：棕色;
}
h1元素添加 id 属性，属性值为orange-text。设置方式如下：
+<h1 id="orange-text">
+h1元素继续保留blue-text和pink-textclass。
+在style元素中创建名为orange-text的 id 选择器。例子如下：
+
+```css
+#brown-text {
+ color: brown;
+}
+```
+
+注意：无论在pink-textclass 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
+h1元素应该具有pink-text类。
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: 你的h1元素应该有blue-text 。
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: 为你的h1元素提供orange-text的id。
- testString: 'assert($("h1").attr("id") === "orange-text", "Give your h1 element the id of orange-text.");'
- - text: 应该只有一个h1元素。
- testString: 'assert(($("h1").length === 1), "There should be only one h1 element.");'
- - text: 为您的orange-text ID创建一个CSS声明
- testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your orange-text id");'
- - text: 不要给你的h1任何style属性。
- testString: 'assert(!code.match(/h1 any style attributes.");'
- - text: 你的h1元素应该是橙色的。
- testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your h1 element should be orange.");'
+ - text: 'h1元素应该包含pink-text class。'
+ testString: assert($("h1").hasClass("pink-text"), 'h1元素应该包含pink-text class。');
+ - text: 'h1元素应该包含blue-text class。'
+ testString: assert($("h1").hasClass("blue-text"), 'h1元素应该包含blue-text class。');
+ - text: 'h1的 id 属性值为orange-text。'
+ testString: assert($("h1").attr("id") === "orange-text", 'h1的 id 属性值为orange-text。');
+ - text: '应该只有一个h1元素。'
+ testString: assert(($("h1").length === 1), '应该只有一个h1元素。');
+ - text: '创建名为orange-text的 id 选择器。'
+ testString: assert(code.match(/#orange-text\s*{/gi), '创建名为orange-text的 id 选择器。');
+ - text: '不要在h1元素里面使用style（行内样式）。'
+ testString: assert(!code.match(/h1元素里面使用style（行内样式）。');
+ - text: 'h1元素的字体颜色应为橘色。'
+ testString: assert($("h1").css("color") === "rgb(255, 165, 0)", 'h1元素的字体颜色应为橘色。');
```
@@ -56,7 +74,6 @@ tests:
}
style元素CSS中的声明位置如何。还有其他方法可以覆盖CSS。你还记得内联样式吗？ style标签哪里声明，都会覆盖 class 声明的样式，
+其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？
+inline style尝试使我们的h1元素变白。请记住，在线条样式中如下所示： <h1 style="color: green;">在h1元素上保留blue-text和pink-text类。 h1的字体颜色变白。像下面这样使用：
+<h1 style="color: green">
+你的h1元素需继续保留blue-text和pink-textclass。
+h1元素应该具有pink-text类。
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: 你的h1元素应该有blue-text 。
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: 您的h1元素应具有orange-text的ID。
- testString: 'assert($("h1").attr("id") === "orange-text", "Your h1 element should have the id of orange-text.");'
- - text: 为您的h1元素提供内联样式。
- testString: 'assert(document.querySelector("h1[style]"), "Give your h1 element an inline style.");'
- - text: 你的h1元素应该是白色的。
- testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your h1 element should be white.");'
+ - text: 'h1元素应该包含pink-text class。'
+ testString: assert($("h1").hasClass("pink-text"), 'h1元素应该包含pink-text class。');
+ - text: 'h1元素应该包含blue-text class。'
+ testString: assert($("h1").hasClass("blue-text"), 'h1元素应该包含blue-text class。');
+ - text: 'h1元素应该包含一个名为orange-text的id。'
+ testString: assert($("h1").attr("id") === "orange-text", 'h1元素应该包含一个名为orange-text的id。');
+ - text: 'h1元素应该含有行内样式。'
+ testString: assert(document.querySelector('h1[style]'), 'h1元素应该含有行内样式。');
+ - text: 'h1元素的字体颜色应该为白色。'
+ testString: assert($("h1").css("color") === "rgb(255, 255, 255)", 'h1元素的字体颜色应该为白色。');
```
@@ -55,7 +63,6 @@ tests:
}
body元素的CSS声明！我们刚刚证明我们的类将覆盖body元素的CSS。所以下一个合乎逻辑的问题是，我们可以做些什么来覆盖我们的pink-text类？ body元素的 CSS 声明。
+我们刚刚证明了我们的 class 会覆盖body的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的pink-textclass？
+blue-text的附加CSS类，它为元素提供蓝色。确保它低于pink-text类声明。除了pink-text类之外，将blue-text类应用于h1元素，让我们看看哪个获胜。将多个类属性应用于HTML元素是通过它们之间的空格完成的，如下所示： class="class1 class2"注意：HTML元素中列出的类的顺序无关紧要。但是， <style>部分中的class声明的顺序是重要的。第二个声明将始终优先于第一个声明。因为.blue-text被声明为第二个，所以它会覆盖.pink-text的属性blue的blue-textCSS class，并确保它在pink-text下方声明。
+在含有pink-textclass 的h1元素里面，再添加一个blue-textclass，这时候，我们将能看到到底是谁获胜。
+HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
+class="class1 class2"
+注意：HTML 元素里应用的 class 的先后顺序无关紧要。
+但是，在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。因为.blue-text在.pink-text的后面声明，所以.blue-text会覆盖.pink-text的样式。
+h1元素应该具有pink-text类。
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: 你的h1元素应该有blue-text 。
- testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");'
- - text: blue-text和pink-text都应属于同一个h1元素。
- testString: 'assert($(".pink-text").hasClass("blue-text"), "Both blue-text and pink-text should belong to the same h1 element.");'
- - text: 你的h1元素应该是蓝色的。
- testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your h1 element should be blue.");'
+ - text: 'h1元素应该包含pink-text class。'
+ testString: assert($("h1").hasClass("pink-text"), 'h1元素应该包含pink-text class。');
+ - text: 'h1元素应该包含blue-text class。'
+ testString: assert($("h1").hasClass("blue-text"), 'h1元素应该包含blue-text class。');
+ - text: 'blue-text和pink-text需同时应用于h1元素上。'
+ testString: assert($(".pink-text").hasClass("blue-text"), 'blue-text和pink-text需同时应用于h1元素上。');
+ - text: 'h1元素的颜色应为蓝色。'
+ testString: assert($("h1").css("color") === "rgb(0, 0, 255)", 'h1元素的颜色应为蓝色。');
```
@@ -47,7 +58,6 @@ tests:
}
h1元素不能同时为绿色和粉红色。让我们看看当我们创建一个使文本变为粉红色的类，然后将其应用于元素时会发生什么。我们的类会覆盖 body元素的color: green; CSS属性？ h1元素也不能同时设置green和pink两种样式。
+让我们尝试创建一个字体颜色为pink的 class，并应于用其中一个元素中。猜一猜，它会覆盖body元素设置的color: green;CSS 属性吗？
+pink-text的CSS类，它为元素提供粉红色。为你的h1元素提供pink-text类。 pink的CSS class，并起名为pink-text。
+给你的h1元素添加pink-textclass。
+h1元素应该具有pink-text类。
- testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");'
- - text: 你的<style>应该有一个改变color的pink-text CSS类。
- testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <style> should have a pink-text CSS class that changes the color.");'
- - text: 你的h1元素应该是粉红色的。
- testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1 element should be pink.");'
+ - text: 'h1元素应该含有pink-text class。'
+ testString: assert($("h1").hasClass("pink-text"), 'h1元素应该含有pink-text class。');
+ - text: '<style>标签应该含有一个可以改变字体颜色的pink-text class。'
+ testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), ''<style>标签应该含有一个可以改变字体颜色的pink-text class。'');'
+ - text: 'h1元素的字体颜色应该为pink（粉色）。'
+ testString: assert($("h1").css("color") === "rgb(255, 192, 203)", 'h1元素的字体颜色应该为pink（粉色）。');
```
@@ -42,7 +50,6 @@ tests:
}
font-family属性设置元素应使用的font-family 。例如，如果要将h2元素的字体设置为sans-serif ，则可以使用以下CSS： h2 {
font-family：sans-serif;
}
font-family属性，可以设置元素里面的字体样式。
+如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：
+
+```css
+h2 {
+ font-family: sans-serif;
+}
+```
+
+p元素都使用monospace字体。 p元素使用monospace字体。
+p元素应该使用字体monospace 。
- testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your p elements should use the font monospace.");'
+ - text: 'p元素应该使用monospace字体。'
+ testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i), 'p元素应该使用monospace字体。');
```
@@ -42,36 +55,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
id属性。使用id属性有几个好处：您可以使用id来设置单个元素的样式，稍后您将学习如何使用它来使用JavaScript选择和修改特定元素。 id属性应该是唯一的。浏览器不会强制执行此操作，但这是广泛认可的最佳实践。所以请不要给多个元素赋予相同的id属性。这里有一个例子，说明如何为你的h2元素提供cat-photo-app <h2 id="cat-photo-app"> ： <h2 id="cat-photo-app"> id属性。
+使用id有几个好处：你可以通过id选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过id来选择元素和操作元素。
+id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性。
+设置h2元素的 id 为cat-photo-app的方法如下：
+<h2 id="cat-photo-app">
+form元素添加id cat-photo-form 。 form元素的 id 为cat-photo-form。
+form元素添加cat-photo-form的id。
- 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。');
```
@@ -63,36 +72,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
width的属性，用于控制元素的宽度。就像字体一样，我们将使用px （像素）来指定图像的宽度。例如，如果我们想要创建一个名为larger-image的CSS类，它给HTML元素的宽度为500像素，我们将使用： <风格>
.larger-image {
宽度：500px;
}
</样式>
width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。
+假如，你想创建一个叫larger-image的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
+
+```html
+
+```
+
+smaller-image的类，并使用它来调整图像大小，使其只有100像素宽。 注意 smaller-image的 CSS class，设置图片的宽度为 100px。
+注意：img元素应该具有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: 您的图片应为100像素宽。浏览器缩放应为100％。
- testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
+ - text: 'img元素应该含有smaller-image class。'
+ testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image", ''img元素应该含有smaller-image class。'');'
+ - text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
+ testString: assert($("img").width() === 100, '你的图片应为 100px（像素），且浏览器缩放应为默认 100%。');
```
@@ -50,36 +66,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
Click here to view more cat photos.
- -Things cats love:
-Top 3 things cats hate:
-monospace ， serif和sans-serif当一个字体不可用时，您可以告诉浏览器“降级”为另一种字体。例如，如果您希望元素使用Helvetica字体，但在Helvetica不可用时降级为sans-serif字体，则将按如下方式指定： p {通用字体系列名称不区分大小写。此外，它们不需要引号，因为它们是CSS关键字。
font-family：Helvetica，sans-serif;
}
monospace，serif和sans-serif。
+当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。
+例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：
+
+```css
+p {
+ font-family: Helvetica, sans-serif;
+}
+```
+
+通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。
+monospace字体应用于h2元素，以便它现在有两种字体 - Lobster和monospace字体。在上一个挑战中，您使用link标记导入了Lobster字体。现在注释掉谷歌字体导入的Lobster字体（使用之前学过的HTML评论），以便它不再可用。注意你的h2元素如何降级为monospace字体。 注意 monospace字体到h2元素里，它现在拥有着Lobster和monospace两种字体。
+在上一个挑战里，你已经通过link标签引入谷歌Lobster字体。现在让我们注释掉谷歌Lobster字体的引入（使用我们之前学过的HTML注释），使字体失效。你会发现你的h2元素降级到了monospace字体。
+注意：Lobster字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。
+Lobster 。
- testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font Lobster.");'
- - text: 当Lobster不可用时，你的h2元素会降级为monospace字体。
- 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: 通过在其前面放置<!--来注释您对Google的Lobster字体的调用。
- testString: 'assert(new RegExp("", "gi").test(code), "Be sure to close your comment by adding -->.");'
+ - text: 'h2元素应该含有Lobster字体。'
+ testString: assert($("h2").css("font-family").match(/^"?lobster/i), 'h2元素应该含有Lobster字体。');
+ - 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: '通过添加<!--，注释掉谷歌Lobster字体的引入。'
+ testString: assert(new RegExp("", "gi").test(code), '确保注释要以-->结束。');
```
@@ -54,36 +71,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
red-text类应用于第一个p元素来查看。 red-textclass 选择器应用在第一个p元素上。
+h2元素应该是红色的。
- testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your h2 element should be red.");'
- - text: 你的h2元素应该有red-text类。
- testString: 'assert($("h2").hasClass("red-text"), "Your h2 element should have the class red-text.");'
- - text: 你的第一个p元素应该是红色的。
- testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", "Your first p element should be red.");'
- - text: 你的第二和第三个p元素不应该是红色的。
- testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), "Your second and third p elements should not be red.");'
- - text: 你的第一个p元素应该有red-text类。
- testString: 'assert($("p:eq(0)").hasClass("red-text"), "Your first p element should have the class red-text.");'
+ - text: 'h2元素应该是红色的。'
+ testString: assert($("h2").css("color") === "rgb(255, 0, 0)", 'h2元素应该是红色的。');
+ - text: 'h2元素应该含有red-text class 选择器。'
+ testString: assert($("h2").hasClass("red-text"), 'h2元素应该含有red-text class 选择器。');
+ - text: '第一个p元素应该为红色。'
+ testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", ''第一个p元素应该为红色。'');'
+ - text: '第二和第三个p元素不应该为红色。'
+ testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), ''第二和第三个p元素不应该为红色。'');'
+ - text: '第一个p元素应该包含red-text class 选择器。'
+ testString: 'assert($("p:eq(0)").hasClass("red-text"), ''第一个p元素应该包含red-text class 选择器。'');'
```
@@ -47,36 +51,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
body元素。 body元素。
+background-color来证明body元素存在。我们可以通过在style元素中添加以下内容来实现： 身体 {
背景颜色：黑色;
}
background-color为black，来证明body元素的存在。
+添加以下的代码到style标签里面：
+
+```css
+body {
+ background-color: black;
+}
+```
+
+body元素黑色的background-color 。
- testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your body element the background-color of black.");'
- - text: 确保您的CSS规则使用左右大括号正确格式化。
- testString: 'assert(code.match(/
-
```
@@ -49,7 +62,9 @@ tests:
## Solution
px ）。像素是一种长度单位，它告诉浏览器如何调整项目的大小或空间。除了px ，CSS还有许多不同的长度单位选项供您使用。两种主要类型的长度单位是绝对的和相对的。绝对单位与长度的物理单位相关联。例如， in和mm表示英寸和毫米。绝对长度单位接近屏幕上的实际测量值，但根据屏幕的分辨率存在一些差异。相对单位，例如em或rem ，相对于另一个长度值。例如， em基于元素字体的大小。如果您使用它来设置font-size属性本身，则它相对于父级的font-size 。 注意 px值。像素px是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。
+单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
+相对单位长度，就像em和rem，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。
+注意：red-box向元素添加padding属性并将其设置为1.5em 。 red-box class 添加padding属性，并设置为1.5em。
+red-box类应该有一个padding属性。
- testString: 'assert($(".red-box").css("padding-top") != "0px" && $(".red-box").css("padding-right") != "0px" && $(".red-box").css("padding-bottom") != "0px" && $(".red-box").css("padding-left") != "0px", "Your red-box class should have a padding property.");'
- - text: 你的red-box类应该给出1.5em的padding元素。
- testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), "Your red-box class should give elements 1.5em of padding.");'
+ - text: 'red-box class 应该含有padding属性。'
+ testString: assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'red-box class 应该含有padding属性。');
+ - text: 'red-box class 的padding值应为 1.5em。'
+ testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), ''red-box class 的padding值应为 1.5em。'');'
```
@@ -53,12 +61,12 @@ tests:
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
-
+
}
.green-box {
background-color: green;
- margin: 20px 40px 20px 40px;
+ margin: 40px 20px 20px 40px;
}
<风格>您可以看到我们在
.blue-text {
颜色：蓝色;
}
</样式>
<style>标记内创建了一个名为blue-text的CSS类。您可以将类应用于HTML元素，如下所示： <h2 class="blue-text">CatPhotoApp</h2>请注意，在CSS style元素中，类名以句点开头。在HTML元素的class属性中，类名不包含句点。 class具有可重用性，可应用于各种 HTML 元素。
+一个 CSSclass声明示例，如下所示：
+
+```html
+
+```
+
+可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。
+你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：
+<h2 class="blue-text">CatPhotoApp</h2>
+注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。
+style元素中，将h2选择器更改为.red-text并将颜色的值从blue更新为red 。为您的h2元素提供值为'red-text'的class属性。 style样式声明里，把h2元素选择器改为.red-textclass 选择器，同时将颜色blue变为red。
+在h2元素里，添加一个class属性，且值为'red-text'。
+h2元素应该是红色的。
- testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your h2 element should be red.");'
- - text: 你的h2元素应该有red-text类。
- testString: 'assert($("h2").hasClass("red-text"), "Your h2 element should have the class red-text.");'
- - text: 样式表应声明一个red-text类，并将其颜色设置为红色。
- testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a red-text class and have its color set to red.");'
- - text: '不要在h2元素中使用style="color: red"内联样式声明。'
- testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like style="color: red" in your h2 element.");'
+ - text: 'h2元素应该为红色。'
+ testString: assert($("h2").css("color") === "rgb(255, 0, 0)", 'h2元素应该为红色。');
+ - text: 'h2元素应含有red-text class 选择器。'
+ testString: assert($("h2").hasClass("red-text"), 'h2元素应含有red-text class 选择器。');
+ - text: 'style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。'
+ 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"。');
```
@@ -44,36 +64,35 @@ tests:
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
背景：var（ - penguin-skin）;这会将您要定位的任何元素的背景更改为灰色，因为这是
--penguin-skin变量的值。请注意，除非变量名称完全匹配，否则不会应用样式。 --penguin-skin变量的值，使用了这个样式的元素背景颜色会是灰色。
+注意：如果变量名不匹配，样式不会生效。
+--penguin-skin变量应用于penguin-top ， penguin-bottom ， right-hand和left-hand类的background属性。 penguin-top，penguin-bottom，right-hand和left-handclass 的background属性均使用--penguin-skin变量值。
+--penguin-skin变量应用于penguin-top类的background属性。
- testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the --penguin-skin variable to the background property of the penguin-top class.");'
- - text: 将--penguin-skin变量应用于penguin-bottom类的background属性。
- testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the --penguin-skin variable to the background property of the penguin-bottom class.");'
- - text: 将--penguin-skin变量应用于right-hand类的background属性。
- testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the --penguin-skin variable to the background property of the right-hand class.");'
- - text: 将--penguin-skin变量应用于left-hand类的background属性。
- testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the --penguin-skin variable to the background property of the left-hand class.");'
+ - text: 'penguin-top class 的background属性应使用--penguin-skin变量值。'
+ testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''penguin-top class 的background属性应使用--penguin-skin变量值。'');'
+ - text: 'penguin-bottom class 的background属性应使用--penguin-skin变量值。'
+ testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), ''penguin-bottom class 的background属性应使用--penguin-skin变量值。'');'
+ - text: 'right-hand class 的background属性应使用--penguin-skin变量值。'
+ testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), ''right-hand class 的background属性应使用--penguin-skin变量值。'');'
+ - text: 'left-hand class 的background属性应使用--penguin-skin变量值。'
+ testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), ''left-hand class 的background属性应使用--penguin-skin变量值。'');'
```
@@ -46,63 +58,63 @@ tests:
width: 300px;
height: 300px;
}
-
+
.penguin-top {
top: 10%;
left: 25%;
-
+
/* change code below */
background: black;
/* change code above */
-
+
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
-
+
.penguin-bottom {
top: 40%;
left: 23.5%;
-
+
/* change code below */
background: black;
/* change code above */
-
+
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
-
+
.right-hand {
top: 0%;
left: -5%;
-
+
/* change code below */
background: black;
/* change code above */
-
+
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
-
+
.left-hand {
top: 0%;
left: 75%;
-
+
/* change code below */
background: black;
/* change code above */
-
+
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
-
+
.right-cheek {
top: 15%;
left: 35%;
@@ -111,7 +123,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.left-cheek {
top: 15%;
left: 5%;
@@ -120,7 +132,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.belly {
top: 60%;
left: 2.5%;
@@ -129,7 +141,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
-
+
.right-feet {
top: 85%;
left: 60%;
@@ -138,9 +150,9 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
- z-index: -2222;
+ z-index: -2222;
}
-
+
.left-feet {
top: 85%;
left: 25%;
@@ -149,18 +161,18 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
- z-index: -2222;
+ z-index: -2222;
}
-
+
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
- border-radius: 50%;
+ border-radius: 50%;
}
-
+
.left-eye {
top: 45%;
left: 25%;
@@ -169,7 +181,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.sparkle {
top: 25%;
left: 15%;
@@ -178,7 +190,7 @@ tests:
height: 35%;
border-radius: 50%;
}
-
+
.blush-right {
top: 65%;
left: 15%;
@@ -187,7 +199,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.blush-left {
top: 65%;
left: 70%;
@@ -196,7 +208,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-top {
top: 60%;
left: 40%;
@@ -205,7 +217,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-bottom {
top: 65%;
left: 42%;
@@ -214,11 +226,11 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
body {
background:#c6faf1;
}
-
+
.penguin * {
position: absolute;
}
@@ -246,19 +258,18 @@ tests:
-
```
-
-
-
media query的:root选择器中，对其进行更改，以便重新定义--penguin-size并赋值为200px 。此外，重新定义--penguin-skin并赋予其black值。然后调整预览大小以查看此更改的操作。 media query（媒体查询）声明的:root选择器里，重定义--penguin-size的值为 200px，且重定义--penguin-skin的值为black，然后通过缩放页面来查看是否生效。
+:root应该将--penguin-size变量重新分配给200px 。'
- testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-size variable to 200px.");'
- - text: ':root应该将--penguin-skin变量重新分配给black 。'
- testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-skin variable to black.");'
+ - text: ':root中的--penguin-size值应为200px。'
+ testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), '':root中的--penguin-size值应为200px。'');'
+ - text: ':root中的--penguin-skin值应为black。'
+ testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), '':root中的--penguin-skin值应为black。'');'
```
@@ -39,17 +45,17 @@ tests:
--penguin-belly: white;
--penguin-beak: orange;
}
-
+
@media (max-width: 350px) {
:root {
-
+
/* add code below */
-
+
/* add code above */
-
+
}
}
-
+
.penguin {
position: relative;
margin: auto;
@@ -58,7 +64,7 @@ tests:
width: var(--penguin-size, 300px);
height: var(--penguin-size, 300px);
}
-
+
.right-cheek {
top: 15%;
left: 35%;
@@ -67,7 +73,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.left-cheek {
top: 15%;
left: 5%;
@@ -76,7 +82,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
-
+
.belly {
top: 60%;
left: 2.5%;
@@ -85,7 +91,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
-
+
.penguin-top {
top: 10%;
left: 25%;
@@ -94,7 +100,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
-
+
.penguin-bottom {
top: 40%;
left: 23.5%;
@@ -103,7 +109,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
-
+
.right-hand {
top: 5%;
left: 25%;
@@ -119,7 +125,7 @@ tests:
transform-origin:0% 0%;
animation-timing-function: linear;
}
-
+
@keyframes wave {
10% {
transform: rotate(110deg);
@@ -129,12 +135,12 @@ tests:
}
30% {
transform: rotate(110deg);
- }
+ }
40% {
transform: rotate(130deg);
- }
+ }
}
-
+
.left-hand {
top: 0%;
left: 75%;
@@ -145,7 +151,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
-
+
.right-feet {
top: 85%;
left: 60%;
@@ -156,7 +162,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
-
+
.left-feet {
top: 85%;
left: 25%;
@@ -167,7 +173,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
-
+
.right-eye {
top: 45%;
left: 60%;
@@ -176,7 +182,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.left-eye {
top: 45%;
left: 25%;
@@ -185,7 +191,7 @@ tests:
height: 17%;
border-radius: 50%;
}
-
+
.sparkle {
top: 25%;
left:-23%;
@@ -194,7 +200,7 @@ tests:
height: 100%;
border-radius: 50%;
}
-
+
.blush-right {
top: 65%;
left: 15%;
@@ -203,7 +209,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.blush-left {
top: 65%;
left: 70%;
@@ -212,7 +218,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-top {
top: 60%;
left: 40%;
@@ -221,7 +227,7 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
.beak-bottom {
top: 65%;
left: 42%;
@@ -230,11 +236,11 @@ tests:
height: 10%;
border-radius: 50%;
}
-
+
body {
background:#c6faf1;
}
-
+
.penguin * {
position: absolute;
}
@@ -262,7 +268,6 @@ tests:
-
```
@@ -274,7 +279,10 @@ tests:
## Solution
#FF0000可以缩短为#F00 。这个缩短的形式给出一个红色数字，一个数字表示绿色，一个数字表示蓝色。这将可能的颜色总数减少到大约4,000。但浏览器会将#FF0000和#F00解释为完全相同的颜色。 #FF0000十六进制编码可以缩写成#F00。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
+这样，颜色的可能性减少到了大约 4000 种。且在浏览器里#FF0000和#F00完全是同一种颜色。
+| 颜色 | 短十六进制代码 |
|---|---|
| 青色 | #0FF |
| 绿色 | #0F0 |
| 红 | #F00 |
| 紫红色 | #F0F |
| Color | Short Hex Code |
|---|---|
| Cyan | #0FF |
| Green | #0F0 |
| Red | #F00 |
| Fuchsia | #F0F |
h1元素添加I am red!的文本I am red! color红色。
- testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");'
- - text: '使用缩写hex code表示红色而不是十六进制代码#FF0000 。'
- testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate hex code for the color red instead of the hex code #FF0000.");'
- - text: 给你的h1元素添加I am green!的文本I am green! color绿色。
- testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your h1 element with the text I am green! the color green.");'
- - text: '使用缩写的hex code表示绿色而不是十六进制代码#00FF00 。'
- testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated hex code for the color green instead of the hex code #00FF00.");'
- - text: 给你的h1元素添加I am cyan!文字I am cyan!在color青色。
- testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your h1 element with the text I am cyan! the color cyan.");'
- - text: '使用缩写的hex code代替十六进制代码#00FFFF 。'
- testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.");'
- - text: 给你的h1元素文字I am fuchsia! color紫红色。
- testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your h1 element with the text I am fuchsia! the color fuchsia.");'
- - text: '使用缩写的hex code作为颜色的紫红色而不是十六进制代码#FF00FF 。'
- testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.");'
+ - text: '文本内容为I am red!的h1元素的字体颜色应该为red。'
+ testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为I am red!的h1元素的字体颜色应该为red。');
+ - text: '要使用缩写的red的十六进制编码，而不是#FF0000。'
+ testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), ''要使用缩写的red的十六进制编码，而不是#FF0000。'');'
+ - text: '文本内容为I am green!的h1元素的字体颜色应该为green。'
+ testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)', '文本内容为I am green!的h1元素的字体颜色应该为green。');
+ - text: '要使用缩写的green的十六进制编码，而不是#00FF00的十六进制编码。'
+ testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), ''要使用缩写的green的十六进制编码，而不是#00FF00。'');'
+ - text: '文本内容为I am cyan!的h1元素的字体颜色应该为cyan。'
+ testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', '文本内容为I am cyan!的h1元素的字体颜色应该为cyan。');
+ - text: '要使用缩写的cyan的十六进制编码，而不是#00FFFF的十六进制编码。'
+ testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), ''要使用缩写的cyan的十六进制编码，而不是#00FFFF。'');'
+ - text: '文本内容为I am fuchsia!的h1元素的字体颜色应该为fuchsia。'
+ testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', '文本内容为I am fuchsia!的h1元素的字体颜色应该为fuchsia。');
+ - text: '要使用缩写的fuchsia的十六进制编码，而不是#FF00FF的十六进制编码。'
+ testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), ''要使用缩写的fuchsia的十六进制编码，而不是#FF00FF。'');'
```
@@ -66,7 +74,6 @@ tests:
id属性的一个很酷的事情是，像类一样，你可以使用CSS来设置它们的样式。但是， id不可重用，只应应用于一个元素。 id也具有比类更高的特异性（重要性），因此如果两者都应用于同一元素并且具有冲突的样式，则将应用id的样式。下面是一个示例，说明如何使用cat-photo-element的id属性获取cat-photo-element并为其指定绿色的背景颜色。在你的style元素中： #cat-photo-element {请注意，在
背景颜色：绿色;
}
style元素中，您始终通过放置a来引用类.在他们的名字前面。你总是通过在他们的名字前放一个#来引用id。 id属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式
+可是，id不可以重用，只应用于一个元素上。同时，在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。
+选择id为cat-photo-element的元素，并设置它的背景样式为green，可以在你的style标签里这样写：
+
+```css
+#cat-photo-element {
+ background-color: green;
+}
+```
+
+注意在style标签里，声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。
+cat-photo-form的id属性，绿色背景。 cat-photo-formid属性的form表单的背景颜色设置为green。
+form元素添加cat-photo-form的id。
- testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your form element the id of cat-photo-form.");'
- - text: 您的form元素应具有绿色的background-color 。
- testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", "Your form element should have the background-color of green.");'
- - text: 确保您的form元素具有id属性。
- testString: 'assert(code.match(/form element has an id attribute.");'
- - text: 不要为form任何class或style属性。
- testString: 'assert(!code.match(/form any class or style attributes.");'
+ - text: '设置form元素的 id 为cat-photo-form。'
+ testString: assert($("form").attr("id") === "cat-photo-form", '设置form元素的 id 为cat-photo-form。');
+ - text: '你的form元素应该含有background-colorcss 属性并且值为 green。'
+ testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", '你的form元素应该含有background-colorcss 属性并且值为 green。');
+ - text: '确保你的form元素含有id属性。'
+ testString: assert(code.match(/form元素含有id属性。');
+ - text: '不要在form元素上添加其他class属性或者style行内样式。'
+ testString: assert(!code.match(/form元素上添加其他class属性或者style行内样式。');
```
@@ -69,36 +84,34 @@ tests:
Click here to view more cat photos.
- -Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
id或class属性。这些被称为ID和类选择器。您可以使用其他CSS选择器来选择要设置样式的自定义元素组。让我们再次带出CatPhotoApp来练习使用CSS选择器。对于此挑战，您将使用[attr=value]属性选择器设置CatPhotoApp中复选框的样式。此选择器使用特定属性值匹配和设置元素样式。例如，下面的代码使用属性type和相应的radio值更改所有元素的边距： [type ='radio'] {
保证金：20px 0px 20px 0px;
}
id和class，来显示你想要的样式，而它们也被分别叫做 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器，可以让我们给特定的元素设置样式。
+让我们再次通过猫咪图片项目来练习 CSS 选择器。
+在这个挑战里，你会使用[attr=value]属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有type为radio的元素的外边距。
+
+```css
+[type='radio'] {
+ margin: 20px 0px 20px 0px;
+}
+```
+
+type属性选择器，尝试在CatPhotoApp中为复选框提供10px的上边距和15px的下边距。 type属性选择器，尝试改变复选框的上外边距为 10px，下外边距为 15px。
+type属性选择器来选中复选框。
- testString: 'assert(code.match(/
+```
+
+在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：
+
+```html
+
+```
+
+注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
+h2元素的样式属性，而不是创建CSS style块。添加必要的CSS以将所有h2元素变为蓝色。 h2元素的行内样式，然后创建style样式声明区域，最后添加 CSS 样式规则使h2元素变为蓝色。
+h2元素中删除style属性。
- testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your h2 element.");'
- - text: 创建style元素。
- testString: 'assert($("style") && $("style").length > 1, "Create a style element.");'
- - text: 你的h2元素应该是蓝色的。
- testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your h2 element should be blue.");'
- - text: 确保样式表h2声明对分号和右括号有效。
- testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.");'
- - text: 确保所有style元素都有效并具有结束标记。
- testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/style elements are valid and have a closing tag.");'
+ - text: '删除h2元素的行内样式。'
+ testString: assert(!$("h2").attr("style"), '删除h2元素的行内样式。');
+ - text: '创建一个style样式声明区域。'
+ testString: assert($("style") && $("style").length >= 1, '创建一个style样式声明区域。');
+ - text: 'h2元素颜色应为蓝色。'
+ testString: assert($("h2").css("color") === "rgb(0, 0, 255)", 'h2元素颜色应为蓝色。');
+ - text: '确保h2选择器的内容被花括号所围绕，并且样式规则以分号结束。'
+ testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), ''确保h2选择器的内容被花括号所围绕，并且样式规则以分号结束。'');'
```
@@ -40,36 +63,35 @@ tests:
```html
Click here to view more cat photos.
- -点击查看更多猫图.
+ +Things cats love:
+猫咪最喜欢的三件东西：
Top 3 things cats hate:
+猫咪最讨厌的三件东西：
penguin类中，将black值更改为gray ，将gray值更改为white ，将yellow值更改为orange 。 penguinclass 里，将black改为gray，gray改为white，yellow改为orange。
+penguin类应声明--penguin-skin变量并将其指定为gray 。
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-skin variable and assign it to gray.");'
- - text: penguin类应声明--penguin-belly变量并将其指定为white 。
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-belly variable and assign it to white.");'
- - text: penguin类应声明--penguin-beak变量并将其指定为orange 。
- testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), "penguin class should declare the --penguin-beak variable and assign it to orange.");'
+ - text: 'penguin class 声明的--penguin-skin变量的值应为gray。'
+ testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''penguin class 声明的--penguin-skin变量的值应为gray。'');'
+ - text: 'penguin class 声明的--penguin-belly变量的值应为white。'
+ testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''penguin class 声明的--penguin-belly变量的值应为white。'');'
+ - text: 'penguin class 声明的--penguin-beak变量的值应为orange。'
+ testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), ''penguin class 声明的--penguin-beak变量的值应为orange。'');'
```
@@ -36,13 +42,13 @@ tests:
```html
-
```
@@ -49,7 +62,8 @@ tests:
## Solution
#FFA500 。数字0是十六进制代码中的最小数字，表示完全没有颜色。数字F是十六进制代码中的最大数字，表示最大可能的亮度。 hex使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
+通过三原色，我们可以创建 1600 万种不同颜色！
+例如，橘色是纯红色混合一些绿色而成的，没有蓝色的参与。在十六进制编码里面，它被转译为#FFA500。
+0是十六进制里面最小的数字，表示着没有颜色。
+F是十六进制里面最大的数字，表示着最高的亮度。
+style元素中的颜色词替换为正确的十六进制代码。 | 颜色 | Hex代码 |
|---|---|
| 道奇蓝 | #1E90FF |
| 绿色 | #00FF00 |
| 橙子 | #FFA500 |
| 红 | #FF0000 |
style标签里面的颜色值用正确的十六进制编码替换。
+| Color | Hex Code |
|---|---|
| Dodger Blue | #1E90FF |
| Green | #00FF00 |
| Orange | #FFA500 |
| Red | #FF0000 |
h1元素添加I am red!的文本I am red! color红色。
- testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");'
- - text: 使用hex code为红色而不是red 。
- testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), "Use the hex code for the color red instead of the word red.");'
- - text: 给你的h1元素添加I am green!的文本I am green! color绿色。
- testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your h1 element with the text I am green! the color green.");'
- - text: 使用hex code表示绿色而不是green 。
- testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), "Use the hex code for the color green instead of the word green.");'
- - text: 给你的h1元素提供I am dodger blue!的文字I am dodger blue! color道奇蓝色。
- testString: 'assert($(".dodger-blue-text").css("color") === "rgb(30, 144, 255)", "Give your h1 element with the text I am dodger blue! the color dodger blue.");'
- - text: 使用颜色dodgerblue蓝色的hex code而不是单词dodgerblue 。
- testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), "Use the hex code for the color dodger blue instead of the word dodgerblue.");'
- - text: 给你的h1元素添加I am orange!的文本I am orange!在color为橙色。
- testString: 'assert($(".orange-text").css("color") === "rgb(255, 165, 0)", "Give your h1 element with the text I am orange! the color orange.");'
- - text: 使用hex code表示橙色而不是orange 。
- testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), "Use the hex code for the color orange instead of the word orange.");'
+ - text: '文本内容为I am red!的h1元素的字体颜色应该为red。'
+ testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为I am red!的h1元素的字体颜色应该为red。');
+ - text: '使用十六进制编码替换red关键词。'
+ testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), ''使用十六进制编码替换red关键词。'');'
+ - text: '文本内容为I am green!的h1元素的字体颜色应该为green。'
+ testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)', '文本内容为I am green!的h1元素的字体颜色应该为green。');
+ - text: '使用十六进制编码替换green关键词。'
+ testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), ''使用十六进制编码替换green关键词。'');'
+ - text: '文本内容为I am dodger blue!的h1元素的字体颜色应该为dodger blue。'
+ testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', '文本内容为I am dodger blue!的h1元素的字体颜色应该为dodger blue。');
+ - text: '使用十六进制编码替换dodgerblue关键词。'
+ testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), ''使用十六进制编码替换dodgerblue关键词。'');'
+ - text: '文本内容为I am orange!的h1元素的字体颜色应该为orange。'
+ testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', '文本内容为I am orange!的h1元素的字体颜色应该为orange。');
+ - text: '使用十六进制编码替换orange关键词。'
+ testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), ''使用十六进制编码替换orange关键词。'');'
```
@@ -66,7 +76,6 @@ tests:
style元素中的十六进制代码替换为正确的RGB值。 | 颜色 | RGB |
|---|---|
| 蓝色 | rgb(0, 0, 255) |
| 红 | rgb(255, 0, 0) |
| 兰花 | rgb(218, 112, 214) |
| 赭色 | rgb(160, 82, 45) |
style标签里面中的十六进制编码替换为正确的 RGB 值。
+| Color | RGB |
|---|---|
| Blue | rgb(0, 0, 255) |
| Red | rgb(255, 0, 0) |
| Orchid | rgb(218, 112, 214) |
| Sienna | rgb(160, 82, 45) |
h1元素添加I am red!的文本I am red! color红色。
- testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your h1 element with the text I am red! the color red.");'
- - text: 使用rgb表示红色。
- testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), "Use rgb for the color red.");'
- - text: 给你的h1元素文字I am orchid!兰花的color 。
- testString: 'assert($(".orchid-text").css("color") === "rgb(218, 112, 214)", "Give your h1 element with the text I am orchid! the color orchid.");'
- - text: 使用rgb作为颜色兰花。
- testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), "Use rgb for the color orchid.");'
- - text: 给你的h1元素添加I am blue!的文本I am blue! color蓝色。
- testString: 'assert($(".blue-text").css("color") === "rgb(0, 0, 255)", "Give your h1 element with the text I am blue! the color blue.");'
- - text: 使用rgb作为蓝色。
- testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), "Use rgb for the color blue.");'
- - text: 给你的h1元素添加I am sienna!的文本I am sienna! color sienna。
- testString: 'assert($(".sienna-text").css("color") === "rgb(160, 82, 45)", "Give your h1 element with the text I am sienna! the color sienna.");'
- - text: 使用rgb作为颜色sienna。
- testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), "Use rgb for the color sienna.");'
+ - text: '文本内容为I am red!的h1元素的字体颜色应该为red。'
+ testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)', '文本内容为I am red!的h1元素的字体颜色应该为red。');
+ - text: 'red颜色应使用RGB值。'
+ testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), ''red颜色应使用RGB值。'');'
+ - text: '文本内容为I am orchid!的h1元素的字体颜色应该为orchid。'
+ testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', '文本内容为I am orchid!的h1元素的字体颜色应该为orchid。');
+ - text: 'orchid颜色应使用RGB值。'
+ testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), ''red颜色应使用RGB值。'');'
+ - text: '文本内容为I am blue!的h1元素的字体颜色应该为blue。'
+ testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', '文本内容为I am blue!的h1元素的字体颜色应该为blue。');
+ - text: 'blue颜色应使用RGB值。'
+ testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), ''blue颜色应使用RGB值。'');'
+ - text: '文本内容为I am sienna!的h1元素的字体颜色应该为sienna。'
+ testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', '文本内容为I am sienna!的h1元素的字体颜色应该为sienna。');
+ - text: 'sienna颜色应使用RGB值。'
+ testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), ''sienna颜色应使用RGB值。'');'
```
@@ -66,7 +72,6 @@ tests:
RGB值。黑色的RGB值如下所示： rgb(0, 0, 0)白色的RGB值如下所示： rgb(255, 255, 255)而不是像使用十六进制代码那样使用六个十六进制数字，使用RGB使用0到255之间的数字指定每种颜色的亮度。如果进行数学计算，一种颜色的两位数等于16乘以16，这总共得到256个值。因此，从零开始计数的RGB具有与十六进制代码完全相同的可能值。以下是使用RGB代码将身体背景更改为橙色的示例。 身体 {
background-color：rgb（255,165,0）;
}
rgb(0, 0, 0)
+白色的 RGB 值声明如下：
+rgb(255, 255, 255)
+RGB 不像十六进制编码，并不需要用到 6 位十六进制数字。在 RGB 里，你只需要指定每种颜色的亮度大小，从 0 到 255。
+在数学的角度来看，如果将十六进制的一种颜色的两位数字相乘，16 乘以 16 也等于 256。所以，从 0 到 255 计算的 RGB 值的具有十六进制编码相同的颜色可能性。
+下面是通过使用 RGB 值设置背景颜色为橘色的例子：
+
+```css
+body {
+ background-color: rgb(255, 165, 0);
+}
+```
+
+body元素背景颜色中的十六进制代码： rgb(0, 0, 0) rgb(0, 0, 0)的 RGB 值替换body元素背景颜色的十六进制编码。
+body元素应该有黑色背景。
- testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Your body element should have a black background.");'
- - text: 使用rgb为您的body元素提供黑色。
- testString: 'assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), "Use rgb to give your body element a color of black.");'
+ - text: 'body元素的背景颜色应该是黑色的。'
+ testString: assert($("body").css("background-color") === "rgb(0, 0, 0)", 'body元素的背景颜色应该是黑色的。');
+ - text: 'body元素的背景颜色的黑色值应该为RGB值。'
+ testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), 'body元素的背景颜色的黑色值应该为RGB值。');
```
@@ -37,7 +56,6 @@ tests:
background-color: #F00;
}
-
```
@@ -49,7 +67,9 @@ tests:
## Solution