了解 Astro 的樣式設定 (Style)

昨天我們了解了 Astro 的樣版語法元素，今天我們將深入研究 Astro 中的樣式部分。

Astro 中的樣式設定

在 Astro 中，要為元件或頁面模板設置樣式，只需添加 <style> 標籤即可。當您將 <style> 標籤放入 Astro 元件中時，Astro 會自動偵測 CSS 並處理樣式。

範例：

/* src/components/MyComponent.astro */
<style>
  h1 { color: red; }
</style>

區域性樣式

Astro 的 <style> CSS 規則默認會自動進行區域性封裝。這表示這些樣式只會應用於元件內部的 HTML。在 Astro 元件內部編寫的 CSS 會自動封裝在元件內。

範例：

 /* index.astro */
<style>
  h1 {
    color: red;
  }

  .text {
    color: blue;
  }
</style>

編譯成：

<style>
  h1:where(.astro-HHNQFKH6) {
     color: red;
  }

  .text:where(.astro-HHNQFKH6) {
    color: blue;
  }
</style>

區域樣式不會外洩，也不會影響站點的其餘部分。在 Astro 中，可以使用低特定性的選擇器（例如 h1 {} 或 p {}），因為它們會在最終輸出中與範圍一起編譯。

全局樣式

雖然我們建議大多數元件使用區域性樣式，但你可能會找到一個合理的理由來寫全局、非區域性的 CSS。你可以使用 <style is:global> 屬性來取消自動 CSS 區域性封裝。

範例：

 /* src/components/GlobalStyles.astro */
<style is:global>
  /* 不受限制，原封不動地傳遞給瀏覽器。
     適用於你網站上的所有 <h1> 標籤。 */
  h1 { color: red; }
</style>

通過 <style> 標籤混合全局和區域樣式

你也可以在同一個