10 KiB
玻璃缸專案第二部分：CSS 入門
Tomomi Imura 的手繪筆記
課前測驗
簡介
CSS，全名為層疊樣式表（Cascading Style Sheets），解決了網頁開發中的一個重要問題：如何讓網站看起來更美觀。為應用程式添加樣式不僅能提升其可用性，還能讓其外觀更吸引人；此外，CSS 還能用於創建響應式網頁設計（Responsive Web Design, RWD），確保應用程式在任何螢幕尺寸下都能保持良好的顯示效果。CSS 不僅僅是讓應用程式看起來漂亮，它的規範還包括動畫和變形功能，能為應用程式實現更複雜的互動效果。CSS 工作小組負責維護當前的 CSS 規範，您可以在 World Wide Web Consortium 的網站上關注他們的工作。
注意，CSS 是一種不斷演進的語言，就像網路上的所有技術一樣，並非所有瀏覽器都支持最新的規範。在實作時，請務必參考 CanIUse.com 來檢查支援情況。
在本課程中，我們將為線上玻璃缸添加樣式，並學習多個 CSS 概念：層疊、繼承、選擇器的使用、定位以及如何使用 CSS 建立佈局。在此過程中，我們將設計玻璃缸的佈局，並創建實際的玻璃缸。
前置條件
您應該已經完成玻璃缸的 HTML 結構，並準備好進行樣式設計。
查看影片
任務
在您的玻璃缸資料夾中，創建一個名為 style.css 的新檔案，並在 <head> 區域中匯入該檔案：
<link rel="stylesheet" href="./style.css" />
層疊
層疊樣式表的核心概念是樣式的「層疊」，即樣式的應用是根據其優先級來決定的。由網站作者設定的樣式優先於瀏覽器設定的樣式，而內聯樣式的優先級又高於外部樣式表中的樣式。
任務
為 <h1> 標籤添加內聯樣式 "color: red"：
<h1 style="color: red">My Terrarium</h1>
接著，將以下程式碼添加到您的 style.css 檔案中：
h1 {
color: blue;
}
✅ 您的網頁應用程式中顯示了哪種顏色？為什麼？您能找到覆蓋樣式的方法嗎？什麼情況下您會想要這樣做，或者不這樣做？
繼承
樣式可以從祖先元素繼承到後代元素，嵌套的元素會繼承其父元素的樣式。
任務
將 body 的字體設置為指定的字體，並檢查嵌套元素的字體：
body {
font-family: helvetica, arial, sans-serif;
}
打開瀏覽器的控制台，切換到「Elements」標籤，觀察 H1 的字體。您會發現它繼承了 body 的字體，這在瀏覽器中有明確的說明：
✅ 您能讓嵌套樣式繼承不同的屬性嗎？
CSS 選擇器
標籤
目前，您的 style.css 檔案中僅對少數標籤進行了樣式設計，因此應用程式看起來有些奇怪：
body {
font-family: helvetica, arial, sans-serif;
}
h1 {
color: #3a241d;
text-align: center;
}
這種針對標籤進行樣式設計的方法可以控制單一元素，但如果您需要控制玻璃缸中多個植物的樣式，就需要利用 CSS 選擇器。
Id
為左側和右側容器添加一些樣式。由於標記中只有一個左側容器和一個右側容器，因此它們被賦予了 id。要為它們設置樣式，可以使用 #：
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
#right-container {
background-color: #eee;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}
在這裡，您使用絕對定位將這些容器固定在螢幕的最左側和最右側，並使用百分比設置其寬度，以便它們能夠適應小型行動裝置的螢幕。
✅ 這段程式碼有些重複，因此不符合「DRY」（Don't Repeat Yourself）的原則；您能找到更好的方法來設計這些 id 嗎？或許可以結合 id 和 class？您需要修改標記並重構 CSS：
<div id="left-container" class="container"></div>
Class
在上述範例中，您設計了螢幕上的兩個唯一元素。如果您希望樣式應用於螢幕上的多個元素，可以使用 CSS 類別（class）。以下是如何為左側和右側容器中的植物設置樣式。
注意，HTML 標記中的每個植物都有 id 和 class 的組合。這裡的 id 是供稍後添加的 JavaScript 使用，用於操作玻璃缸中的植物位置。而 class 則為所有植物提供統一的樣式。
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
將以下程式碼添加到您的 style.css 檔案中：
.plant-holder {
position: relative;
height: 13%;
left: -10px;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
這段程式碼中值得注意的是相對定位和絕對定位的混合使用，我們會在下一節進一步探討。請注意高度的百分比處理方式：
您將植物容器的高度設置為 13%，這是一個適合的數值，能確保所有植物都能顯示在每個垂直容器中，而無需滾動。
您將植物容器向左移動，使植物在容器中更居中。由於圖片有大量透明背景以便於拖動，因此需要向左移動以更好地適應螢幕。
接著，植物本身的最大寬度設置為 150%。這樣可以確保當瀏覽器縮小時，植物也會縮小以適應。
還需要注意的是 z-index 的使用，它控制元素的相對高度（使植物顯示在容器上方，看起來像是放置在玻璃缸內）。
✅ 為什麼需要同時使用植物容器和植物的 CSS 選擇器？
CSS 定位
混合使用定位屬性（包括 static、relative、fixed、absolute 和 sticky 定位）可能有些棘手，但如果使用得當，能很好地控制頁面上的元素。
絕對定位的元素是相對於最近的已定位祖先元素進行定位的，如果沒有已定位的祖先，則相對於文件的 body 進行定位。
相對定位的元素則是根據 CSS 的指令，從其初始位置進行調整。
在我們的範例中，plant-holder 是一個相對定位的元素，位於一個絕對定位的容器內。這樣的結果是側邊欄容器固定在左右兩側，而 plant-holder 則嵌套在側邊欄內，並在側邊欄內部調整自身位置，為植物的垂直排列留出空間。
plant本身也使用了絕對定位，這是使其可拖動的必要條件，您將在下一課中了解更多。
✅ 嘗試切換側邊容器和 plant-holder 的定位類型。會發生什麼？
CSS 佈局
現在，您將使用所學的內容，完全用 CSS 建立玻璃缸！
首先，使用 CSS 將 .terrarium div 的子元素設置為圓角矩形：
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
請注意這裡使用了百分比。如果您縮小瀏覽器，會看到玻璃缸也會隨之縮放。還請注意玻璃缸元素的寬度和高度百分比，以及每個元素如何絕對定位在中心，並固定在視窗底部。
我們還使用了 rem 作為圓角半徑的單位，這是一種相對於字體大小的長度單位。您可以在 CSS 規範 中了解更多關於這種類型的相對測量。
✅ 嘗試更改玻璃缸的顏色和透明度與泥土的顏色和透明度。會發生什麼？為什麼？
🚀挑戰
為玻璃缸的左下角添加一個「氣泡」光澤，使其看起來更像玻璃。您將需要設計 .jar-glossy-long 和 .jar-glossy-short，使其看起來像反射的光澤。完成後應如下圖所示：
要完成課後測驗，請參考以下學習模組：使用 CSS 為 HTML 應用程式設計樣式
課後測驗
複習與自學
CSS 看似簡單，但要為所有瀏覽器和螢幕尺寸完美設計樣式卻充滿挑戰。CSS-Grid 和 Flexbox 是為了讓這項工作更結構化、更可靠而開發的工具。通過玩 Flexbox Froggy 和 Grid Garden 來學習這些工具。
作業
免責聲明：
本文件使用 AI 翻譯服務 Co-op Translator 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或錯誤解讀概不負責。