Gunakan CSS berskop komponen untuk mengawal elemen yang dicapai oleh sesuatu peraturan, dan helaian gaya kongsi untuk menggunakan semula peraturan pada halaman lain. Untuk projek HTML kecil pada Mac anda, anda boleh menggabungkan kedua-duanya; pilih susunan fail berdasarkan perkara yang perlu anda pindahkan dan selenggara.

Panduan ini menerangkan cara menggayakan halaman setempat yang mengandungi kad berbentuk segi empat sama bucu bulat dan nota berasingan. Tugasnya adalah memastikan rupa kad kekal konsisten, kemudian memutuskan sama ada CSS-nya patut diletakkan dalam halaman atau fail yang boleh digunakan semula. Label dan bentuk dalam contoh ini adalah rekaan, dan contoh ini tidak memerlukan rangka kerja atau aset yang dimuat turun.

Apakah sebenarnya yang anda pilih?

Terdapat dua keputusan: di mana CSS diletakkan dan elemen yang dipilihnya. Helaian gaya terbenam berada dalam elemen style dokumen HTML. Helaian gaya luaran ialah sumber berasingan yang dilampirkan dengan link, menggunakan rel="stylesheet" dan laluan href. Inilah mekanisme HTML untuk membekalkan CSS; tiada satu pun susunan ini secara automatik memberikan sempadan komponen kepada pemilih biasa. Piawaian HTML: Elemen style, MDN: Elemen pautan sumber luaran.

CSS natif @scope menambah sempadan pemilihan. Anda mengenal pasti elemen akar, kemudian menulis peraturan yang digunakan dalam subpokok itu. Ini boleh menjadikan pemilih ringkas berguna apabila dokumen sekeliling mengandungi elemen yang serupa. Dokumentasi Chrome turut membezakan skop natif daripada alat yang menulis semula pemilih dengan kelas atau atribut yang dijana. Alat sedemikian merupakan prasyarat tambahan apabila contoh komponen bergantung padanya. Hadkan capaian pemilih anda dengan at-peraturan CSS @scope.

Untuk tugas ini, gunakan panduan membuat keputusan berikut. Ini ialah saranan editorial berdasarkan mekanisme yang didokumenkan, bukannya keperluan pelayar.

Tugas segera anda Susunan yang disarankan Perkara yang perlu disertakan
Kekalkan satu halaman kecil sebagai satu fail Benamkan CSS dalam elemen style HTML, serta sebarang aset yang dirujuk secara berasingan
Selenggara kad yang sama merentas beberapa halaman Gunakan helaian gaya luaran dengan kelas komponen khusus Setiap halaman HTML dan CSS kongsi
Gunakan pemilih yang lebih ringkas dalam subpokok yang ditetapkan Tambahkan peraturan @scope dengan akar yang dinyatakan secara jelas, sama ada terbenam atau luaran CSS dan markup yang mengandungi akar sepadan
Sokong pelayar yang sokongan skopnya tidak pasti Kekalkan gaya penting dalam peraturan kelas biasa HTML dan helaian gaya yang mengandungi peraturan tersebut

Oleh itu, “mudah alih” perlu diberi maksud yang jelas. Satu fail HTML mudah dipindahkan sendirian. Folder yang mengandungi HTML dan CSS juga boleh mudah alih, asalkan laluannya masih betul. Komponen yang boleh digunakan semula memerlukan jenis kemudahalihan ketiga: lokasi baharunya mesti mengekalkan cangkuk markup yang dijangkakan oleh pemilihnya.

Bina contoh dua fail yang berfungsi pada Mac anda

Cipta folder bernama form-study. Di dalamnya, simpan dua fail teks biasa bernama index.html dan shared.css. Jika anda menggunakan TextEdit, pilih File > New, kemudian Format > Make Plain Text sebelum menampal kod. Untuk fail HTML, Apple mendokumenkan cara menyimpan dengan sambungan .html dan memilih Use .html apabila diminta. Pastikan nama sebenar helaian gaya ialah shared.css, tanpa akhiran .txt tambahan. Bekerja dengan dokumen HTML dalam TextEdit pada Mac.

Simpan dokumen HTML lengkap ini sebagai index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Simpan helaian gaya lengkap ini sebagai shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Buka index.html dalam Safari atau pelayar desktop lain. Hasil yang dijangka ialah kad putih berbingkai dengan segi empat sama bucu bulat berwarna biru, diikuti nota tanpa bingkai. Sambungan helaian gaya ini mengikut corak yang didokumenkan oleh MDN: HTML menamakan sumber CSS melalui href pada pautan helaian gaya. MDN: Menyertakan helaian gaya.

Contoh ini sengaja memberikan tajuk kad kelas tersendiri. Ini menjadikan hubungan penggayaan yang dimaksudkan jelas tanpa memerlukan skop natif. Latar belakang halaman dan fon ialah tetapan lalai dokumen; bingkai kad, warna tajuk dan bentuknya ialah milik kad. Kekalkan perbezaan ini apabila mengasingkan peraturan untuk digunakan semula: halaman destinasi mungkin memerlukan kad itu tanpa menggunakan latar belakang atau lebar halaman ini.

Untuk berkongsi reka bentuk, buat halaman HTML kedua dalam folder yang sama dan gunakan pautan helaian gaya yang sama. Kedua-dua halaman akan merujuk satu fail CSS. Anggap pengeditan pada fail itu sebagai perubahan yang melibatkan setiap halaman yang memaut kepadanya; semak setiap halaman selepas mengubah peraturan kongsi.

Bilakah CSS berskop natif membantu?

Gunakan @scope apabila sesuatu komponen mengandungi beberapa elemen yang mendapat manfaat daripada pemilih setempat yang ringkas, terutamanya apabila anda memerlukan sempadan bawah yang jelas di sekeliling kandungan bersarang. Spesifikasi CSS Cascading and Inheritance mentakrifkan skop melalui akar dan elemen had pilihan. Akar disertakan; elemen had dan keturunannya tidak disertakan dalam padanan peraturan berskop. Spesifikasi ini ialah Draf Kerja. CSS Cascading and Inheritance Tahap 6: Mengskop Gaya.

Untuk percubaan kecil, tambahkan fragmen pilihan berikut pada shared.css. Fragmen ini menggunakan markup contoh sedia ada dan mengubah rupa perenggan kad:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Dalam pelayar yang menyokongnya, perenggan di dalam kad mendapat latar belakang pucat dan ruang dalam. Perenggan nota kekal di luar skop peraturan itu. CSS masih berada dalam fail kongsi: penskopan dan perkongsian boleh digunakan bersama.

Jika kemudian anda memperkenalkan rantau bersarang dengan kelas nested-sample, anda boleh menggantikan fragmen pilihan itu dengan fragmen ini. Ini ialah contoh sempadan; halaman asal belum mengandungi rantau bersarang sedemikian.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Had tersebut mengecualikan rantau bersarang daripada padanan pemilih ini. Ia tidak mewujudkan pengasingan gaya yang menyeluruh: sifat yang diwarisi seperti color dan font-family masih boleh merentas had skop. Ingat perbezaan ini apabila mendiagnosis elemen bersarang yang masih kelihatan seperti induknya. MDN: Perihalan @scope.

Akar yang dinyatakan secara jelas seperti .shape-card juga menjelaskan kebergantungan apabila CSS dipindahkan antara fail. Dokumen destinasi mesti mengandungi elemen dengan kelas itu. Memindahkan helaian gaya sahaja tidak dapat membekalkan markup yang diperlukan.

Apakah had sokongan pelayar?

MDN kini menandakan @scope sebagai Baseline 2026, tersedia merentas versi pelayar terkini sejak Mac 2026. Pelayar lama mungkin tidak menyokongnya. Kehadiran Mac di atas meja anda tidak menentukan ciri CSS yang disokong oleh pelayar terpasang; semak versi yang anda ingin gunakan berdasarkan maklumat keserasian. MDN: Keserasian pelayar @scope.

Kekalkan penggayaan kad yang penting dalam peraturan kelas biasa di atas jika pelayar lama perlu disokong. Penggayaan perenggan berskop pilihan itu boleh kekal sebagai penambahbaikan. Pengendalian ralat CSS membolehkan pelayar membuang kandungan yang tidak disokong sambil terus memproses CSS yang sah, jadi kewujudan helaian gaya tidak membuktikan bahawa setiap peraturan di dalamnya telah berkuat kuasa. MDN: Pengendalian ralat CSS.

Untuk penggayaan perenggan yang sama tanpa @scope, berikan perenggan kad kelas khusus seperti shape-card__caption, kemudian sasarkan kelas itu dalam peraturan biasa. Ini menambah cangkuk markup tetapi mengelakkan kebergantungan pada penskopan natif untuk mendapatkan hasil tersebut.

Jangan tambahkan atribut scoped pada elemen style dengan harapan mendapat tingkah laku yang sama. Senarai atribut bagi elemen itu dalam Piawaian HTML semasa tidak menyertakannya. Penskopan CSS natif menggunakan peraturan @scope. Piawaian HTML: Elemen style, MDN: Sintaks @scope.

Bagaimanakah anda memastikan halaman mudah alih?

Untuk contoh ini, memindahkan keseluruhan folder form-study mengekalkan hubungan antara index.html dengan shared.css. Memindahkan HTML sahaja akan meninggalkan helaian gayanya. Gunakan kontrak kebergantungan ringkas ini sebelum menyerahkan atau menyusun semula halaman yang anda hasilkan:

  1. Markup: Kekalkan kelas komponen dan sebarang struktur yang diperlukan oleh pemilihnya.
  2. Helaian gaya: Sertakan fail CSS dan pastikan pautan HTML menunjuk ke lokasinya.
  3. Sumber: Sertakan sebarang fail yang dirujuk oleh CSS, sambil mengekalkan atau mengemas kini laluannya.
  4. Pelayar: Kekalkan laluan penggayaan yang disokong untuk versi pelayar yang akan membuka halaman itu.

Semakan ketiga menjadi penting apabila komponen memperoleh fon atau fail hiasan. MDN mendokumenkan bahawa URL CSS relatif diselesaikan berdasarkan URL helaian gaya. Oleh itu, memindahkan pengisytiharan ke helaian gaya dalam folder lain boleh mengubah lokasi sumber yang dirujuknya. MDN: Fungsi CSS url().

Contohnya, jika helaian gaya luaran dipindahkan dari folder projek ke subfolder styles, pengisytiharan langsung yang merujuk url("assets/tile.png") kini menunjuk ke dalam styles/assets. Kemas kini laluan itu atau kekalkan struktur direktori yang sepadan. Contoh yang berfungsi ini mengelakkan kebergantungan tersebut dengan melukis bentuknya sepenuhnya menggunakan CSS.

Jika serahan satu fail menjadi keutamaan, benamkan CSS yang dibekalkan dalam elemen style di dalam head dokumen, lalu buang pautan helaian gaya. Contoh semasa itu hanya memerlukan fail HTML. Kekalkan pemilih yang sama, termasuk sebarang blok @scope berakar jelas yang menjadi pilihan. HTML menyokong pembenaman helaian gaya melalui elemen style. Piawaian HTML: Elemen style.

Semak keputusan dengan ujian pindah dan muat semula

Buat salinan seluruh folder projek di lokasi lain, kemudian buka HTML yang disalin dalam pelayar anda. Dalam salinan itu, ubah warna latar bentuk dalam shared.css, simpan dan muat semula halaman. Perubahan yang kelihatan mengesahkan bahawa anda mengedit helaian gaya yang digunakan oleh halaman salinan tersebut.

Seterusnya, periksa kad dan nota. Hasil yang berjaya mengekalkan penggayaan kad sambil membiarkan nota di luar peraturan perenggan berskop pilihan. Jika seluruh halaman kehilangan penggayaannya, periksa nama fail CSS dan laluan pautan dahulu. Jika hanya penggayaan pilihan yang tiada, periksa sokongan pelayar dan akar skop. Jika elemen yang tidak berkaitan berubah, periksa pemilih yang mencapai elemen di luar komponen yang dimaksudkan.

Apabila membuka semula HTML dalam TextEdit, gunakan File > Open, kemudian Show Options dan Ignore rich text commands jika anda perlu melihat kod sumbernya. Apple turut mendokumenkan tetapan Display HTML files as HTML code instead of formatted text untuk pembukaan seterusnya. Bekerja dengan dokumen HTML dalam TextEdit pada Mac.

Pilih CSS terbenam apabila tugas utamanya ialah mengekalkan halaman kecil ini sebagai satu kesatuan. Pilih helaian gaya kongsi apabila beberapa halaman patut menggunakan peraturan terurus yang sama. Tambahkan penskopan natif apabila sempadannya memudahkan peraturan tersebut dan sokongan pelayar mengizinkannya. Akhiri dengan memindahkan dan membuka semula fail sebenar: ini menyemak hubungan markup, helaian gaya dan sumber yang diperlukan oleh susunan pilihan anda.

Sumber