Transcending CSS - Siri 2
Pertama sekali, minta maaf sebab semalam tak dapat post entri ni, terlalu banyak perkara yang terjadi semalam..Dan sekiranya aku terus menulis, mungkin kualitinya menghampiri tahap jahanam..Jadi aku tangguhkan dulu..Ok, berbalik kepada topik, kali ni kita akan lihat pula prinsip kedua dalam Transcending CSS iaitu, Gunakan Kesemua CSS Selector yang ada!
Antara jenis-jenis CSS selector:
Attribute selector - Sangat power, digunakan untuk memberikan style kepada elemen-elemen tertentu berdasarkan ‘attribute’nya. Mari aku berikan contoh supaya tidak pening. =)
img[alt]
{
border:1px solid #ccc;
}
Contoh di atas aku gunakan untuk blog ni, ianya akan efektif apabila gambar yang aku letakkan disertakan sekali dengan teks ALT. Kalau tak letak ALT, maka takda la border tu. Seperti yang berlaku pada entri-entri penulis infomalaya yang lain..hehe..Sori la lupa nak bagitau..Tapi, sebab apa aku guna? Sebabnya aku tak mahu smiley di dalam entri atau komen mempunyai border, smiley juga image bukan? 
Manakala lain-lain selector termasuklah :
- Child selector
- Adjacent sibling selector
- Pseudo-classes
- Pseudo-elements
Untuk pembacaan lanjut, boleh rujuk di laman web W3C.
Nota : IE6 tidak dapat memahami attribute selector, IE7 aku tak tahu, sebab aku tak pasang..heh..Jadi benda ni berkait rapat dengan Siri 1 sebelum ni..
Selepas ini, berkenaan CSS3 pula..
neutronics (#)
July 7th, 2007
lebih kurang macam ni ke?
#commentform {}
#commentform input {}
#commentform textarea {}
#commentform #submit {}
buku yg aku blajar tu ada, tapi aku x hiraukan sgt :D… Kiranye benda ni penting la jugak ye?
Bat (#)
July 7th, 2007
#commentform input {}
#commentform textarea {}
#commentform #submit {}
yang tu, termasuk dalam child selector, white space pun salah satu combinator selain simbol >, +, koma dan ;
Penting woo.. ^__^ Kalau fokuskan kat inheritance pun orait gak, penting jugak tu..(Walaupun aku takda la tahu sangat)
neutronics (#)
July 7th, 2007
ooo… hehe.. ye ke… ajar la byk lg pasal benda alah ni.. tetiba lak aku excited pasal CSS… mentang2 baru buat theme :D..
Bat (#)
July 7th, 2007
@neutronics: sharing is caring ^__^
flisterz (#)
July 7th, 2007
utk smiley sebenarnya boleh buat begini
img.wp-smiley{
border:none;}
selama ni aku guna berkesan je
Bat (#)
July 7th, 2007
@flisterz: huhu..aku taktau pun leh buat camtu..tenkui2..lagi efektif guna cara hang tu.. ^__^
neutronics (#)
July 7th, 2007
dan satu lagi
camane mau tukar smileys yang default tu kerana aku bosan dgnnye.. Selama ni kalau tgk smileys yg besar2 tu, itu just gambar je 
erm.. lagi satu, plugin apa yg sesuai utk show smileys yg kita ada td tu dkat comment form..
sorry sbb off topic
flisterz (#)
July 7th, 2007
kalau nk tukar smiley,rasenya replace default smiley kat \wp-includes\images\smilies.
neutronics (#)
July 7th, 2007
then what about the default codes? Kat celah mane pulak nk tukar
novatech (#)
July 7th, 2007
semakin aku baca semakin aku tahu yang aku ni tak tau sangat pasal css hehehe.. aku biasanya main taip je ape nak distylekan.. (basic styling)
@off-topic
neutronics untuk tukar smilies tu bleh tgk kat http://malaysia.wordpress.net/wordpress/petua-mengubah-ikon-senyuman-asal-wordpress/
neutronics (#)
July 7th, 2007
thanks.. aisehh.. kan aku dah dpt byk ilmu arinie.. dan satu lagi bookmark baru.. lol.. kengkawan, buatla byk tutorial2 macam ni lagi oleh kerana aku sgt bengap walaupun theme dah menjadi.. hehe
Bat (#)
July 8th, 2007
@neutronics: aku tak pernah lagi godek smiley tu..Tapi takpa, Flisterz dan Novatech dah terangkan serba sikit..heh
@Flisterz: Tenkiu Dapi.. ^__^
@Novatech: Tenkiu jugak ^__^ Terus terang aku cakap, aku pun tak ingat semua, tapi sebab nak tulis artikel ni, baru la teringat balik..hehe
azwanhadzree (#)
July 8th, 2007
Aku pernah cuba dulu, tapi tak jadi. kau perasan kan, gambar aku ada border tapi smiley aku pun ada border. macam mana nak buangkan border dari smiley sahaja?
Bat (#)
July 8th, 2007
@Azwanhadzree: guna cara Flisterz tu ok gak
img.wp-smiley
{
border:none;
}
azwanhadzree (#)
July 8th, 2007
tu pun aku dah try
tapi kluar border gak kat smiley
Bat (#)
July 8th, 2007
@Azwanhadzree: jap aku nak p tengok apa yg tak kena.. nanti aku gtau, kalau aku jumpa cara nak selesaikan la..
Bat (#)
July 8th, 2007
@Azwanhadzree: cuba yang ni :
#content .wp-smiley
{
border:none;
}
kalau tak jadi gak, gtau aku..
flisterz (#)
July 8th, 2007
@azwanhadzree:
Untuk blog ko, ko kne tambah lagi sbb image ko ade style tambahan. aku dah check CSS structure ko and ko perlu add yg ni:
#content img.wp-smiley{
border:0px;
background:none;
padding:0px;
}
tambahan skit drpd Bat. ehe
Bat (#)
July 8th, 2007
alamak, lupa letak img..huhu..
azwanhadzree (#)
July 8th, 2007
ok, nanti aku letakkan dan lihat apa yang berlaku.
azwanhadzree (#)
July 8th, 2007
Flisterz, Bat .. thanks! nampaknya berjaya .. terima kasih byk2..
tapikan .. korang jangan bagitau staff2 aku, nanti diorang gelakkan aku di ofis. .. ha..ha.. dah lah aku selalu kutuk diorang pasal program diorang ..ha..ha.
Bat (#)
July 8th, 2007
@Azwanhadzree: hehe..sebenarnya Flisterz yg betulkan..Ohh..tak bocor rahsia punya..haha
[one] blog, world, life. Live It! » Happenings # 01 (#)
July 8th, 2007
[...] and . Thanks to Bat and Flisterz for their help. Bat is currently posting a series of post about Transcending CSS and it’s in Malay. Flisterz on the other hand is getting personal with his what’s up [...]
7 tiny CSS tricks you’ll always need for a wordpress theme. -- flisterz:blog - life, reviews, technology, wordpress, design, CSS and anything! (#)
July 30th, 2007
[...] Depending on the parent style of the stylesheet, you may need to add class/id in front. I already commented about this in Infomalaya’s Transcending CSS entry. [...]