CSS 筆記

分類

建立時間: 2025年1月25日 01:49

更新時間: 2025年2月14日 01:16

說明

分享一些相當不錯的 CSS 知識。

:root

:root 表示 <html> 元素，除了優先權較高之外，與 html 選擇器相同。

:root {
  background: yellow;
}

變數

全域變數

在宣告全域變數時 :root 會很有用

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

區域變數

:root {
  --main-color: hotpink;
}

div {
  --main-color: red;
}

.foo {
    color: var(--main-color);
}

使用變數

div {
    color: var(--main-color);
}

上述將 main-color 宣告在 div 之下，你也可以宣告在 class 或其他元素之內，上述 .foo 是否可以存取 main-color 就看 .foo 是否在 div 之內，若變數有重複宣告，則會取最接近的那個。

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
  <div>
    <span class="foo">abc</span>
  </div>
  <span class="foo">abc</span>
</body>
</html>

如上範例，div 內的 span 的顏色為 red，div 外的 span 的顏色為 hotpink。

通配選擇器

它可以匹配任意類型的 HTML 元素。

* {
  color: red;
}

!important

使用一個 !important 規則時，此宣告將覆寫任何其他宣告。

建議不要使用，這會讓程式碼更難以維護。

p {
  background-color: red !important;
}

calc

計算，如同常見的加減乘除，可以使用 %, px, 數字, 變數。

width: calc(100% - 80px);

但除法除數不能用 px

/* 錯誤 */
width: calc(100% / 80px);

觀看次數: 35

css

按讚追蹤 Enjoy 軟體 Facebook 粉絲專頁

每週分享資訊技術

Enjoy 享受軟體

一杯咖啡的力量，勝過千言萬語的感謝。

支持我一杯咖啡，讓我繼續創作優質內容，與您分享更多知識與樂趣！