CSS 基礎理解
您在本模組中學習了很多內容，所以到達最後一定感覺很棒！在繼續學習之前，您需要完成本模組的評估 - 這包括一些相關的練習，您需要按順序完成這些練習才能建立最終設計 - 名片/遊戲卡/社交媒體資料。
| 先決條件 | 在嘗試此評估之前，您應該已經完成了本模組中的所有文章。 |
|---|---|
| 目標 | 測試對 CSS 基礎理論、語法和機制的理解。 |
起點
要開始此評估，您應該
- 獲取練習的 HTML 檔案和關聯的影像檔案，並將它們儲存在本地計算機上的新目錄中。如果您想使用自己的影像檔案並填寫自己的姓名，歡迎您 - 只要確保影像為正方形即可。
- 獲取CSS 資源文字檔案 - 該檔案包含一組您需要學習和組合以回答部分評估的原始選擇器和規則集。
或者，您可以使用線上編輯器，例如CodePen、JSFiddle或Glitch。您可以將 HTML 貼上到其中一個線上編輯器中並填寫 CSS，並使用此 URL將<img>元素指向影像檔案。
**注意：**如果您遇到困難，可以在我們的溝通渠道中聯絡我們。
專案簡介
您已獲得一些原始 HTML 和影像，需要編寫必要的 CSS 將其樣式化為一個漂亮的小型線上名片，它也可以作為遊戲卡或社交媒體資料。以下部分描述了您需要執行的操作。
基本設定
- 首先，在 HTML 和影像檔案所在的同一目錄中建立一個新檔案。將其命名為一個非常有創意的名稱，例如
style.css。 - 透過
<link>元素將您的 CSS 連結到 HTML 檔案。 - CSS 資原始檔中的前兩個規則集是免費贈送的！在您為自己的好運歡欣鼓舞之後，將它們複製並貼上到新 CSS 檔案的頂部。使用它們來測試您的 CSS 是否已正確應用於 HTML。
- 在兩個規則上方，新增一個 CSS 註釋，其中包含一些文字，以指示這是一組適用於整個頁面的通用樣式。“通用頁面樣式”即可。還在 CSS 檔案底部再新增三個註釋，以指示卡片容器的設定樣式、標題和頁尾的特定樣式以及主要名片內容的特定樣式。從現在開始，新增到樣式表中的後續樣式應組織在適當的位置。
處理 CSS 資原始檔中提供的選擇器和規則集
- 接下來，我們希望您檢視四個選擇器，並計算每個選擇器的特異性。將它們寫下來，以便以後可以找到，例如在 CSS 頂部的註釋中。
- 現在是時候將正確的選擇器放在正確的規則集上了！您需要在 CSS 資源中匹配四對選擇器和規則集。立即執行此操作，並將它們新增到您的 CSS 檔案中。您需要
- 為主卡片容器設定固定寬度/高度、純色背景顏色、邊框和邊框半徑（圓角！），以及其他內容。
- 為標題設定從深到淺的背景漸變，以及與主卡片容器上設定的圓角相匹配的圓角。
- 為頁尾設定從淺到深的背景漸變，以及與主卡片容器上設定的圓角相匹配的圓角。
- 將影像浮動到右側，使其貼上到主要名片內容的右側，並將其最大高度設定為 100%（一個巧妙的技巧，可確保它會增長/縮小以保持與其父容器相同的高度，無論其高度變為多少）。
- 注意！提供的規則集中有兩個錯誤。使用任何你瞭解的技術，找出並修復這些錯誤，然後再繼續。
你需要編寫的新的規則集
- 編寫一個規則集，同時作用於卡片標題和卡片頁尾，使它們都具有 50px 的計算總高度（包括 30px 的內容高度和四邊各 10px 的內邊距）。但需使用 `em` 單位表示。
- 瀏覽器預設應用於 `<h2>` 和 `<p>` 元素的邊距會干擾我們的設計，因此編寫一個規則，作用於所有這些元素，並將它們的邊距設定為 0。
- 為了防止圖片溢位主名片內容（`<article>` 元素），我們需要為其指定一個特定的高度。將 `<article>` 的高度設定為 120px，但需使用 `em` 單位表示。還要為其設定半透明黑色背景顏色，使其呈現稍微深一點的色調，並讓背景紅色略微透出來。
- 編寫一個規則集，使 `<h2>` 的有效字型大小為 20px（但需使用 `em` 單位表示），並設定合適的行高，使其在標題內容盒的中心位置。回顧前面內容，內容盒的高度應為 30px——這為你計算行高提供了所有必要的數值。
- 編寫一個規則集，使頁尾內的 `<p>` 的有效字型大小為 15px（但需使用 `em` 單位表示），並設定合適的行高，使其在頁尾內容盒的中心位置。回顧前面內容，內容盒的高度應為 30px——這為你計算行高提供了所有必要的數值。
- 作為最後的潤色，為 `<article>` 內部的段落設定合適的內邊距值，使其左邊緣與 `<h2>` 和頁尾段落對齊，並將其顏色設定為較淺的色調，以便於閱讀。
注意：請記住，第二個規則集在 `<html>` 元素上設定了 `font-size: 10px;`——這意味著對於 `<html>` 的所有後代元素，1em 將等於 10px 而不是預設的 16px。（當然，前提是這些後代元素在它們與 `<html>` 之間的層級結構中沒有任何祖先元素設定了不同的 `font-size`。這可能會影響你需要的數值，不過在這個簡單的例子中這不是問題。）
其他需要考慮的事項
- 如果你能以最大程度的可讀性編寫你的 CSS，並在每一行上單獨宣告，你將獲得額外加分。
- 你應該在所有規則的選擇器鏈的開頭包含 `.card`，這樣這些規則就不會干擾其他元素的樣式，即使名片被放置在一個包含大量其他內容的頁面上。
提示和技巧
- 除了將 CSS 應用於你的 HTML 之外，不需要以任何方式編輯 HTML。
- 當試圖確定表示特定畫素長度所需的 `em` 值時，考慮一下根（`<html>`）元素的基本字型大小，以及需要將其乘以多少才能得到所需的值。這將為你提供 `em` 值，至少在像這樣簡單的案例中是這樣。
