Arkib
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..
Entri sebelumnya « Cara menguruskan kewangan secara berkesan!
Komen dari neutronics · July 7, 2007 @ 4:14 pm
lebih kurang macam ni ke?
#commentform {}
#commentform input {}
#commentform textarea {}
#commentform #submit {}
buku yg aku blajar tu ada, tapi aku x hiraukan sgt
… Kiranye benda ni penting la jugak ye?
Komen dari Bat · July 7, 2007 @ 4:21 pm
#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)
Komen dari neutronics · July 7, 2007 @ 4:24 pm
ooo… hehe.. ye ke… ajar la byk lg pasal benda alah ni.. tetiba lak aku excited pasal CSS… mentang2 baru buat theme
..
Komen dari Bat · July 7, 2007 @ 4:33 pm
@neutronics: sharing is caring ^__^
Komen dari flisterz · July 7, 2007 @ 4:37 pm
utk smiley sebenarnya boleh buat begini
img.wp-smiley{
border:none;}
selama ni aku guna berkesan je
Komen dari Bat · July 7, 2007 @ 4:45 pm
@flisterz: huhu..aku taktau pun leh buat camtu..tenkui2..lagi efektif guna cara hang tu.. ^__^
Komen dari neutronics · July 7, 2007 @ 4:52 pm
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
Komen dari flisterz · July 7, 2007 @ 5:55 pm
kalau nk tukar smiley,rasenya replace default smiley kat \wp-includes\images\smilies.
Komen dari neutronics · July 7, 2007 @ 6:23 pm
then what about the default codes? Kat celah mane pulak nk tukar
Komen dari novatech · July 7, 2007 @ 6:24 pm
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/
Komen dari neutronics · July 7, 2007 @ 6:29 pm
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
Komen dari Bat · July 8, 2007 @ 6:02 am
@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
Komen dari azwanhadzree · July 8, 2007 @ 12:53 pm
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?
Komen dari Bat · July 8, 2007 @ 12:58 pm
@Azwanhadzree: guna cara Flisterz tu ok gak
img.wp-smiley
{
border:none;
}
Komen dari azwanhadzree · July 8, 2007 @ 1:06 pm
tu pun aku dah try
tapi kluar border gak kat smiley
Komen dari Bat · July 8, 2007 @ 1:16 pm
@Azwanhadzree: jap aku nak p tengok apa yg tak kena.. nanti aku gtau, kalau aku jumpa cara nak selesaikan la..
Komen dari Bat · July 8, 2007 @ 1:30 pm
@Azwanhadzree: cuba yang ni :
#content .wp-smiley
{
border:none;
}
kalau tak jadi gak, gtau aku..
Komen dari flisterz · July 8, 2007 @ 1:46 pm
@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
Komen dari Bat · July 8, 2007 @ 2:06 pm
alamak, lupa letak img..huhu..
Komen dari azwanhadzree · July 8, 2007 @ 2:53 pm
ok, nanti aku letakkan dan lihat apa yang berlaku.
Komen dari azwanhadzree · July 8, 2007 @ 3:09 pm
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.
Komen dari Bat · July 8, 2007 @ 8:36 pm
@Azwanhadzree: hehe..sebenarnya Flisterz yg betulkan..Ohh..tak bocor rahsia punya..haha
Pingback dari [one] blog, world, life. Live It! » Happenings # 01 · July 8, 2007 @ 10:02 pm
[...] 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 [...]
Pingback dari 7 tiny CSS tricks you’ll always need for a wordpress theme. -- flisterz:blog - life, reviews, technology, wordpress, design, CSS and anything! · July 30, 2007 @ 6:05 pm
[...] 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. [...]