color: red;
color: orange;
color: tan;
color: rebeccapurple;

更多標準顏色

color: #090;
color: #009900;
color: #090a;
color: #009900aa;

color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

color: inherit;
color: initial;
color: unset;
color: transparent;
color: currentcolor; /* 關鍵字 */

/* 全局值 */
color: inherit;
color: initial;
color: unset;

.column {
  max-width: 200px; /* 最大寬度 200 像素 */
  width: 500px;     /* 寬度 500 像素 */
}

另見: max-width / min-width / max-height / min-height

.block-one {
  margin: 20px;  /* 邊距 20 像素 */
  padding: 10px; /* 補白 10 像素 */
}

另見: 邊距(margin) / 補白(padding)

.container {
  /* 設置的邊框和補白的值是包含在 width 內的 */
  box-sizing: border-box;
}

另見: box-sizing

.invisible-elements {
  visibility: hidden; /* 隱藏元素 */
}

另見: Visibility

div {
  /* 覽器自己選擇一個合適的外邊距 */
  margin: auto;
}

另見: 邊距(margin)

.small-block {
  /* 瀏覽器總是顯示滾動條 */
  overflow: scroll;
}

另見: 溢出(overflow)

.container {
  display: flex;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

.container {
  display: flex;
  /* 垂直的 */
  align-items: center; 
  /* 水平的 */
  justify-content: center;
}

.container > .top {
 order: 1;
}
.container > .bottom {
 order: 2;
}

.container {
  display: flex;
  flex-direction: column;
}
.container > .top {
  flex: 0 0 100px;
}
.container > .content {
  flex: 1 0 auto;
}

一個固定高度的頂部欄和一個動態高度的內容區域

.container {
  align-items: center;
}

垂直居中所有項目

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

/* 行間距為 20px */
/* 列之間的距離是 10px */
#grid-container {
  display: grid;
  grid-gap: 20px 10px;
}

#grid-container {
    display: block;
}

#grid-container {
  display: inline-grid;
}

grid-row-gap: length;

任何合法的長度值，例如 px 或 %。0 是默認值

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

#container {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item {
  grid-area: nav;
}
.grid-container {
  display: grid;
  grid-template-areas:
  'nav nav . .'
  'nav nav . .';
}

#grid-container {
  display: grid;
  justify-items: start;
}
.grid-items {
  justify-self: end;
}

網格項目位于行的右側（末尾）

#container {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

定義 CSS 變量

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

變量用法

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

另見: CSS Variable

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Increment "my-counter" by 1 */
counter-increment: my-counter;

/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;

/* Reset "my-counter" to 0 */
counter-reset: my-counter;

另見: Counter set

body { counter-reset: section; }
h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}

ol {
  counter-reset: section;   
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

div {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
}

calc() CSS 函數允許您在指定 CSS 屬性值時執行計算

font-size: clamp(1rem, 10vw, 2rem);

設置隨窗口大小改變的字體大小

p:before {
  content: attr(data-foo) " ";
}

獲取選擇到的元素的某一 HTML 屬性值

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
   content: counters(count, '.', upper-alpha) ') ';
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}

嵌套計數器，返回表示指定計數器當前值的連接字符串

<meta name="viewport" content="... viewport-fit=cover">

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

用戶代理定義的環境變量值插入你的 CSS 中

fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

將給定大小夾緊為可用大小

從一個逗號分隔的表達式列表中選擇最大（正方向）的值作為屬性的值

width: max(10vw, 4em, 80px);

例子中，寬度最小會是 80px，除非視圖寬度大于 800px 或者是一個 em 比 20px 寬

width: min(1vw, 4em, 80px);

從逗號分隔符表達式中選擇一個最小值作為 CSS 的屬性值

minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])

定義了一個長寬范圍的閉區間

background: url("topbanner.png") #00D no-repeat fixed;
list-style: square url(http://www.example.com/redball.png)

:root {
  --main-bg-color: pink;
}

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

代替元素中任何屬性中的值的任何部分

p {
  white-space:nowrap;
}

p {
  word-break:break-all; /* 英文 */
  white-space:pre-wrap; /* 中文 */
}

html {
  scroll-behavior: smooth;
}

點擊我頁面會平滑滾動到入門

input[type="text"]:autofill {
  box-shadow: 0 0 0 1000px #000 inset;
  -webkit-text-fill-color: white;
}

另見: :autofill

br + br {
  display: none;
}

:empty {
  display: none;
}

body {
  caret-color: red;
}

html {
  -webkit-filter: grayscale(.95);
}

上面示例設置了當前卡片灰色

textarea {
  form-sizing: normal
}

div {
  aspect-ratio: 1/1 
}

屬性 aspect-ratio 可以非常容易的定義一個容器的長寬比

使用 all 速記來指定元素的所有屬性。將值設置為 unset 會將元素的屬性更改為其初始值：

button {
  all: unset;
}

注意：IE11 不支持 all 和 unset 速記

p {
  overflow: hidden;/*超出部分隱藏*/
  /* 超出部分顯示省略號 */
  text-overflow:ellipsis;
  /* 規定段落中的文本不進行換行 */
  white-space: nowrap;
  width: 250px;/*需要配合寬度來使用*/
}

您不需要為每個 <p>、<h*> 等添加行高。相反，將其添加到正文：

body {
  line-height: 1.5;
}

這樣文本元素可以很容易地從 body 繼承

.overflow-ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

一行文本截斷顯示省略號 (...)

.overflow-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

多行文本截斷到特定的行數，末尾顯示省略號 (...)

.sticky {
  position: sticky;
  top: 0;
}

屬性 sticky 能在滾動到頂部的位置固定住元素

a[href^="http"]:empty::before {
  content: attr(href);
}

如果 <a> 標簽里面沒有內容，將 href 的值作為內容展示

div {
  -webkit-user-modify: 
    read-write-plaintext-only;
}

通過樣式來控制一個元素 div 是否可以編輯

嘗試使用 table-layout: fixed 以保持單元格寬度相等：

table {
  table-layout: fixed;
}

當 <a> 元素沒有文本內容，但有 href 屬性的時候，顯示它的 href 屬性：

a[href^="http"]:empty::before {
  content: attr(href);
}

給 “默認” 鏈接定義樣式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

通常沒有 class 屬性，以上樣式可以甄別它們，而且不會影響其它樣式

這是一個自定義用戶樣式表的不錯的技巧。避免在加載頁面時自動播放。如果沒有靜音，則不顯示視頻：

video[autoplay]:not([muted]) {
  display: none;
}

再次，我們利用了 :not() 的優點

當觸發 <select> 的下拉列表時，為了避免表單元素在移動瀏覽器（iOS Safari 和其它）上的縮放，加上font-size：

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

指針事件允許您指定鼠標如何與其觸摸的元素進行交互。要禁用按鈕上的默認指針事件，例如：

button:disabled {
  opacity: .5;
  pointer-events: none;
}

就這么簡單

div:has(img) {
  background: black;
}

設置包含子元素 img 的 div 元素樣式，還可以嵌套：

div:has(h2):has(ul) {
  background: black;
}

用戶使用額外的換行符

br + br {
  display: none;
}

body {
  line-height: 1.5;
}

您不需要為每個 <p>、<h*> 等分別添加行高。相反，將其添加到正文

<a href="https://example.com">超鏈接</a>

attr HTML 元素的屬性名。

a:after {
  content: " (" attr(href) ")";
}

a:focus, button:focus, input:focus,
select:focus, textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

有視力的鍵盤用戶依靠焦點來確定鍵盤事件在頁面中的位置。使表單元素的焦點比瀏覽器的默認實現更加突出和一致

img {
  width: 200px;
  height: 200px;
  /** 確保圖片按原始寬高比例進行縮放 */
  object-fit: cover;
  object-position: left top;
  transition: 1s;
}
img:hover {
  /** 指定圖片顯示的位置，結合鼠標移動+過渡動畫 */
  object-position: right bottom;
}

.clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html 文本超過 3 行將被截斷，顯示省略號...

<p class="clamp">
  展示多行文本，超過 3 行將被截斷，顯示省略號...
</p>

ul > li:not(:last-child)::after {
  content: ",";
}

使列表項看起來像一個真實的逗號分隔列表，使用 :not() 偽類，最后一項不會添加逗號