Inheritance, Pseudo Classes, Pseudo Element dan Selektor Kontekstual

Jika di artikel sebelumnya membahas Selector. Class Selector, dan ID selector, nah kali ini saya akan memenuhi janji yang membahas tentang Inheritance, Pseudo Classes, Pseudo Element, dan Selektor Kontekstual, Untuk penjelasan yang lebih lengkap anda bisa membaca artikel ini sampai akhir.

Pewarisan atau Inheratance

Yang di maksud dengan pewaris atau inheratance di sini adalah satu kondisidi mana bagian-baian HTML dalam dokumen kita yang kekurangan dalam spesifikasi aturan CSS dapat mengikuti atau di buat menurut aturan CSS yang menutupinya.

Setiap aturan yang tidak ada dalam format yang di buat dengan HTML atau ingin menggantikannya dengan aturan CSS, tetap akan memengaruhi huruf yang ada di dalam kurungan CSS. Di bawah ini adalah contoh kode script inheritance:

<html>
<head>
<title> Inheritance </title>
<style type="text/css">
B {background-color : green; color : white;}
</style>
</head>
<body>
Belajar membuat web denganCSS Sangatlah mudah.
Hanya dengan program notepad pun jadi
</body>
</html>

Jika di lihat dari contoh di atas dapat di lihat bahwa tag dalam aturan CSS akan mendefinisikan warna font dan warna latar dari font sedangkan tag dalam HTML bisa di artikan sebagai bold atau format untuk menebalkan huruf.

Sementara tag yang berada dalam lingkup CSS dapat menerapkan aturan HTML dasar akan tetapi teteap terpengaruh dengan kondisi warna dan tebalnya huruf dari aturan CSS yang melingkupinya. Cara ini dapat anda gunakan untuk di kombinasikan lebih lanjut dengan tag-tag lain agar sesuai dengan keperluan dokumen anda.

Berikut adalah penampakan dari kode script di atas :

Pseudo Classes

Pseudo Classes dalam CSS di buta tebal dalam selector-selector untuk menentukan sebuah statemen atau relasi selector penulisannya pun hanya di pisahkan dengan sebuah tanda titik dua, yaitu di antara selector dan pseudo dan class.

Adapun contoh format penulisaanya adan bisa lihat di bawah ini

selector:pseudo class {property :value; }

Banyak format css yang tidak di dukung oleh kebanyakan browser, tetapi terdapat 4 (empat) pseudo classes yang dapat di gunakan secara aman ketika di aplikasikan ke dalam hyperlink atau link, inilah di antaranya ke 4 (empat) pseudo classes itu :

Link	:	Untuk tampilan sebuah link yang belum di kunjungi
Visited	:	Untuk tampilan sebuah link ke halaman yang telah di kunjungi
Acrive	:	Untuk tampilan sebuah link yang sedang aktif (ketika di klik)
hover	:	Untuk tampilan sebuah link yang hover (ketika cursor melintas di atasnya

Contoh penggunaan :

a.snowman:link {color:blue;}
a.budi.visited {color:puple;}
a.budi.active {color:puple;}
a.budi.hover {text-decoration:none; color : blue; background-color:yellow;}

Anda dapat menggunakan hover pseudo class dengan elemen-elemen lain selain link. Sayangnya, Internet Explorer masih tidak mendukung metode ini karena banyak tampilan yang dapat anda buat dan terlihat bagus dalam browser lain, tetapi tidak terlihat dengan menggunakan browser ini.

Pseudo Element

Pseudo Element dalam CSS di tempatkan dalam sebuah selector sama seperti pada pseudo classes. Penulisannya akan seperti contoh berikut di bawah ini :

selector:pseudoelement {property:nilai;}

Contoh seting huruf dan baris pertama:

Pseudo element pada huruf pertama di aplikasikan elemen dari huruf pertama dan baris pertama pada atas baris sebuah elemen. Anda dapata membuat huruf besar dan huruf tebal baris pertama pada paragraf dengan menggunakan perintah berikut di bawah ini :

p:first-letter {font-size:5px; float:left;}

p:first-line {font-weight:bold;}

Before And After dalam Pseudo Element

Pseudo Element before dan after di gunakan dengan property content untuk menempatkan isi dari sebuah elemen tanpa menyentuh kode HTML. Nilai dari property content ini dapat berupa open-quote, close-quote, no-open-quote, no-close-quote, berbagai string yang di sertakan dalam tanda kutip, atau berbagai image gambar menggunakan url (Nama Image) seperti contoh di bawah ini :

blockquote:before {content: open-quote;}

blockquote:after {content: close-quote;}

li:before {content: "POW: "}

p:before {content: url(images/jam.jpg)}

Selecktor Kontekstual (Contextual Selector)

Selektor kontekstual dalam CSS hampir sama dengan pernyataan-pernyataan kondisional di mana deklarasi dalam style-sheet CSS yang ada akan berpengaruh jika menemui kondisi atau keadaan tertntu. Contoh dari slector kontekstual adalah sebagai berikut :

<html>
<head>
<title> Selecktor Kontekstual </title>
<style type="text/css">
b em {font-family: verdana; background: blue; color : white;}
</style>
</head>
<body>
Belajar membuat web dengan CSS Sangatlah mudah.
Hanya dengan program notepad pun jadi
</body>
</html>

Dalam contoh di atas dapat di lihat bahwa dokumen web tersebut akan menerapkan style CSS tersebut pada dokumen yang berada dalam tag (font verdana, warna lata biru dan font berwarna putih) di mana tag tersebut berada di dalam tag dan (bold atau tebal).

Sementara tag yang berada di style tersebut atau hanya memiliki nilai biasa atau huruf miring. Jika di lihat dalam browser maka penampakannya adalah seperti gambar di bawah ini berikut:

Nah itu lah penjelasan mengenai Inheritance, kemudian Pseudo Classes, kemudian Pseudo elent, dan terakhir adalah Selektpr Kontekstual, semoga penjelasan di atas bisa mudah di pahami, okeh sampai di sini dulu perjumpaan kita. Sampai jumpa salam Sukai Penulis

Inheritance, Pseudo Classes, Pseudo Element dan Selektor Kontekstual

Pewarisan atau Inheratance

Pseudo Classes

Pseudo Element

Selecktor Kontekstual (Contextual Selector)

sukaipenulis.blogspot.com

0 Komentar