Pada pembahasan sebelumnya, bisa kita simpulkan bahwa setiap property dapat memiliki lebih dari satu jenis, misalnya margin dapat memiliki 4 jenis. margin-top, margin-right, margin-bottom, dan margin-left. margin-top:20px; margin-right:30px; margin-bottom:50px; margin-left:40px;
Daripada menuliskan seluruh property tersebut, kita bisa menggunakan CSS-Shorthand yaitu menggabungkan seluruh value (top, right, bottom, dan left) ke dalam satu property.
Sebagai contoh, kita akan menggunakan CSS-shorthand untuk Property margin menjadi seperti berikut : margin : 20px 30px 40px 50px;
Masing-masing dari nilai tersebut adalah : margin : top right bottom left;
Buatlah sebuah file baru dan beri nama cssshorthand.html, lalu ketikkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Shorthand CSS</title>
<style>
.box{
background-color:blue;
color: white;
width:100px;
height:100px;
margin: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box">
Box satu
</div>
<div class="box">
Box Dua
</div>
</body>
</html>
Tersedia di Bacacoding:
Dan hasil kode diatas adalah:
bisa kita simpulkan bahwa nilai dari CSS-shorthand margin ini memiliki urutan searah jarum jam dan dimulai dari margin-top.
Kita juga bisa bermain-main dengan property margin ini, perhatikan dengan seksama contoh berikut:
- Ketika kita memberikan satu nilai pada property margin, ini artinya kita memberikan nilai tersebut pada seluruh sisi. margin: 20px;
Dengan penulisan seperti ini, maka nilai dari margin-top, right, bottom dan left adalah 20px;
- Ketika kita memberikan dua nilai pada property margin, berarti nilai selanjutnya mengikuti nilai sebelumnya. Contohnya seperti ini : margin: 20px 30px;
Pada contoh di atas berarti kita memberikan nilai margin-top dan right bukan?, nah nilai dari margin-bottom akan disamakan dengan nilai margin-top dan margin-left sama dengan margin-right. Dan ketika kita menuliskan tiga nilai, maka nilai yang tidak diisi akan mengikuti nilai yang diisi, sama halnya ketika kita memberi 2 nilai. margin: 20px 30px 40px;
Pada contoh di atas, kita memberikan nilai untuk top, right dan bottom. Sedangkan untuk left akan disamakan dengan right. Penggunaan nilai seperti ini juga berlaku pada padding, dan property-property sejenis lainnya.
Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu yang dimaksud dengan Shorthand CSS? Mungkin itu saja tulisan yang membahas tentang Shorthand CSS, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon