Astro được thiết kế để làm cho việc tạo kiểu và viết CSS trở nên dễ dàng. Viết CSS của riêng bạn trực tiếp bên trong thành phần Astro hoặc nhập thư viện CSS yêu thích của bạn như Tailwind. Các ngôn ngữ tạo kiểu nâng cao như Sass và Ít hơn cũng được hỗ trợ

Tạo kiểu trong Astro

Tạo kiểu cho thành phần Astro dễ dàng như thêm thẻ

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  h1 { color: red; }
style>

Kiểu có phạm vi

Các quy tắc CSS của Astro

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

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

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

Các kiểu có phạm vi không bị rò rỉ và sẽ không ảnh hưởng đến phần còn lại của trang web của bạn. Trong Astro, bạn có thể sử dụng các bộ chọn có độ đặc hiệu thấp như

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Các kiểu có phạm vi cũng sẽ không áp dụng cho các thành phần Astro khác có trong mẫu của bạn. Nếu bạn cần tạo kiểu cho một thành phần con, hãy xem xét gói thành phần đó trong một

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Tính đặc hiệu của các kiểu có phạm vi được giữ nguyên, cho phép chúng hoạt động ổn định cùng với các tệp CSS hoặc thư viện CSS khác trong khi vẫn duy trì các ranh giới độc quyền ngăn các kiểu áp dụng bên ngoài thành phần

phong cách toàn cầu

Mặc dù chúng tôi đề xuất các kiểu có phạm vi cho hầu hết các thành phần, nhưng cuối cùng bạn có thể tìm thấy lý do hợp lệ để viết CSS toàn cầu, không có phạm vi. Bạn có thể từ chối phạm vi CSS tự động bằng thuộc tính

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Bạn cũng có thể kết hợp các quy tắc CSS toàn cầu và phạm vi với nhau trong cùng một thẻ

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Đây là một cách tuyệt vời để tạo kiểu cho những thứ như bài đăng trên blog hoặc tài liệu có nội dung do CMS cung cấp trong đó nội dung nằm ngoài Astro. Nhưng hãy cẩn thận. các thành phần có giao diện khác nhau tùy thuộc vào việc chúng có thành phần cha nhất định hay không có thể trở nên khó khắc phục sự cố

Các kiểu có phạm vi nên được sử dụng thường xuyên nhất có thể. Phong cách toàn cầu chỉ nên được sử dụng khi cần thiết

Kết hợp các lớp với

Title

Nếu bạn cần kết hợp động các lớp trên một phần tử, bạn có thể sử dụng thuộc tính tiện ích

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

📚 Xem trang tham khảo chỉ thị của chúng tôi để tìm hiểu thêm về

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Biến CSS

Astro

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  h1 { color: red; }
style>

📚 Xem trang tham khảo chỉ thị của chúng tôi để tìm hiểu thêm về

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Truyền một

Title

Trong Astro, các thuộc tính HTML như

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Thay vào đó, hãy chấp nhận một giá trị

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

Mẫu này cho phép bạn tạo kiểu trực tiếp cho các thành phần con. Astro sẽ chuyển tên lớp có phạm vi của cha mẹ (e. g.

<style>
  h1 { color: red; }
style>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Các lớp có phạm vi từ các thành phần cha mẹ

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Phong cách bên ngoài

Có hai cách để giải quyết các biểu định kiểu chung bên ngoài. nhập ESM cho các tệp nằm trong nguồn dự án của bạn và liên kết URL tuyệt đối cho các tệp trong thư mục

<style>
  h1 { color: red; }
style>

📚 Đọc thêm về cách sử dụng nội dung tĩnh tại

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

Nhập biểu định kiểu cục bộ

Sử dụng gói npm?

<style>
  h1 { color: red; }
style>

Bạn có thể nhập biểu định kiểu trong giao diện thành phần Astro của mình bằng cách sử dụng cú pháp nhập ESM. Quá trình nhập CSS hoạt động giống như bất kỳ hoạt động nhập ESM nào khác trong thành phần Astro. Quá trình nhập này phải được tham chiếu tương ứng với thành phần đó và phải được viết ở đầu tập lệnh thành phần của bạn, cùng với bất kỳ hoạt động nhập nào khác

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

CSS

<style>
  h1 { color: red; }
style>

Nhập biểu định kiểu từ gói npm

Bạn cũng có thể cần tải các biểu định kiểu từ gói npm bên ngoài. Điều này đặc biệt phổ biến đối với các tiện ích như Đạo cụ mở. Nếu gói của bạn khuyến nghị sử dụng phần mở rộng tệp (i. e.

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Nếu gói của bạn không đề xuất sử dụng phần mở rộng tệp (i. e.

<style>
  h1 { color: red; }
style>

Giả sử bạn đang nhập tệp CSS từ

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

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

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

Ghi chú

Bây giờ, bạn có thể tự do nhập khẩu

<style>
  h1 { color: red; }
style>

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

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

Tải biểu định kiểu tĩnh qua thẻ "liên kết"

Bạn cũng có thể sử dụng phần tử

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

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

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

Vì cách tiếp cận này sử dụng thư mục

<style>
  h1 { color: red; }
style>

thứ tự xếp tầng

Các thành phần của Astro đôi khi sẽ phải đánh giá nhiều nguồn CSS. Ví dụ: thành phần của bạn có thể nhập biểu định kiểu CSS, bao gồm thẻ

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Khi các quy tắc CSS xung đột áp dụng cho cùng một phần tử, trước tiên trình duyệt sẽ sử dụng tính đặc hiệu và sau đó là thứ tự xuất hiện để xác định giá trị nào sẽ hiển thị

Nếu một quy tắc cụ thể hơn quy tắc khác, thì bất kể quy tắc CSS xuất hiện ở đâu, giá trị của nó sẽ được ưu tiên

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

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

Nếu hai quy tắc có cùng độ đặc hiệu, thì thứ tự xuất hiện sẽ được đánh giá và giá trị của quy tắc cuối cùng sẽ được ưu tiên

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

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

Các quy tắc CSS của Astro được đánh giá theo thứ tự xuất hiện này

• <style>
    h1 { color: red; }
  style>

  68 thẻ trong phần đầu (ưu tiên thấp nhất)
• phong cách nhập khẩu
• phong cách phạm vi (ưu tiên cao nhất)

Kiểu có phạm vi

Việc sử dụng các kiểu có phạm vi không làm tăng tính đặc hiệu của CSS của bạn, nhưng chúng sẽ luôn xuất hiện cuối cùng theo thứ tự xuất hiện. Do đó, chúng sẽ được ưu tiên hơn các kiểu khác có cùng tính đặc hiệu. Ví dụ: nếu bạn nhập biểu định kiểu xung đột với kiểu có phạm vi, thì giá trị của kiểu có phạm vi sẽ được áp dụng

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

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

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

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

Nếu bạn làm cho kiểu đã nhập cụ thể hơn, thì kiểu đó sẽ có mức độ ưu tiên cao hơn so với kiểu có phạm vi

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

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

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

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

Đơn đặt hàng nhập khẩu

Khi nhập nhiều biểu định kiểu trong một thành phần Astro, các quy tắc CSS được đánh giá theo thứ tự chúng được nhập. Độ đặc hiệu cao hơn sẽ luôn xác định kiểu nào sẽ hiển thị, bất kể khi nào CSS được đánh giá. Tuy nhiên, khi các kiểu xung đột có cùng đặc điểm, kiểu được nhập cuối cùng sẽ thắng

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

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

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Mặc dù các thẻ

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Mẹo

Thẻ liên kết

Các biểu định kiểu được tải qua thẻ liên kết được đánh giá theo thứ tự, trước bất kỳ kiểu nào khác trong tệp Astro. Do đó, các kiểu này sẽ có mức độ ưu tiên thấp hơn so với biểu định kiểu đã nhập và kiểu có phạm vi

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Tích hợp CSS

Astro hỗ trợ thêm các thư viện, công cụ và khung CSS phổ biến vào dự án của bạn như Tailwind, v.v.

📚 Xem Hướng dẫn tích hợp để biết hướng dẫn cài đặt, nhập và định cấu hình các tích hợp này

Bộ tiền xử lý CSS

Astro hỗ trợ các bộ tiền xử lý CSS như Sass, Stylus và Less thông qua Vite

Sass và SCSS

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Sử dụng

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

bút cảm ứng

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Sử dụng

<style>
  h1 { color: red; }
style>

<style>
  h1 { color: red; }
style>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Ít hơn

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Sử dụng

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Trong các thành phần khung

Bạn cũng có thể sử dụng tất cả các bộ tiền xử lý CSS ở trên trong các khung JS. Đảm bảo tuân theo các mẫu mà mỗi khung đề xuất

• Phản ứng / Dự đoán.

  <style>
    /* Scoped to this component, only. */
    h1 { color: red; }
    /* Mixed: Applies to child `h1` elements only. */
    article :global(h1) {
      color: blue;
    }
  style>
  <h1>Titleh1>
  <article><slot />article>

  53;
• Vue.

  <style>
    h1 { color: red; }
  style>

  75
• mảnh dẻ.

  <style>
    h1 { color: red; }
  style>

  75

đăngCSS

Astro đi kèm với PostCSS như một phần của Vite. Để định cấu hình PostCSS cho dự án của bạn, hãy tạo tệp

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

Khung và Thư viện

📘 Phản ứng / Dự đoán

Các tệp

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

<style is:global>
  /* Unscoped, delivered as-is to the browser.
     Applies to all 
 tags on your site. */
  h1 { color: red; }
style>

📗 Vue

Vue in Astro hỗ trợ các phương thức giống như

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

• vue-loader - CSS có phạm vi
• vue-loader - Mô-đun CSS

📕 Mảnh dẻ

Svelte trong Astro cũng hoạt động đúng như mong đợi. Svelte Styling Tài liệu

Nâng cao

thận trọng

Title

Đối với các trường hợp sử dụng nâng cao, CSS có thể được đọc trực tiếp từ đĩa mà không cần được đóng gói hoặc tối ưu hóa bởi Astro. Điều này có thể hữu ích khi bạn cần kiểm soát hoàn toàn một số đoạn CSS và cần bỏ qua việc xử lý CSS tự động của Astro

Điều này không được khuyến nghị cho hầu hết người dùng

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

Xem tài liệu của Vite để biết chi tiết đầy đủ

Title

Đối với các trường hợp sử dụng nâng cao, bạn có thể nhập tham chiếu URL trực tiếp cho tệp CSS bên trong thư mục

<style>
  h1 { color: red; }
style>

Điều này không được khuyến nghị cho hầu hết người dùng. Thay vào đó, hãy đặt các tệp CSS của bạn bên trong

<style>
  h1 { color: red; }
style>

thận trọng

<style>
  /* Scoped to this component, only. */
  h1 { color: red; }
  /* Mixed: Applies to child `h1` elements only. */
  article :global(h1) {
    color: blue;
  }
style>
<h1>Titleh1>
<article><slot />article>

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

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

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

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