挑战解决方案

页面 为什么要使用 CSS 上的挑战是

挑战

不用参考任何资料，找到另外 5 个可以在你的样式表中使用的颜色名称。

解决方案

CSS 支持常见的颜色名称，例如 orange、yellow、blue、green 或 black。它还支持一些更为特别的颜色名称，例如 chartreuse、fuschia 或 burlywood。请参阅 CSS 颜色值，以获取完整的列表以及其他指定颜色的方法。

页面 CSS 的工作原理 上的挑战是

挑战

在 DOMi 中，点击一个 STRONG 节点。使用 DOMi 的右侧窗格找出该节点的颜色在哪里设置为红色，以及其外观在哪里比普通文本更粗体。

解决方案

在右侧窗格上方的菜单中，选择 **CSS 规则**。你会看到列出了两个项目，一个引用了内部资源，另一个引用了你的样式表文件。内部资源将 **font-weight** 属性定义为 bolder；你的样式表将 **color** 属性定义为 red。

页面 级联和继承 上的挑战是

挑战

更改你的样式表，以便只有红色字母带下划线。

解决方案

将下划线声明从 <p> 规则移动到 <strong> 规则。生成的代码文件如下所示：

css

p {
  color: blue;
}
strong {
  color: orange;
  text-decoration: underline;
}

本教程的后续章节将更详细地描述样式规则和声明。

页面 选择器 上的挑战是

挑战

在不更改 HTML 文件的情况下，向 CSS 文件添加一条规则，使所有首字母保持当前颜色，但使第二段文字中的其他所有文本变为蓝色。

解决方案

添加一条带有 #second ID 选择器和 color: blue; 声明的规则，如下所示：

css

#second {
  color: blue;
}

更具体的选择器 p#second 也可以使用。

挑战

现在，更改你刚刚添加的规则（无需更改其他任何内容），使第一段文字也变为蓝色。

解决方案

将新规则的选择器更改为使用 p 的标签选择器。

css

p {
  color: blue;
}

其他颜色的规则都具有更具体的选择器，因此它们会覆盖段落的蓝色。

挑战

注释掉你的样式表的一部分，在不更改其他任何内容的情况下，使文档的第一个字母变为红色。

解决方案

一种方法是将注释分隔符放在 .carrot 规则周围。

css

/*
.carrot {
  color: orange;
}
*/

挑战

在不更改其他任何内容的情况下，使文档中所有六个首字母在浏览器默认的衬线字体中放大两倍。

解决方案

将以下样式声明添加到 strong 规则中：

css

font: 200% serif;

如果你对 font-size 和 font-family 使用单独的声明，那么第一段文字的 font-style 设置 *不会* 被覆盖。

挑战

在你的 CSS 文件中，将所有颜色名称更改为三位数颜色代码，而不影响结果。

解决方案

以下值是指定颜色名称的合理近似值：

css

strong {
  color: #f00; /* red */
  background-color: #ddf; /* pale blue */
  font: 200% serif;
}

.carrot {
  color: #fa0; /* orange */
}

.spinach {
  color: #080; /* dark green */
}

p {
  color: #00f; /* blue */
}

页面上的挑战是

挑战

向你的样式表添加一条规则，以便它在每行开头显示该图像。

解决方案

将此规则添加到你的样式表中：

css

p::before {
  content: url("yellow-pin.png");
}

页面 列表 上的挑战是

挑战

向你的样式表添加一条规则，使用罗马数字 i 到 v 对海洋进行编号。

解决方案

为列表项定义一条规则，使用 lower-roman 列表样式。

css

li {
  list-style: lower-roman;
}

挑战

更改你的样式表，使用括号中的大写字母标识标题。

解决方案

为 body 元素（标题的父元素）添加一条规则来重置一个新计数器，并为标题添加一条规则来显示和递增计数器。

css

/* numbered headings */
body {
  counter-reset: headnum;
}
h3::before {
  content: "(" counter(headnum, upper-latin) ") ";
  counter-increment: headnum;
}

页面 盒子 上的挑战是

挑战

向你的样式表添加一条规则，在海洋周围创建一条宽边框，边框颜色让人想起大海。

解决方案

以下规则可以实现这种效果：

css

ul {
  border: 10px solid lightblue;
  width: 100px;
}

页面 布局 上的挑战是

挑战

更改示例文档 doc2.html，在接近末尾的 </BODY> 之前添加以下标签：<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> 预测图像将在文档中的哪个位置出现。然后刷新浏览器，查看你是否正确。

解决方案

该图像出现在第二个列表的右侧。

挑战

向你的样式表添加一条规则，将图像放置在文档的右上角。

解决方案

以下规则可以实现所需的结果：

css

#fixed-pin {
  position: fixed;
  top: 3px;
  right: 3px;
}

页面 表格 上的挑战是

挑战

更改样式表，使表格仅对数据单元格设置绿色边框。

解决方案

以下规则仅对 <td> 元素设置边框，这些元素位于 id=demo-table 的表格的 <tbody> 元素内。

css

#demo-table tbody td {
  border: 1px solid #7a7;
}

页面 媒体 上的挑战是

挑战

将特定于打印的样式规则移动到单独的 CSS 文件中，并将其导入到你的 style4.css 样式表中。

解决方案

将 /* print only */ 和 /* end print only */ 之间的行剪切并粘贴到名为 style4_print.css 的文件中。在 style4.css 中，在文件开头添加以下行：

css

@import url("style4_print.css") print;

挑战

当鼠标指针悬停在标题上时，使标题变为蓝色。

解决方案

以下规则可以实现所需的结果：

css

h1:hover {
  color: blue;
}

挑战

更改脚本，使正方形在颜色更改时向右跳动 20 个 em，然后跳回。

解决方案

添加修改 margin-left 属性的行。确保在 JavaScript 中将其指定为 marginLeft。以下脚本可以实现所需的结果：

js

// JavaScript demonstration
function doDemo(button) {
  const square = document.getElementById("square");
  square.style.backgroundColor = "#fa4";
  square.style.marginLeft = "20em";
  button.setAttribute("disabled", "true");
  setTimeout(clearDemo, 2000, button);
}

function clearDemo(button) {
  const square = document.getElementById("square");
  square.style.backgroundColor = "transparent";
  square.style.marginLeft = "0em";
  button.removeAttribute("disabled");
}

挑战

更改样式表，使所有内部花瓣在鼠标指针悬停在其中任何一个花瓣上时都变为粉色，而不更改外部花瓣的工作方式。

解决方案

将 :hover 伪类的位置从特定花瓣移动到所有花瓣。

css

#inner-petals {
  --segment-fill-fill-hover: pink;
}

/* Non-standard way for some older browsers */
#inner-petals:hover .segment-fill {
  fill: pink;
  stroke: none;
}