0Pricing
CSS Academy · Pelajaran

Pewarisan dan Properti all

Pahami aturan pewarisan CSS dan gunakan properti all untuk mengatur ulang gaya yang diwariskan.

Pewarisan dan Properti all adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu Pewarisan?

Beberapa properti CSS secara otomatis meneruskan nilai terhitungnya ke elemen anak. Inilah pewarisan. Hal ini menghemat penulisan aturan yang sama untuk setiap elemen dalam komponen.

Properti yang Diwariskan

Biasanya diwariskan: properti tipografi dan teks:

  • font-family, font-size, font-weight, font-style
  • color
  • line-height
  • letter-spacing
  • text-align
  • visibility
  • Properti kustom CSS

Properti yang Tidak Diwariskan

Biasanya NOT diwariskan: properti model kotak dan tata letak:

  • margin, padding, border
  • width, height
  • background
  • display, position
  • box-shadow, transform

Kata Kunci inherit

Paksa pewarisan secara eksplisit dengan kata kunci inherit—berguna untuk elemen formulir yang secara bawaan tidak mewarisi jenis huruf:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

Kata Kunci initial

Kata kunci initial mengatur ulang properti ke nilai awal bawaan peramban seperti yang ditetapkan spesifikasi CSS—mengabaikan pewarisan dan gaya agen pengguna.

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

Kata Kunci unset

unset bergantung pada konteks:

  • Untuk properti yang diwariskan: bertindak seperti inherit
  • Untuk properti yang tidak diwariskan: bertindak seperti initial

Secara efektif, kata kunci ini "menghapus" properti hingga kembali ke keadaan alaminya.

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

Kata Kunci revert

revert mengembalikan ke nilai lembar gaya agen pengguna milik peramban—memulihkan tampilan bawaan peramban tanpa gaya penulis apa pun. Berguna untuk widget pihak ketiga yang disematkan.

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

Properti all

Properti all adalah singkatan yang menerapkan sebuah kata kunci ke setiap properti CSS secara bersamaan, kecuali direction dan unicode-bidi.

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

Penggunaan praktis all: initial

Gunakan all: initial saat Anda perlu membuat komponen yang sepenuhnya terisolasi dan tidak terpengaruh oleh gaya global atau gaya elemen induk:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

Pola all: unset

Hapus gaya tombol bawaan peramban untuk tombol khusus tanpa perlu mengetahui semua properti yang relevan:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

Pewarisan dan Properti Khusus

Properti khusus CSS diwariskan secara bawaan. Inilah yang membuatnya sangat berguna — variabel yang ditetapkan pada :root tersedia di mana saja. Gunakan @property { inherits: false } agar properti khusus tidak diwariskan.

Pemeriksaan Cepat

Kata kunci mana yang mengatur ulang properti ke nilai bawaan agen pengguna peramban, bukan ke nilai awal sesuai spesifikasi CSS?

Ringkasan

Properti yang diwariskan meneruskan nilai kepada elemen turunan; properti yang tidak diwariskan tidak melakukannya. Kata kunci inherit, initial, unset, dan revert memberikan kendali eksplisit. Properti all mengatur ulang semua properti sekaligus — sangat berguna untuk komponen terisolasi dan elemen formulir khusus.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pewarisan dan Properti all” gratis?

Ya — teks lengkap “Pewarisan dan Properti all” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pewarisan dan Properti all”?

Pahami aturan pewarisan CSS dan gunakan properti all untuk mengatur ulang gaya yang diwariskan. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pewarisan dan Properti all” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Perhitungan Spesifisitas: Inline Style ID Class Element
  2. Cascade: Asal dan Urutan
  3. !important: Kapan dan Mengapa Tidak
  4. Pewarisan dan Properti all
← Kembali ke CSS Academy