Web 開發(fā)人員使用 CSS 樣式語言為語義 HTML 文檔添加動態(tài)、富有創(chuàng)意且用戶友好的樣式。

剛接觸 CSS 的 Web 開發(fā)人員通過練習(xí)基本的 CSS 選擇器語法、屬性、@ 規(guī)則和偽類/元素來開始學(xué)習(xí)樣式。

了解這些 CSS 功能足以構(gòu)建一個易于訪問、美觀、用戶友好的現(xiàn)代網(wǎng)站，但要了解 CSS 的全部潛力，還有很多東西需要學(xué)習(xí)。

當(dāng) Web 開發(fā)人員廣泛使用 CSS 設(shè)計網(wǎng)站前端并嘗試使用 CSS 時，他們經(jīng)常會發(fā)現(xiàn)新功能、解決方法和技術(shù)，這些功能、解決方法和技術(shù)可以幫助他們提高工作效率并提高 CSS 技能。

這些技巧和竅門可幫助每個人高效地實施快速、有吸引力的 CSS 純解決方案來解決設(shè)計問題，而無需編寫基于 JavaScript、SVG 和 HTML Canvas 的實現(xiàn)。例如，現(xiàn)在 Web 開發(fā)人員無需編寫一行 JavaScript 代碼即可創(chuàng)建快速、輕量級的倒計時器。

在本文中，我將介紹10個 CSS 技巧和竅門，幫助您充分利用 CSS，高效地構(gòu)建現(xiàn)代 Web 界面，而無需使用 JavaScript、SVG、HTML Canvas 或集成繁重的第三方 UI 工具包和庫。練習(xí)這些技巧可以擴展您的 CSS 掌握能力！

1. 讓元素居中的最簡單方法

正確放置 UI 元素是設(shè)計高質(zhì)量界面的必備條件。在大多數(shù)情況下，Web 開發(fā)人員必須將子元素垂直和水平居中。由于布局系統(tǒng)和定位功能不同，CSS 無法提供單一屬性來讓任何元素居中。

在響應(yīng)式設(shè)計流行之前，Web 開發(fā)人員使用負邊距技巧來讓 HTML 元素居中——現(xiàn)在，您會發(fā)現(xiàn)使用各種現(xiàn)代和舊 CSS 屬性讓元素居中的無數(shù)方法，但在 CSS 中讓元素居中的最簡單方法是什么？

現(xiàn)代 CSS 網(wǎng)格功能支持使用 place-items 簡寫屬性讓網(wǎng)格塊居中，因此我們可以使用它來讓子元素居中，如下所示：

<div>
  <button>A centered button</button>
</div>


<style>
  div {
    height: 100vh;
    display: grid;
    place-items: center;
  }
</style>

2. 使用 CSS 邊框創(chuàng)建三角形

內(nèi)置 SVG 實現(xiàn)通常提供功能齊全的方法來生成任何高級自定義形狀。

因此，標準 HTML 實現(xiàn)不提供內(nèi)置標簽來使用標準 DOM 元素創(chuàng)建任意形狀，但我們可以使用標準 CSS 屬性將 div 元素轉(zhuǎn)換為各種幾何形狀，即使用邊框半徑創(chuàng)建圓形。

默認 div 元素中邊框渲染的行為在流行的瀏覽器中是相同的，它允許我們按如下方式創(chuàng)建三角形：

<div></div>


<style>
  div {
    border-right: 20px solid transparent;
    border-bottom: 20px solid darkcyan;
    border-left: 20px solid transparent;
  }
</style>

您可以通過對不同邊框邊使用可見顏色以及改變邊框粗細來創(chuàng)建各種三角形。

3. 純 CSS 倒計時

過去的 Web 開發(fā)人員通常使用 JavaScript 在網(wǎng)頁上創(chuàng)建哪怕是簡單的倒計時器。CSS 動畫功能可幫助 Web 開發(fā)人員動態(tài)更新 DOM 元素視覺效果，而無需編寫 JavaScript 代碼。

因此，現(xiàn)在我們可以通過定義多個關(guān)鍵幀來創(chuàng)建標準的 CSS 動畫創(chuàng)建方法來創(chuàng)建倒計時。

我們可以使用 @property at-rule、CSS 變量和 CSS 計數(shù)器，以創(chuàng)紀錄的時間用純 CSS 創(chuàng)建靈活、可自定義的倒計時，而無需自己創(chuàng)建那么多關(guān)鍵幀：

<div></div>
<style>


  @property --c {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }


  @keyframes timer {
    from { --c: 10 }
    to   { --c: 0 }
  }


  :root { animation: timer 5s linear }


  div::after {
    counter-reset: c var(--c);
    content: counter(c, decimal-leading-zero);
  }
</style>

上面的 CSS 代碼片段使用 @property at-rule、變量和具有 CSS 動畫功能的計數(shù)器創(chuàng)建了一個計時器。即使沒有使用那么多動畫關(guān)鍵幀定義，它也會使用 counter-reset 屬性為每個動畫幀呈現(xiàn)一個動態(tài)值：

您可以通過使用 calc() 和 mod() CSS 數(shù)學(xué)函數(shù)調(diào)整全局計時器變量的結(jié)束值來創(chuàng)建顯示分鐘、秒和毫秒的倒計時器。

4. 不使用 JavaScript 自定義原生表單控件

瀏覽器將 DOM 元素渲染為瀏覽器視口邊界內(nèi)的可視 UI 元素。

但是，HTML 表單元素通常會打開在標準 DOM 視口之外渲染的原生 UI 元素，因此沒有跨瀏覽器的解決方案來自定義原生表單元素的平臺特定、瀏覽器特定的彈出元素。

例如，我們無法自定義 HTML 選擇元素的下拉彈出窗口，但我們可以使用 CSS 在所有瀏覽器中自定義選擇框的初始視圖，因為初始表單控件視圖在 DOM 內(nèi)渲染：

<div>
  <select>
    <option>React</option>
    <option>Angular</option>
    <option>Svelte</option>
    <option>Vue</option>
    <option>Lit</option>
  </select>
</div>


<style>
  div {
    position: relative;
    min-width: 200px;
  }


  select {
    appearance: none;
    padding: 6px;
    font-size: 14px;
    border-radius: 4px;
    width: 100%;
    border: 2px solid #ccc; 
    outline: none;
  }


  select:focus { border: 2px solid #aaa; }


  div::after {
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    border-left: 6px solid transparent;
    position: absolute;
    top: 42%;
    right: 12px;
    content: "";
    pointer-events: none;
  }
</style>

上述 CSS 定義通過添加自定義圖標和邊框來定制 HTML 選擇元素的初始視圖的瀏覽器特定外觀，如下面的預(yù)覽所示：

使用相同的技術(shù)，您可以覆蓋用戶代理樣式表中的默認樣式，以自定義其他本機表單控件并向其添加額外的子元素，而無需使用 JavaScript 嵌入元素。

5. 使用漸變填充創(chuàng)建花式框角

眾所周知的 border-radius CSS 屬性可幫助我們?yōu)榫匦?DOM 元素創(chuàng)建圓形或橢圓形邊緣。

此外，使用 clip-path 屬性，我們可以創(chuàng)建漂亮的花式角。您知道我們可以使用漸變填充創(chuàng)建創(chuàng)意花式角嗎？

通過為元素填充徑向漸變背景，可以創(chuàng)建一個完美、尖銳的圓圈。如果我們使生成的圓圈透明，將其用作蒙版，然后移動到角落，它會切開所有四個角，從而創(chuàng)建類似相框的角：

<div></div>


<style>
  div {
    width: 200px;
    height: 100px;
    background: darkcyan;
    mask: radial-gradient(14px at 40px 40px, transparent 98%, black) -40px -40px;
  }
</style>

該網(wǎng)絡(luò)應(yīng)用程序允許您通過動態(tài)調(diào)整幾個參數(shù)來生成這些類型的角落。

6. 在屬性選擇器中使用模式匹配

Web 開發(fā)人員通常使用類和標識符來為語義 HTML 元素應(yīng)用樣式。CSS 標準還支持具有模式匹配的屬性選擇器，因此我們可以使用它們?yōu)樵鼐帉懭謽邮健Ｒ粋€簡單的示例是編寫以下選擇器來為所有本機文本輸入添加全局樣式：

input[type="text"] {
   /* ... */
}

屬性選擇器可與任何標準 HTML 屬性和自定義屬性（即數(shù)據(jù)屬性）配合使用。屬性選擇器語法還支持模式匹配，因此我們可以使用此技術(shù)編寫簡寫選擇器，以便為無法編輯的 HTML 文檔編寫通用樣式（即為第三方 HTML 文檔或 CMS 頁面模板設(shè)置樣式）：

<div>
  <button class="ok-btn">Ok</button>
  <button class="re-try-btn">Retry</button>
  <button class="cancel-btn">Cancel</button>
</div>


<style>
  button[class$="-btn"] {
    min-width: 6em;
  }
</style>

上述選擇器為所有類名以 -btn 結(jié)尾的按鈕元素添加樣式。

這是另一個示例，它使用屬性模式匹配為 Wikipedia 超鏈接添加不同的樣式：

a[href*=".wikipedia.org"] {
  color: darkcyan;
}

7. 創(chuàng)建自定義列表樣式類型

HTML 標準提供了 <ol> 和 <ul> 語義標簽來在網(wǎng)頁上創(chuàng)建列表。這些標簽帶有默認列表樣式，但您可以使用 list-style-type 屬性覆蓋這些默認列表樣式。例如，以下 CSS 定義激活小寫羅馬數(shù)字系統(tǒng)：

ol {
  list-style-type: lower-roman;
}

@counter-style @ 規(guī)則允許您使用預(yù)包含的列表樣式或從頭創(chuàng)建新的樣式來為 list-style-type 屬性創(chuàng)建自定義樣式定義。

以下 HTML 文檔使用表情符號創(chuàng)建的自定義列表樣式：

<div>
  <ul>
    <li>React</li>
    <li>Angular</li>
    <li>Svelte</li>
    <li>Vue</li>
    <li>Lit</li>
  </ul>
</div>


<style>


  @counter-style emojis {
    system: cyclic;
    symbols: "\1F449\1F3FD";
    suffix: " ";
  }


  ul { list-style-type: emojis }
</style>

此 CSS at-rule 可讓您擴展現(xiàn)有列表計數(shù)器并創(chuàng)建自定義計數(shù)器。

例如，以下樣式定義在每個有序列表項前呈現(xiàn)帶有連字符 (-) 的數(shù)字括號：

@counter-style custom-roman {
    system: extends lower-roman;
    prefix: "[";
    suffix: "] - ";
  }


  ol { list-style-type: custom-roman }

8. 為英雄部分創(chuàng)建藝術(shù)背景

現(xiàn)代網(wǎng)站設(shè)計包含一個大型介紹部分，稱為英雄部分，用于介紹網(wǎng)站并放置幾個主要操作按鈕。

Web 開發(fā)人員通常使用創(chuàng)意背景圖像創(chuàng)建這些英雄部分。現(xiàn)在，由于內(nèi)置的 CSS 過濾器和混合模式，我們無需編輯原始源圖像即可為英雄部分創(chuàng)建創(chuàng)意背景圖像。

我們可以使用 ::after 偽元素將各種過濾器應(yīng)用于其背景圖像來創(chuàng)建英雄部分，如下所示：

<div>
  <h1>Hero section</h1>
</div>


<style>
  div {
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
    overflow: auto;
  }


  div::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(4px) brightness(0.65) sepia(90%);
  }
</style>

同時，mix-blend-mode 屬性可以通過為基于背景顏色的背景圖像添加顏色混合效果來幫助我們創(chuàng)建有創(chuàng)意的英雄部分，如以下示例所示：

div {
    background-image: url(https://raw.githubusercontent.com/codezri/static-media/main/unsplash-img1.jpg);
    background-size: cover;
    background-position: center;
    isolation: isolate;
    height: calc(100vh - 16px);
    position: relative;
    display: grid;
    place-items: center;
    color: white;
  }


  div::after {
    content: "";
    position: absolute;
    background: #594100;
    inset: 0;
    z-index: -1;
    mix-blend-mode: multiply;
  }

您還可以使用 BACKGROUND-filter CSS 屬性創(chuàng)建藝術(shù)英雄部分，但它并沒有得到所有流行的標準瀏覽器中實現(xiàn)。

9. 使用 CSS 添加用戶友好、吸引人的滾動行為

您還記得過去的 JQuery 時代嗎？當(dāng)時我們使用 .scrollTo() 函數(shù)通過 JavaScript/JQuery 實現(xiàn)平滑滾動動畫？現(xiàn)在，Web 開發(fā)人員可以更改滾動行為并使用純 CSS 激活平滑滾動！

查看以下激活平滑滾動的 CSS 定義：

<a href="#target1">[1]</a>
<a href="#target2">[2]</a>


<div id="target1"></div>
<div id="target2"></div>


<style>
  div {
    height: 100vh;
    border-bottom: solid 40px #aaa;
    background-color: #ccc;
  }


  :root { scroll-behavior: smooth }
</style>

通過此 CSS 定義，瀏覽器甚至可以為后退按鈕激活平滑滾動，如下面的預(yù)覽所示：

CSS 滾動捕捉模塊提供了一組 CSS 屬性，用于提高可滾動容器的可用性和可訪問性。

例如，以下代碼片段會自動在主要部分停止?jié)L動，并避免在部分部分停止：

<section style="background: #ccc">1</section>
<section style="background: #aaa">2</section>
<section style="background: #ccc">3</section>
<section style="background: #aaa">4</section>


<style>
  section {
    height: 100vh;
    scroll-snap-align: start;
    display: grid;
    place-items: center;
    font-size: 7em;
  }


  :root {
    background-color: #eee;
    scroll-snap-type: y mandatory;
  }
</style>

CSS 滾動捕捉功能可幫助我們?yōu)橐苿討?yīng)用中支持滑動的界面實現(xiàn)無 JavaScript、極簡的純 CSS 解決方案

10. 無類 CSS 樣式技術(shù)

每個 Web 開發(fā)人員都有使用類開始樣式的習(xí)慣。使用組織良好的類無疑是創(chuàng)建干凈、易于管理的網(wǎng)頁的良好做法。

但是，創(chuàng)建類對于創(chuàng)建極簡網(wǎng)頁來說并不是強制性的——無類 Web 設(shè)計概念激勵我們使用語義 HTML 標簽來編寫 CSS：

nav {}
ul {}
ul li {}
summary {}

:not()、:has() 和 :is() 等功能選擇器（以偽類形式實現(xiàn)）可幫助我們避免在無類樣式表中選擇器中出現(xiàn)重復(fù)片段，從而編寫簡潔的代碼。

例如，以下代碼片段使用 :not() 為導(dǎo)航菜單項（最后一個除外）添加了顏色樣式：

<nav>
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>


<style>
  nav ul {
    display: flex;
    list-style: none;
    gap: 1em;
    background: #eee;
    padding: 1em;


    :not(li:last-child) {
      color: darkcyan;
    }
  }
</style>

假設(shè)您需要為呈現(xiàn) SVG 圖標的菜單項添加自定義樣式。然后，您可以使用 :has() 功能選擇器選擇這些菜單項，如下所示：

li:has(svg) {
  /* ... */
}

:has() 偽類可以與屬性選擇器和 CSS 變量結(jié)合使用，實現(xiàn)交互式主題更改：

<div>
  <label><input type="radio" value="t1" name="t" checked>Theme 1</label>
  <label><input type="radio" value="t2" name="t">Theme 2</label>
</div>


<style>
  body { 
    background-color: var(--background-color);
    color: var(--text-color);
    transition: all 0.5s;
  }


  :root:has(input[value="t1"]:checked) {
    --background-color: darkcyan;
    --text-color: white;
  } 


  :root:has(input[value="t2"]:checked) {
    --background-color: skyblue;
    --text-color: black;
  }   
</style>

:is() 功能選擇器幫助我們?yōu)槎禾柗指舻拈L選擇器編寫替代的簡寫選擇器：

/* old-fashioned */
section h1, 
section h2, 
section h3, 
section h4, 
section h5, 
section h6 {
  color: darkcyan;
}


/* modern */
section :is(h1, h2, h3, h4, h5, h6) {
  color: darkcyan;
}

總結(jié)

以上就是我今天想與你分享的全部內(nèi)容，希望這些技能可以幫助您編寫更簡潔、更高效的CSS代碼。