Rabu, 12 April 2017

Belajar CSS Dasar Bagian 9 – Inheritance (pewarisan)

     Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa Code. Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS DasarBagian 8 – Pseudo class Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 9 – Inheritance

      Hallo sahabat lupacode semuanya, kembali lagi bersama saya selaku admin dari blog lupacode ini. Pada pembahasan materi kali ini yang akan kita bahas adalah mengenai pewarisan atau inheritance. Pada pembahasan kali ini kita tidak akan terlalu ngoding, melainkan kita membahas konsep dari pewarisan tersebut. Pewarisan ini beda dari yang ada di pemrograman lain seperti java atau php. Inheritance dalam css ini cukup sederhana walaupun ada beberapa hal yang perlu teman – teman perhatikan. Oke kita lihat definisinya
   “ Sebuah elemen mewarisi beberapa nilai dari propereti yang dimiliki oleh elemen parent-nya “ Baik nanti kita lihat contoh cara [enggunaan nya. Jika kita ilustrasikan mengenai pewarisan dalam css ini adalah seperti ini. Jika ada orang tua memiliki anak dan orang tua itu rambutnya merah, maka kecenderungannya biasana rambut anaknya juga merah. Sederhana nya adalah seperti itu

Belajar CSS Dasar Bagian 9 – Inheritance 1
Yang diwariskan property nya adalah sebagai berikut :

Property yang diwariskan

Color
Font
Letter-spacing
Line-height
List –style
Text -aline
Text-indent
Text-transform
Visibility
White-space

    Nah jadi kalau misallkan parent-nya punya nilai dari property ini, maka kecenderungannya atauanak-anak yang tadi punya nilai dari property yang sama misalkan kita menemukan kasus yang agak berbeda, saya punya file html seperti ini, di dalamnya ada h1 lalu dibawahnya ada a atau link kemudian ada paragraf.

<h1>Hello Word</h1>

<a href="#">Kembali ke-halaman sebelumnya</a>
               
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

   Kita lihat hasilnya seperti ini

Belajar CSS Dasar Bagian 9 – Inheritance 2

  Lalu kemudian ceritanya saya kasih css seperti ini

body {
                font-family: arial;
                color: darkgrey;
         }

        Font-family arial lalu color darkgrey untuk selector body. Jadi membacanya “ css tolong carikan saya tag body lalu ubah seluruh font didalamnya menjadi arialdan warnanya menjadi darkgrey “ seperti itu yah. Sekarang kalau kita lihat hasilnya maka akan seperti ini

Belajar CSS Dasar Bagian 9 – Inheritance 3
      Kalian bisa lihat bahwa semua tulisan nya menjadi arial. Tapi kalau kita lihat di h1 nya betul warna nya menjadi darkgrey, lalu paragraf juga sama berubah menjadi darkgrey. Masalahnya adalah yang a atau link ini tidak berubah menjadi darkgrey melainkan tetap warna dengan warna defaulnya adalah biru. Jadi yang ini ga berubah, kenapa ?

Belajar CSS Dasar Bagian 9 – Inheritance 4

    Nah ini karena si property a ini tidak mewarisi , secara default nya, tidak mewarisi nilai dari properti color. Nah kalau misalkan kalian ingin semua warna nya menjadi darkgrey, kita harus cari cara. Supaya dia mau mewarisi nilai dari properti tersebut kita harus kasih dia sebuah properti, namanya color terus kita kasih valuenya inherit seperti ini
a { color: inherit; }
     Ini artinya saya akan mewarisi properti apapun yang diberikan oleh orang tua saya. Jadi kalau misalkan orangtua nya kasih darkgrey maka dia ikutan darkgrey. Oke dan sekarang kita lihat si a nya berubah menjadi darkgrey yah

Belajar CSS Dasar Bagian 9 – Inheritance 5
     Jadi sebetulnya pada pembahasan materi kali ini saya hanya akan berikan bahwa suatu saat mungin kalian menemukan kasus seperti ini, kalian sudah kasih warna tapi ko masih ga mau berubah, nah mungkin solusinya adalah selector tadi, ada properti yang  harus kalian kasih yaitu nilai inherit. Mungkin ini bisa menjadi salah satu hal yang bisa kalian perhatikan.
     Oke baiklah mungkin sampai sini untuk pembahasan meteri singkat kali ini, dan kita akan melajutkan kedalam materi pembahsanmateri selanjutnya yaitu masih mengenai seputar css, jadi untuk sahabat ata teman – teman lupacode semuanya tetap terus kunjungi blog lupacode ini untuk belajar bersama sama serta mendapatkan materi – materi pembahsan baru setiap harinya.
       Mungkin saya cukupkan sampai disini mengenai pembahasan materi Belajar CSS Dasar Bagian 9 – Inheritance (pewarisan) kemudian selanjutnya kita akan melanjutkan kedalam materi terakhir tentang pembahasan css dasar ini yaitu Belajar CSS Dasar Bagian 10 – Specificity

Pelajari Materi Sebelumnya :

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon