CSS apa itu Pseudo Classes

pseudo classes ini umumnya digunakan untuk style pada link. tahukan apa itu link? aturan penulisan seperti ini :hover {proerty:value}, :active {proerty:value}

TEMAN MENANGIS, Kamu mungkin akan melupakan orang yang tertawa denganmu, tetapi tidak mungkin melupakan orang yang pernah menangis denganmu. Khalil Gibran

pseudo classes ini umumnya digunakan untuk style pada link. tahukan apa itu link? aturan penulisan seperti ini :hover {proerty:value}, :active {proerty:value}

Last Modif at July 8th, 2011

pseudo classes adalah salah satu teknik penulisan dalam css, selain fungsi utamanya merubah maupun mendesign website. css ini juga dilengkapi berbagai macam teknik penulisan, kali ini kita akan share tentang pseudo classes css. pseudo classes ini umumnya digunakan untuk style pada link. tahukan apa itu link?

aturan pelulisan pseudo class

penulisan pseudo classes ini diawali dengan selector_maupun_tag_html lalu diikuti dengan : (titik dua) lalu nilai pseudo classnya

seperti ini

slector_atau_taghtml:pseudo_class{property:value;}

keterangan

  • diawali dengan selector_atau_tag html
  • kemudian : (titik dua)
  • nilai pseudo classes
  • lalu { property:value}

nilai pseudo css untuk link

antara lain

  • :link style untuk link
  • :visited style tampilan(biasanya link) yang telah dikunjungi
  • :hover fungsinya untuk merubah tampilan ketika cursor melintas
  • :active style tampilan(biasanya link) yang sedang aktif(terbuka di tab lain) stelah di klik

kekurangan pseudo classes

  • nggak semua pseudo classes didukung oleh browser, salah satunya ialah :hover. jika kita membuat style:hover(selain link) pada ie(internet exploler) hasilnya ialah kecewa!, padahal sudah jelas fungsi :hover ini adalah style untuk ketika cursor mengarah/melintas pada style yang kita buat! ini hampir mirip dengan atribut event onmouseover

contoh pseudo classes

perhatikan markup code dibawah

<html>
<head>
<title>css pseudo classes</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
a{color:black;text-decoration:none;/*semua tag a, text-decoration none*/}
a:link{color:blue;/* jika link maka warnanya blue/biru */}
a:visited{color:red;/*telah dikunjungi*/}
a:hover{background-color:red;/**/font-size:30px;/*ketika cursor melintas*/}
a:active{color:lime;/*sednag active*/}
#misal{background-color:red;/**/width:300px;/**/height:300px;/**/font-size:20px;/*style awal*/}
#misal:hover{background-color:lime;/**/width:400px;/**/height:400px;/**/font-size:80px;/*style ini ketika cursor melintas*/}
</style>
</head>
<body>
<a>tag a saja</a><br/>
<a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a><br/>
<a href="http://www.facebook.com" title="facebook">indaam site</a><br/>
<a href="http://gmail.com" title="gmail" target="_blank">gmail</a><br/>
<div id="misal">contoh hover</div>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohpseudo_classes.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • selamat belajar

References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-