Warisan CSS: Pengenalan

warisan CSS: Memudahkan gaya laman web

Konsep Utama:

CSS Pewarisan Lembar Laman Web Styling. Unsur -unsur induk melepasi sifat kepada anak -anak mereka, meminimumkan kod berulang. Walau bagaimanapun, tidak semua sifat mewarisi (mis.,

, border). Kata kunci background-image memaksa warisan untuk sifat yang tidak diingini. Ini juga terpakai kepada sifat-sifat tersendiri, tetapi kehilangan sub-sifat yang hilang ke nilai awal mereka. Devtools menyerlahkan secara visual yang diwarisi, tidak diwarisi, dan ditindih sifat, memudahkan debugging. inherit

Fikirkan seperti ciri keluarga: ibu bapa yang tinggi sering mempunyai anak yang tinggi. Begitu juga, elemen induk

biasanya membuat anak -anaknya hijau, kecuali ditindih. color: green;

Artikel ini meneroka kesan warisan CSS pada penampilan unsur.

Manfaat warisan CSS:

warisan dengan ketara mengurangkan masa pembangunan. Bayangkan menetapkan warna untuk setiap kanak -kanak dari

tag secara manual! Ia tidak cekap dan rawan kesilapan. Warisan mengekalkan konsistensi tanpa kod berlebihan untuk sifat seperti atau font-family. font-size

(Codepen contoh yang menggambarkan warisan akan dimasukkan di sini)

Batasan warisan:

tidak semua sifat CSS mewarisi. Sekiranya mereka melakukannya, gaya akan menjadi huru -hara. Sebagai contoh, mewarisi

akan mewujudkan sempadan yang tidak diingini pada semua elemen kanak -kanak. Codepen berikut menunjukkan ini: border

(CODEPEN Contoh yang menunjukkan sifat yang tidak diasingkan akan dimasukkan di sini)

memaksa warisan dengan : inherit

Kadang-kadang, anda memerlukan harta yang tidak diingini untuk mewarisi. Kata kunci

menguatkuasakan ini: inherit

<code class="language-css">.some-child {
  color: inherit;
}</code>

Ini menjadikan pautan mewarisi warna ibu bapa mereka:

<code class="language-css">p {
  color: #f44336;
}

ul {
  color: #3f51B5;
}

a {
  color: inherit;
}</code>

(CODEPEN Contoh Menunjukkan Kata kunci akan dimasukkan di sini) inherit

warisan dan css shorthand:

Menggunakan

ke sifat-sifat tersendiri mempengaruhi semua sub-sifat. Walau bagaimanapun, anda tidak boleh secara selektif mewarisi sub-sifat dalam diri sendiri. Sebagai contoh, inherit tidak sah. border: 1px solid inherit;

untuk mencapai ini, gunakan Longhand:

<code class="language-css">.example {
  margin: 10px 0 20px 15px;
  margin-right: inherit;
}</code>

nilai shorthand yang hilang:

Sub-Properties yang ditinggalkan dalam diri kembali ke nilai awal mereka. Contohnya:

Perenggan

<code class="language-css">.container-a {
  font: italic 1.2em/1.75 Lato;
}

.container-a p {
  font: bold 1em Lato;
}</code>

ditetapkan semula ke

, tidak mewarisi gaya italik. Gunakan Longhand (font-style) untuk kawalan yang tepat. normal font-style

(CODEPEN Contoh yang menggambarkan keterbatasan singkat akan dimasukkan di sini)

menggunakan devtools:

Devtools secara visual membezakan sifat-sifat yang diwarisi, tidak diasingkan, dan ditindih. Ini memudahkan masalah susun atur penyelesaian masalah.

senarai sifat yang diwarisi (separa):

(senarai separa sifat yang boleh diwarisi akan dimasukkan di sini. Merujuk sumber luaran untuk senarai lengkap adalah disyorkan.)

Kesimpulan:

Pewarisan memudahkan CSS, mengurangkan kelebihan dan meningkatkan kebolehkerjaan. Kata kunci

memberikan kawalan ke atas warisan. Devtools membantu debugging. Memahami warisan adalah penting untuk pembangunan web yang cekap. inherit

Soalan Lazim (Soalan Lazim):

(bahagian Soalan Lazim dari input asal akan dimasukkan di sini, berpotensi diganti semula untuk aliran dan kejelasan yang lebih baik.)

Atas ialah kandungan terperinci Warisan CSS: Pengenalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!