為 WordPress 學習 CSS 的 10 個簡單技巧

學習 CSS 可能會讓人不知所措，尤其是當您不知道從哪裡開始以及遇到困難時要搜索哪些術語時。

由於 CSS 是一種樣式語言，而不是像 Javascript 或 PHP 這樣的全功能編程語言，因此它實際上很容易學習，尤其是如果你掌握了一些 HTML 知識（我假設你已經掌握了這篇文章的目的）。

在我們的博客調查中，絕大多數人提到您希望提升自己的遊戲水平並更加熟悉 CSS，這就是為什麼我們最近發布了超過 150 種學習 CSS 資源的列表，這應該可以幫助您入門，尤其是與這個帖子。

今天，我將向您展示多年前剛開始學習 CSS 時幫助我學習 CSS 的工作流程和技巧。 從技巧一開始，逐步掌握 CSS。

繼續閱讀，或使用以下鏈接跳轉：

• 基礎建設
• 練習簡單的選擇器和屬性
• 記住盒子模型
• 通過實踐學習
• 按寬度和高度排列內容
• 浮動和定位
• 高級 CSS
• 使用 CSS 複製網站
• 預處理器
• 構架

一、基礎建設

首先要做的事情是：為了學習如何編寫自己的 CSS，您需要知道如何正確格式化它。 實際上有兩種正確的方法可以做到這一點，但其中一種有助於讓你更有條理。

由於 HTML 通常是人們想要使用 WordPress 網站時學習的第一語言，因此通過首先以與 HTML 類似的方式編寫 CSS 語法有助於學習 CSS 語法。

這是 CSS 採用的基本結構：

當您不想為站點上的元素實現很多樣式時，這很簡單，但是當您開始更加熟悉 CSS 時，您將需要的元素不止一種樣式，這就是像這樣的結構會變得混亂，快速。

這就是為什麼有一種更有效和更有條理的方式來編寫 CSS 的原因：

現在您可以開始深入研究本示例中使用的術語。 這些術語中的每一個都是 CSS 的基本構建塊：類、ID、選擇器、屬性和值。 屬性和值也構成了所謂的聲明。

這是學習如何編寫自己的 CSS 的一個很好的起點，一旦開始，您可能想知道應該在 WordPress 文件中的何處寫下所有這些內容。

在您的 WordPress 安裝中，您看到的任何以.css結尾的文件都是 CSS 文件，您可能已經猜到了。 您需要查找的主要文件是您的樣式表，它被標記為style.css 。 這是您的主題設計的大部分或全部內容，包括顏色、字體、基本圖像以及可能的一些主題佈局。

您可能還會注意到一個名為custom.css的預製主題中的文件，這通常是他們希望您對主題進行任何更改的地方。 當您在此文件中進行更改時，它應該覆蓋主題樣式表中的現有樣式。

如果您將插件添加到您的主題中，它們的文件夾中可能還帶有 CSS 文件，它們用於設置插件的外觀和感覺。

2. 練習簡單的選擇器和屬性

接下來是學習基本的選擇器和屬性以及它們在主題中的作用。 例如，用於標題的h1 、 h2和h3以及用於段落文本的p之類的選擇器，以及諸如font-family和background-color之類的屬性。

有一種簡單的方法可以練習這些新技能並實際查看您所做的更改，而無需實際創建自己的 WordPress 博客。 W3Schools 有大量關於 CSS 的信息以及可以更改代碼的實時示例，只需按一下按鈕，您就可以立即看到所做的更改。

當您看到一個示例時，只需單擊“自己嘗試”按鈕，就會打開一個窗口，您可以在其中測試一些基本的 CSS。

3. 記住盒子模型

我提倡引用最常見的信息，而不是將所有信息都記在心裡。 也許是因為我發現我的記憶力很多時候都缺乏，但我更願意說這是因為網上有很多精彩的參考資料。

您可以在心跳中輕鬆查找您不知道的選擇器和屬性。 只需對您最喜歡的搜索引擎（如 Google 或 Bing）進行簡單查詢，您需要的所有信息只需點擊一下即可。

幸運的是，這並不難學，老實說，如果我能記住它，你也不應該有問題。 本質上，它包括內容區域、內邊距、邊框和邊距。

4.邊做邊學

一旦您開始熟悉 CSS，通過選擇具有完全基本設計的主題並通過編輯其樣式表來更改其樣式來實際將其付諸實踐是一個好主意。

重要的是要了解簡單的更改有時會對主題產生巨大影響，而有時則影響不大。 最終，盡可能多地練習可以幫助您直觀地看到所做的更改，並將您編寫代碼的操作與最終結果聯繫起來。

在更宏大的計劃中，一旦你能夠連接點，你不僅可以快速編寫 CSS，而且還應該能夠在未來解決問題，這成為網頁設計和開發的關鍵任務。

這裡有一些很棒的主題可供練習，您可以免費安裝在您的 WordPress 網站上。 並非所有這些都完美地代表了主題的外觀和功能，但它們都是學習如何使用簡單的 CSS 更改主題的絕佳起點。

白色光譜

White Spektrum 主題是一個簡單的主題，具有通用佈局，包括主要內容區域、側邊欄、頁眉和頁腳。

除了字體和鏈接的顏色飛濺外，這是一個簡單易用的主題。

創始人

即使有上述這些極簡主義主題，您仍然可能對有多少您還沒有認識的東西感到不知所措，這沒關係。 當您檢查這篇文章的每個部分時，它應該開始更多地融合在一起。

5.按寬高排列內容

一旦您安裝了這些主題之一，您還可以通過輸入不同長度和寬度的內容區域和選擇器來開始更改佈局。

這是下一步的前奏，讓您熟悉 WordPress 主題中的不同佈局區域。

6. 浮動和定位

這是 CSS 會變得有點棘手的地方，因為您可以純粹使用 CSS 創建佈局，特別是浮動和定位。 問題是，這些屬性並不是為創建整個佈局而設計的，並且有一個草稿來更新 CSS 佈局。

目前，這是許多人使他們的佈局恰到好處的常見方式。 觀察已經存在的主題（包括上面的列表）是一個好主意，看看它們在使用浮動和位置方面有何不同。

7. 高級 CSS

至此，你才真正開始掌握 CSS 的竅門，但還有很多東西等著你去發現：

• 偽類——用於定義元素的特定狀態，例如鼠標懸停和將圖像定位在與其他元素相關的特定位置。
• 複雜的選擇器——您可以使用更高級的選擇器獲得更具體的樣式。
• CSS3 動畫– 當您將鼠標懸停在圖像和按鈕上時創建淡入淡出、彈出或其他過渡。
• CSS3 媒體查詢的響應性——創建響應式主題的最簡單方法之一是使用媒體查詢。
• 變換- 控制選定內容區域的大小和形狀。
• At-rules – 用於將字體和样式表等內容導入主題。
• 漸變– 為您的主題添加漸變，無需使用圖像。

這些是您可以真正開始看到主題設計真正成形的許多元素。 這是開始測試您的技能的最佳時機。

8. 使用 CSS 複製網站

有了所有這些知識，您可能需要獲得更堅固的腰帶，但更重要的是，您可以通過使用主題的基本外殼並從頭開始添加自己的 CSS 樣式，真正將您的技能付諸實踐。

你可以做的最有幫助的事情之一就是在現實世界的應用程序中練習你的知識。 我建議嘗試找到一個你喜歡的網站，然後在一個空白的 WordPress 主題上使用 CSS 盡可能地複制它。

當然，您可能無法讓一切都完美無缺，而且可能有很多元素無法僅使用 CSS 來複製，但這是讓您熟悉 CSS 的好方法。

以下是您可以使用的一些很棒的免費入門主題：

• 空白板岩

  

  這是最簡單的。 此主題中只有 HTML5，因此您可以自由添加 CSS，而不必擔心任何樣式衝突。 不過，它確實提供了開始設計主題所需的一切。

• HTML5 空白

  

  HTML5 Blank 是一個樣板的 WordPress 主題，其中包含一些樣式，但並不多。 如果您不太熱衷於從頭開始編寫 CSS，這是一個很好的開始。

• 下劃線

  

  如果您有點冒險並想嘗試更高級的入門主題，Underscores 是一個很好的選擇，但不適合膽小的人，因為它帶有兩個預加載的主題示例樣式。 它還包括一些先進的技術和編碼，使其成為一個很好的學習工具。

GitHub 上還有 HTML5 重置 WordPress 主題。 它包括更高級的功能，但這最終使它成為有價值的入門主題。

9. 預處理器

一旦你了解了 CSS 的來龍去脈，學習預處理器，尤其是 SASS 和 LESS 是一個好主意。 這兩者都有助於組織您的 CSS，因此它更容易編寫並且更易於將來編輯。

預處理器使您的 CSS 乾淨且易於理解，它已迅速成為 Web 開發人員的一項基本技能。 雖然關於哪個是最好的一直存在爭論，但 SASS 往往是迄今為止最常用的預處理器。

如果您想在 WordPress 環境中嘗試使用 SASS，請查看 Bones 主題。 它主要由 HTML5 組成，因此您可以嘗試使用已包含的內置 SASS 進行樣式設置。

10. 框架

在 Web 開發中，框架是用於創建動態網站的結構。 最終，框架的目標是在不丟失功能的情況下使網站更快。

一旦你掌握了 CSS，你就可以通過使用框架來加速你的主題開發。

最流行的框架之一是 Twitter Bootstrap。 它被創建為開箱即用的響應式，並使用 SASS 和 LESS 以及許多自定義 CSS 組件。

包起來

有了學習大綱和幫助你一路走來的技巧，CSS 不應該讓你難以掌握。 另外，您現在應該準備好嘗試設計自己的 WordPress 主題了。

有關學習 CSS 和 WordPress 的更多資源，請查看我們的其他一些帖子： WordPress 學習和參考 CSS 的超級指南：150 多種資源和從 WordPress 初學者到專業人士：200 多種職業提升資源。

• CSS