Apa itu CSS Shotband? Mengenal CSS Shorthand
Apa itu Shorthand CSS? Ini artinya itu adalah memperpendek subuah CSS atau yanh disebut (Caschading Style Sheets) yang dimana menerapkan sebuah properti dalam waktu bersamaan. Apabila penerapan Shorthand CSS ini diterapkan maka akan membuat hemat energi, waktu dan tenaga ditambah lagi akan membuat menjadi lebih rapi juga.
Penulisan gambar Margin, Pedding dan Outline
Contoh tulisan margin bisa liat pada contoh seperti yang ada dibawah ini
margin-top:5px;
margin-right:10px;
margin-bottom:20px;
margin-left:25px;
maka Shorthand dari CSS di atas Memiliki artimargin: 5px 10px 20px 25px;
yang perlu diperhatikan cara menulisnya seperti jarum jam atas > kanan > bawah > kiri
Satu Value
margin:10px;
apabila satu value seperti itu, maka artinya semua valua sama memiliki margin:10px
, jadi apabila kode diatas dipanjangkan, hasilnya seperti ini
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
Dua Value
margin: 10px 15px;
karena mempunya dua value (nilai) maka berarti hanya atas dan kanan, bawah dan kiri tidak ada. Maka akan disamakan yang sejajar / bersebrangan. atas=bawah dan kanan=kiri. jadi apabila dipanjangkan hasilnya seperti ini
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;
Tiga Value
margin: 10px 15px 20px;
perhatikan, value yang ada adalah atas > kanan > bawah. Maka untuk kiri yang tidak ada akan disamakan dengan kanan. jadi hasilnya seperti ini
margin-top:10px;
margin-right:15px;
margin-bottom:20px;
margin-left:15px;
Kesimpulannya, apabila 2 atau 3 value maka yang tidak ada akan disamakan dengan yang ada. atas=bawah dan kiri=kanan
Border
Pada property border, nilai yang bisa di set adalah border-width
, border-style
dan border-color
border: 1px solid black;
apabila diterjemahkan maka hasilnya adalah
border-width: 1px;
border-style: solid;
border-color: black;
Font
Contoh dari CSS Shorthand pada Font
font: bold italic small-caps 16px/30px Arial, sans-serif;
maka artinya adalah
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
line-height: 30px;
font-family: Arial, sans-serif;
Background
Contoh Shorthand pada CSS Background
background: #fff url(kangismet.png) no-repeat top right fixed;
maka artinya adalah
background-color: #fff;
background-image: url(sudarblogger.png);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
CSS Backround di CSS3
Pada CSS3 ada penambahan background-size
, background-origin
dan background-clip
. Dan ini bisa digabung pada CSS Shorthand di atas. Maka sebagai contoh seperti ini
background: #fff url(kangismet.png) no-repeat top right fixed / 50% 30% border-box content-box;
List
Contoh CSS Shorthand pada List
list-style: circle inside url(bullet.gif);
maka artinya
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
Color
Warna juga bisa disingkat seperti #ffffff
menjadi #fff
atau #33dd77
menjadi #3d7
. Tapi memang lebih mudah yang mempunyai 6 digit sama. atau dengan penyebutan warna seperti color: red;
.
Semoga bermanfaat...
Post a Comment for "Apa itu CSS Shotband? Mengenal CSS Shorthand"
Post a Comment