《給所有人的權威 CSS 指南》中的掌握 CSS |第1部分-css教學-PHP中文網

首頁

web前端

css教學

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

Susan Sarandon

Jan 02, 2025 pm 09:30 PM

Mastering CSS in The Definitive CSS Guide for Everyone | Part-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);
}