Mengenal CSS Shorthand Property 1
Shorthand Property dalam CSS memungkinkan kita dapat mempersingkat penulisan CSS. Beberapa properti yang terdapat dalam satu kategori dapat ditulis dalam satu properti. Hal ini tentu saja dapat mempercepat penulisan CSS dan meminimalkan filesize. Sebagai contoh penerapan CSS Shorthand Property, dapat kita lihat dibawah:
p {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11pt;
font-style: normal;
}
dapat kita singkat menjadi:
p {
font: normal 11pt Arial, Helvetica, Sans-Serif;
}
CSS Shorthand Property ini dapat kita terapkan pada background, font, margin dan padding, border, dan list.
Background
Pada background, CSS Shorthand Property memiliki sintaks sebagai berikut:
background: background-color | background-image | background-repeat | background-attachment | background-position
contoh:
.elin {
background: #EFEFEF url('images/background.jpg') repeat-x fixed top;
}
Font
Sintaks:
font: font-style | font-variant | font-weight | font-size | line-height | font-family
contoh:
p {
font: bold 11px Arial, Helvetica, Sans-Serif;
}
margin dan padding
Sintaks:
margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left
Contoh:
.left {
margin: 11px 12px 30px 20px;
padding: 11px 12px 30px 20px;
}
Supaya memudahkan mengingat, saya biasa menganalogikannya dengan putaran jarum jam yang selalu dimulai dari jam 12 (top). Untuk margin dan padding, ia memiliki perbedaan, dimana ia bisa dideklarasikan dengan lebih sederhana lagi:
Sintaks:
Margin: margin-top = margin-right = margin-bottom = margin-left
contoh:
.left { berarti, untuk margin atas, kanan, bawah, dan kiri memiliki value 15px.
margin: 15px;
}
Sintaks:
margin: margin-top = margin-bottom | margin-right = margin-left
contoh:
.left { berarti, margin atas dan bawah 15px, sedangkan margin kiri dan kanan 20px;
margin: 15px 20px;
}
Sintaks:
margin: margin-top | margin left = margin right | margin bottom
.left {
margin: 15px 20px 30px;
}
berarti, margin atas 15px, margin kiri dan kanan 20px, dan margin bawah 30px.
bersambung...
Tentang Penulis
Pupung Budi Purnama - Bukan pakar atau ahli, hanya seorang freelance web designer, tinggal di Bandung, Jawa Barat. Bergelut di dunia web sejak 1999, pernah bekerja di beberapa perusahaan IT sebagai desainer. Sehari-hari, ia menjalankan sebuah perusahaan web development dari kamarnya.
8 Comments
di sorthand property,
kita juga bisa nambahin line-height loh…
misal:
font: 11px/20px Arial,verdana,sans-serif;
tapi ini ga berfungsi dengan baik di ie. caranya tinggal tambahin ini:
font:11px/20px Arial,verdana,sans-serif;
height:auto !important;
height:20px;
ie nurut dah jadinya… :D
@Didats Triadi : Nice, Thanks ;)
Bung Didats, itu “height”nya kenapa ditulis 2 kali yah?
“!important” fungsinya buat apa?
Thanks
bagus bAgus. tapi gi mana ya caranya ngajarin temenku yang susah diajarin caranya ngupload?
Pagi Mas? saya mau tanya.gmana sh kalau ingin menjadi web master.dan dimulai dari mana.karena saya tertarik sekali dengan aplikasi flash.dan kalau mas punya ide untuk membantu saya mencari judul tentang skripsi dari aplikasi flash kira2 apa ya? terima kasih
mas m tanya gimana klo mo ng link dgn css????
makasih yah mas
mo nanya doonk…kenapa layer selalu berubah2 letaknya setiap setting screen resolution dirubah, n juga kalo beda browser….thx…
dasar2 belajar CSS bisa di ambil dimana ya mas? soalnya saya masih newbie, terus bikin theme wordpress tu gimana caranya