如何使用 CSS – 面向初學者的網頁設計提示和技巧

您甚至可以通過這些面向初學者的 CSS 技巧來學習如何使用 CSS 來設計網頁樣式。

您不需要了解任何有關計算機代碼的知識。 您只需要知道如何復制和粘貼即可。

但首先，什麼是 CSS？

層疊樣式表 (CSS) 是一種樣式表語言代碼，主題開發人員使用它來描述和更改 HTML 文檔的呈現或外觀。

CSS 是做什麼的？

簡單來說，CSS 文件使 HTML 頁面看起來更漂亮。

無論您使用什麼博客平台，您都可以更改 CSS 屬性以使您的博客看起來更好。

您使用什麼博客平台並不重要。

您將在主題設置中選擇Custom CSS或Additional CSS 。

您可能從未看過此選項。

或者，如果有的話，您可能會認為學習如何編碼太難了。

但這非常容易。

我對 Web 開發或 CSS 語法一無所知，但我可以在幾秒鐘內更改樣式屬性。

您需要做的就是使用 Chrome 或 Firefox 網絡瀏覽器開發人員工具並學習一些簡單的 CSS 技巧和技巧。

讓我們看看它是多麼容易。

為什麼要學習如何編輯博客的 CSS？

您的博客主題中可能有很多設置。

但是有許多較小的元素可能會丟失。

即使在 WordPress 的高級主題中，某些選項在標準選項中也不可用。

這就是為什麼您可以通過自己的編輯和更改來幫助您的 CSS 更好地工作。

通過更改外部樣式表，它可以引用您所有的 HTML 頁面。

如果您更改了一個頁面上的 HTML 標題，它會更改所有頁面上的 HTML 標記。

該引用稱為偽元素。

這意味著如果您更改 H2 標題的外觀，它將更改您網站上的所有 H2 標題。

但您無需了解所有這些並發症。

您需要知道的只是它的工作原理，並且您可以在完全不了解編碼的情況下將您的博客設計成您想要的樣子。

讓我們開始為初學者介紹一些簡單的 CSS 技巧。

如何輕鬆更改內聯 CSS

第一步是在 Firefox、Chrome 或 Microsoft Edge 中打開您的博客。

在下面的示例中，我使用了 Firefox。 我發現它比 Chrome 使用起來更友好一些。

但兩者的工作方式相似。

在新選項卡或窗口中打開您的博客。 您可以導航到要更改的頁面。

現在從 Firefox 的“工具”菜單或 Chrome 的“查看”菜單打開開發人員工具、Inspector。

單擊檢查器以打開工具窗格。

您可以使用工具窗格左上角的選擇器箭頭來選擇頁面上的任何內聯樣式元素。

在頁面上移動光標以選擇一個元素。 或者您可以單擊列表中的單個元素。

您將在網頁的瀏覽器視圖中看到您選擇的每個元素以藍色突出顯示。

現在您已準備好更改頁面的外觀。

使用 CSS 選擇器

在我的示例中，我將更改 H2 標題元素的外觀。

您可以選擇更改 H1 元素、正文或圖片標題。

我想從更改字體大小開始。 您需要做的就是單擊樣式標籤字體大小，然後更改數字。

我將大小從 33px 更改為 56px。 您可以看到標題的大小現在變大了。

不用擔心。 您還沒有更改您的實時博客頁面。 您在瀏覽器窗格中看到的只是更改的預覽。

您可以隨心所欲地使用任何 HTML 元素。

您在瀏覽器窗格中看到的所有內容都只是您對 CSS 規則所做更改的預覽。

現在我想改變文本的顏色。

如果單擊顏色標籤和數字之間的顏色點，則會打開顏色選擇器。

現在只需選擇您要使用的顏色。

更改 HTML 屬性顏色很簡單。 這裡我已經從黑色變成了藍色。

看起來不錯，但行高可能會更好。 我會改變它。

當前設置為 1.2，行與行之間的間距太大。 我想讓線條靠得更近。

所以，我將其更改為 1.0。

這樣看起來好多了。

我對 H2 標題在預覽模式下的外觀進行了三處更改。 我更改了字體大小、顏色和行間距。

現在是時候將這些更改添加到我的實時站點中了。

如何獲取您網站的代碼

您需要復制已修改的代碼行。

選擇並複制所有代碼。 確保複製所有行，包括最後一個括號。

現在將其粘貼到文本編輯器中。 您可以在 PC 上使用記事本，或在 Mac 上使用文本編輯器。

我們所做的另一個改變是顏色。 我們也需要復制這一行。

您只需要復制顏色線。

您可以在上圖中看到 H2 元素以粗體顯示。 這意味著它與我們的第一個代碼是相同的偽元素。 所以你可以一起使用它們。

複製該行。

現在將該行添加到您的文本編輯器中。

您可能需要添加或刪除一些空格，以便您的顏色線縮進相同。

現在您已準備好將這三項更改添加到您的實時站點。

將代碼添加到您的站點

轉到您的主題選項並選擇您的 CSS 選項。

在 WordPress 主題中，它位於主題定制器中，稱為附加 CSS 或自定義 CSS。

它將在其他博客平台上被稱為類似的東西。

現在從您的文本編輯器中復制所有代碼，並將其粘貼到您的定製程序選項卡中。

一旦您粘貼代碼，您的預覽器就會顯示您所做的更改。

點擊發布，你就完成了。

這是我更改前後的比較。

你可以做更多

我的初學者 CSS 技巧逐步介紹編輯 HTML CSS 樣式只是一個開始。

如果您想嘗試並嘗試更改其他元素，您可以做更多的事情。

向圖像添加邊框或陰影、向左或向右移動文本或調整正文寬度都很容易。

您可以移動邊距或減少或增加填充並修改對齊方式。

您可以選擇數百個選項進行編輯。

請記住，當您在開發人員工具中工作時，您不會影響您的網站。

您所做的任何更改都是預覽，並且僅在該瀏覽器窗口中可見。

無論您嘗試什麼，或者它是否有效，都沒有關係。

把它想像成一個遊樂場，讓您了解如何為您的網站或博客設計風格。

保持好奇心，通過這些針對初學者的 CSS 技巧，您將樂於學習這項新技能。

Developer Tools 的一大獎勵提示

現在您已經打開了 Developer Tools 框架，您可以做一件非常巧妙的事情。

您可以測試您的站點速度。

您需要做的就是單擊“網絡”選項卡。

然後單擊 CTRL + R。

您會在底部標有箭頭的線上看到紅色的完全加載頁面速度時間。