挑戰解決方案

頁面 為什麼要使用 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;
}