Apa itu kelas induk dan kelas anak di html?

Gambar menunjukkan kelas induk dan kelas anak. Garis di antara mereka menunjukkan hubungan "is-a". Panah menunjuk ke kelas induk dari kelas anak. Gambar tersebut dapat dibaca sebagai "Ford adalah sebuah mobil. "

Ungkapan "is-a" umum digunakan dalam ilmu komputer. Panah antara anak dan orang tua terkadang disebut "is-a link"

Awan mewakili kelas. Gambar ini tidak menunjukkan objek

Warisan adalah antar kelas, bukan antar objek

Kelas induk adalah cetak biru yang diikuti saat objek dibangun. Kelas anak dari induk adalah cetak biru lain (yang sangat mirip dengan aslinya), tetapi dengan fitur tambahan. Kelas anak digunakan untuk membuat objek yang terlihat seperti objek induknya, tetapi dengan fitur tambahan

Hubungan Induk-Anak dari CSS berarti bahwa elemen desain induk memengaruhi elemen di dalamnya

Dalam contoh sebelumnya, deklarasi font ditentukan oleh ID tag HTML paragraf

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

<style type="text/css">
#test-paragraph {
      font-family: Impact; 
      color:red; 
      font-size:30px;
      }
</style>

<p id="test-paragraph">This is test text.</font></p>

Kami akan memindahkan font ke gaya tag paragraf

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

Simpan file dan lihat di browser. Ini terlihat persis seperti contoh terakhir yang diperlihatkan di bagian tutorial sebelumnya, KECUALI bahwa semua paragraf sekarang menampilkan font Dampak

Kami hanya menginginkan font Dampak pada paragraf itu, bukan setiap teks dalam setiap paragraf di halaman pengujian HTML kami. Mari atur tag paragraf agar cocok dengan ID

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

p#test-paragraph {
      font-family: Impact; 
     }

Inilah rincian dari apa yang baru saja terjadi

• Dengan gaya paragraf diatur ke font Impact, semua paragraf mewarisi gaya itu
• Dengan mengidentifikasi bahwa kami hanya ingin mengubah paragraf dengan ID

  #test-paragraph {
        font-size:30px;
        color:red;
        }
  
  p {
        font-family: Impact; 
       }
  

  6, hanya paragraf itu yang diubah, pewarisan paragraf induk ditolak

Masuk akal?

Dalam tutorial sebelumnya, kami menggunakan yang berikut ini untuk mengubah desain div di dalam div

div div { 
      background-color: yellow;
      }

Anak diubah menjadi berbeda dari orang tua

Ini adalah bagian dari hubungan anak induk CSS. Elemen HTML di dalam elemen HTML lain mungkin mewarisi detail desain elemen induk atau elemen HTML di sekitarnya, atau memiliki rangkaian instruksinya sendiri. Pengidentifikasi menentukan gaya mana yang termasuk dalam elemen HTML mana dan instruksinya

Saat Anda bereksperimen dengan Tema WordPress, Anda akan menemukan bahwa hubungan orangtua-anak adalah salah satu tantangan terbesar yang Anda hadapi. Setiap Tema menampilkan gaya yang diatur dalam

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

Bagaimana Anda menemukan gaya mana yang memengaruhi gaya lain, gaya mana yang diwarisi, dan gaya mana yang ditimpa untuk menghasilkan tampilan dan nuansanya sendiri?

Mengejar semua hubungan orang tua-anak ini membuat proses mengutak-atik Tema dengan Tema Anak menjadi tantangan, tetapi kami di sini untuk belajar. Saya dapat memberitahu Anda untuk tantangan

Eksperimen dengan Hubungan Induk/Anak CSS

Mari bereksperimen dengan Hubungan Induk/Anak CSS di file pengujian Anda

Di bagian bawah file pengujian sebelum

p#test-paragraph {
      font-family: Impact; 
     }

<div id="test-42">
<p class="salad">This is our salad paragraph.</p>
<p class="fork">This is our fork paragraph.</p>
<p>This is a paragraph not invited to lunch.</p>
</div>
<!-- This is the bottom of the test div in an HTML comment code -->

Induk dari blok kode ini adalah

p#test-paragraph {
      font-family: Impact; 
     }

Perhatikan bahwa kita memiliki elemen HTML baru dalam kode contoh. Ini adalah komentar HTML. Itu tidak akan muncul di tampilan ujung depan halaman web. Ini juga disebut sebagai dokumentasi sebaris sebagai komentar sering petunjuk lama tentang kode, apa yang dilakukannya, dan bagaimana menggunakannya. Semua kode WordPress didokumentasikan dengan cara ini untuk membantu Anda melacak jalur kode melalui situs Anda dan memberikan informasi dan instruksi

Di bagian atas file dalam gaya, mari tambahkan gaya untuk blok HTML ini

/* testing CSS child-parent relationships */
#test-42  { 
	color:magenta;
	}
.salad  {
	color:green;
	}
.fork  {
	color:blue;
	}

Perhatikan bahwa kumpulan instruksi CSS ini menampilkan garis di bagian atas dengan garis miring dan tanda bintang? . Itu tidak terlihat di tampilan ujung depan situs, hanya terlihat di dalam kode sumber

Gaya pertama mengidentifikasi

p#test-paragraph {
      font-family: Impact; 
     }

Dua kelas paragraf untuk

p#test-paragraph {
      font-family: Impact; 
     }

p#test-paragraph {
      font-family: Impact; 
     }

Simpan file HTML dan lihat di browser web. Anda harus melihat sesuatu seperti ini

Wadah

p#test-paragraph {
      font-family: Impact; 
     }

Paragraf mewarisi warna dari wadah induknya

Dua paragraf lainnya memiliki gaya yang mengatur warna teks. Mereka menentang instruksi orang tua dengan menimpa komentar orang tua untuk menyetel warna teks menjadi magenta

Dalam eksperimen awal kami, kami menyetel

#test-paragraph {
      font-size:30px;
      color:red;
      }

p {
      font-family: Impact; 
     }

Mari kita ganti set font untuk seluruh dokumen untuk membuat font berbeda untuk

p#test-paragraph {
      font-family: Impact; 
     }

#test-42  { 
	color:magenta;
	font-family: "Times New Roman", Times, serif;
	}

Simpan file, pratinjau di browser, dan font harus berbeda untuk blok pengujian ini

Itu mencabut gaya dari induknya

Giliran Anda untuk bereksperimen dengan gaya dan warisan

Berikan setiap gaya berikut, dan atur ke apa pun yang Anda inginkan. Simpan file saat Anda pergi dan lihat tampilan browser untuk melihat apa yang berubah dan apa yang tidak. Tantangannya adalah mengatur gaya setiap paragraf secara berbeda, serta wadah yang melilit semuanya

• ukuran huruf
• warna
• batas
• lapisan
• warna latar belakang

Penantang Hubungan Induk/Anak CSS

Sejauh ini kita telah berurusan dengan hubungan orang tua-anak yang sederhana. Mari kita lihat satu blok pengujian lagi untuk membantu Anda lebih memahami kontrol yang dimiliki elemen HTML induk terhadap anaknya, dan bagaimana anak-anak melawan untuk mengontrol nasib mereka sendiri

Kali ini Anda akan melakukan pekerjaan

Tambahkan yang berikut di bawah latihan sebelumnya

<div id="wrap">
<p>This is text within the wrap parent container.</p>
<div id="one">
<p>This is text within the first div.</p>
<div id="two">
<p>This is text within the second div.</p>
</div> <!-- This is the closing DIV tag for the first DIV -->
</div> <!-- This is the closing DIV tag for the second DIV -->
</div> <!-- This is the closing DIV tag for the wrap DIV →

Tambahkan CSS ke gaya

p#test-paragraph {
      font-family: Impact; 
     }

div#wrap {

	}
div#one {

	}
div#two {

	}

Menggunakan apa yang telah Anda pelajari sejauh ini, atur CSS agar cocok dengan gambar ini. Ayolah, kamu pasti bisa melakukannya. Petunjuk?

Perhatikan teks paragraf dalam wadah bungkus berwarna hitam. Warnanya putih di DIV lainnya

Apakah warna font putih diatur di bungkusnya?

Ini hanyalah puncak gunung es dari ide desain yang bisa kita mainkan. Studi lebih lanjut tentang HTML, CSS, dan desain web akan membawa Anda dalam perjalanan melalui hubungan orang tua-anak untuk membantu Anda mengontrol hasil akhir desain

Untuk informasi lebih lanjut tentang hubungan orangtua-anak CSS, lihat

• Hubungan Elemen CSS – Little Web Hut
• Panduan Referensi Desain Web – Seperti Ibu Seperti Anak. Sekilas tentang Warisan di CSS – Peachpit
• Warisan – Praktik Terbaik Desain Web

Bagian selanjutnya dalam tutorial tentang HTML dan CSS ini mencakup pemosisian dengan CSS, yang sangat penting untuk struktur dan tata letak halaman web

Diskusi Google+ pada posting ini ada di sini, dan kami mengundang Anda untuk bergabung dengan kami dan berbicara tentang pengalaman Anda dengan tutorial dan pelajaran ini, dan perjuangan yang Anda alami dengan pewarisan CSS pada Tema WordPress

Ini adalah tutorial dari Lorelle's WordPress School. Untuk informasi lebih lanjut, dan untuk bergabung dengan Sekolah WordPress online gratis selama setahun ini, lihat

Apa itu kelas induk dan kelas anak?

Apa itu anak dan orang tua dalam HTML?

Apa itu anak-anak dalam HTML?

Bagaimana cara menggunakan div induk dan anak di CSS?