Anda di halaman 1dari 3

7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui | ...

http://erwin-heldy.blogspot.com/2012/05/7-rahasia-css-yang-mungkin-be...

Beranda

7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui
0 4 Like 1 0

CSS pasti sudah menjadi hal yang wajib dipelajari jika anda ingin membuat website. Sekarang saya akan memberitahu rahasia CSS yang mungkin belum anda ketahui dan wajib diketahui, karena dapat memperkecil ukuran file CSS anda. Inilah dia rahasia CSS yang (mungkin) belum anda ketahui:

1. Memasang 2 class pada 1 tag HTML


Hei, apa anda tau bahwa kita bisa memasang 2 class untuk satu tag HTML? Jawabannya bisa.. Jika kita biasanya hanya membuat kode seperti ini: <p class="content"> Maka jika kita ingin bahwa <p> mengikuti dua aturan class yang berbeda maka kita cukup mengubahnya menjadi: <p class="content isi"> Jadi jika anda memiliki class content dan isi maka kedua aturan pada class tersebut akan dimasukkan kedalam <p>. Ingat hanya 2 tidak bisa lebih dan dipisahkan dengan spasi.

CATEGORY
Ajax (1) Database (1) Games (1) Islam (2) Mikrotik (2) PHP (5) Server (12) Ubuntu (11) CSS (1) Dokumen (62) Informasi (12) JQuery (1) MySQL (5) Proxy (3) Tutorial (22) XAMPP (1)

2. Hilangkan px untuk nilai 0


Oke, katakanlah anda memiliki kode CSS seperti ini: .box { border-top:10px; border-left:0px; padding:0px; } px disini berarti satuannya pixel dan kita harus menuliskannya, tetapi ternyata ada pengecualian untuk angka 0 (angka 0 saja) jadi kita bisa menuliskannya seperti ini: .box { border-top:10px; border-left:0; padding:0; } Ya, angka 0 tidak perlu menggunakan px, ini berarti kita memperkecil sedikit ukuran file CSS kita :) Agustus (1) Mei (4) Fungsi GROUP BY dan HAVING untuk Pengelompokkan Da... 7 Variasi Perintah INSERT di MySQL yang Sering Ter... 7 Rahasia CSS yang (mungkin) belum anda ketahui da...

Blog Archive
2012 (11) Desember (1)

3. Gunakanlah selalu shorthand


Apa sih shorthand? Shorthand merupakan aturan di CSS untuk menyingkat kode CSS anda. margin, dan padding merupakan contoh yang bisa kita singkat. Perhatikan contoh CSS berikut ini: .box { border-top:10px; border-left:0; border-right:20px;

1 of 3

6/24/2013 9:45 AM

7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui | ...

http://erwin-heldy.blogspot.com/2012/05/7-rahasia-css-yang-mungkin-be...

border-bottom:15px; padding-top:0; padding-bottom:10px; padding-left:12px; padding-right:9px; } Dapat anda singkat menjadi: .box { border:10px 20px 15px 0; padding:0 9px 10px 12px; } Lihat berapa banyak yang bisa kita hemat :) yang paling penting adalah urutannya dari kiri ke kanan dimulai dari posisi atas kemudian bergerak searah jarum jam.

Ajax Sederhana Menggunakan JQuery Februari (3) Januari (2) 2011 (36) 2010 (38)

4. Shorthand pada warna


Yap, warna pun bisa kita singkat, jika kita memiliki warna putih maka kita menggunakan #ffffff bisa disingkat menjadi #fff. Demikian juga jika kita memiliki warna #111111 menjadi #111. Tapi kita tidak bisa menyingkat warna #abcdef. Harus warna yang memiliki angka hexa yang sama.

5. Shorthand pada font


Siapa bilang font tidak bisa disingkat? Jika anda memiliki kode seperti ini: .box { font-style: italic; font-weight: bold; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif; } Dapat anda singkat menjadi 1 baris: font: verdana,sans-serif; Perlu diingat bahwa untuk menyingkat font anda wajib mengatur font-size dan font-family yang diletakkan paling akhir. Untuk yang lainnya tidak wajib ada. bold italic small-caps 1em/1.5em

6. Menyingkat yang sudah disingkat


Kita bisa menyingkat yang sudah disingkat. Sudah singkat tapi masih bisa disingkat lagi? Nggak masuk akal.. Bisa. Perhatikan contoh berikut ini: .box { border-top:10px; border-left:20px; border-right:20px; border-bottom:10px; padding-top:0; padding-bottom:0; padding-left:15px; padding-right:15px; } Oke, jika kode diatas disingkat maka hasilnya seperti ini: .box { border:10px 20px 10px 20px; padding:0 15px 0 15px; } Dan karena nilai atas dan bawah serta kiri dan kanan nya sama. Maka bisa disingkat lagi menjadi: .box { border:10px 20px; padding:0 15px; } Sip kan.. Ingat ini hanya berlaku jika nilai atas dan bawah serta kiri dan kanan sama.

7. Menengahkan objek
Anda ingin menengahkan suatu objek, misal images atau div. Gampang gunakan saja auto pada margin. Perhatikan contoh berikut ini: #content{

2 of 3

6/24/2013 9:45 AM

7 Rahasia CSS yang (mungkin) belum anda ketahui dan wajib diketahui | ...

http://erwin-heldy.blogspot.com/2012/05/7-rahasia-css-yang-mungkin-be...

width: 600px; margin: 0 auto; } auto disini berarti kita membiarkan CSS mendeteksi lebar kiri dan kanan secara otomatis berdasarkan lebar layar. Maka otomatis hasilnya akan ketengah. Tidak berlaku jika kita ingin menengahkan secara vertikal. Bagaimana menarik bukan? itu baru sebagian kecil, dan masih banyak lagi rahasia dan trik CSS yang perlu diketahui. Sumber

Categories: CSS, Informasi, Tutorial

Related Post:
CSS Informasi Kebiasaan Nabi Muhammad SAW Daftar Surat dalam Al-Qur'an (Arti, Jumlah Ayat, Statistik) Fungsi GROUP BY dan HAVING untuk Pengelompokkan Data di MySQL 7 Variasi Perintah INSERT di MySQL yang Sering Terlupakan Ajax Sederhana Menggunakan JQuery Install Postfix (SMTP-AUTH and TLS) Courier-IMAPCourier-IMAP-SSL (for IMAPs on port 993) and Courier-POP3Courier-POP3-SSL (for POP3s on port 995) Meningkatkan Traffic Blog dengan Plipeo Kamus Jaringan Topologi WAN

0 Comments

2 Comments

Add a comment... Comment using...


Facebook social plugin

Posting Lebih Baru

Beranda

Posting Lama

Copyright Erwin Heldy Blog. All rights reserved. Tricks-Collections Themes edited by Erwin Heldy

3 of 3

6/24/2013 9:45 AM