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..

Mengenai penulis

Entri ini telah ditulis oleh Bat

Laman web penulis : http://mohdhuzairy.blogspot.com/

Bat atau nama sebenarnya, Mohd Huzairy ialah seorang guru pelatih sekolah rendah di sekitar Kuala Lumpur. Tiada apa-apa yang menarik mengenai beliau, kecuali beliau suka tidur secara berlebihan dan kadang-kadang tidak tidur terus semalaman. Beliau merupakan ketua editor di infomalaya dot com.

Sudah ada 24 respon untuk entri “Transcending CSS – Siri 2”

  1. 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 :D … Kiranye benda ni penting la jugak ye?

  2. 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)

  3. 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 :D ..

  4. Komen dari Bat · July 7, 2007 @ 4:33 pm

    @neutronics: sharing is caring ^__^

  5. 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 :)

  6. Komen dari Bat · July 7, 2007 @ 4:45 pm

    @flisterz: huhu..aku taktau pun leh buat camtu..tenkui2..lagi efektif guna cara hang tu.. ^__^

  7. Komen dari neutronics · July 7, 2007 @ 4:52 pm

    dan satu lagi :D camane mau tukar smileys yang default tu kerana aku bosan dgnnye.. Selama ni kalau tgk smileys yg besar2 tu, itu just gambar je :D

    erm.. lagi satu, plugin apa yg sesuai utk show smileys yg kita ada td tu dkat comment form..

    sorry sbb off topic :D

  8. Komen dari flisterz · July 7, 2007 @ 5:55 pm

    kalau nk tukar smiley,rasenya replace default smiley kat \wp-includes\images\smilies. :)

  9. Komen dari neutronics · July 7, 2007 @ 6:23 pm

    then what about the default codes? Kat celah mane pulak nk tukar :D

  10. 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/

  11. 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

  12. 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

  13. 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?

  14. Komen dari Bat · July 8, 2007 @ 12:58 pm

    @Azwanhadzree: guna cara Flisterz tu ok gak

    img.wp-smiley
    {
    border:none;
    }

  15. Komen dari azwanhadzree · July 8, 2007 @ 1:06 pm

    tu pun aku dah try :) tapi kluar border gak kat smiley

  16. 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..

  17. Komen dari Bat · July 8, 2007 @ 1:30 pm

    @Azwanhadzree: cuba yang ni :

    #content .wp-smiley
    {
    border:none;
    }

    kalau tak jadi gak, gtau aku..

  18. 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 :)

  19. Komen dari Bat · July 8, 2007 @ 2:06 pm

    alamak, lupa letak img..huhu..

  20. Komen dari azwanhadzree · July 8, 2007 @ 2:53 pm

    ok, nanti aku letakkan dan lihat apa yang berlaku.

  21. 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.

  22. Komen dari Bat · July 8, 2007 @ 8:36 pm

    @Azwanhadzree: hehe..sebenarnya Flisterz yg betulkan..Ohh..tak bocor rahsia punya..haha

  23. 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 [...]

  24. 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. [...]

Sila tinggalkan komen anda di bawah

.

.


Pengumuman Terkini

Tema InfoMalaya dot com versi 10 tidak dapat digunakan lagi kerana terdapat banyak masalah teknikal. Hal ini sedang diuruskan oleh pihak kami, dan segala pemberitahuan akan diumumkan kelak. Sementara itu, sila semak halaman facebook kami untuk bersosial.


  • Log masuk


  • Pautan Komuniti (?)

    Lihat arkib pautan komuniti »