曾經(jīng)看過一個(gè)設(shè)計(jì)精美的網(wǎng)站並想知道，「他們是如何做到的？」好吧，您即將踏上一段從CSS 新手轉(zhuǎn)變?yōu)樵煨统?jí)英雄的旅程。

將 CSS 視為網(wǎng)路世界的時(shí)尚設(shè)計(jì)師 - HTML 提供結(jié)構(gòu)，而 CSS 使其看起來更加美妙！

目錄

---

了解 CSS 基礎(chǔ)知識(shí)

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

文法基礎(chǔ)知識(shí)

基本 CSS 語法包括：

• 選擇器：目標(biāo) HTML 元素
• 屬性：指定樣式
• 值：定義如何設(shè)定樣式

selector {
    property: value;
}

包含 CSS 的方法

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

• 內(nèi)嵌 CSS：直接在 HTML 元素中
• 內(nèi)部 CSS：在
• 外部 CSS：在單獨(dú)的 .css 檔案中（建議）

實(shí)踐練習(xí)：設(shè)計(jì)部落格文章的風(fēng)格

試試這個(gè)實(shí)作練習(xí)來練習(xí)基本的 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;
}

---

選擇器和特異性

理解選擇器對(duì)於定位正確的元素至關(guān)重要。將選擇器視為您用於樣式設(shè)定的 GPS 座標(biāo) - 它們可以幫助您導(dǎo)航到您想要修改的正確元素。

進(jìn)階選擇器範(fàn)例

/* 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);
}

實(shí)踐練習(xí)：特異性挑戰(zhàn)

建立具有不同狀態(tài)和特定等級(jí)的導(dǎo)航選單：

<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 語法、結(jié)構(gòu)和規(guī)則介紹。
• W3Schools CSS Basic - 非常適合視覺學(xué)習(xí)者，提供簡單的範(fàn)例和即時(shí)程式碼編輯器來測(cè)試和練習(xí)。
• CSS Diner - 一個(gè)有趣的互動(dòng)遊戲，用於學(xué)習(xí) CSS 選擇器。

---

盒子模型解釋

網(wǎng)頁設(shè)計(jì)中的每個(gè)元素都遵循 CSS 盒子模型 - 將其視為元素如何佔(zhàn)用頁面空間的藍(lán)圖。就像實(shí)體包裝有其內(nèi)容、填充和外盒一樣，網(wǎng)頁元素也遵循相同的原則。

盒子模型的組成部分

• Content：元素的實(shí)際內(nèi)容區(qū)域
• Padding：內(nèi)容與邊框之間的空間
• 邊框：圍繞填充的線
• Margin：元素之間的空間

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

盒子大小屬性

預(yù)設(shè)情況下，內(nèi)邊距和邊框會(huì)加入到元素的寬度/高度。使用 box-sizing: border-box 使寬度/高度包含內(nèi)邊距和邊框，這通常更直觀：

selector {
    property: value;
}

盒模型範(fàn)例：文字卡

<!-- 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;
}

實(shí)踐練習(xí)：建立輪廓框

/* 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 盒模型 - 用圖表解釋盒模型。涵蓋邊距、邊框、內(nèi)邊距和內(nèi)容。
• W3Schools - CSS 盒子模型 - 初學(xué)者友好，具有簡單的視覺效果。
• Web Dev Simplified - 為初學(xué)者提供的盒子模型的簡短、清晰、直觀的解釋。
• CSS Tricks - 對(duì)盒子模型的詳細(xì)記錄和高級(jí)解釋，以及實(shí)際用例和技巧。

---

Flexbox：佈局變得簡單

Flexbox 就像一個(gè)神奇的容器，可以以最有效的方式自動(dòng)排列其內(nèi)容。它非常適合以最少的努力創(chuàng)建響應(yīng)式佈局。

關(guān)鍵 Flexbox 屬性

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

<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;
}

實(shí)踐練習(xí)：靈活的儀表板

建立響應(yīng)式儀表板佈局：

* {
    box-sizing: border-box;
}

參考：

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

---

CSS 網(wǎng)格：二維佈局

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

• 顯示：網(wǎng)格：啟動(dòng)網(wǎng)格
• grid-template-columns：定義列大小
• grid-template-rows：定義行大小
• gap：設(shè)定網(wǎng)格項(xiàng)目之間的間距

selector {
    property: value;
}

高級(jí) CSS 網(wǎng)格技術(shù)

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

<!-- 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;
}

實(shí)踐練習(xí)#4：雜誌佈局

使用 CSS 網(wǎng)格建立雜誌風(fēng)格的版面：

/* 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 網(wǎng)格 - 涵蓋 CSS 網(wǎng)格基本概念的初學(xué)者友善指南。
• W3Schools - CSS 網(wǎng)格佈局 - 簡單易懂的範(fàn)例，附有互動(dòng)式程式碼編輯器來練習(xí)網(wǎng)格概念。
• 網(wǎng)格花園 - 一款有趣且引人入勝的遊戲，您可以透過練習(xí) CSS 網(wǎng)格屬性來種植花園。
• CSS Tricks - Complete Guide to Grid - 所有 CSS 網(wǎng)格屬性的優(yōu)秀視覺參考，並附有範(fàn)例。
• Kevin Powell - Learn CSS Grid the easy way - 為初學(xué)者提供的 CSS 網(wǎng)格快速視覺化速成課程。
• Developmentbyed - CSS 網(wǎng)格速成課程 - 詳細(xì)且適合初學(xué)者的教程，涵蓋 CSS 網(wǎng)格的各個(gè)方面。
• 網(wǎng)格範(fàn)例 - 真實(shí)世界網(wǎng)格佈局範(fàn)例的集合，以及每個(gè)用例的說明。

---

建造時(shí)間到了！ ？

現(xiàn)在輪到你將所學(xué)付諸實(shí)踐了！這是你的挑戰(zhàn)：

• 建立新的 CodePen（在 codepen.io 上免費(fèi)）
• 建立我們介紹的範(fàn)例和練習(xí)
• 分享您的創(chuàng)作！ 在下面的評(píng)論中加入您的 CodePen 連結(jié)

獎(jiǎng)勵(lì)積分：在設(shè)計(jì)中加入自己的創(chuàng)意！我會(huì)親自審核並回覆評(píng)論中分享的每則 CodePen。

？ 專業(yè)提示：請(qǐng)記得在 CSS 中加入註解來解釋您的想法。它可以幫助其他人從您的程式碼中學(xué)習(xí)！

---

接下來是什麼？ ？

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

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

讓我們聯(lián)絡(luò)吧！ ？

你有嘗試過練習(xí)嗎？有疑問嗎？在評(píng)論中分享您的經(jīng)驗(yàn)！我回覆每條評(píng)論並喜歡看到您的進(jìn)步。

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

以上是《給所有人的權(quán)威 CSS 指南》中的掌握 CSS |第1部分的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！