CSS3實現文本字體漸變雙色變化

SS3實現文本字體漸變雙色變化，實現顏色過渡漸變，可以用在首頁展示欄中，增強用戶體驗！下面來看看效果：

實現代碼非常簡單：

體效果

<h1></h1> 標題字(最大)

<h6></h6> 標題字(最小)

<strong></strong> 粗體字(突出強調)

<b></b> 粗體字(bold:粗體)

<i></i> 斜體字(italic:斜體)

<u></u> 底線,文本添加下劃線：(underline:下劃線)

<strike></strike>或<s></s> 橫線,相當于加刪除線文本 <del></del> HTML5

等寬文字標簽:對于等寬文字設置多數情況用在英文文字顯示中

<tt></tt> 打字體,類似打字機或者等寬的文本效果。

<code></code> 等寬文字設置內容(定義計算機代碼文本)

<samp></samp> 等寬文字設置內容(定義樣本文本)

<kbd> 定義鍵盤文本。

<sup></sup> 文字上標字體標簽(super)

<sub></sub> 文字下標字體標簽(subscipt)

<address></address> 設置地址文字(可定義一個地址,比如電子郵件地址。您應當使用它來定義地址、簽名或者文檔的作者身份。)

<font></font> 編輯網頁文字樣式

<font face="" size="" color=""></font>

face屬性可以用于設置文字的名稱,可以是宋體、隸書、楷體等;

size屬性用于設置字號的大小(單位:字號),從 1 到 7 的數字,或h1-h6。瀏覽器默認值是3。

color用于設置字體的顏色

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

手冊上沒有

<ruby></ruby>和<rt></rt> 設置文字標注標記

實例:

<ruby>當代最可愛的人<rt>志愿軍</rt></ruby>

內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 800+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優質 CSS 代碼片段，輕松實現一鍵切換主題顏色，在任何項目中都可用。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

[data-theme='default'] {
  --font-primary: #fff;
  --background-main: #0678be;
}

[data-theme='black'] {
  --font-primary: #fff;
  --background-main: #393939;
}

<html lang="en" data-theme="default"></html>

body {
  color: var(--font-primary);
  background-color: var(--background-main);
}

分享原因

這段代碼可以輕松實現網頁主題的切換，且在各種項目中通用。

先定義不同主題的 CSS 變量，再通過 JavaScript 動態更改 data-theme 屬性，從而實現頁面樣式的動態變化。

這種方法不僅簡化了主題管理，還提高了代碼的可讀性和維護性，是我們項目中一般且常用的實現方式之一。

代碼解析

1. 定義主題變量

CSS變量：聲明自定義CSS屬性，它包含的值可以在整個文檔中重復使用。屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的 CSS 值。

CSS屬性選擇器：匹配具有特定屬性或屬性值的元素。例如[data-theme='black']，將選擇所有 data-theme 屬性值為 'black' 的元素。

使用 [data-theme='default'] 和 [data-theme='black'] 選擇器，根據 data-theme 屬性的值定義不同的主題樣式。

定義了兩個 CSS 變量 --font-primary 和 --background-main，分別表示字體顏色和背景顏色。

2. 指定默認主題

在 <html> 元素上添加 data-theme="default"，指定默認主題為 default 。

后面用 js 動態切換 data-theme 屬性值，然后 CSS 屬性選擇器將自動選擇對應的 CSS 變量。

3. 應用 CSS 變量

Var函數：用于使用 CSS 變量。第一個參數為 CSS 變量名稱，第二個可選參數作為默認值。

使用 var(--font-primary) 和 var(--background-main) 來引用之前定義的 CSS 變量。

這里設置 body 元素的 color 和 background-color 屬性，分別引用 --font-primary 和 --background-main 變量，在項目中按需設置對應的元素即可。

在線咨詢

上一篇：CSS3實現文本字體漸變雙色變化
下一篇：HTML打開神器，讓你秒懂！

您的項目需求

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

整合營銷服務商

CSS3實現文本字體漸變雙色變化

您的項目需求