《給所有人的權威 CSS 指南》中的掌握 CSS |第1部分

曾經看過一個設計精美的網站並想知道，「他們是如何做到的？」好吧，您即將踏上一段從CSS 新手轉變為造型超級英雄的旅程。

將 CSS 視為網路世界的時尚設計師 - HTML 提供結構，而 CSS 使其看起來更加美妙！

目錄

No.	Section	Link
1	Understanding CSS Fundamentals	Understanding CSS Fundamentals
2	Selectors and Specificity	Selectors and Specificity
3	The Box Model Explained	The Box Model Explained
4	Flexbox: Layout Made Easy	Flexbox: Layout Made Easy
5	CSS Grid: Two-Dimensional Layouts	CSS Grid: Two-Dimensional Layouts

---

了解 CSS 基礎知識

讓我們從基礎開始。 CSS（層疊樣式表）是一種為網路帶來活力的語言。就像畫家的調色板一樣，它為您提供了在網頁上添加顏色、形狀和視覺效果的工具。

文法基礎知識

基本 CSS 語法包括：

• 選擇器：目標 HTML 元素
• 屬性：指定樣式
• 值：定義如何設定樣式

selector {
    property: value;
}

包含 CSS 的方法

可以透過三種方法將 CSS 加入 HTML：

• 內嵌 CSS：直接在 HTML 元素中
• 內部 CSS：在
• 外部 CSS：在單獨的 .css 檔案中（建議）

實踐練習：設計部落格文章的風格

試試這個實作練習來練習基本的 CSS：

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

---

選擇器和特異性

理解選擇器對於定位正確的元素至關重要。將選擇器視為您用於樣式設定的 GPS 座標 - 它們可以幫助您導航到您想要修改的正確元素。

進階選擇器範例

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

實踐練習：特異性挑戰

建立具有不同狀態和特定等級的導航選單：

<nav>





<pre class="brush:php;toolbar:false">/* Challenge: Style these with increasing specificity */
.nav-link { /* Base styles */ }
.nav-item .nav-link { /* More specific */ }
#main-nav .nav-list .nav-item .nav-link { /* Most specific */ }

參考：

• MDN Web Docs - CSS 語法和選擇器 - 易於理解的 CSS 語法、結構和規則介紹。
• W3Schools CSS Basic - 非常適合視覺學習者，提供簡單的範例和即時程式碼編輯器來測試和練習。
• CSS Diner - 一個有趣的互動遊戲，用於學習 CSS 選擇器。

---

盒子模型解釋

網頁設計中的每個元素都遵循 CSS 盒子模型 - 將其視為元素如何佔用頁面空間的藍圖。就像實體包裝有其內容、填充和外盒一樣，網頁元素也遵循相同的原則。

盒子模型的組成部分

• Content：元素的實際內容區域
• Padding：內容與邊框之間的空間
• 邊框：圍繞填充的線
• Margin：元素之間的空間

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

盒子大小屬性

預設情況下，內邊距和邊框會加入到元素的寬度/高度。使用 box-sizing: border-box 使寬度/高度包含內邊距和邊框，這通常更直觀：

selector {
    property: value;
}

盒模型範例：文字卡

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

實踐練習：建立輪廓框

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

參考：

• MDN Web 文件 - CSS 盒模型 - 用圖表解釋盒模型。涵蓋邊距、邊框、內邊距和內容。
• W3Schools - CSS 盒子模型 - 初學者友好，具有簡單的視覺效果。
• Web Dev Simplified - 為初學者提供的盒子模型的簡短、清晰、直觀的解釋。
• CSS Tricks - 對盒子模型的詳細記錄和高級解釋，以及實際用例和技巧。

---

Flexbox：佈局變得簡單

Flexbox 就像一個神奇的容器，可以以最有效的方式自動排列其內容。它非常適合以最少的努力創建響應式佈局。

關鍵 Flexbox 屬性

• 顯示：flex：啟動 Flexbox
• flex-direction：決定主軸（行/列）
• justify-content：沿主軸對齊物品
• align-items：沿橫軸對齊物品
• flex-wrap：控制項目是否可以換行

<nav>





<pre class="brush:php;toolbar:false">/* Challenge: Style these with increasing specificity */
.nav-link { /* Base styles */ }
.nav-item .nav-link { /* More specific */ }
#main-nav .nav-list .nav-item .nav-link { /* Most specific */ }

複雜的 Flexbox 版面

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

實踐練習：靈活的儀表板

建立響應式儀表板佈局：

* {
    box-sizing: border-box;
}

參考：

• MDN Web Docs - Flexbox - 一個很好的起點，具有清晰的視覺效果和實際範例。逐步涵蓋所有 Flexbox 屬性。
• W3Schools - CSS Flexbox - 帶有現場演示和易於理解的 Flexbox 屬性解釋的簡明指南。
• Flexbox Froggy - 一款有趣的互動遊戲，透過引導青蛙到睡蓮葉來練習 Flexbox 概念。
• CSS Tricks - Flexbox 完整指南 - 引用最廣泛的指南之一，具有所有 Flexbox 屬性的互動式視覺備忘錄。
• FreeCodeCamp - Flexbox 完整指南 - 為初學者全面解釋 Flexbox，涵蓋屬性和實際應用程式。
• Smashing Magazine - Understanding Flexbox - 詳細解釋 Flexbox，包括對齊、排序和響應式設計的實際範例。
• Flexbox Playground - 在互動式環境中試驗 Flexbox 屬性。

---

CSS 網格：二維佈局

CSS 網格透過提供二維系統將佈局控制提升到一個新的水平。將其視為一個電子表格，您可以在其中精確地將元素放置在行和列中。
網格基礎

• 顯示：網格：啟動網格
• grid-template-columns：定義列大小
• grid-template-rows：定義行大小
• gap：設定網格項目之間的間距

selector {
    property: value;
}

高級 CSS 網格技術

CSS 網格範本區域可讓您在網格容器內定義命名網格區域，從而透過使用描述性名稱將元素指派到特定區域來更輕鬆地建立複雜佈局。

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

實踐練習#4：雜誌佈局

使用 CSS 網格建立雜誌風格的版面：

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

參考：

• MDN Web 文件 - CSS 網格 - 涵蓋 CSS 網格基本概念的初學者友善指南。
• W3Schools - CSS 網格佈局 - 簡單易懂的範例，附有互動式程式碼編輯器來練習網格概念。
• 網格花園 - 一款有趣且引人入勝的遊戲，您可以透過練習 CSS 網格屬性來種植花園。
• CSS Tricks - Complete Guide to Grid - 所有 CSS 網格屬性的優秀視覺參考，並附有範例。
• Kevin Powell - Learn CSS Grid the easy way - 為初學者提供的 CSS 網格快速視覺化速成課程。
• Developmentbyed - CSS 網格速成課程 - 詳細且適合初學者的教程，涵蓋 CSS 網格的各個方面。
• 網格範例 - 真實世界網格佈局範例的集合，以及每個用例的說明。

---

建造時間到了！ ？

現在輪到你將所學付諸實踐了！這是你的挑戰：

• 建立新的 CodePen（在 codepen.io 上免費）
• 建立我們介紹的範例和練習
• 分享您的創作！ 在下面的評論中加入您的 CodePen 連結

獎勵積分：在設計中加入自己的創意！我會親自審核並回覆評論中分享的每則 CodePen。

？ 專業提示：請記得在 CSS 中加入註解來解釋您的想法。它可以幫助其他人從您的程式碼中學習！

---

接下來是什麼？ ？

這是我們的 CSS 從零到英雄系列的第 1 部分。我們將在接下來的文章中更深入地探討更令人興奮的 CSS 概念。為了確保您不會錯過：

1. ？ 為這篇文章加書籤以便在編碼時快速參考
2. ❤️ 喜歡這篇文章如果您覺得它有幫助（它也可以幫助其他人找到它！）
3. ？ 追蹤我觀看本系列的下一部分

讓我們聯絡吧！ ？

你有嘗試過練習嗎？有疑問嗎？在評論中分享您的經驗！我回覆每條評論並喜歡看到您的進步。

第二部見！快樂編碼！ ??‍??‍?

以上是《給所有人的權威 CSS 指南》中的掌握 CSS |第1部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！