html開發筆記08- 字體樣式與顏色（標簽的屬性）

、標簽的分類：雙標簽和單標簽

雙標簽：就是成對出現的，類似于這種 <html> </html>

單標簽：就是可以單個使用的，類似于 <br> 換行標簽或 <hr>水平線標簽。

二、標簽屬性的作用：

標簽的屬性是用來定義文字或字符的顏色、寬高、粗細、大小、等，這個是標簽屬性的作用。

三、標簽屬性的特性：

1、每一個標簽都有自己的屬性，單標簽和雙標簽都有。

2、一個標簽可以有多個屬性。

3、每個屬性都有對應的值，值要用單或雙引號引起來。

4、多個屬性之間使用空格隔開。

5、屬性沒有順序之分。

6、字體屬性值，必須是系統可以識別的字體，一般為系統自帶字體。

7、HTML5 中 font 屬性已經棄用。

源代碼：↓

<!DOCTYPE html>

<head>

<title>中央氣象局</title>

</head>

<body>

</body>

</html>

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

大家好，我是大澈！

本文約 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 變量，在項目中按需設置對應的元素即可。

23 年的 CSS 新特性中，有一個非常重要的功能更新 -- 相對顏色。

簡單而言，相對顏色的功能，讓我們在 CSS 中，對顏色有了更為強大的掌控能力。

其核心功能就是，讓我們能夠基于一個現有顏色 A，通過一定的轉換規則，快速生成我們想要的顏色 B。

其功能能夠涵蓋：

精簡
調暗
飽和度
降低飽和度
色度增強
調整不透明度
反轉
補充
轉換
對比度
調色板

當然，今天我們不會一個一個去過這些功能，更多的時候，我們只需要知道我們能夠實現這些功能。

本文，我們將從實際實用角度出發，基于實際的案例，看看 CSS 相對顏色，能夠如何解決我們的一些實際問題。

快速語法入門

首先，我們通過一張圖，一個案例，快速入門 CSS 相對顏色語法：

相對顏色語法的目標是允許從另一種顏色派生顏色。

上圖顯示了將原始顏色 green 轉換為新顏色的顏色空間后，該顏色會轉換為以 r、g、b 和 alpha 變量表示的各個數字，這些數字隨后會直接用作新的 rgb() 顏色的值。

舉個例子：

<p> CSS Relative Color </p>

p {
    color: rgb(255, 0, 0);
}

實現一個 color 為紅色（rgb 值為 rgb(255, 0, 0)）的字體：

基于上面的相對顏色語法，我如何通過一個紅色生成綠色文字呢？示意如下：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

效果如下，我們就得到綠色字體：

解釋一下：

原本的紅色顏色，我們把它設置為 CSS 變量 --color: rgb(255, 0, 0)
想通過紅色得到綠色，對于紅色的 rgb 值 rgb(255, 0, 0) 而言，需要轉換成 rgb(0, 255, 0)
使用 CSS 相對顏色語法，就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

通過這個 DEMO，我們把幾個核心基礎語法點學習一下：

from 關鍵字

from 關鍵字，它是相對顏色的核心。它表示會將 from 關鍵字后的顏色定義轉換為相對顏色！在 from 關鍵字后面，CSS 會期待一種顏色，即能夠啟發生成另一種顏色。

from 關鍵字 后的顏色表示，支持不同顏色表示或者是 CSS 變量

第二個關鍵點，from 后面通常會接一個顏色值，這個顏色值可以是任意顏色表示法，或者是一個 CSS 變量，下面的寫法都是合法的：

p {
    color: rgba(from #ff0000) r g b);
    color: rgb(from rgb(255, 0, 0) r g b);
    color: rgb(from hsl(0deg, 100%, 50%) r g b);
    color: rgb(from var(--hotpink) r g b);
}

對轉換后的變量使用 calc() 或其他 CSS 函數

另外一個非常重要的基礎概念就是，我們可以對 (from color r g b) 后的轉換變量 r g b 使用 calc() 或其他 CSS 函數。

就是我們上面的例子：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

相對顏色語法支持，各種顏色表示函數：

相對顏色的基礎的使用規則就是這樣，它不僅支持 rgb 顏色表示法，它支持所有的顏色表示法：

sRGB 顏色空間：hsl()、hwb()、rgb()；
CIELAB 顏色空間：lab()、lch()；
Oklab 顏色空間：oklab()、oklch()；

使用 CSS 相對顏色，實現統一按鈕點擊背景切換

通常頁面上的按鈕，都會有 hover/active 的顏色變化，以增強與用戶的交互。

像是這樣：

最常見的寫法，就是我們需要在 Normal 狀態、Hover 狀態、Active 狀態下寫 3 種顏色：

p {
    color: #ffcc00;
    transition: .3s all;
}
/* Hover 偽類下為 B 顏色 */
p:hover {
    color: #ffd21f;
}
/** Active 偽類下為 C 顏色 **/
p:active {
    color: #ab8a05;
}

在之前，我們介紹過一種利用濾鏡 filter: contrast() 或者 filter: brightness() 的統一解決方案，無需寫多個顏色值，可以根據 Normal 狀態下的色值，通過濾鏡統一實現更亮、或者更暗的偽類顏色。

在今天，我們也可以利用 CSS 相對顏色來做這個事情：

div {
    --bg: #fc0;
    background: var(--bg);
    transition: .3s all;
}

div:hover {
    background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
    background: hsl(from var(--bg) h s calc(l * 0.8));
}

我們通過 hsl 色相、飽和度、亮度顏色表示法表示顏色。實現：

在 :hover 狀態下，根據背景色，將背景亮度 l 調整為原背景色的 1.2 倍
在 :avtive 狀態下，根據背景色，將背景亮度 l 調整為原背景色的 0.8 倍

在實際業務中，這是一個非常有用的用法。

使用 CSS 相對顏色，實現文字顏色自適應背景

相對顏色，還有一個非常有意思的場景 -- 讓文字顏色能夠自適應背景顏色進行展示。

有這么一種場景，有的時候，無法確定文案的背景顏色的最終表現值（因為背景顏色的值可能是后臺配置，通過接口傳給前端），但是，我們又需要能夠讓文字在任何背景顏色下都正常展現（譬如當底色為黑色時文字應該是白色，當背景為白色時，文字應該為黑色）。

像是這樣：

在不確定背景顏色的情況下，無論什么情況，文字顏色都能夠適配背景的顏色。

在之前，純 CSS 沒有特別好的方案，可以利用 mix-blend-mode: difference 進行一定程度的適配：

div {
    // 不確定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

實操過這個方案的同學都會知道，在一定情況下，前景文字顏色還是會有一點瑕疵。并且，混合模式這個方案最大的問題是會影響清晰度。

有了 CSS 相對顏色后，我們有了更多的純 CSS 方案。

利用 CSS 相對顏色，反轉顏色

我們可以利用相對顏色的能力，基于背景色顏色進行反轉，賦值給 color。

一種方法是將顏色轉換為 RGB，然后從 1 中減去每個通道的值。

代碼非常簡單：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反轉顏色 **/
}

用 1 去減，而不是用 255 去，是因為此刻，會將 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配個動圖，我們利用背景色的反色當 Color 顏色，適配所有背景情況：

完整的 DEMO 和代碼，你可以戳這里：CodePen Demo -- CSS Relatvie Color Adapt BG

當然，這個方案還有兩個問題：

如果顏色恰好是在 #808080 灰色附近，它的反色，其實還是它自己！會導致在灰色背景下，前景文字不可見；
絕大部分情況雖然可以正常展示，但是并不是非常美觀好看

為了解決這兩個問題，CSS 顏色規范在 CSS Color Module Level 6 又推出了一個新的規范 -- color-contrast()。

利用 color-contrast()，選擇高對比度顏色

color-contrast() 函數標記接收一個 color 值，并將其與其他的 color 值比較，從列表中選擇最高對比度的顏色。

利用這個 CSS 顏色函數，可以完美的解決上述的問題。

我們只需要提供 #fff 白色和 #000 黑色兩種可選顏色，將這兩種顏色和提供的背景色進行比較，系統會自動選取對比度更高的顏色。

改造一下，上面的代碼，它就變成了：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自動選擇對比度更高的顏色 **/
}

這樣，上面的 DEMO 最終效果就變成了：

此方案的優勢在于：

可以限定前景 color 顏色為固定的幾個色值，以保證 UI 層面的統一及美觀
滿足任何情況下的背景色

當然，唯一限制這個方案的最大問題在于，當前，color-contrast 還只是一個實驗室功能，未大規模被兼容。

總結一下

到今天，我們可以利用 CSS 提供的各類顏色函數，對顏色有了更為強大的掌控力。

很多交互效果，不借助 JavaScript 的運算，也能計算出我們想要的最終顏色值。本文簡單的借助：

使用 CSS 相對顏色，實現統一按鈕點擊背景切換
使用 CSS 相對顏色，實現文字顏色自適應背景

兩個案例，介紹了 CSS 相對顏色的功能。

原文鏈接：https://juejin.cn/post/7321410822789742618

在線咨詢

上一篇：「HTML5書籍」瘋狂HTML5+CSS3+JavaScript講義(第2版)
下一篇：DOM 操作之屬性操作

您的項目需求

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

整合營銷服務商