日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

CSS 自定義屬性是現(xiàn)代 CSS 中非常有用的功能，它允許開發(fā)者在樣式表中創(chuàng)建可重用的值，從而提高樣式表的可維護性和靈活性。通過 var() 函數(shù)，可以在 CSS 中定義變量，并在多個地方引用這些變量，甚至可以實現(xiàn)動態(tài)改變樣式的效果。

因項目需要，做了一個主題切換，主題樣式都是通過定義var()變量改變：

1. 什么是 CSS 自定義屬性（變量）？

CSS 自定義屬性是允許我們定義變量的功能，這些變量可以在 CSS 中的任何位置使用。與 JavaScript 中的變量不同，CSS 變量的作用域是基于 DOM 結(jié)構(gòu)的。換句話說，變量可以被局部或全局使用，這取決于它們的聲明位置。與傳統(tǒng)的 CSS 樣式表中直接寫死的值不同，自定義屬性可以在多個地方被引用和修改。CSS 自定義屬性的定義以 -- 開頭，且必須以 var() 函數(shù)來引用。

CSS 變量的聲明語法如下：

:root {
  --main-color: #3498db;
  --font-size: 16px;
}
body {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

在上面的例子中，--main-color 和 --font-size 是 CSS 自定義屬性（變量），它們分別代表主色和字體大小。通過 var() 函數(shù)，我們在 body 元素中引用了這兩個變量。

2. 如何定義和使用 CSS 變量？

2.1 定義 CSS 變量

CSS 變量的定義通常在 :root 選擇器中進行，這樣可以確保它們在全局范圍內(nèi)有效。-- 是定義自定義屬性的前綴。

:root {
  --primary-color: #1abc9c;
  --secondary-color: #2ecc71;
  --font-family: 'Arial', sans-serif;
}

在這里，我們定義了三個變量：--primary-color、--secondary-color 和 --font-family，分別表示主色、副色和字體。

2.2 使用 var() 函數(shù)引用變量

一旦定義了 CSS 變量，就可以通過 var() 函數(shù)在任何需要的地方引用它們。

body {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}
h1 {
  color: var(--secondary-color);
}

在這個例子中，background-color 和 font-family 使用了自定義變量，h1 元素使用了 --secondary-color 變量來設(shè)置顏色。

3. CSS 變量的作用域

CSS 變量是層疊的，這意味著它們的作用域是基于 DOM 結(jié)構(gòu)的。變量的作用域可以是全局的，也可以是局部的。

3.1 全局作用域

當在 :root 中定義變量時，它們是全局的，可以在整個項目中使用。

:root {
  --global-color: #ff6347;
}
div {
  color: var(--global-color);
}
p {
  color: var(--global-color);
}

3.2 局部作用域

如果在特定的選擇器中定義了變量，它們只會在該選擇器內(nèi)部生效。

.container {
  --local-color: #ff6347;
}
.container p {
  color: var(--local-color);
}
.container .title {
  color: var(--local-color);
}

在上面的例子中，--local-color 僅在 .container 元素內(nèi)有效，其他地方無法訪問。

4. CSS 變量的默認值

聲明了 CSS 自定義屬性之后，在使用 var() 時，可以為變量提供一個默認值，如果該變量未定義或者無法找到時，CSS 會使用這個默認值。這可以防止頁面渲染時因缺少變量而導致的錯誤。var() 函數(shù)接受兩個參數(shù)：

• 必需的參數(shù)：引用 CSS 變量名。
• 可選的默認值：如果變量未定義或不可用，使用此默認值。

div {
  color: var(--undefined-color, #333);  /* 如果 --undefined-color 未定義，使用 #333 */
}

在這個例子中，如果 --undefined-color 沒有定義，color 屬性會使用默認的 #333 值。

5. 動態(tài)改變 CSS 變量

CSS 變量不僅可以在靜態(tài)樣式表中使用，還可以在 JavaScript 中動態(tài)地修改。這使得開發(fā)者可以通過 JavaScript 實現(xiàn)動態(tài)主題切換、響應式設(shè)計和交互式樣式調(diào)整等功能。

5.1 在 JavaScript 中修改 CSS 變量

可以通過 style.setProperty() 方法動態(tài)更改 CSS 變量。

document.documentElement.style.setProperty('--primary-color', '#9b59b6');

這行代碼會把全局變量 --primary-color 的值修改為 #9b59b6。

或者CSS修改(鼠標移入按鈕，改變變量)

button:hover {
  --primary-color: #3498db;  /* 修改變量 */
}

5.2 實現(xiàn)主題切換

例如，通過 JavaScript 和 CSS 變量，你可以實現(xiàn)一個簡單的主題切換功能。

<button onclick="toggleTheme()">切換主題</button>
<style>
  :root {
    --background-color: white;
    --text-color: black;
  }
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
</style>
<script>
  function toggleTheme() {
    const currentBackground = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
    if (currentBackground === 'white') {
      document.documentElement.style.setProperty('--background-color', '#333');
      document.documentElement.style.setProperty('--text-color', '#fff');
    } else {
      document.documentElement.style.setProperty('--background-color', 'white');
      document.documentElement.style.setProperty('--text-color', 'black');
    }
  }
</script>

點擊按鈕后，toggleTheme() 函數(shù)會動態(tài)切換 --background-color 和 --text-color 變量，從而實現(xiàn)白天/黑夜主題的切換。

6. CSS 變量的繼承、計算和媒體查詢使用

CSS 變量支持繼承和計算，可以利用數(shù)學表達式來操作變量的值，增強樣式的靈活性。

6.1 繼承

當一個元素沒有定義某個 CSS 變量時，它會從父元素繼承該變量的值。

:root {
  --base-padding: 10px;
}
.container {
  padding: var(--base-padding);
}
.card {
  padding: var(--base-padding);  /* 繼承自 .container */
}

6.2 計算

可以在 CSS 變量中使用計算，比如通過 calc() 函數(shù)來計算尺寸。

:root {
  --base-size: 20px;
}
.element {
  width: calc(var(--base-size) * 2);
  height: calc(var(--base-size) + 10px);
}

在上面的例子中，--base-size 被用在 calc() 函數(shù)中進行計算，產(chǎn)生更靈活的布局。

6. 3 CSS 變量與媒體查詢結(jié)合使用

CSS 變量非常適合和媒體查詢一起使用，能夠幫助你輕松地創(chuàng)建響應式設(shè)計。你可以在不同的屏幕尺寸下，修改變量的值以實現(xiàn)不同的布局或主題。

:root {
  --font-size: 16px;
}
body {
  font-size: var(--font-size);
}
@media (max-width: 600px) {
  :root {
    --font-size: 14px; /* 在小屏幕下修改字體大小 */
  }
}

7. 兼容性

CSS 自定義屬性在現(xiàn)代瀏覽器中有很好的支持，包括 Chrome、Firefox、Safari、Edge 等，但在 IE11 及以下版本中并不支持。若要兼容舊版瀏覽器，可能需要使用其他方式來處理變量，或者考慮提供兼容的樣式（如利用 PostCSS 或 Sass 編譯器）。

瀏覽器支持：

• Chrome：支持
• Firefox：支持
• Safari：支持
• Edge：支持
• Internet Explorer：不支持

8. 總結(jié)

CSS 自定義屬性var()函數(shù)是 CSS 中強大的工具，它使得開發(fā)者可以更加靈活地管理樣式、提高代碼的可維護性，并且可以通過 JavaScript 動態(tài)修改樣式。通過合理使用 CSS 變量，我們能夠更高效地組織樣式代碼，輕松實現(xiàn)主題切換和響應式設(shè)計等功能。

關(guān)鍵點總結(jié)：

• 變量通過 -- 定義，在 var() 中引用。
• 可以使用全局和局部作用域。
• 可以為變量提供默認值。
• 可以通過 JavaScript 動態(tài)修改變量值。
• 支持繼承和計算，增加了樣式表的靈活性。
• 避免重復代碼，提高樣式的復用性。
• 使代碼更具可維護性，尤其是在大型項目中。

借助 CSS 變量，前端開發(fā)將變得更加靈活、簡潔，維護和擴展樣式表也變得更加容易。

?轉(zhuǎn)自https://juejin.cn/post/7468144197293867043