如何使用CSS變量 - 通過代碼示例解釋

果你正在構建網站或Web應用程序，你應該已經知道代碼重復被認為是一種不良實踐。

這就是為什么你應該學習如何使用CSS變量來減少你編寫的CSS代碼量并將你的樣式帶到一個新的水平。

最成功的Web應用程序擁有令人驚嘆的設計。不幸的是，為了達到預期的效果，Web開發人員需要準備大量的樣式。這迫使我們在許多不同的元素中重復值，比如顏色。

幸運的是，現代樣式表支持CSS變量，這使您可以減少代碼庫中的重復。你不需要像CSS模塊、Less或SASS這樣的外部工具來利用它。

在這個全面的指南中，我將向您展示如何有效地使用CSS變量，涵蓋從純HTML和CSS的基本示例到更高級的框架，如React和Next.js。

（本文內容參考：java567.com）

景

復雜的網站都會有大量的CSS代碼，通常也會有許多重復的值。

舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發生了變化，需要全局搜索并且一個一個替換，效率不高且容易出錯。

自定義屬性在某個地方存儲一個值，然后在其他許多地方引用它。另一個好處是語義化的標識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。

概念

自定義屬性（有時候也被稱作CSS變量或者級聯變量）是由CSS作者定義的，它包含的值可以在整個文檔中重復使用。

由自定義屬性標記設定值（比如： --main-color: black;），由 var() 函數來獲取值（比如： color: **var(--main-color)**;）。

優勢

在構建大型站點時，作者通常會面對可維護性的挑戰。在這些網頁中，所使用的CSS 的數量是非常龐大的，并且在許多場合大量的信息會重復使用。

例如，在網頁中維護一個配色方案，意味著一些顏色在 CSS 文件中多次出現，并被重復使用。當你修改配色方案時，不論是調整某個顏色或完全修改整個配色，都會成為一個復雜的問題，不容出錯，而單純查找替換是遠遠不夠的。

如果使用了CSS 框架，這種情況會變得尤其糟糕，此時如果要修改顏色，則需要對框架本身進行修改。

在這些場合使用 LESS 或 Sass 類似的預處理器是非常有幫助的，但是這種通過添加額外步驟的方式，可能會增加系統的復雜性。

CSS變量為我們帶來一些預處理器的便利，并且不需要額外的編譯。

這些變量的第二個優勢就是名稱本身就包含了語義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是同樣的顏色出現在不同的文件中的時候。

用法

下面是 CSS 變量的使用方法和步驟。

CSS 中聲明變量

我們都知道，在 JS 中要使用一個變量前，必須聲明這個表變量。在 CSS 中也是一樣的道理。

聲明一個自定義屬性，屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的CSS值。和其他屬性一樣，自定義屬性也是寫在規則集之內的，如下：

body {
    --bg-color: #7F583F;
    --color: #F7EFD2;
}

上面代碼中，body選擇器里面聲明了兩個變量：--bg-color和--color。

它們與color、font-size等正式屬性沒有什么不同，只是沒有默認含義。所以 CSS 變量（CSS variable）又叫做**"CSS 自定義屬性"**（CSS custom properties）。

規則集所指定的選擇器定義了自定義屬性的可見作用域。通常的最佳實踐是定義在根偽類 :root下，這樣就可以在HTML文檔的任何地方訪問到它了：

:root {
    --main-bg-color: #eee;
}

自定義屬性名是大小寫敏感的，--my-color 和 --My-color 會被認為是兩個不同的自定義屬性。

CSS 中使用變量

通過var()函數來讀取變量。語法如下:

var(custom-property-name, value)

name (必需) 變量名（以兩條破折號開頭）。
value (可選) 表示變量的默認值。如果該變量不存在，就會使用這個默認值。

變量名稱必須以兩個破折號（--）開頭，且區分大小寫！

使用方法：

element {
  background-color: var(--main-bg-color);
}

變量也可以使用在變量聲明中：

:root {
  --primary-color: #eee;
  --primary-bg-color: var(--main-bg-color);
}

變量值只能用作屬性值，不能用作屬性名。

JS 操作 CSS 變量

在 JS 代碼中，我們可能需要讀取 CSS 變量的值，其方法如下：

const root = document.querySelector(":root");
// 設置 CSS 變量
root.style.setProperty("--main-bg-color", "red");
// 讀取 CSS 變量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 刪除 CSS 變量
root.style.removeProperty("--main-bg-color");

總結

以上就是關于 CSS 變量的一些基本概念及使用方法，更多詳情待后續！

靈活使用 CSS 變量，不僅可以提高生產力，也能夠提高代碼的可閱讀性和維護性。

~ 本文完

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
知識與技能并重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

HTML文本格式化通常使用一系列特定的標簽來改變文本的外觀或結構。這些標簽可以控制文本的字體、大小、顏色、對齊方式等，也可以用來標記文本的邏輯結構（如段落、標題、列表等）。除了這些基本的格式化標簽，HTML還支持通過CSS（級聯樣式表）來更精細和靈活地控制文本的格式和樣式。

參考文檔：https://www.cjavapy.com/article/3306/

1、標題

HTML中，文本格式化和結構化主要通過一系列標簽來完成，其中標題（Headings）標簽是最常用于定義文本格式的元素之一。HTML提供了六級標題標簽，從 <h1> 到 <h6>，<h1> 表示最高級別的標題，而 <h6> 表示最低級別的標題。這些標題標簽不僅幫助改善網頁的結構和可讀性，還對搜索引擎優化（SEO）至關重要，因為搜索引擎使用這些標簽來識別網頁上的不同部分和內容的層次結構。每個級別的標題都有默認的樣式，通常是不同的大小和加粗，以顯示它們的層次結構

<h1>這是一個 H1 標題</h1>
<h2>這是一個 H2 標題</h2>
<h3>這是一個 H3 標題</h3>
<h4>這是一個 H4 標題</h4>
<h5>這是一個 H5 標題</h5>
<h6>這是一個 H6 標題</h6>

2、段落與換行

HTML中，文本格式化通常涉及使用特定的標簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創建段落，<br>插入換行。

1）段落 (<p> 標簽)

<p> 標簽自帶上下邊距，用以區分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>

2）換行 (<br> 標簽)

<br> 標簽只是簡單地添加一個換行點，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。

這是文本行的開始。<br>這是新的一行，但在同一個段落內。

3、強調文本

使用<em>和<strong>強調文本。HTML中，強調文本通常使用 <em> 和 <strong> 標簽來實現。這兩個標簽既有語義意義，也影響文本的表現形式。

<em> 標簽用于表示強調文本，通常表現為斜體，用以表示文本的輕度強調。

<strong> 標簽用于表示更強烈的強調，通常表現為加粗，表示文本的高度強調。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了兩種主要的列表類型：有序列表（<ol>）和無序列表（<ul>）。兩種類型都使用列表項（<li>）來定義列表中的實際項。

1）有序列表

有序列表以 <ol> 標簽開始。每個列表項都放在 <li> 標簽內。列表是有序的，也就是每個項目都是編號的。這適用于項目順序很重要的列表，如食譜或待辦事項列表。

<ol>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>

2）無序列表

無序列表以 <ul> 標簽開始。像有序列表一樣，每個項都放在 <li> 標簽內。然而，無序列表中的項目不是編號的。使用圓點符號進行表示。這適用于項目順序不重要的列表，如購物清單。

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>這是一個<em>斜體</em>和<strong>加粗</strong>的示例。</p>
<p><u>這段文本下劃線</u>和<s>這段文本是刪除線</s>。</p>
<p>化學水分子公式為H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
這是預格式化文本，
保留了空格和
換行符。
</pre>

<blockquote>這是一個長引用的示例，可能包含多個段落。</blockquote>
<p>這是一個<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>進行網頁設計。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復制文本。</p>
<p><samp>這是計算機程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>

</body>
</html>

參考文檔：https://www.cjavapy.com/article/3306/

在線咨詢

上一篇：HTML5開發精講高清視頻教程免費下載
下一篇：前端渲染引擎doT.js解析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商