CSS属性和道格拉斯的JavaScript机器人 - 傻瓜

CSS属性是改变元素的特征。道格拉斯的JavaScript机器人的美丽的眼睛的颜色，他的身体和手臂的大小，他的头部圆角和他的不同部分的位置都是由属性的价值决定的。

要开始，请打开您的Web浏览器并登录到公用仪表板。然后按照下列步骤操作：

1. 找到名为第6章：机器人样式 - 开始的小提琴，点击标题将其打开。

   <！ --1 - >

   您也可以直接进入机器人应用程序。

   在HTML面板中看到一个带有HTML的屏幕，在CSS面板中看到一些CSS。

2. 点击顶部菜单中的Fork，在您自己的JSFiddle帐户中创建一个小提琴副本。

通过修改一些不同CSS属性的值，对Douglas的外观进行一些更改：

1. 找到p元素的CSS规则。

   它目前是CSS窗格中的第二条规则。

2. 将font-size属性的值更改为2. 5em。

   完整的规则现在应该如下所示：

   p {font-size：2. 5em;}
   

   有几种不同的方法来指定文本大小。最常用的方法是使用像素（px），百分比（％）或ems（em）。当使用百分比或ems时，所选元素的字体大小根据父元素的字体大小设置。例如2. 5em是选定元素的父级字体大小的两倍半。

3. 单击“运行”按钮，在“结果”窗格中查看更改。道格拉斯用一个大胆的信息。

   

   找到body元素的CSS规则。

4. 将body元素的值更改为以下内容，注意使用引号：

5. “Comic Sans MS”，cursive，sans-serif

   完整的CSS规则现在应该如下所示： body {font-family：“Comic Sans MS”，cursive，sans-serif;}
   

   单击Run按钮查看结果。道格拉斯的衬衫上现在有一些有趣的字母。道格拉斯，现在有趣的信件！

   接下来，改变道格拉斯的眼睛颜色以匹配你的眼睛颜色！
   

6. 找到包含Douglas眼睛颜色的CSS规则。它目前看起来像这样：

   。眼睛{background-color：blue;宽度：20％;身高：20％ border-radius：50％;}

   

   将background-color属性的值更改为您的眼睛颜色。

   例如，如果您的眼睛是棕色的，您可以将其更改为以下内容：

7. background-color：brown;点击“运行”按钮查看结果。

   当你使用棕色这个词时，道格拉斯的眼睛所改变的颜色看起来不是很棕，而当你试图使道格拉斯的眼睛变成绿色时，所用的颜色也不是任何人的眼睛都可能会变成的颜色。要获得更精确的颜色，可以使用另一个CSS颜色名称，或使用十六进制符号创建自己的自定义颜色。